@atlaskit/tabs 13.3.5 → 13.3.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tabs
 
+## 13.3.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.3.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.3.5
 
 ### Patch Changes

package/codemods/utils.tsx

@@ -7,26 +7,24 @@ import {
   getJSXAttributesByName,
 } from '@atlaskit/codemod-utils';
 
-export const createRemoveFuncWithDefaultSpecifierFor = (
-  component: string,
-  prop: string,
-  comment?: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const specifier = getDefaultSpecifier(j, source, component);
+export const createRemoveFuncWithDefaultSpecifierFor =
+  (component: string, prop: string, comment?: string) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const specifier = getDefaultSpecifier(j, source, component);
 
-  if (!specifier) {
-    return;
-  }
+    if (!specifier) {
+      return;
+    }
 
-  source.findJSXElements(specifier).forEach((element) => {
-    getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
-      if (comment) {
-        addCommentToStartOfFile({ j, base: source, message: comment });
-      }
-      j(attribute).remove();
+    source.findJSXElements(specifier).forEach((element) => {
+      getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
+        if (comment) {
+          addCommentToStartOfFile({ j, base: source, message: comment });
+        }
+        j(attribute).remove();
+      });
     });
-  });
-};
+  };
 
 export function doesIdentifierExist({
   j,

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.5"
+  packageVersion: "13.3.7"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/cjs/version.json

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

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.5"
+  packageVersion: "13.3.7"
 };
 
 const getTabPanelWithContext = ({

package/dist/es2019/version.json

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

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.5"
+  packageVersion: "13.3.7"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.3.5",
+  "version": "13.3.7",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -34,9 +26,9 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-explorations": "^1.0.0",
+    "@atlaskit/ds-explorations": "^1.6.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.12.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -44,11 +36,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/spinner": "^15.2.0",
+    "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/tabs"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { jsx } from '@emotion/react';
@@ -114,3 +119,5 @@ export const useTabPanel: () => TabPanelAttributesType;
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/dist/types-ts4.0/components/tab-list.d.ts

@@ -1,13 +0,0 @@
-import { jsx } from '@emotion/react';
-import { TabListProps } from '../types';
-/**
- * __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)
- */
-declare const TabList: (props: TabListProps) => jsx.JSX.Element;
-export default TabList;

package/dist/types-ts4.0/components/tab-panel.d.ts

@@ -1,13 +0,0 @@
-import { jsx } from '@emotion/react';
-import { TabPanelProps } from '../types';
-/**
- * __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)
- */
-declare const TabPanel: ({ children, testId }: TabPanelProps) => jsx.JSX.Element;
-export default TabPanel;

package/dist/types-ts4.0/components/tab.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { TabProps } from '../types';
-/**
- * __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 default function Tab({ children, testId }: TabProps): jsx.JSX.Element;

package/dist/types-ts4.0/components/tabs.d.ts

@@ -1,13 +0,0 @@
-import { jsx } from '@emotion/react';
-import { TabsProps } from '../types';
-/**
- * __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;
-export default Tabs;

package/dist/types-ts4.0/hooks.d.ts

@@ -1,3 +0,0 @@
-export declare const useTab: () => import("./types").TabAttributesType;
-export declare const useTabList: () => import("./types").TabListAttributesType;
-export declare const useTabPanel: () => import("./types").TabPanelAttributesType;

package/dist/types-ts4.0/index.d.ts

@@ -1,6 +0,0 @@
-export { default } from './components/tabs';
-export { default as TabPanel } from './components/tab-panel';
-export { default as Tab } from './components/tab';
-export { default as TabList } from './components/tab-list';
-export type { TabProps, TabPanelProps, TabsProps, TabListProps, TabAttributesType, TabListAttributesType, TabPanelAttributesType, TabData, } from './types';
-export { useTab, useTabPanel } from './hooks';

package/dist/types-ts4.0/internal/colors.d.ts

@@ -1,17 +0,0 @@
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare type TabColors = {
-    labelColor: string;
-    activeLabelColor: string;
-    hoverLabelColor: string;
-    selectedColor: string;
-    focusBorderColor: string;
-};
-export declare const getTabColors: (mode: ThemeModes) => TabColors;
-export declare type TabLineColors = {
-    lineColor: string;
-    hoveredColor: string;
-    activeColor: string;
-    selectedColor: string;
-};
-export declare const getTabLineColor: (mode: ThemeModes) => TabLineColors;
-export declare const getTabPanelFocusColor: (mode: ThemeModes) => string;

package/dist/types-ts4.0/internal/context.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { TabAttributesType, TabListAttributesType, TabPanelAttributesType } from '../types';
-export declare const TabContext: import("react").Context<TabAttributesType | null>;
-export declare const TabListContext: import("react").Context<TabListAttributesType | null>;
-export declare const TabPanelContext: import("react").Context<TabPanelAttributesType | null>;

package/dist/types-ts4.0/internal/styles.d.ts

@@ -1,5 +0,0 @@
-import { CSSObject, SerializedStyles } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare const getTabsStyles: (mode: ThemeModes) => SerializedStyles;
-export declare const getTabListStyles: (mode: ThemeModes) => SerializedStyles;
-export declare const getTabStyles: (mode: ThemeModes) => CSSObject;

package/dist/types-ts4.0/internal/utils.d.ts

@@ -1,2 +0,0 @@
-import type { MouseEvent } from 'react';
-export declare const onMouseDownBlur: (e: MouseEvent<HTMLElement>) => void;

package/dist/types-ts4.0/performance/examples.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import type { PublicInteractionTask } from 'storybook-addon-performance';
-export declare const performance: {
-    (): JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            performance: {
-                interactions: PublicInteractionTask[];
-            };
-        };
-    };
-};
-export declare const heavyPerformance: {
-    (): JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            performance: {
-                interactions: PublicInteractionTask[];
-            };
-        };
-    };
-};

package/dist/types-ts4.0/types.d.ts

@@ -1,196 +0,0 @@
-import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
-export interface TabProps {
-    /**
-     * The children to be rendered within a `Tab`.
-     */
-    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;
-}
-export interface TabPanelProps {
-    /**
-     * The children to be rendered within a `TabPanel`.
-     */
-    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;
-}
-/**
- * @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 interface TabData {
-    /**
-     * String to be put inside a tab
-     */
-    label?: string;
-    /**
-     * String to be put inside a tab panel
-     */
-    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.
-     */
-    testId?: string;
-    /**
-     * Used by consumers to convey extra information about the tab.
-     */
-    [key: string]: any;
-}
-export declare type SelectedType = number;
-export declare type OnChangeCallback = (index: SelectedType, analyticsEvent: UIAnalyticsEvent) => void;
-export 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.
-     */
-    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`.
-     */
-    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 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.
-     */
-    children: ReactNode;
-}
-export declare type TabAttributesType = {
-    /**
-     * Changes the selected tab.
-     */
-    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<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<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;
-};
-export declare type TabListAttributesType = {
-    /**
-     * The index of the selected tab.
-     */
-    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 type TabPanelAttributesType = {
-    /**
-     * Role is "tabpanel".
-     */
-    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<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;
-};