@atlaskit/tabs 13.3.3 → 13.3.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/tabs
 
+## 13.3.5
+
+### Patch Changes
+
+- [`0637c50e226`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0637c50e226) - Updated Tabs compnent to prefer to use focus-visible over focus css selectors.
+
+## 13.3.4
+
+### Patch Changes
+
+- [`e35fc41dc33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e35fc41dc33) - Internal change to use updated primtive spacing prop values. No expected behaviour change.
+- Updated dependencies
+
 ## 13.3.3
 
 ### Patch Changes

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

@@ -124,7 +124,7 @@ var TabList = function TabList(props) {
       role: "tablist",
       display: "flex",
       position: "relative",
-      padding: "sp-0",
+      padding: "scale.0",
       ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: tabListStyles

package/dist/cjs/components/tabs.js

@@ -36,7 +36,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.3"
+  packageVersion: "13.3.5"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/cjs/internal/styles.js

@@ -23,16 +23,28 @@ var borderRadius = (0, _constants.borderRadius)();
 var gridSize = (0, _constants.gridSize)();
 var tabLeftRightPadding = "".concat(gridSize, "px");
 var tabTopBottomPadding = "".concat(gridSize / 2, "px");
-var underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
+var underlineHeight = '2px';
+var highContrastFocusStyles = {
+  outline: '1px solid'
+}; // 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': {
-      outline: '1px solid'
+    '&:focus-visible': highContrastFocusStyles,
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': highContrastFocusStyles
     }
   }
 };
 
+var tabFocusStyles = function tabFocusStyles(mode) {
+  return {
+    boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
+    borderRadius: borderRadius,
+    outline: 'none'
+  };
+};
+
 var getTabPanelStyles = function getTabPanelStyles(mode) {
   return _objectSpread({
     flexGrow: 1,
@@ -44,10 +56,9 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
     minHeight: '0%',
     display: 'flex',
     padding: "0 ".concat(tabLeftRightPadding),
-    '&:focus': {
-      boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
-      borderRadius: borderRadius,
-      outline: 'none'
+    '&:focus-visible': tabFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabFocusStyles(mode)
     }
   }, highContrastFocusRing);
 };
@@ -94,6 +105,19 @@ var getTabListStyles = function getTabListStyles(mode) {
 
 exports.getTabListStyles = getTabListStyles;
 
+var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
+  var colors = (0, _colors.getTabColors)(mode);
+  return {
+    boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
+    borderRadius: borderRadius,
+    outline: 'none',
+    // Hide TabLine on focus
+    '&::after': {
+      opacity: 0
+    }
+  };
+};
+
 var getTabStyles = function getTabStyles(mode) {
   var colors = (0, _colors.getTabColors)(mode);
   return _objectSpread(_objectSpread({
@@ -122,14 +146,9 @@ var getTabStyles = function getTabStyles(mode) {
         height: 0
       })
     },
-    '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
-      borderRadius: borderRadius,
-      outline: 'none',
-      // Hide TabLine on focus
-      '&::after': {
-        opacity: 0
-      }
+    '&:focus-visible': tabPanelFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabPanelFocusStyles(mode)
     }
   }, highContrastFocusRing), {}, {
     '&[aria-selected="true"]': {

package/dist/cjs/version.json

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

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

@@ -103,7 +103,7 @@ const TabList = props => {
       role: "tablist",
       display: "flex",
       position: "relative",
-      padding: "sp-0",
+      padding: "scale.0",
       ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: tabListStyles

package/dist/es2019/components/tabs.js

@@ -10,7 +10,7 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.3"
+  packageVersion: "13.3.5"
 };
 
 const getTabPanelWithContext = ({

package/dist/es2019/internal/styles.js

@@ -5,16 +5,26 @@ const borderRadius = getBorderRadius();
 const gridSize = getGridSize();
 const tabLeftRightPadding = `${gridSize}px`;
 const tabTopBottomPadding = `${gridSize / 2}px`;
-const underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
+const underlineHeight = '2px';
+const highContrastFocusStyles = {
+  outline: '1px solid'
+}; // 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': {
-      outline: '1px solid'
+    '&:focus-visible': highContrastFocusStyles,
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': highContrastFocusStyles
     }
   }
 };
 
+const tabFocusStyles = mode => ({
+  boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
+  borderRadius: borderRadius,
+  outline: 'none'
+});
+
 const getTabPanelStyles = mode => ({
   flexGrow: 1,
 
@@ -25,10 +35,9 @@ const getTabPanelStyles = mode => ({
   minHeight: '0%',
   display: 'flex',
   padding: `0 ${tabLeftRightPadding}`,
-  '&:focus': {
-    boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
-    borderRadius: borderRadius,
-    outline: 'none'
+  '&:focus-visible': tabFocusStyles(mode),
+  '@supports not selector(*:focus-visible)': {
+    '&:focus': tabFocusStyles(mode)
   },
   ...highContrastFocusRing
 });
@@ -63,6 +72,20 @@ css({
     backgroundColor: getTabLineColor(mode).lineColor
   }
 });
+
+const tabPanelFocusStyles = mode => {
+  const colors = getTabColors(mode);
+  return {
+    boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
+    borderRadius: borderRadius,
+    outline: 'none',
+    // Hide TabLine on focus
+    '&::after': {
+      opacity: 0
+    }
+  };
+};
+
 export const getTabStyles = mode => {
   const colors = getTabColors(mode);
   return {
@@ -91,14 +114,9 @@ export const getTabStyles = mode => {
         height: 0
       }
     },
-    '&:focus': {
-      boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
-      borderRadius: borderRadius,
-      outline: 'none',
-      // Hide TabLine on focus
-      '&::after': {
-        opacity: 0
-      }
+    '&:focus-visible': tabPanelFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabPanelFocusStyles(mode)
     },
     ...highContrastFocusRing,
     '&[aria-selected="true"]': {

package/dist/es2019/version.json

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

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

@@ -108,7 +108,7 @@ var TabList = function TabList(props) {
       role: "tablist",
       display: "flex",
       position: "relative",
-      padding: "sp-0",
+      padding: "scale.0",
       ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: tabListStyles

package/dist/esm/components/tabs.js

@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.3"
+  packageVersion: "13.3.5"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/esm/internal/styles.js

@@ -11,16 +11,28 @@ var borderRadius = getBorderRadius();
 var gridSize = getGridSize();
 var tabLeftRightPadding = "".concat(gridSize, "px");
 var tabTopBottomPadding = "".concat(gridSize / 2, "px");
-var underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
+var underlineHeight = '2px';
+var highContrastFocusStyles = {
+  outline: '1px solid'
+}; // 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': {
-      outline: '1px solid'
+    '&:focus-visible': highContrastFocusStyles,
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': highContrastFocusStyles
     }
   }
 };
 
+var tabFocusStyles = function tabFocusStyles(mode) {
+  return {
+    boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
+    borderRadius: borderRadius,
+    outline: 'none'
+  };
+};
+
 var getTabPanelStyles = function getTabPanelStyles(mode) {
   return _objectSpread({
     flexGrow: 1,
@@ -32,10 +44,9 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
     minHeight: '0%',
     display: 'flex',
     padding: "0 ".concat(tabLeftRightPadding),
-    '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
-      borderRadius: borderRadius,
-      outline: 'none'
+    '&:focus-visible': tabFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabFocusStyles(mode)
     }
   }, highContrastFocusRing);
 };
@@ -76,6 +87,20 @@ export var getTabListStyles = function getTabListStyles(mode) {
     })
   );
 };
+
+var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
+  var colors = getTabColors(mode);
+  return {
+    boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
+    borderRadius: borderRadius,
+    outline: 'none',
+    // Hide TabLine on focus
+    '&::after': {
+      opacity: 0
+    }
+  };
+};
+
 export var getTabStyles = function getTabStyles(mode) {
   var colors = getTabColors(mode);
   return _objectSpread(_objectSpread({
@@ -104,14 +129,9 @@ export var getTabStyles = function getTabStyles(mode) {
         height: 0
       })
     },
-    '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
-      borderRadius: borderRadius,
-      outline: 'none',
-      // Hide TabLine on focus
-      '&::after': {
-        opacity: 0
-      }
+    '&:focus-visible': tabPanelFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabPanelFocusStyles(mode)
     }
   }, highContrastFocusRing), {}, {
     '&[aria-selected="true"]': {

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.3.3",
+  "version": "13.3.5",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-explorations": "^0.1.0",
+    "@atlaskit/ds-explorations": "^1.0.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
@@ -44,11 +44,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/spinner": "^15.1.0",
+    "@atlaskit/spinner": "^15.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/tabs".
+## API Report File for "@atlaskit/tabs"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -12,263 +16,101 @@ import { ReactNode } from 'react';
 import UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 
-declare type OnChangeCallback = (
+// @public (undocumented)
+type OnChangeCallback = (
   index: SelectedType,
   analyticsEvent: UIAnalyticsEvent,
 ) => void;
 
-declare type SelectedType = number;
+// @public (undocumented)
+type SelectedType = number;
 
-/**
- * __Tab__
- *
- * Tab represents an indivudal Tab displayed in a TabList.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-export declare function Tab({ children, testId }: TabProps): jsx.JSX.Element;
+// @public
+export function Tab({ children, testId }: TabProps): jsx.JSX.Element;
 
-export declare type TabAttributesType = {
-  /**
-   * Changes the selected tab.
-   */
+// @public (undocumented)
+export type TabAttributesType = {
   onClick: () => void;
-  /**
-   * ID of the tab.
-   */
   id: string;
-  /**
-   * The id of the tab panel that this tab links.
-   */
   'aria-controls': string;
-  /**
-   * The position of this tab within the tab list.
-   */
   'aria-posinset': number;
-  /**
-   * Whether this tab is selected.
-   */
   'aria-selected': boolean;
-  /**
-   * The number of tabs in this tab list.
-   */
   'aria-setsize': number;
-  /**
-   * Prevents a focus ring being shown when clicked.
-   */
   onMouseDown: (e: MouseEvent_2<HTMLElement>) => void;
-  /**
-   * Allows navigation of tabs with automatic activation.
-   * Read here for more details: https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html
-   */
   onKeyDown: (e: KeyboardEvent_2<HTMLElement>) => void;
-  /**
-   * Role is "tab".
-   */
   role: 'tab';
-  /**
-   * If the tab is selected the tab index is 0 and is focusable.
-   * Otherwise it is -1 and is not focusable.
-   */
   tabIndex: number;
 };
 
-/**
- * @deprecated
- * Previously this was the type for the tabs prop that was used like
- * <Tabs tabs={tabs} />
- * The codemod changes this to be
- * <Tabs>
- *  <TabList>
- *    {tabs.map(tab => <Tab testId={tab.testId}>{tab.label}</Tab>)}
- *  </TabList>
- *  {tabs.map(tab => <TabPanel>{tab.content}</TabPanel>)}
- * </Tabs>
- * The TabData type remains so the variable used in tabs can have a type.
- */
-export declare interface TabData {
-  /**
-   * String to be put inside a tab
-   */
-  label?: string;
-  /**
-   * String to be put inside a tab panel
-   */
+// @public @deprecated (undocumented)
+export interface TabData {
+  [key: string]: any;
   content?: ReactNode;
-  /**
-   * A `testId` prop is provided for specified elements, which is a unique
-   * string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests. This `testId` is put on the tab.
-   */
+  label?: string;
   testId?: string;
-  /**
-   * Used by consumers to convey extra information about the tab.
-   */
-  [key: string]: any;
 }
 
-/**
- * __TabList__
- *
- * A TabList groups `Tab` components together.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-export declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+// @public
+export const TabList: (props: TabListProps) => jsx.JSX.Element;
 
-export declare type TabListAttributesType = {
-  /**
-   * The index of the selected tab.
-   */
+// @public (undocumented)
+export type TabListAttributesType = {
   selected: SelectedType;
-  /**
-   * A unique ID that will be used to generate IDs for tabs and tab panels.
-   * This is required for accessibility reasons.
-   */
   tabsId: string;
-  /**
-   * A callback function which will be fired when a tab is changed.
-   */
   onChange: (index: SelectedType) => void;
 };
 
-export declare interface TabListProps {
-  /**
-   * A collection of `Tab`'s.  There should be a `Tab` for each `TabPanel`.
-   * If you want to customize `Tab` there is documentation in the tab section.
-   */
+// @public (undocumented)
+export interface TabListProps {
   children: ReactNode;
 }
 
-/**
- * __TabPanel__
- *
- * A TabPanel houses the contents of a Tab.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-export declare const TabPanel: ({
-  children,
-  testId,
-}: TabPanelProps) => jsx.JSX.Element;
+// @public
+export const TabPanel: ({ children, testId }: TabPanelProps) => jsx.JSX.Element;
 
-export declare type TabPanelAttributesType = {
-  /**
-   * Role is "tabpanel".
-   */
+// @public (undocumented)
+export type TabPanelAttributesType = {
   role: 'tabpanel';
-  /**
-   * ID of the the tab panel.
-   */
   id: string;
-  /**
-   * Hidden is true if it is not the selected tab.
-   */
   hidden?: boolean;
-  /**
-   * The id of the tab that links to this tab panel.
-   */
   'aria-labelledby': string;
-  /**
-   * Prevents a focus ring being shown when clicked.
-   */
   onMouseDown: (e: MouseEvent_2<HTMLElement>) => void;
-  /**
-   * If the tab panel is selected the tab index is 0 and is focusable.
-   * Otherwise it is -1 and is not focusable.
-   */
   tabIndex: number;
 };
 
-export declare interface TabPanelProps {
-  /**
-   * The children to be rendered within a `TabPanel`.
-   */
+// @public (undocumented)
+export interface TabPanelProps {
   children: ReactNode;
-  /**
-   * A `testId` prop is  is a unique string that appears as a data attribute `data-testid`
-   * on the `TabPanel` element, serving as a hook for automated tests.
-   */
   testId?: string;
 }
 
-export declare interface TabProps {
-  /**
-   * The children to be rendered within a `Tab`.
-   */
+// @public (undocumented)
+export interface TabProps {
   children: ReactNode;
-  /**
-   * A `testId` prop is  is a unique string that appears as a data attribute `data-testid`
-   * on the `Tab` element, serving as a hook for automated tests.
-   */
   testId?: string;
 }
 
-/**
- * __Tabs__
- *
- * Tabs acts as a container for all Tab components.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
+// @public
+const Tabs: (props: TabsProps) => jsx.JSX.Element;
 export default Tabs;
 
-export declare interface TabsProps extends WithAnalyticsEventsProps {
-  /**
-   * The index of the tab that will be selected by default when the component mounts.
-   * If not set the first tab will be displayed by default.
-   */
+// @public (undocumented)
+export interface TabsProps extends WithAnalyticsEventsProps {
+  analyticsContext?: Record<string, any>;
+  children: ReactNode;
   defaultSelected?: SelectedType;
-  /**
-   * A callback function which will be fired when a changed. It will be passed
-   * the index of the selected tab and a `UIAnalyticsEvent`.
-   */
+  id: string;
   onChange?: OnChangeCallback;
-  /**
-   * The selected tab's index. If this prop is set the component behaves as a
-   * controlled component. It will be up to you to listen to `onChange`.
-   */
   selected?: SelectedType;
-  /**
-   * Tabs by default leaves `TabPanel`'s mounted on the page after they have been selected.
-   * If you would like to unmount a `TabPanel` when it is not selected, set this prop to
-   * be true.
-   */
   shouldUnmountTabPanelOnChange?: boolean;
-  /**
-   * Additional information to be included in the `context` of analytics events that come from `Tabs`.
-   */
-  analyticsContext?: Record<string, any>;
-  /**
-   * A `testId` prop is a unique string that appears as a data attribute `data-testid`
-   * on the `Tabs` element, serving as a hook for automated tests.
-   */
   testId?: string;
-  /**
-   * The children of Tabs. The first child should be a `TabList` filled with `Tab`'s.
-   * Subsequent children should be `TabPanel`'s. There should be a `Tab` for each `TabPanel`.
-   * If you want to customize `Tab` or `TabPanel`, refer to the examples in the documentation.
-   */
-  children: ReactNode;
-  /**
-   * A unique ID that will be used to generate IDs for tabs and tab panels.
-   * This is required for accessibility purposes.
-   */
-  id: string;
 }
 
-export declare const useTab: () => TabAttributesType;
+// @public (undocumented)
+export const useTab: () => TabAttributesType;
 
-export declare const useTabPanel: () => TabPanelAttributesType;
+// @public (undocumented)
+export const useTabPanel: () => TabPanelAttributesType;
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```