Page layout

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.

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.

#147520, (opens new window) 88b9a0365fd5a, (opens new window) - Fixes the Left Sidebar with React 18 concurrent rendering turned on as client-side initialization animates the width of the left sidebar causing massive repaints and performance issues due to non-concurrent-safe logic. This delays the animation until that initialization has happened.

This has no expected breaking changes, only a possible fix with concurrency.

#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)

#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.

#80897, (opens new window) 8ce3bb563079, (opens new window) - [ux] If you view a product in a small window or at higher zoom levels, the sidebar now changes sizes to keep all controls in view. In these smaller windows, the sidebar no longer opens on hover to avoid accidental opening.

The sidebar is unchanged in views wider than 768 pixels.

When viewing a product in a window narrower than 768px or zoomed in at 200%, you'll notice that hovering your cursor over the sidebar no longer expands the sidebar.

To open the sidebar, select the expand sidebar button ( > icon). Select the button again to collapse the sidebar. You can also select the edge of the sidebar itself to expand and collapse it.

#35270, (opens new window) 7be6f82bb0d, (opens new window) - [ux] Behind tested behind a feature flag, we're testing new mobile functionality to keep our left sidebar in a "flyout" mode in mobile so navigation or content sits ontop of the main page content rather than crushing it.

This is designed to be SSR-compatible as it's primarily CSS-based with some user-event driven logic around mobile breakpoints that should not be inmpacted by SSR rendering (and should return the default desktop experience if such a state is achieved).

#34408, (opens new window) 4bbc131de00, (opens new window) - #### Fix: Resizing pages with <iframe>s

Pages that contain <iframe> elements will now have a smoother resizing experience. <iframe> elements consume user events (eg mousemove) when the user is over the top of them. This is problematic for resizing as we need to have the latest user pointer movements to resize the sidebar. Now, while a resize is happening, pointer-events are blocked on <iframe> elements to prevent the <iframe> consuming user events.

While resizing the users cursor will now always be ew-resize. Previously the cursor could change depending on what element the users pointer was over

A user can select parts of a page (eg select a paragraph of text). Previously, in some cases, a user's selection could change due to a resizing operation. This has been fixed so that a resizing operation will no longer change a user's selection

onResizeEnd will no longer incorrectly get an empty object {} if the user resized into the collapsed state

#32575, (opens new window) 2a9f6f800ef, (opens new window) - Fixes

• onLeftSidebarExpand is no longer called when the sidebar is already open. onLeftSidebarExpand oculd previously be incorrectly called if a user resized an expanded sidebar to slightly smaller than the default sidebar width, or when the user cancelled a sidebar resizing operation with the "Escape" key
• the latest provided onLeftSidebarCollapse and onLeftSidebarExpand functions are now called when collapsing / expanding respectively. Previously, only the initial onLeftSidebarCollapse and onLeftSidebarExpand were called (due to a stale closure)
• onLeftSidebarCollapse and onLeftSidebarExpand are now called with the latest state values. Previously there were only ever called with the initial left sidebar state value (due to a stale closure)

Improvements

• no longer possible to trigger the collapse of the sidebar when it is already collapsed
• no longer possible to trigger an expand of the sidebar when it is already expanded
• triggering an expand while the sidebar is collapsing will now flush the pending onLeftSidebarExpand
• triggering an collapse while the sidebar is expanding will now flush the pending onLeftSidebarCollapse
• only adding the event listener for "transitionend" when the sidebar is expanding or collapsing.
• removing "transitionend" event listener when <LeftSidebar /> is unmounted
• explicitly aborting pending collapse / expand actions when <LeftSidebar /> is unmounted while collapsing / expanding.

#32516, (opens new window) 955ee3ea8fe, (opens new window) - [ux] fix: if a "mousedown", "click", "resize" or "visibilitychange" event occurs while the sidebar is being resized, then the resizing operation will end

[ux] new: if a user presses the "Escape" key while the sidebar is being resized, then the resizing operation will end

#4765, (opens new window) 4cf354b500, (opens new window) - Adds the ability to register custom skip links to be displayed in the PageLayout skip link menu. Now if you have an element that isn't a slot of the PageLayout component, you can still provide a helpful and accessible way to jump straight to it!

Import the new useCustomSkipLink hook and pass in the taget id and a skipLinkTitle and it will add a new link to the element with a matching id, no matter where it is in the document. You can also choose what position the link will show up in the menu by using the optional listIndex prop.

#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.

• Exports LeftSidebarWithoutResize.
• Adds the following callback functions to LeftSidebar:
  • onExpand
  • onCollapse
  • onResizeStart
  • onResizeEnd

[minor]278f466be0, (opens new window):

Split page layout to allow tree shaking, allow resize button to have an override and add the required resizeButtonLabel prop to ResizeControl

[patch]214c76d2b8, (opens new window):

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

Updated dependencies 6b8e60827e, (opens new window):

Updated dependencies 449ef134b3, (opens new window):

Updated dependencies 167a55fd7a, (opens new window):

Updated dependencies 57c0487a02, (opens new window):

Updated dependencies e5eb921e97, (opens new window):

• @atlaskit/tooltip@15.2.6
• @atlaskit/button@13.3.11
• @atlaskit/icon@20.1.1
• @atlaskit/avatar@17.1.10
• @atlaskit/motion@0.2.4

[patch]ca947bd6da, (opens new window):

Prevent left sidebar from jumping when moving the mouse

[patch]dd7692e133, (opens new window):

Use TS syntax that is compatible with TS version 3.1.0

[minor]9015d5614a, (opens new window):

BREAKING

• Make ResizeControl composable. If it's not passed as a child to LeftSidebar, it will not be resizable.

NON-BREAKING

• Fix a bug with flyout behaviour in non-fixed mode. It no longer pushes body content to the side.
• Fix a bug where Main couldn't handle wide content without breaking the layout.
• Fixed the bug where expanding the LeftSidebar always set the width to 240px instead of users' cached width.

[patch]4955ff3d36, (opens new window):

Minor package.json config compliance updates- Updated dependencies 8c9e4f1ec6, (opens new window):

• @atlaskit/docs@8.5.0

[patch]8e76dbf8bc, (opens new window):

Add resize control to left sidebar- [patch]b015403f20, (opens new window):

Adds the ability to resize and collapse left sidebar. Adds the ability to hydrate grid state from local storage. Adds unit and VR tests.

Flyout behaviour in the LeftSidebar has a bug when isFixed prop is passed as false. It will be fixed in a future release. Tracked here, (opens new window)

[patch]81275873e9, (opens new window):

Initial release for page layout. Exports a top level Grid component and a number of slot components which fit into a preconfigured grid layout- Updated dependencies 66dcced7a0, (opens new window):

Updated dependencies eea5e9bd8c, (opens new window):

• @atlaskit/docs@8.4.0