Tabs

d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

f0bf5f838abd5, (opens new window) - Apply Volt entry-point and barrel-removal standards across these packages. Public exports now resolve directly to ./src/* implementations instead of intermediate ./src/entry-points/* re-exports.

Prefer published subpaths over the package root or internal entry-point paths:

If you imported through internal entry-point modules, switch to the public subpath:

cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

Types are now exclusively via the "types": "dist/types/index.d.ts" property.

38f89455de21d, (opens new window) - Removes @atlaskit/tabs/hooks entrypoint from public API. Use the hook exports from @atlaskit/tabs directly.

Removes redundant utility files, split-out multi-export modules and restructures internal files.

#117363, (opens new window) 10a0f7f6c2027, (opens new window) - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026, (opens new window)

#168353, (opens new window) cbd859b752028, (opens new window) - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR.

Please note, in order to use this version of @atlaskit/tabs, you will need to ensure that your bundler is configured to handle .css imports correctly. Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports.

For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS, (opens new window).

#127511, (opens new window) db30e29344013, (opens new window) - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

This change has been done to enable usage of react@18.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

• Adjusted line height and overall Tab label height to be consistent with the Atlassian Design System.

#13302, (opens new window) cc54bf994d6, (opens new window) - Instrumented Tabs with the new theming package, @atlaskit/tokens.

New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.

#9756, (opens new window) c17fe6144f8, (opens new window) - ### Major Changes

In this version, Tabs has had a pretty substantial rewrite. As well as now being dramatically faster and more lightweight, it has a brand new flexible composable API and a bunch of accessibility improvements.

The old version of Tabs had a tabs prop that would map to TabItem's and TabContent's.

We've changed the language to match the W3 spec so a TabItem is now a Tab and a TabContent is a TabPanel. We now export these components as well as a TabList so consumers use a composable API that matches the DOM structure.

This allows you to easily customise your usage, for example if you want to add a tooltip.

The component prop allowed you to customise the Tab and TabPanel. This approach seemed counter-intuitive and had a performance impact regardless of whether you were using it. Instead with composability we have have added two hooks, useTab and useTabPanel.

To create a custom Tab, call useTab and spread those attributes onto the custom tab. From there you can use it in place of a Tab. For example if you want to change the font size you would do so like this.

Likewise, to create a custom TabPanel, call useTabPanel and spread those attributes onto the custom tab panel.

The onSelect prop has been renamed to onChange to be consistent with other design system components. Internal state has now changed to keep track of the selected index. Previously the object in the tabs prop array of type TabData was passed as well as the index. If you were using this object you will have to change to use the index.

The type has changed from (selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void; to (index: number, analyticsEvent: UIAnalyticsEvent) => void;

This also means if you are using the selected prop you will have to ensure you are using the index of the selected tab instead of the object of type TabData.

Previously you could provide the prop isSelectedTest to Tabs and it would determine what tab is selected by seeing what tab returns true when isSelectedTest is called. This is a messy API that effectively means there were two ways of making Tabs controlled. If you are using isSelectedTest you should swap to using the selected prop to indicate that a tab is selected.

According to the w3 spec each tab should be linked to its corresponding tab panel. We have added the aria-controls attribute to tabs and the aria-labelledby attribute to tab panels. In order to do this we needed to generate a unique id for each tab and tab panel. To ensure these id's are unique if there are multiple Tabs components on the same page there is now a required id prop.

There was previously a prop isContentPersisted which defaults to false. When true it would render all tab panels. The new default behaviour of Tabs is to leave each tab panel mounted on the page after it has been selected. This means that tab panels will only mount if selected and will not unmount and remount when changing tabs. In light of this change, isContentPersisted has been removed and shouldUnmountTabPanelOnChange has been introduced. It defaults to false and if it is set to true it will unmount a TabPanel when it is not selected. Effectively shouldUnmountTabPanelOnChange is the inverse of isContentPersisted.

• Remove TabItem and TabContent export.
• Remove the types: TabItemElementProps, TabItemComponentProvided, TabContentComponentProvided, TabItemType, TabContentType, SelectedProp, IsSelectedTestFunction, OnSelectCallback, TabsState, TabsNavigationProps and Mode.

#3885, (opens new window) 6c525a8229, (opens new window) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0

Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.

[patch]b41c0887cd, (opens new window):

Change imports to comply with Atlassian conventions- Updated dependencies 3940bd71f1, (opens new window):

Updated dependencies fd41d77c29, (opens new window):

• @atlaskit/tooltip@15.2.6
• @atlaskit/webdriver-runner@0.3.4

• @atlaskit/docs@8.4.0
• @atlaskit/webdriver-runner@0.3.0
• @atlaskit/spinner@12.1.6
• @atlaskit/tooltip@15.2.5

• @atlaskit/webdriver-runner@0.2.0
• @atlaskit/spinner@12.1.5
• @atlaskit/tooltip@15.2.4

[patch]6548261c9a, (opens new window):

Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a, (opens new window):

• @atlaskit/docs@8.3.2
• @atlaskit/visual-regression@0.1.9
• @atlaskit/analytics-next@6.3.5
• @atlaskit/spinner@12.1.4
• @atlaskit/theme@9.5.1
• @atlaskit/tooltip@15.2.3

[patch]4a223473c5, (opens new window):

Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 82747f2922, (opens new window):

Updated dependencies 4a223473c5, (opens new window):

• @atlaskit/theme@9.5.0
• @atlaskit/spinner@12.1.3
• @atlaskit/tooltip@15.2.1

[patch]36f6e99c5b, (opens new window):

Fix type errors caused when generating declaration files

[patch]d222c2b987, (opens new window):

Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.

** getTokens props changes ** When defining the value function passed into a ThemeProvider, the getTokens parameter cannot be called without props; if no props are provided an empty object {} must be passed in:

becomes:

** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:

to this:

or for multi entry-point users:

to this:

[patch]35d2229b2a, (opens new window):

Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

[minor]99957d4a20, (opens new window):

Adding an optional prop testId that will set the attribute value data-testid. It will help products to write better integration and end to end tests.

[patch]a2d0043716, (opens new window):

Updated version of analytics-next to fix potential incompatibilities with TS 3.6

[minor]c6efb2f5b6, (opens new window):

Prefix the legacy lifecycle methods with UNSAFE_* to avoid warning in React 16.9+

More information about the deprecation of lifecycles methods can be found here: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes, (opens new window)

[patch]097b696613, (opens new window):

Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

[patch]ecca4d1dbb, (opens new window):

Upgraded Typescript to 3.3.x

[patch]708028db86, (opens new window):

Change all the imports to theme in Core to use multi entry points

[patch]de35ce8c67, (opens new window):

Updates component maintainers

[patch]926b43142b, (opens new window):

Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.

Breaking changes

• withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEvents
• AnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContext

Breaking changes to TypeScript annotations

• withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide props as a generic type.
• withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide props as a generic type.
• Type WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source code
• Type CreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match source code
• Type UIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match source code
• Type AnalyticsEventsPayload has been renamed to AnalyticsEventPayload
• Type ObjectType has been removed, please use Record<string, any> or [key: string]: any
• Type UIAnalyticsEventInterface has been removed, please use UIAnalyticsEvent
• Type AnalyticsEventInterface has been removed, please use AnalyticsEvent
• Type CreateAndFireEventFunction removed and should now be inferred by TypeScript
• Type AnalyticsEventUpdater removed and should now be inferred by TypeScript

[patch]3342f64d5e, (opens new window):

Removed unused dependencies from package.json for tabs: keycode was unused.

[patch]f34776be97, (opens new window):

Type definition files are now referenced in package.json

[patch]9f8ab1084b, (opens new window):

Consume analytics-next ts type definitions as an ambient declaration.

[patch]d0db01b410, (opens new window):

TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.

Before:

After:

[major]61a919319a, (opens new window):

@atlaskit/tabs has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes. tabIndex now only accepts type number.

[patch]4615439434, (opens new window):

index.ts will now be ignored when publishing to npm

• @atlaskit/tooltip@15.0.0

• This is just a safety release in case anything strange happened in in the previous one. See Pull Request #5942 for details

• @atlaskit/spinner@12.0.0

• Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

• @atlaskit/docs@7.0.3
• @atlaskit/spinner@10.0.7
• @atlaskit/tooltip@13.0.4
• @atlaskit/theme@8.1.7

[major]76299208e6, (opens new window):

• Drop ES5 from all the flow modules

As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

The major reason for doing this is to allow us to support multiple entry points in packages, e.g:

Previously this was sort of possible for consumers by doing something like:

This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.

To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.

ES Modules are widely supported by all modern bundlers and can be worked around in node environments.

We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.

Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support, (opens new window) (for external) if you have any questions or queries about this.

• @atlaskit/analytics-next@3.1.2
• @atlaskit/spinner@9.0.13
• @atlaskit/theme@7.0.1
• @atlaskit/tooltip@12.1.13
• @atlaskit/docs@6.0.0

• @atlaskit/docs@5.2.3
• @atlaskit/spinner@9.0.12
• @atlaskit/tooltip@12.1.12
• @atlaskit/theme@7.0.0

• @atlaskit/theme@6.0.0
• @atlaskit/tooltip@12.0.9
• @atlaskit/spinner@9.0.6
• @atlaskit/docs@5.0.6

• @atlaskit/tooltip@12.0.5
• @atlaskit/analytics-next@3.0.4
• @atlaskit/theme@5.1.3
• @atlaskit/spinner@9.0.5

• @atlaskit/tooltip@12.0.4
• @atlaskit/theme@5.1.2
• @atlaskit/spinner@9.0.4
• @atlaskit/analytics-next@3.0.3
• @atlaskit/docs@5.0.2

• @atlaskit/tooltip@12.0.3
• @atlaskit/analytics-next@3.0.2
• @atlaskit/theme@5.1.1
• @atlaskit/spinner@9.0.3

• @atlaskit/tooltip@12.0.1
• @atlaskit/analytics-next@3.0.1
• @atlaskit/spinner@9.0.2
• @atlaskit/docs@5.0.1

• @atlaskit/tooltip@12.0.0

• @atlaskit/tooltip@11.0.0
• @atlaskit/analytics-next@3.0.0
• @atlaskit/theme@5.0.0
• @atlaskit/spinner@9.0.0
• @atlaskit/docs@5.0.0

• @atlaskit/tooltip@11.0.0
• @atlaskit/analytics-next@3.0.0
• @atlaskit/theme@5.0.0
• @atlaskit/spinner@9.0.0
• @atlaskit/docs@5.0.0

• @atlaskit/spinner@8.0.0

• @atlaskit/tooltip@10.2.1
• @atlaskit/theme@4.0.4
• @atlaskit/spinner@7.0.2

• @atlaskit/theme@4.0.3
• @atlaskit/spinner@7.0.1
• @atlaskit/docs@4.1.1

• @atlaskit/spinner@7.0.0
• @atlaskit/tooltip@10.2.0
• @atlaskit/docs@4.1.0
• @atlaskit/theme@4.0.2

• @atlaskit/tooltip@10.0.1
• @atlaskit/theme@4.0.1
• @atlaskit/spinner@6.0.1
• @atlaskit/docs@4.0.1

• @atlaskit/tooltip@10.0.0
• @atlaskit/theme@4.0.0
• @atlaskit/spinner@6.0.0
• @atlaskit/docs@4.0.0

• @atlaskit/tooltip@9.2.1
• @atlaskit/theme@3.2.2
• @atlaskit/spinner@5.0.2
• @atlaskit/docs@3.0.4