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

Jump to bottom

Update @ariakit/react to 0.4.13 #65907

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

Update @ariakit/react to 0.4.13 #65907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3ef1c4c
Remove all ariakit dependencies
ciampo Oct 7, 2024
ce8ead7
Re-add ariakit dependencies targeting latest version
ciampo Oct 7, 2024
e438f84
Remove focus-visible DropdownMenuV2 workaround
ciampo Oct 7, 2024
0d43fd4
Remove composite tabbable workaround
ciampo Oct 10, 2024
7122b9d
SlotFill: updateSlot should check the ref
jsnajdr Nov 7, 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 @@ -99,7 +99,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
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 @@ -31,7 +31,7 @@
],
"types": "build-types",
"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/dropdown-menu-v2/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 { DropdownMenuContext } from './context';
import type { DropdownMenuCheckboxItemProps } from './types';
import * as Styled from './styles';
import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';

export const DropdownMenuCheckboxItem = forwardRef<
HTMLDivElement,
WordPressComponentProps< DropdownMenuCheckboxItemProps, 'div', false >
>( function DropdownMenuCheckboxItem(
{ 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 dropdownMenuContext = useContext( DropdownMenuContext );

return (
<Styled.DropdownMenuCheckboxItem
ref={ ref }
{ ...props }
{ ...focusVisibleFixProps }
accessibleWhenDisabled
hideOnClick={ hideOnClick }
store={ dropdownMenuContext?.store }
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/dropdown-menu-v2/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 { DropdownMenuItemProps } from './types';
import * as Styled from './styles';
import { DropdownMenuContext } from './context';
import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';

export const DropdownMenuItem = forwardRef<
HTMLDivElement,
WordPressComponentProps< DropdownMenuItemProps, 'div', false >
>( function DropdownMenuItem(
{ 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 dropdownMenuContext = useContext( DropdownMenuContext );

return (
<Styled.DropdownMenuItem
ref={ ref }
{ ...props }
{ ...focusVisibleFixProps }
accessibleWhenDisabled
hideOnClick={ hideOnClick }
store={ dropdownMenuContext?.store }
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/dropdown-menu-v2/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 { DropdownMenuContext } from './context';
import type { DropdownMenuRadioItemProps } 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 DropdownMenuRadioItem = forwardRef<
HTMLDivElement,
WordPressComponentProps< DropdownMenuRadioItemProps, 'div', false >
>( function DropdownMenuRadioItem(
{ 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 dropdownMenuContext = useContext( DropdownMenuContext );

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

This file was deleted.

5 changes: 5 additions & 0 deletions packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,18 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {

const updateSlot: SlotFillBubblesVirtuallyContext[ 'updateSlot' ] = (
name,
ref,
fillProps
) => {
const slot = slots.get( name );
if ( ! slot ) {
return;
}

if ( slot.ref !== ref ) {
return;
}

if ( isShallowEqual( slot.fillProps, fillProps ) ) {
return;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/slot-fill/bubbles-virtually/slot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function Slot(
// fillProps may be an update that interacts with the layout, so we
// useLayoutEffect.
useLayoutEffect( () => {
registry.updateSlot( name, fillProps );
registry.updateSlot( name, ref, fillProps );
} );

return (
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/slot-fill/bubbles-virtually/use-slot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ export default function useSlot( name: SlotKey ) {

const api = useMemo(
() => ( {
updateSlot: ( fillProps: FillProps ) =>
registry.updateSlot( name, fillProps ),
updateSlot: (
ref: SlotFillBubblesVirtuallySlotRef,
fillProps: FillProps
) => registry.updateSlot( name, ref, fillProps ),
unregisterSlot: ( ref: SlotFillBubblesVirtuallySlotRef ) =>
registry.unregisterSlot( name, ref ),
registerFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/slot-fill/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,11 @@ export type SlotFillBubblesVirtuallyContext = {
name: SlotKey,
ref: SlotFillBubblesVirtuallySlotRef
) => void;
updateSlot: ( name: SlotKey, fillProps: FillProps ) => void;
updateSlot: (
name: SlotKey,
ref: SlotFillBubblesVirtuallySlotRef,
fillProps: FillProps
) => void;
registerFill: (
name: SlotKey,
ref: SlotFillBubblesVirtuallyFillRef
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 @@ -28,7 +28,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": "file:../components",
"@wordpress/compose": "file:../compose",
Expand Down
Loading