Tabs component should walkthrough it's children

[matthewlal]

When registering Tabs, TabList, Tab, TabPanel as custom components in the Builder.io Visual Editor then setting up Layers / DOM in the Builder Visual Editor, ie:

• Tabs
  • TabList
  • Tab
  • TabPanel

I get this error:

Actual value for useContext(qui--tab-list) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.

I tried this as workaround in the Tabs component I registered as a custom component, which got rid of the error, but the component wasn't displaying anything.

export const CustomTabs = component$((props: TabsProps) => {
  useContextProvider(tabsContextId, {
    selectTab$: $(() => {}),
    onTabKeyDown$: $(() => {}),
    selectIfAutomatic$: $(() => {}),
    selectedTabIdSig: useSignal(''),
    tabsPrefix: ''
  })
  useContext(tabsContextId)

  return (
      <Tabs>
        <Slot/>
      </Tabs>
  )
}

I also tried using the inline Tabs implementation to inform the Tabs component that its subcomponents are wrapped by <Blocks/> from Builder.io when being registered as a custom component, but this also didn't work.

Currently my workaround to enable Builder.io editors and designers to make any Tabs is to make a custom component with all the components in it (Tabs, TabList, Tab, TabPanel) then handle it's children to dynamically customize how I should render the TabList, Tab, and TabPanel, and also implement a way to handle repeat.collection to dynamically bind many Tabs and TabPanels.

I reviewed this issue with @thejackshelton and he believes the issue is that Tabs component needs to be able to walk through its children regardless of its direct children.