export function SideNavigationSection()

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>
  );
}