diff --git a/src/TableOfContents/index.tsx b/src/TableOfContents/index.tsx index 8ed983bd..329384c7 100644 --- a/src/TableOfContents/index.tsx +++ b/src/TableOfContents/index.tsx @@ -24,6 +24,7 @@ export type TableOfContentsItem = { isLoading?: boolean; isDisabled?: boolean; showSkeleton?: boolean; + startExpanded?: boolean; action?: { icon?: FAIconProp; name?: string; @@ -105,7 +106,10 @@ function TableOfContentsInner, 'className' | 'contents' | 'rowComponent' | 'rowComponentExtraProps'>) { - const [expanded, setExpanded] = React.useState({}); + const [expanded, setExpanded] = React.useState(() => { + const itemsToExpand = contents.filter(item => item.startExpanded); + return Object.fromEntries(itemsToExpand.map(item => [contents.indexOf(item), true])); + }); // an array of functions. Invoking the N-th function toggles the expanded flag on the N-th content item const toggleExpandedFunctions = React.useMemo(() => { diff --git a/src/__fixtures__/table-of-contents/tree.ts b/src/__fixtures__/table-of-contents/tree.ts index deabaebc..91c93af0 100644 --- a/src/__fixtures__/table-of-contents/tree.ts +++ b/src/__fixtures__/table-of-contents/tree.ts @@ -12,6 +12,7 @@ export const tree: ITableOfContentsLink[] = [ type: 'group', to: '/path', icon: 'cloud', + startExpanded: true, }, { name: 'Nested Item with text icon',