in src/side-navigation/side-navigation-next.tsx [273:346]
export function SideNavigationSection(props: SideNavigationSectionProps) {
const {
active = false,
children,
forceOpen = false,
indent = 0,
overrides: { List, ListItem, ...overrides } = {},
startEnhancer,
title,
} = props;
const [, theme] = useStyletron();
const { activeItemId } = useContext(SideNavigationContext);
const [open, setOpen] = useState(false);
const uid = useUID();
useEffect(() => {
let childIsActive = false;
if (activeItemId != null) {
let stack = React.Children.toArray(children);
while (stack.length) {
const current = stack.pop();
if (isValidElement(current)) {
if (current.props.id === activeItemId) {
childIsActive = true;
break;
}
if (current.props.children) {
stack = stack.concat(React.Children.toArray(current.props.children));
}
}
}
}
if (childIsActive) {
setOpen(true);
} else {
setOpen(false);
}
}, [activeItemId, children]);
useEffect(() => {
if (forceOpen) {
setOpen(true);
}
}, [forceOpen]);
if (React.Children.toArray(children).filter(React.isValidElement).length === 0) {
return null;
}
const Chevron = open ? ChevronUp : ChevronDown;
const [OverridedList, overridedListProps] = getOverrides(List, StyledList);
const [OverridedListItem, overridedListItemProps] = getOverrides(ListItem, StyledListItem);
return (
<OverridedListItem {...overridedListItemProps}>
<Item
ariaControls={uid}
ariaExpanded={open}
endEnhancer={<Chevron title="" size={theme.sizing.scale800} />}
label={title}
indent={indent}
onClick={() => setOpen((prev) => !prev)}
overrides={overrides}
startEnhancer={startEnhancer}
/>
<OverridedList id={uid} $open={open} {...overridedListProps}>
{React.Children.map(children, (child) =>
child === null ? null : React.cloneElement(child, { indent: indent + 1 })
)}
</OverridedList>
</OverridedListItem>
);
}