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.

Sign up for GitHub

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

Update @ariakit/react to 0.4.13 #65907

Merged
merged 6 commits into from
Nov 28, 2024
Merged

Update @ariakit/react to 0.4.13 #65907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
24d5c1c
Remove all ariakit dependencies
ciampo Oct 7, 2024
e923216
Re-add ariakit dependencies targeting latest version
ciampo Oct 7, 2024
e3c03e4
Remove focus-visible DropdownMenuV2 workaround
ciampo Oct 7, 2024
d2b5055
Remove composite tabbable workaround
ciampo Oct 10, 2024
a703fe9
CHANGELOG
ciampo Nov 27, 2024
2d7617d
Remove Tabs workaround
ciampo Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 51 additions & 31 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"@actions/core": "1.9.1",
"@actions/github": "5.0.0",
"@apidevtools/json-schema-ref-parser": "11.6.4",
"@ariakit/test": "^0.4.2",
"@ariakit/test": "^0.4.5",
"@babel/core": "7.25.7",
"@babel/plugin-syntax-jsx": "7.25.7",
"@babel/runtime-corejs3": "7.25.7",
Expand Down
6 changes: 5 additions & 1 deletion packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Internal

- Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)).

## 28.13.0 (2024-11-27)

### Deprecations
Expand All @@ -11,7 +15,7 @@
- `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
- `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
- `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).
- `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)).
- `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)).

### Bug Fixes

Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"src/**/*.scss"
],
"dependencies": {
"@ariakit/react": "^0.4.10",
"@ariakit/react": "^0.4.13",
"@babel/runtime": "7.25.7",
"@emotion/cache": "^11.7.1",
"@emotion/css": "^11.7.1",
Expand Down
20 changes: 1 addition & 19 deletions packages/components/src/composite/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,23 +26,5 @@ export const CompositeItem = forwardRef<
// obfuscated to discourage its use outside of the component's internals.
const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;

// If the active item is not connected, Composite may end up in a state
// where none of the items are tabbable. In this case, we force all items to
// be tabbable, so that as soon as an item received focus, it becomes active
// and Composite goes back to working as expected.
const tabbable = Ariakit.useStoreState( store, ( state ) => {
return (
state?.activeId !== null &&
! store?.item( state?.activeId )?.element?.isConnected
);
} );

return (
<Ariakit.CompositeItem
store={ store }
tabbable={ tabbable }
{ ...props }
ref={ ref }
/>
);
return <Ariakit.CompositeItem store={ store } { ...props } ref={ ref } />;
} );
6 changes: 1 addition & 5 deletions packages/components/src/menu/checkbox-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,20 @@ import type { WordPressComponentProps } from '../context';
import { MenuContext } from './context';
import type { MenuCheckboxItemProps } from './types';
import * as Styled from './styles';
import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';

export const MenuCheckboxItem = forwardRef<
HTMLDivElement,
WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
>( function MenuCheckboxItem(
{ suffix, children, onBlur, hideOnClick = false, ...props },
{ suffix, children, hideOnClick = false, ...props },
ref
) {
// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
const menuContext = useContext( MenuContext );

return (
<Styled.MenuCheckboxItem
ref={ ref }
{ ...props }
{ ...focusVisibleFixProps }
accessibleWhenDisabled
hideOnClick={ hideOnClick }
store={ menuContext?.store }
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/menu/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,20 @@ import type { WordPressComponentProps } from '../context';
import type { MenuItemProps } from './types';
import * as Styled from './styles';
import { MenuContext } from './context';
import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';

export const MenuItem = forwardRef<
HTMLDivElement,
WordPressComponentProps< MenuItemProps, 'div', false >
>( function MenuItem(
{ prefix, suffix, children, onBlur, hideOnClick = true, ...props },
{ prefix, suffix, children, hideOnClick = true, ...props },
ref
) {
// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
const menuContext = useContext( MenuContext );

return (
<Styled.MenuItem
ref={ ref }
{ ...props }
{ ...focusVisibleFixProps }
accessibleWhenDisabled
hideOnClick={ hideOnClick }
store={ menuContext?.store }
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/menu/radio-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { MenuContext } from './context';
import type { MenuRadioItemProps } from './types';
import * as Styled from './styles';
import { SVG, Circle } from '@wordpress/primitives';
import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';

const radioCheck = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
Expand All @@ -29,18 +28,15 @@ export const MenuRadioItem = forwardRef<
HTMLDivElement,
WordPressComponentProps< MenuRadioItemProps, 'div', false >
>( function MenuRadioItem(
{ suffix, children, onBlur, hideOnClick = false, ...props },
{ suffix, children, hideOnClick = false, ...props },
ref
) {
// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
const menuContext = useContext( MenuContext );

return (
<Styled.MenuRadioItem
ref={ ref }
{ ...props }
{ ...focusVisibleFixProps }
accessibleWhenDisabled
hideOnClick={ hideOnClick }
store={ menuContext?.store }
Expand Down
22 changes: 0 additions & 22 deletions packages/components/src/menu/use-temporary-focus-visible-fix.ts
View file
Open in desktop

This file was deleted.

18 changes: 0 additions & 18 deletions packages/components/src/tabs/tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import * as Ariakit from '@ariakit/react';

/**
* WordPress dependencies
*/
Expand All @@ -29,18 +24,6 @@ export const Tab = forwardRef<
>( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {
const { store, instanceId } = useTabsContext() ?? {};

// If the active item is not connected, the tablist may end up in a state
// where none of the tabs are tabbable. In this case, we force all tabs to
// be tabbable, so that as soon as an item received focus, it becomes active
// and Tablist goes back to working as expected.
// eslint-disable-next-line @wordpress/no-unused-vars-before-return
const tabbable = Ariakit.useStoreState( store, ( state ) => {
return (
state?.activeId !== null &&
! store?.item( state?.activeId )?.element?.isConnected
);
} );

if ( ! store ) {
warning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );
return null;
Expand All @@ -55,7 +38,6 @@ export const Tab = forwardRef<
id={ instancedTabId }
disabled={ disabled }
render={ render }
tabbable={ tabbable }
{ ...otherProps }
>
<StyledTabChildren>{ children }</StyledTabChildren>
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"types": "build-types",
"sideEffects": false,
"dependencies": {
"@ariakit/react": "^0.4.10",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For DataViews, I tested that list view's keyboard interactions still work as expected. Then, I also did some smoke testing of other places where I've seen it in use (modals, filters) and have nothing to report.

"@ariakit/react": "^0.4.13",
"@babel/runtime": "7.25.7",
"@wordpress/components": "*",
"@wordpress/compose": "*",
Expand Down
Loading