Skip to content

Extract reusable "descendant registry" pattern from ActionBar, with new support for reordering elements #7585

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

Draft
iansan5653 wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Extract reusable "descendant registry" pattern from ActionBar, with new support for reordering elements #7585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2aec372
Add "descendant registry" pattern
iansan5653 Feb 23, 2026
f7a0ec9
Return id from register hook
iansan5653 Feb 23, 2026
d55720d
Extract reusable "descendant registry" pattern from `ActionBar`, with…
Copilot Feb 24, 2026
8fd5b4a
Add mechanism for updating value without rebuilding tree, and revert …
iansan5653 Feb 24, 2026
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
117 changes: 43 additions & 74 deletions packages/react/src/ActionBar/ActionBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type {RefObject, MouseEventHandler} from 'react'
import React, {useState, useCallback, useRef, forwardRef, useId} from 'react'
import React, {useState, useCallback, useRef, forwardRef} from 'react'
import {KebabHorizontalIcon} from '@primer/octicons-react'
import {ActionList, type ActionListItemProps} from '../ActionList'
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
Expand All @@ -13,6 +13,7 @@ import {useFocusZone, FocusKeys} from '../hooks/useFocusZone'
import styles from './ActionBar.module.css'
import {clsx} from 'clsx'
import {useRefObjectAsForwardedRef} from '../hooks'
import {createDescendantRegistry} from '../utils/descendant-registry'

const ACTIONBAR_ITEM_GAP = 8

Expand Down Expand Up @@ -44,14 +45,10 @@ type ChildRegistry = ReadonlyMap<string, ChildProps | null>

const ActionBarContext = React.createContext<{
size: Size
registerChild: (id: string, props: ChildProps) => void
unregisterChild: (id: string, groupId?: string) => void
isVisibleChild: (id: string) => boolean
groupId?: string
}>({
size: 'medium',
registerChild: () => {},
unregisterChild: () => {},
isVisibleChild: () => true,
groupId: undefined,
})
Expand Down Expand Up @@ -162,6 +159,8 @@ export type ActionBarMenuProps = {

const MORE_BTN_WIDTH = 32

const ActionBarItemsRegistry = createDescendantRegistry<ChildProps>()

const calculatePossibleItems = (
registryEntries: Array<[string, ChildProps]>,
navWidth: number,
Expand Down Expand Up @@ -301,13 +300,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
const listRef = useRef<HTMLDivElement>(null)
const [computedGap, setComputedGap] = useState<number>(ACTIONBAR_ITEM_GAP)

const [childRegistry, setChildRegistry] = useState<ChildRegistry>(() => new Map())

const registerChild = useCallback(
(id: string, childProps: ChildProps) => setChildRegistry(prev => new Map(prev).set(id, childProps)),
[],
)
const unregisterChild = useCallback((id: string) => setChildRegistry(prev => new Map(prev).set(id, null)), [])
const [childRegistry, setChildRegistry] = ActionBarItemsRegistry.useRegistryState()

const [menuItemIds, setMenuItemIds] = useState<Set<string>>(() => new Set())

Expand Down Expand Up @@ -349,7 +342,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
const groupedItemsMap = new Map<string, Array<[string, ChildProps]>>()

for (const [key, childProps] of childRegistry) {
if (childProps?.type === 'action' && childProps.groupId) {
if (childProps.type === 'action' && childProps.groupId) {
const existingGroup = groupedItemsMap.get(childProps.groupId) || []
existingGroup.push([key, childProps])
groupedItemsMap.set(childProps.groupId, existingGroup)
Expand All @@ -359,7 +352,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
}, [childRegistry])

return (
<ActionBarContext.Provider value={{size, registerChild, unregisterChild, isVisibleChild}}>
<ActionBarContext.Provider value={{size, isVisibleChild}}>
<div ref={navRef} className={clsx(className, styles.Nav)} data-flush={flush}>
<div
ref={listRef}
Expand All @@ -369,7 +362,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
aria-labelledby={ariaLabelledBy}
data-gap={gap}
>
{children}
<ActionBarItemsRegistry.Provider setRegistry={setChildRegistry}>{children}</ActionBarItemsRegistry.Provider>
{menuItemIds.size > 0 && (
<ActionMenu>
<ActionMenu.Anchor>
Expand Down Expand Up @@ -466,37 +459,42 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
)
}

function useWidth(ref: React.RefObject<HTMLElement | null>) {
// Storing the width in a ref ensures we don't forget about it when not visible
const widthRef = useRef<number>(-1)

useIsomorphicLayoutEffect(() => {
const width = ref.current?.getBoundingClientRect().width
if (width) widthRef.current = width
}, [])

return widthRef
}

export const ActionBarIconButton = forwardRef(
({disabled, onClick, ...props}: ActionBarIconButtonProps, forwardedRef) => {
const ref = useRef<HTMLButtonElement>(null)
useRefObjectAsForwardedRef(forwardedRef, ref)
const id = useId()

const {size, registerChild, unregisterChild, isVisibleChild} = React.useContext(ActionBarContext)
const {size, isVisibleChild} = React.useContext(ActionBarContext)
const {groupId} = React.useContext(ActionBarGroupContext)

// Storing the width in a ref ensures we don't forget about it when not visible
const widthRef = useRef<number>()

useIsomorphicLayoutEffect(() => {
const width = ref.current?.getBoundingClientRect().width
if (width) widthRef.current = width
if (!widthRef.current) return
const widthRef = useWidth(ref)

registerChild(id, {
const registryProps = useCallback(
(): ChildProps => ({
type: 'action',
label: props['aria-label'] ?? '',
icon: props.icon,
disabled: !!disabled,
onClick: onClick as MouseEventHandler,
width: widthRef.current,
groupId: groupId ?? undefined,
})
}),
[props, disabled, onClick, groupId, widthRef],
)

return () => {
unregisterChild(id)
}
}, [registerChild, unregisterChild, props['aria-label'], props.icon, disabled, onClick])
const id = ActionBarItemsRegistry.useRegisterDescendantCallback(registryProps)

const clickHandler = useCallback(
(event: React.MouseEvent<HTMLButtonElement>) => {
Expand Down Expand Up @@ -528,24 +526,11 @@ const ActionBarGroupContext = React.createContext<{
export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, forwardedRef) => {
const backupRef = useRef<HTMLDivElement>(null)
const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement>
const id = useId()
const {registerChild, unregisterChild} = React.useContext(ActionBarContext)
const widthRef = useWidth(ref)

// Like IconButton, we store the width in a ref to ensure that we don't forget about it when not visible
// If a child has a groupId, it won't be visible if the group isn't visible, so we don't need to check isVisibleChild here
const widthRef = useRef<number>()
const registryProps = useCallback((): ChildProps => ({type: 'group', width: widthRef.current}), [widthRef])

useIsomorphicLayoutEffect(() => {
const width = ref.current?.getBoundingClientRect().width
if (width) widthRef.current = width
if (!widthRef.current) return

registerChild(id, {type: 'group', width: widthRef.current})

return () => {
unregisterChild(id)
}
}, [registerChild, unregisterChild])
const id = ActionBarItemsRegistry.useRegisterDescendantCallback(registryProps)

return (
<ActionBarGroupContext.Provider value={{groupId: id}}>
Expand All @@ -563,33 +548,25 @@ export const ActionBarMenu = forwardRef(
) => {
const backupRef = useRef<HTMLButtonElement>(null)
const ref = (forwardedRef ?? backupRef) as RefObject<HTMLButtonElement>
const id = useId()
const {registerChild, unregisterChild, isVisibleChild} = React.useContext(ActionBarContext)
const {isVisibleChild} = React.useContext(ActionBarContext)

const [menuOpen, setMenuOpen] = useState(false)

// Like IconButton, we store the width in a ref to ensure that we don't forget about it when not visible
const widthRef = useRef<number>()

useIsomorphicLayoutEffect(() => {
const width = ref.current?.getBoundingClientRect().width
if (width) widthRef.current = width

if (!widthRef.current) return
const widthRef = useWidth(ref)

registerChild(id, {
const registryProps = useCallback(
(): ChildProps => ({
type: 'menu',
width: widthRef.current,
label: ariaLabel,
icon: overflowIcon ? overflowIcon : icon,
returnFocusRef,
items,
})
}),
[ariaLabel, overflowIcon, icon, items, returnFocusRef, widthRef],
)

return () => {
unregisterChild(id)
}
}, [registerChild, unregisterChild, ariaLabel, overflowIcon, icon, items])
const id = ActionBarItemsRegistry.useRegisterDescendantCallback(registryProps)

if (!isVisibleChild(id)) return null

Expand All @@ -608,21 +585,13 @@ export const ActionBarMenu = forwardRef(

export const VerticalDivider = () => {
const ref = useRef<HTMLDivElement>(null)
const id = useId()
const {registerChild, unregisterChild, isVisibleChild} = React.useContext(ActionBarContext)

// Storing the width in a ref ensures we don't forget about it when not visible
const widthRef = useRef<number>()
const {isVisibleChild} = React.useContext(ActionBarContext)

useIsomorphicLayoutEffect(() => {
const width = ref.current?.getBoundingClientRect().width
if (width) widthRef.current = width
if (!widthRef.current) return
const widthRef = useWidth(ref)

registerChild(id, {type: 'divider', width: widthRef.current})
const registryProps = useCallback((): ChildProps => ({type: 'divider', width: widthRef.current}), [widthRef])

return () => unregisterChild(id)
}, [registerChild, unregisterChild])
const id = ActionBarItemsRegistry.useRegisterDescendantCallback(registryProps)

if (!isVisibleChild(id)) return null
return <div ref={ref} data-component="ActionBar.VerticalDivider" aria-hidden="true" className={styles.Divider} />
Expand Down
Loading
Loading