Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(deps): bump @ariakit/react from 0.4.3 to 0.4.12 #2547

Closed

Conversation

dependabot[bot]
Copy link
Contributor

@dependabot dependabot bot commented on behalf of github Oct 4, 2024

Bumps @ariakit/react from 0.4.3 to 0.4.12.

Release notes

Sourced from @​ariakit/react's releases.

@​ariakit/react-core@​0.4.12

Tab panels with scroll restoration

Ariakit now supports scroll restoration for the TabPanel component. This allows you to control whether and how the scroll position is restored when switching tabs.

To enable scroll restoration, use the new scrollRestoration prop:

// Restores the scroll position of the tab panel element when switching tabs
<TabPanel scrollRestoration />

By default, the scroll position is restored when switching tabs. You can set it to "reset" to return the scroll position to the top of the tab panel when changing tabs. Use the scrollElement prop to specify a different scrollable element:

// Resets the scroll position of a different scrollable element
<div className="overflow-auto">
  <TabPanel
    scrollRestoration="reset"
    scrollElement={(panel) => panel.parentElement}
  />
</div>

Full height dialogs and on-screen virtual keyboards

A new --dialog-viewport-height CSS variable has been added to the Dialog component. This variable exposes the height of the visual viewport, considering the space taken by virtual keyboards on mobile devices. Use this CSS variable when you have input fields in your dialog to ensure it always fits within the visual viewport:

.dialog {
  max-height: var(--dialog-viewport-height, 100dvh);
}

Overriding composite state for specific methods

The next, previous, up, and down methods of the composite store now accept an object as the first argument to override the composite state for that specific method. For example, you can pass a different activeId value to the next method so it returns the next item based on that value rather than the current active item in the composite store:

const store = useCompositeStore({ defaultActiveId: "item1" });
const item3 = store.next({ activeId: "item2" });

It's important to note that the composite state is not modified when using this feature. The state passed to these methods is used solely for that specific method call.

Other updates

  • Fixed the ability to Tab out of a nested Menu within a modal Dialog.
  • Fixed CJS build on Next.js.
  • Enhanced performance on Dialog backdrops.

... (truncated)

Changelog

Sourced from @​ariakit/react's changelog.

0.4.12

Tab panels with scroll restoration

Ariakit now supports scroll restoration for the TabPanel component. This allows you to control whether and how the scroll position is restored when switching tabs.

To enable scroll restoration, use the new scrollRestoration prop:

// Restores the scroll position of the tab panel element when switching tabs
<TabPanel scrollRestoration />

By default, the scroll position is restored when switching tabs. You can set it to "reset" to return the scroll position to the top of the tab panel when changing tabs. Use the scrollElement prop to specify a different scrollable element:

// Resets the scroll position of a different scrollable element
<div className="overflow-auto">
  <TabPanel
    scrollRestoration="reset"
    scrollElement={(panel) => panel.parentElement}
  />
</div>

Full height dialogs and on-screen virtual keyboards

A new --dialog-viewport-height CSS variable has been added to the Dialog component. This variable exposes the height of the visual viewport, considering the space taken by virtual keyboards on mobile devices. Use this CSS variable when you have input fields in your dialog to ensure it always fits within the visual viewport:

.dialog {
  max-height: var(--dialog-viewport-height, 100dvh);
}

Overriding composite state for specific methods

The next, previous, up, and down methods of the composite store now accept an object as the first argument to override the composite state for that specific method. For example, you can pass a different activeId value to the next method so it returns the next item based on that value rather than the current active item in the composite store:

const store = useCompositeStore({ defaultActiveId: "item1" });
const item3 = store.next({ activeId: "item2" });

It's important to note that the composite state is not modified when using this feature. The state passed to these methods is used solely for that specific method call.

Other updates

  • Fixed the ability to Tab out of a nested Menu within a modal Dialog.
  • Fixed CJS build on Next.js.

... (truncated)

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

Bumps [@ariakit/react](https://github.com/ariakit/ariakit/tree/HEAD/packages/ariakit-react) from 0.4.3 to 0.4.12.
- [Release notes](https://github.com/ariakit/ariakit/releases)
- [Changelog](https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react/CHANGELOG.md)
- [Commits](https://github.com/ariakit/ariakit/commits/@ariakit/[email protected]/packages/ariakit-react)

---
updated-dependencies:
- dependency-name: "@ariakit/react"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
@dependabot dependabot bot requested a review from a team as a code owner October 4, 2024 07:46
@dependabot dependabot bot added the dependencies Pull requests that update a dependency file label Oct 4, 2024
@dependabot dependabot bot requested a review from a team as a code owner October 4, 2024 07:46
Copy link

github-actions bot commented Oct 4, 2024

👀 Visit Preview

Copy link
Contributor Author

dependabot bot commented on behalf of github Oct 10, 2024

Superseded by #2550.

@dependabot dependabot bot closed this Oct 10, 2024
@dependabot dependabot bot deleted the dependabot-npm_and_yarn-ariakit-react-0.4.12 branch October 10, 2024 08:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file to-review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

0 participants