@storybook/react-native-ui 8.0.0-alpha.4 → 8.2.0-alpha.1

package/src/Sidebar.tsx

@@ -1,21 +1,13 @@
 import React, { useMemo } from 'react';
-
 import { styled } from '@storybook/react-native-theming';
-// import { ScrollArea, Spaced } from '@storybook/components';
-import type { State } from '@storybook/manager-api';
-
+import type { State } from '@storybook/core/manager-api';
 import type {
   Addon_SidebarBottomType,
   Addon_SidebarTopType,
   API_LoadedRefData,
-} from '@storybook/types';
-// import type { HeadingProps } from './Heading';
-// import { Heading } from './Heading';
-
+} from '@storybook/core/types';
 import { Explorer } from './Explorer';
-
 import { Search } from './Search';
-
 import { SearchResults } from './SearchResults';
 import type { CombinedDataset, Selection } from './types';
 import { useLastViewed } from './useLastViewed';
@@ -23,43 +15,21 @@ import { DEFAULT_REF_ID } from './constants';
 import { View } from 'react-native';
 
 const Container = styled.View(({ theme }) => ({
-  // position: 'absolute',
-  // zIndex: 1,
-  // left: 0,
-  // top: 0,
-  // bottom: 0,
-  // right: 0,
   width: '100%',
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
   background: theme.background.content,
-
-  // [MEDIA_DESKTOP_BREAKPOINT]: {
-  //   background: theme.background.app,
-  // },
 }));
 
 const Top = styled.View({
   paddingLeft: 4,
   paddingRight: 4,
-  // paddingBottom: 20,
   paddingTop: 16,
   flex: 1,
   flexDirection: 'row',
 });
 
-// const Bottom = styled.View(({ theme }) => ({
-//   borderTopWidth: 1,
-//   borderTopColor: theme.appBorderColor,
-//   padding: theme.layoutMargin / 2,
-//   display: 'flex',
-//   flexDirection: 'row',
-//   flexWrap: 'wrap',
-//   gap: theme.layoutMargin / 2,
-//   backgroundColor: theme.barBg,
-// }));
-
 const Swap = React.memo(function Swap({
   children,
   condition,
@@ -104,15 +74,12 @@ export const useCombination = (
 export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   status: State['status'];
-  // menu: any[];
   extra: Addon_SidebarTopType[];
   bottom?: Addon_SidebarBottomType[];
   storyId?: string;
   refId?: string;
   menuHighlighted?: boolean;
   setSelection: (selection: Selection) => void;
-  // enableShortcuts?: boolean;
-  // onMenuClick?: HeadingProps['onMenuClick'];
 }
 
 export const Sidebar = React.memo(function Sidebar({
@@ -122,25 +89,16 @@ export const Sidebar = React.memo(function Sidebar({
   indexError,
   status,
   previewInitialized,
-  // menu,
-  // extra,
-  // bottom = [],
-  // menuHighlighted = false,
-  // enableShortcuts = true,
   refs = {},
   setSelection,
-}: // onMenuClick,
-SidebarProps) {
+}: SidebarProps) {
   const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
-  // const isLoading = !index && !indexError;
   const lastViewedProps = useLastViewed(selected);
 
-  // const scrollRef = useRef<ScrollView>(null);
-  // const insets = useSafeAreaInsets();
   return (
-    <Container style={{ paddingHorizontal: 10 }} /* className="container sidebar-container" */>
-      <Top /* row={1.6} */>
+    <Container style={{ paddingHorizontal: 10 }}>
+      <Top>
         {/* <Heading
             className="sidebar-header"
             menuHighlighted={menuHighlighted}
@@ -150,20 +108,8 @@ SidebarProps) {
             isLoading={isLoading}
             onMenuClick={onMenuClick}
           /> */}
-        <Search
-          dataset={dataset}
-          setSelection={setSelection}
-          /* enableShortcuts={enableShortcuts} */ {...lastViewedProps}
-        >
-          {({
-            query,
-            results,
-            isBrowsing,
-            closeMenu,
-            // getMenuProps,
-            getItemProps,
-            highlightedIndex,
-          }) => (
+        <Search dataset={dataset} setSelection={setSelection} {...lastViewedProps}>
+          {({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => (
             <Swap condition={isBrowsing}>
               <Explorer
                 dataset={dataset}
@@ -177,10 +123,8 @@ SidebarProps) {
                 query={query}
                 results={results}
                 closeMenu={closeMenu}
-                // getMenuProps={getMenuProps}
                 getItemProps={getItemProps}
                 highlightedIndex={highlightedIndex}
-                // enableShortcuts={enableShortcuts}
                 isLoading={false}
                 clearLastViewed={lastViewedProps.clearLastViewed}
               />
@@ -188,13 +132,6 @@ SidebarProps) {
           )}
         </Search>
       </Top>
-      {/* {isLoading ? null : (
-        <Bottom>
-          {bottom.map(({ id, render: Render }) => (
-            <Render key={id} />
-          ))}
-        </Bottom>
-      )} */}
     </Container>
   );
 });

package/src/Tree.stories.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import type { ComponentEntry, IndexHash } from '@storybook/manager-api';
-
+import type { ComponentEntry, IndexHash } from '@storybook/core/manager-api';
 import type { StoryObj, Meta } from '@storybook/react';
 import { Tree } from './Tree';
 import { index } from './mockdata.large';
@@ -54,13 +53,7 @@ export const Full: Story = {
   render: function Render(args) {
     const [selectedId, setSelectedId] = useState(storyId);
     return (
-      <Tree
-        {...args}
-        data={index}
-        selectedStoryId={selectedId}
-        onSelectStoryId={setSelectedId}
-        // highlightedRef={{ current: { itemId: selectedId, refId: DEFAULT_REF_ID } }}
-      />
+      <Tree {...args} data={index} selectedStoryId={selectedId} onSelectStoryId={setSelectedId} />
     );
   },
 };
@@ -130,7 +123,6 @@ export const SingleStoryComponents: Story = {
             return acc;
           }, {} as IndexHash),
         }}
-        // highlightedRef={{ current: { itemId: selectedId, refId: DEFAULT_REF_ID } }}
         selectedStoryId={selectedId}
         onSelectStoryId={setSelectedId}
       />

package/src/Tree.tsx

@@ -1,12 +1,10 @@
 import type {
-  API,
   ComponentEntry,
   GroupEntry,
   State,
   StoriesHash,
   StoryEntry,
-} from '@storybook/manager-api';
-import { useStorybookApi } from '@storybook/manager-api';
+} from '@storybook/core/manager-api';
 import { styled } from '@storybook/react-native-theming';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { IconButton } from './IconButton';
@@ -22,20 +20,6 @@ import { CollapseAllIcon } from './icon/CollapseAllIcon';
 import { Item } from './types';
 import { useLayout } from './LayoutProvider';
 
-// export type Item = StoriesHash[keyof StoriesHash];
-
-// export const createId = (itemId: string, refId?: string) =>
-//   !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`;
-
-// export const statusPriority: API_StatusValue[] = ['unknown', 'pending', 'success', 'warn', 'error'];
-
-// export const getHighestStatus = (statuses: API_StatusValue[]): API_StatusValue => {
-//   return statusPriority.reduce(
-//     (acc, status) => (statuses.includes(status) ? status : acc),
-//     'unknown'
-//   );
-// };
-
 interface NodeProps {
   item: Item;
   refId: string;
@@ -50,12 +34,10 @@ interface NodeProps {
   setFullyExpanded?: () => void;
   onSelectStoryId: (itemId: string) => void;
   status: State['status'][keyof State['status']];
-  api: API;
 }
 
 export const Node = React.memo<NodeProps>(function Node({
   item,
-  //   status,
   refId,
   isOrphan,
   isDisplayed,
@@ -66,7 +48,6 @@ export const Node = React.memo<NodeProps>(function Node({
   isExpanded,
   setExpanded,
   onSelectStoryId,
-  api: _1,
 }) {
   const { isDesktop, isMobile, closeMobileMenu } = useLayout();
 
@@ -78,16 +59,12 @@ export const Node = React.memo<NodeProps>(function Node({
 
   if (item.type === 'story') {
     const LeafNode = StoryNode;
-    // const statusValue = getHighestStatus(Object.values(status || {}).map((s) => s.status));
-    // const [icon, textColor] = statusMapping[statusValue];
 
     return (
       <LeafNodeStyleWrapper>
         <LeafNode
           selected={isSelected}
-          //   style={isSelected ? {} : { color: textColor }}
           key={id}
-          //   href={getLink(item, refId)}
           id={id}
           depth={isOrphan ? item.depth : item.depth - 1}
           onPress={() => {
@@ -103,16 +80,8 @@ export const Node = React.memo<NodeProps>(function Node({
 
   if (item.type === 'root') {
     return (
-      <RootNode
-        key={id}
-        id={id}
-        // className="sidebar-subheading"
-        // data-ref-id={refId}
-        // data-item-id={item.id}
-        // data-nodetype="root"
-      >
+      <RootNode key={id} id={id}>
         <CollapseButton
-          //   type="button"
           data-action="collapse-root"
           onPress={(event) => {
             event.preventDefault();
@@ -121,11 +90,10 @@ export const Node = React.memo<NodeProps>(function Node({
           aria-expanded={isExpanded}
         >
           <CollapseIcon isExpanded={isExpanded} />
-          <Text>{item.renderLabel?.(item) || item.name}</Text>
+          <Text>{item.renderLabel?.(item, {}) || item.name}</Text>
         </CollapseButton>
         {isExpanded && (
           <IconButton
-            // className="sidebar-subheading-action"
             aria-label={isFullyExpanded ? 'Expand' : 'Collapse'}
             data-action="expand-all"
             data-expanded={isFullyExpanded}
@@ -147,12 +115,6 @@ export const Node = React.memo<NodeProps>(function Node({
       <BranchNode
         key={id}
         id={id}
-        // className="sidebar-item"
-        // data-ref-id={refId}
-        // data-item-id={item.id}
-        // data-parent-id={item.parent}
-        // data-nodetype={item.type === 'component' ? 'component' : 'group'}
-        // data-highlightable={isDisplayed}
         aria-controls={item.children && item.children[0]}
         aria-expanded={isExpanded}
         depth={isOrphan ? item.depth : item.depth - 1}
@@ -202,7 +164,6 @@ export const RootNodeText = styled.Text(({ theme }) => ({
   color: theme.textMutedColor,
   lineHeight: 16,
   letterSpacing: 2.5,
-  //   letterSpacing: '0.16em',
   textTransform: 'uppercase',
 }));
 
@@ -212,7 +173,6 @@ const CollapseButton = styled.TouchableOpacity(({}) => ({
   paddingVertical: 0,
   paddingHorizontal: 8,
   borderRadius: 4,
-  //   transition: 'color 150ms, box-shadow 150ms',
   gap: 6,
   alignItems: 'center',
   cursor: 'pointer',
@@ -228,18 +188,8 @@ export const Tree = React.memo<{
   docsMode: boolean;
   selectedStoryId: string | null;
   onSelectStoryId: (storyId: string) => void;
-}>(function Tree({
-  // isBrowsing,
-  isMain,
-  refId,
-  data,
-  status,
-  docsMode,
-  selectedStoryId,
-  onSelectStoryId,
-}) {
+}>(function Tree({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
   const containerRef = useRef<View>(null);
-  const api = useStorybookApi();
 
   // Find top-level nodes and group them so we can hoist any orphans and expand any roots.
   const [rootIds, orphanIds, initialExpanded] = useMemo(
@@ -331,14 +281,10 @@ export const Tree = React.memo<{
 
   // Track expanded nodes, keep it in sync with props and enable keyboard shortcuts.
   const [expanded, setExpanded] = useExpanded({
-    // containerRef,
-    // isBrowsing,
     refId,
     data: collapsedData,
     initialExpanded,
     rootIds,
-    // highlightedRef,
-    // setHighlightedItemId,
     selectedStoryId,
     onSelectStoryId,
   });
@@ -354,7 +300,6 @@ export const Tree = React.memo<{
         const descendants = expandableDescendants[item.id];
         const isFullyExpanded = descendants.every((d: string) => expanded[d]);
         return (
-          // @ts-expect-error (TODO)
           <Root
             key={id}
             item={item}
@@ -367,6 +312,9 @@ export const Tree = React.memo<{
             isFullyExpanded={isFullyExpanded}
             expandableDescendants={descendants}
             onSelectStoryId={onSelectStoryId}
+            docsMode={false}
+            color=""
+            status={{}}
           />
         );
       }
@@ -376,7 +324,6 @@ export const Tree = React.memo<{
 
       return (
         <Node
-          api={api}
           key={id}
           item={item}
           status={status?.[itemId]}
@@ -394,7 +341,6 @@ export const Tree = React.memo<{
     });
   }, [
     ancestry,
-    api,
     collapsedData,
     collapsedItems,
     docsMode,

package/src/TreeNode.stories.tsx

@@ -1,12 +1,7 @@
-import React from 'react';
-// import { HighlightStyles } from './HighlightStyles';
-// import { LeafNodeStyleWrapper } from './Tree';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ComponentNode, GroupNode, StoryNode } from './TreeNode';
 import { View } from 'react-native';
 
-// import { IconSymbols } from './IconSymbols';
-
 const meta = {
   title: 'UI/Sidebar/TreeNode',
   parameters: { layout: 'fullscreen' },

package/src/TreeNode.tsx

@@ -62,7 +62,6 @@ const LeafNode = styled.TouchableOpacity<{ depth?: number; selected?: boolean }>
     paddingTop: 5,
     paddingBottom: 4,
     backgroundColor: selected ? theme.color.secondary : undefined,
-    // flex: 1,
     // not sure 👇
     width: '100%',
     borderRadius: 4,

package/src/icon/CloseIcon.tsx

@@ -1,22 +1,23 @@
-import * as React from 'react';
-
 import { Path, Svg, SvgProps } from 'react-native-svg';
 
-export const CloseIcon =
-  /* @__PURE__ */
-  ({ color = 'currentColor', width = 14, height = 14, ...props }: SvgProps) => {
-    return (
-      <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
-        <Path
-          d="M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z"
-          fill={color}
-        />
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
-          fill={color}
-        />
-      </Svg>
-    );
-  };
+export const CloseIcon = ({
+  color = 'currentColor',
+  width = 14,
+  height = 14,
+  ...props
+}: SvgProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        d="M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icon/MenuIcon.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Path, Svg, SvgProps } from 'react-native-svg';
 
 export const MenuIcon = ({

package/src/icon/SearchIcon.tsx

@@ -1,17 +1,20 @@
 import * as React from 'react';
 import { Path, Svg, SvgProps } from 'react-native-svg';
 
-export const SearchIcon =
-  /* @__PURE__ */
-  ({ color = 'currentColor', width = 14, height = 14, ...props }: SvgProps) => {
-    return (
-      <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
-          fill={color}
-        />
-      </Svg>
-    );
-  };
+export const SearchIcon = ({
+  color = 'currentColor',
+  width = 14,
+  height = 14,
+  ...props
+}: SvgProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/index.tsx

@@ -7,3 +7,4 @@ export * from './Explorer';
 export * from './Sidebar';
 export * from './types';
 export * from './Layout';
+export * from './util/StoryHash';

package/src/mockdata.ts

@@ -1,4 +1,4 @@
-import type { API_HashEntry } from '@storybook/types';
+import type { API_HashEntry } from '@storybook/core/types';
 
 export type MockDataSet = Record<string, Record<string, Partial<API_HashEntry>>>;
 

package/src/types.ts

@@ -1,6 +1,5 @@
-import type { StoriesHash, State } from '@storybook/manager-api';
-// import type { ControllerStateAndHelpers } from 'downshift';
-import type { API_StatusState, API_StatusValue } from '@storybook/types';
+import type { StoriesHash, State } from '@storybook/core/manager-api';
+import type { API_StatusState, API_StatusValue } from '@storybook/core/types';
 import * as Fuse from 'fuse.js';
 import { PressableProps } from 'react-native';
 
@@ -26,19 +25,10 @@ export interface StoryRef {
 export type Highlight = ItemRef | null;
 export type Selection = StoryRef | null;
 
-// export interface Match {
-//   value: string;
-//   indices: [number, number][];
-//   key: 'name' | 'path';
-//   arrayIndex: number;
-// }
-
 export function isExpandType(x: any): x is ExpandType {
   return !!(x && x.showAll);
 }
-// export function isSearchResult(x: any): x is SearchResult {
-//   return !!(x && x.item);
-// }
+
 export interface ExpandType {
   showAll: () => void;
   totalCount: number;
@@ -60,7 +50,6 @@ export type SearchResultProps = SearchResult & {
   onPress: PressableProps['onPress'];
 };
 
-// export type DownshiftItem = SearchResult | ExpandType;
 export type GetSearchItemProps = (args: {
   item: SearchResult;
   index: number;
@@ -72,7 +61,6 @@ export type SearchChildrenFn = (args: {
   results: SearchResult[]; // TODO fix this type
   isBrowsing: boolean;
   closeMenu: (cb?: () => void) => void;
-  // getMenuProps: ControllerStateAndHelpers<DownshiftItem>['getMenuProps'];
   getItemProps: GetSearchItemProps;
   highlightedIndex: number | null;
 }) => React.ReactNode;

package/src/useExpanded.ts

@@ -1,12 +1,7 @@
-import type { StoriesHash } from '@storybook/manager-api';
-import { useStorybookApi } from '@storybook/manager-api';
-import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
-
-import type { Dispatch, /* MutableRefObject, */ Reducer } from 'react';
+import type { StoriesHash } from '@storybook/core/manager-api';
+import type { Dispatch, Reducer } from 'react';
 import { useCallback, useEffect, useReducer } from 'react';
-// import type { Highlight } from './types';
-
-import { /* isAncestor */ getAncestorIds /* getDescendantIds */ } from './util/tree';
+import { getAncestorIds } from './util/tree';
 
 export type ExpandedState = Record<string, boolean>;
 
@@ -16,29 +11,21 @@ export interface ExpandAction {
 }
 
 export interface ExpandedProps {
-  //   containerRef: MutableRefObject<HTMLElement>;
-  //   isBrowsing: boolean;
   refId: string;
   data: StoriesHash;
   initialExpanded?: ExpandedState;
   rootIds: string[];
-  //   highlightedRef: MutableRefObject<Highlight>;
-  //   setHighlightedItemId: (storyId: string) => void;
   selectedStoryId: string | null;
   onSelectStoryId: (storyId: string) => void;
 }
 
 const initializeExpanded = ({
-  //   refId,
-  //   data,
   initialExpanded,
-  //   highlightedRef,
   rootIds,
 }: {
   refId: string;
   data: StoriesHash;
   initialExpanded?: ExpandedState;
-  //   highlightedRef: MutableRefObject<Highlight>;
   rootIds: string[];
 }) => {
   const highlightedAncestors = [];
@@ -48,22 +35,13 @@ const initializeExpanded = ({
   );
 };
 
-const noop = () => {};
-
 export const useExpanded = ({
-  //   containerRef,
-  //   isBrowsing,
   refId,
   data,
   initialExpanded,
   rootIds,
-  //   highlightedRef,
-  //   setHighlightedItemId,
-  // onSelectStoryId,
   selectedStoryId,
 }: ExpandedProps): [ExpandedState, Dispatch<ExpandAction>] => {
-  const api = useStorybookApi();
-
   // Track the set of currently expanded nodes within this tree.
   // Root nodes are expanded by default.
   const [expanded, setExpanded] = useReducer<
@@ -71,33 +49,18 @@ export const useExpanded = ({
     {
       refId: string;
       data: StoriesHash;
-      //   highlightedRef: MutableRefObject<Highlight>;
       rootIds: string[];
       initialExpanded: ExpandedState;
     }
   >(
     (state, { ids, value }) =>
       ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
-    { refId, data, /* highlightedRef */ rootIds, initialExpanded },
+    { refId, data, rootIds, initialExpanded },
     initializeExpanded
   );
 
-  //   const highlightElement = useCallback(
-  //     (element: Element) => {
-  //       setHighlightedItemId(element.getAttribute('data-item-id'));
-  //     //   scrollIntoView(element);
-  //     },
-  //     [setHighlightedItemId]
-  //   );
-
   const updateExpanded = useCallback(({ ids, value }: ExpandAction) => {
     setExpanded({ ids, value });
-    //   if (ids.length === 1) {
-    //     const element = containerRef.current?.querySelector(
-    //       `[data-item-id="${ids[0]}"][data-ref-id="${refId}"]`
-    //     );
-    //     if (element) highlightElement(element);
-    //   }
   }, []);
 
   // Expand the whole ancestry of the currently selected story whenever it changes.
@@ -105,26 +68,5 @@ export const useExpanded = ({
     setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
   }, [data, selectedStoryId]);
 
-  const collapseAll = useCallback(() => {
-    const ids = Object.keys(data).filter((id) => !rootIds.includes(id));
-    setExpanded({ ids, value: false });
-  }, [data, rootIds]);
-
-  const expandAll = useCallback(() => {
-    setExpanded({ ids: Object.keys(data), value: true });
-  }, [data]);
-
-  useEffect(() => {
-    if (!api) return noop;
-
-    api.on(STORIES_COLLAPSE_ALL, collapseAll);
-    api.on(STORIES_EXPAND_ALL, expandAll);
-
-    return () => {
-      api.off(STORIES_COLLAPSE_ALL, collapseAll);
-      api.off(STORIES_EXPAND_ALL, expandAll);
-    };
-  }, [api, collapseAll, expandAll]);
-
   return [expanded, updateExpanded];
 };