Repository: equinor/design-system (ts)

Issue:
✨Add support for composite components in nextjs
Ref this issue https://github.com/equinor/design-system/issues/3702, our initial attempt to add 'use client' would not work in next.js, instead we discovered that sub components (such as Table.Header) are undefined. 

@sebastianvitterso started [this](https://github.com/vercel/next.js/issues/74585) discussion at vercel and then discovered [this](https://ivicabatinic.from.hr/posts/multipart-namespace-components-addressing-rsc-and-dot-notation-issues) article which gets to the bottom of the problem and proposes a couple of solutions. 

I think most realistically, exporting the subcomponents individually is how we should go about it. This is also how they've done it over at Designsystemet ([example](https://github.com/digdir/designsystemet/blob/next/packages/react/src/components/Details/index.ts)). 

Note also that individual exports have been [requested](https://github.com/equinor/design-system/issues/3038) in the past, but then the reasoning was to easier create jest tests downstream, so we denied the request for being not worth the effort. However, supporting ssr is perhaps a bit more important, so we should reconsider.

Pull request:
🧱 Export subcomponents individually for ssr support
resolves #3723 

Patch:
diff --git a/packages/eds-core-react/src/components/Accordion/index.ts b/packages/eds-core-react/src/components/Accordion/index.ts
index f22f0ee8..a250cda3 100644
--- a/packages/eds-core-react/src/components/Accordion/index.ts
+++ b/packages/eds-core-react/src/components/Accordion/index.ts
@@ -33,7 +33,14 @@ Accordion.HeaderTitle.displayName = 'Accordion.HeaderTitle'
 Accordion.HeaderActions.displayName = 'Accordion.HeaderActions'
 Accordion.Panel.displayName = 'Accordion.Panel'
 
-export { Accordion }
+export {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionHeaderTitle,
+  AccordionHeaderActions,
+  AccordionPanel,
+}
 export type {
   AccordionProps,
   AccordionPanelProps,
diff --git a/packages/eds-core-react/src/components/Banner/index.ts b/packages/eds-core-react/src/components/Banner/index.ts
index f6f12732..67862042 100644
--- a/packages/eds-core-react/src/components/Banner/index.ts
+++ b/packages/eds-core-react/src/components/Banner/index.ts
@@ -18,7 +18,7 @@ Banner.Icon.displayName = 'Banner.Icon'
 Banner.Message.displayName = 'Banner.Message'
 Banner.Actions.displayName = 'Banner.Actions'
 
-export { Banner }
+export { Banner, BannerIcon, BannerMessage, BannerActions }
 export type {
   BannerProps,
   BannerMessageProps,
diff --git a/packages/eds-core-react/src/components/Breadcrumbs/index.ts b/packages/eds-core-react/src/components/Breadcrumbs/index.ts
index 5612d528..26cec3ef 100644
--- a/packages/eds-core-react/src/components/Breadcrumbs/index.ts
+++ b/packages/eds-core-react/src/components/Breadcrumbs/index.ts
@@ -11,5 +11,5 @@ Breadcrumbs.Breadcrumb = Breadcrumb
 
 Breadcrumbs.Breadcrumb.displayName = 'Breadcrumbs.Breadcrumb'
 
-export { Breadcrumbs }
+export { Breadcrumbs, Breadcrumb }
 export type { BreadcrumbsProps, BreadcrumbProps }
diff --git a/packages/eds-core-react/src/components/Button/index.ts b/packages/eds-core-react/src/components/Button/index.ts
index 8515c0b8..b122c48e 100644
--- a/packages/eds-core-react/src/components/Button/index.ts
+++ b/packages/eds-core-react/src/components/Button/index.ts
@@ -14,5 +14,5 @@ Button.Toggle = ToggleButton
 Button.Group.displayName = 'Button.Group'
 Button.Toggle.displayName = 'Button.Toggle'
 
-export { Button }
+export { Button, ButtonGroup, ToggleButton }
 export type { ButtonProps, ButtonGroupProps, ToggleButtonProps }
diff --git a/packages/eds-core-react/src/components/Card/index.ts b/packages/eds-core-react/src/components/Card/index.ts
index a8b75576..76ed8879 100644
--- a/packages/eds-core-react/src/components/Card/index.ts
+++ b/packages/eds-core-react/src/components/Card/index.ts
@@ -26,7 +26,14 @@ Card.Header.displayName = 'Card.Header'
 Card.Media.displayName = 'Card.Media'
 Card.HeaderTitle.displayName = 'Card.HeaderTitle'
 
-export { Card }
+export {
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  CardHeaderTitle,
+}
 export type {
   CardProps,
   CardActionsProps,
diff --git a/packages/eds-core-react/src/components/Dialog/index.ts b/packages/eds-core-react/src/components/Dialog/index.ts
index b8386641..8c1fb7aa 100644
--- a/packages/eds-core-react/src/components/Dialog/index.ts
+++ b/packages/eds-core-react/src/components/Dialog/index.ts
@@ -25,7 +25,7 @@ Dialog.Title.displayName = 'Dialog.Title'
 Dialog.Content.displayName = 'Dialog.Content'
 Dialog.Header.displayName = 'Dialog.Header'
 
-export { Dialog }
+export { Dialog, DialogActions, DialogTitle, DialogContent, DialogHeader }
 export type {
   DialogProps,
   DialogActionsProps,
diff --git a/packages/eds-core-react/src/components/List/index.ts b/packages/eds-core-react/src/components/List/index.ts
index 28c5c3b9..ef16fd25 100644
--- a/packages/eds-core-react/src/components/List/index.ts
+++ b/packages/eds-core-react/src/components/List/index.ts
@@ -10,5 +10,5 @@ List.Item = ListItem
 
 List.Item.displayName = 'List.Item'
 
-export { List }
+export { List, ListItem }
 export type { ListProps, ListItemProps }
diff --git a/packages/eds-core-react/src/components/Menu/index.tsx b/packages/eds-core-react/src/components/Menu/index.tsx
index 6656deda..d3843073 100644
--- a/packages/eds-core-react/src/components/Menu/index.tsx
+++ b/packages/eds-core-react/src/components/Menu/index.tsx
@@ -14,5 +14,5 @@ Menu.Section = MenuSection
 Menu.Item.displayName = 'Menu.Item'
 Menu.Section.displayName = 'Menu.Section'
 
-export { Menu }
+export { Menu, MenuItem, MenuSection }
 export type { MenuProps, MenuItemProps, MenuSectionProps }
diff --git a/packages/eds-core-react/src/components/Popover/index.ts b/packages/eds-core-react/src/components/Popover/index.ts
index bfa99412..950a33ba 100644
--- a/packages/eds-core-react/src/components/Popover/index.ts
+++ b/packages/eds-core-react/src/components/Popover/index.ts
@@ -22,7 +22,7 @@ Popover.Content.displayName = 'Popover.Content'
 Popover.Header.displayName = 'Popover.Header'
 Popover.Actions.displayName = 'Popover.Actions'
 
-export { Popover }
+export { Popover, PopoverTitle, PopoverContent, PopoverHeader, PopoverActions }
 export type {
   PopoverProps,
   PopoverContentProps,
diff --git a/packages/eds-core-react/src/components/SideBar/index.ts b/packages/eds-core-react/src/components/SideBar/index.ts
index 44f62583..dc0be602 100644
--- a/packages/eds-core-react/src/components/SideBar/index.ts
+++ b/packages/eds-core-react/src/components/SideBar/index.ts
@@ -35,5 +35,15 @@ SideBar.Button.displayName = 'SideBar.Button'
 SideBar.Accordion.displayName = 'SideBar.Accordion'
 SideBar.AccordionItem.displayName = 'SideBar.AccordionItem'
 
-export { SideBar, useSideBar }
+export {
+  SideBar,
+  useSideBar,
+  SidebarLink,
+  SideBarContent,
+  SideBarFooter,
+  SideBarToggle,
+  SideBarButton,
+  SideBarAccordion,
+  SideBarAccordionItem,
+}
 export type { SidebarType, SidebarLinkProps }
diff --git a/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx b/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx
index a6d194b2..b54dba5c 100644
--- a/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx
+++ b/packages/eds-core-react/src/components/SideSheet/SideSheet.tsx
@@ -54,6 +54,7 @@ const Header = styled.div`
   padding-right: 10px;
   & > button {
     margin-left: auto;
+    flex-shrink: 0;
   }
 `
 
diff --git a/packages/eds-core-react/src/components/Snackbar/index.ts b/packages/eds-core-react/src/components/Snackbar/index.ts
index f01a356d..c5d3eded 100644
--- a/packages/eds-core-react/src/components/Snackbar/index.ts
+++ b/packages/eds-core-react/src/components/Snackbar/index.ts
@@ -8,5 +8,5 @@ type SnackbarTypes = typeof BaseComponent & {
 const Snackbar = BaseComponent as SnackbarTypes
 Snackbar.Action = SnackbarAction
 
-export { Snackbar }
+export { Snackbar, SnackbarAction }
 export type { SnackbarProps, SnackbarActionProps }
diff --git a/packages/eds-core-react/src/components/Table/index.tsx b/packages/eds-core-react/src/components/Table/index.tsx
index 03418cde..2d7f14c4 100644
--- a/packages/eds-core-react/src/components/Table/index.tsx
+++ b/packages/eds-core-react/src/components/Table/index.tsx
@@ -1,28 +1,28 @@
 import { Table as BaseTable, TableProps } from './Table'
-import { Body, BodyProps } from './Body'
-import { Cell, CellProps } from './Cell'
-import { Head, HeadProps } from './Head'
-import { Foot, FootProps } from './Foot'
-import { Row, RowProps } from './Row'
-import { Caption, CaptionProps } from './Caption'
+import { Body as TableBody, BodyProps } from './Body'
+import { Cell as TableCell, CellProps } from './Cell'
+import { Head as TableHead, HeadProps } from './Head'
+import { Foot as TableFoot, FootProps } from './Foot'
+import { Row as tableRow, RowProps } from './Row'
+import { Caption as TableCaption, CaptionProps } from './Caption'
 
 type TableCompoundProps = typeof BaseTable & {
-  Body: typeof Body
-  Cell: typeof Cell
-  Head: typeof Head
-  Foot: typeof Foot
-  Row: typeof Row
-  Caption: typeof Caption
+  Body: typeof TableBody
+  Cell: typeof TableCell
+  Head: typeof TableHead
+  Foot: typeof TableFoot
+  Row: typeof tableRow
+  Caption: typeof TableCaption
 }
 
 const Table = BaseTable as TableCompoundProps
 
-Table.Body = Body
-Table.Cell = Cell
-Table.Head = Head
-Table.Foot = Foot
-Table.Row = Row
-Table.Caption = Caption
+Table.Body = TableBody
+Table.Cell = TableCell
+Table.Head = TableHead
+Table.Foot = TableFoot
+Table.Row = tableRow
+Table.Caption = TableCaption
 
 Table.Body.displayName = 'Table.Body'
 Table.Cell.displayName = 'Table.Cell'
@@ -31,7 +31,15 @@ Table.Foot.displayName = 'Table.Foot'
 Table.Row.displayName = 'Table.Row'
 Table.Caption.displayName = 'Table.Caption'
 
-export { Table }
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableFoot,
+  tableRow,
+  TableCaption,
+}
 export type {
   TableProps,
   CellProps,
diff --git a/packages/eds-core-react/src/components/TableOfContents/index.ts b/packages/eds-core-react/src/components/TableOfContents/index.ts
index 2ea06ddf..a6edc938 100644
--- a/packages/eds-core-react/src/components/TableOfContents/index.ts
+++ b/packages/eds-core-react/src/components/TableOfContents/index.ts
@@ -2,17 +2,20 @@ import {
   TableOfContents as BaseComponent,
   TableOfContentsProps,
 } from './TableOfContents'
-import { LinkItem, TableOfContentsLinkItemProps } from './LinkItem'
+import {
+  LinkItem as TableOfContentsLinkItem,
+  TableOfContentsLinkItemProps,
+} from './LinkItem'
 
 type TableOfContentsCompoundProps = typeof BaseComponent & {
-  LinkItem: typeof LinkItem
+  LinkItem: typeof TableOfContentsLinkItem
 }
 
 const TableOfContents = BaseComponent as TableOfContentsCompoundProps
 
-TableOfContents.LinkItem = LinkItem
+TableOfContents.LinkItem = TableOfContentsLinkItem
 
 TableOfContents.LinkItem.displayName = 'TableOfContents.LinkItem'
 
-export { TableOfContents }
+export { TableOfContents, TableOfContentsLinkItem }
 export type { TableOfContentsProps, TableOfContentsLinkItemProps }
diff --git a/packages/eds-core-react/src/components/Tabs/index.ts b/packages/eds-core-react/src/components/Tabs/index.ts
index 8f554930..9903c1f4 100644
--- a/packages/eds-core-react/src/components/Tabs/index.ts
+++ b/packages/eds-core-react/src/components/Tabs/index.ts
@@ -23,5 +23,5 @@ Tabs.Panels.displayName = 'Tabs.Panels'
 Tabs.Panel.displayName = 'Tabs.Panel'
 Tabs.List.displayName = 'Tabs.List'
 
-export { Tabs }
+export { Tabs, Tab, TabPanels, TabPanel, TabList }
 export type { TabsProps, TabProps, TabListProps, TabPanelProps, TabPanelsProps }
diff --git a/packages/eds-core-react/src/components/TopBar/index.tsx b/packages/eds-core-react/src/components/TopBar/index.tsx
index 4a8be608..a333dd86 100644
--- a/packages/eds-core-react/src/components/TopBar/index.tsx
+++ b/packages/eds-core-react/src/components/TopBar/index.tsx
@@ -1,25 +1,28 @@
 import { TopBar as BaseComponent, TopbarProps } from './TopBar'
-import { Actions, TopbarActionsProps } from './Actions'
-import { Header, TopbarHeaderProps } from './Header'
-import { CustomContent, TopbarCustomContentProps } from './CustomContent'
+import { Actions as TopbarActions, TopbarActionsProps } from './Actions'
+import { Header as TopbarHeader, TopbarHeaderProps } from './Header'
+import {
+  CustomContent as TopbarCustomContent,
+  TopbarCustomContentProps,
+} from './CustomContent'
 
 type TopbarCompoundProps = typeof BaseComponent & {
-  Actions: typeof Actions
-  Header: typeof Header
-  CustomContent: typeof CustomContent
+  Actions: typeof TopbarActions
+  Header: typeof TopbarHeader
+  CustomContent: typeof TopbarCustomContent
 }
 
 const TopBar = BaseComponent as TopbarCompoundProps
 
-TopBar.Actions = Actions
-TopBar.Header = Header
-TopBar.CustomContent = CustomContent
+TopBar.Actions = TopbarActions
+TopBar.Header = TopbarHeader
+TopBar.CustomContent = TopbarCustomContent
 
 TopBar.Actions.displayName = 'Topbar.Actions'
 TopBar.Header.displayName = 'Topbar.Header'
 TopBar.CustomContent.displayName = 'Topbar.CustomContent'
 
-export { TopBar }
+export { TopBar, TopbarActions, TopbarHeader, TopbarCustomContent }
 export type {
   TopbarProps,
   TopbarActionsProps,
diff --git a/packages/eds-lab-react/Dockerfile.storybook b/packages/eds-lab-react/Dockerfile.storybook
index 305a1fa2..f76c0b64 100644
--- a/packages/eds-lab-react/Dockerfile.storybook
+++ b/packages/eds-lab-react/Dockerfile.storybook
@@ -1,4 +1,4 @@
-FROM nginx:1.27.2-alpine
+FROM nginx:1.27.4-alpine
 
 WORKDIR /app
 


Test patch:
diff --git a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
index 878092cf..f80b6f6c 100644
--- a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
+++ b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
@@ -134,6 +134,7 @@ exports[`SideSheet Matches snapshot 1`] = `
 
 .c1>button {
   margin-left: auto;
+  flex-shrink: 0;
 }
 
 @media (hover:hover) and (pointer:fine) {