Revert "Use SSR-compatible slot implementation in ActionList/NavList (#…

…3173)"

This reverts commit 6b900e9.

src/ActionList/Description.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import Box from '../Box'
-import Truncate from '../Truncate'
 import {SxProp, merge} from '../sx'
-import {ItemContext} from './shared'
+import Truncate from '../Truncate'
+import {Slot, ItemContext} from './shared'
 
 export type ActionListDescriptionProps = {
   /**
@@ -28,25 +28,29 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
     marginLeft: variant === 'block' ? 0 : 2,
   }
 
-  const {blockDescriptionId, inlineDescriptionId, disabled} = React.useContext(ItemContext)
-
-  return variant === 'block' ? (
-    <Box
-      as="span"
-      sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
-      id={blockDescriptionId}
-    >
-      {props.children}
-    </Box>
-  ) : (
-    <Truncate
-      id={inlineDescriptionId}
-      sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
-      title={props.children as string}
-      inline={true}
-      maxWidth="100%"
-    >
-      {props.children}
-    </Truncate>
+  return (
+    <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
+      {({blockDescriptionId, inlineDescriptionId, disabled}: ItemContext) =>
+        variant === 'block' ? (
+          <Box
+            as="span"
+            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
+            id={blockDescriptionId}
+          >
+            {props.children}
+          </Box>
+        ) : (
+          <Truncate
+            id={inlineDescriptionId}
+            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
+            title={props.children as string}
+            inline={true}
+            maxWidth="100%"
+          >
+            {props.children}
+          </Truncate>
+        )
+      }
+    </Slot>
   )
 }

src/ActionList/Item.tsx

@@ -1,19 +1,16 @@
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import React from 'react'
 import styled from 'styled-components'
 import Box, {BoxProps} from '../Box'
-import {useId} from '../hooks/useId'
-import {useSlots} from '../hooks/useSlots'
 import sx, {BetterSystemStyleObject, merge, SxProp} from '../sx'
 import {useTheme} from '../ThemeProvider'
-import {defaultSxProp} from '../utils/defaultSxProp'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {useId} from '../hooks/useId'
 import {ActionListContainerContext} from './ActionListContainerContext'
-import {Description} from './Description'
 import {ActionListGroupProps, GroupContext} from './Group'
 import {ActionListProps, ListContext} from './List'
 import {Selection} from './Selection'
-import {ActionListItemProps, getVariantStyles, ItemContext, TEXT_ROW_HEIGHT} from './shared'
-import {LeadingVisual, TrailingVisual} from './Visuals'
+import {ActionListItemProps, Slots, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 const LiBox = styled.li<SxProp>(sx)
 
@@ -33,11 +30,6 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     },
     forwardedRef,
   ): JSX.Element => {
-    const [slots, childrenWithoutSlots] = useSlots(props.children, {
-      leadingVisual: LeadingVisual,
-      trailingVisual: TrailingVisual,
-      description: Description,
-    })
     const {variant: listVariant, showDividers, selectionVariant: listSelectionVariant} = React.useContext(ListContext)
     const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
     const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)
@@ -177,57 +169,66 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
     const ItemWrapper = _PrivateItemWrapper || React.Fragment
 
-    const menuItemProps = {
-      onClick: clickHandler,
-      onKeyPress: keyPressHandler,
-      'aria-disabled': disabled ? true : undefined,
-      tabIndex: disabled ? undefined : 0,
-      'aria-labelledby': `${labelId} ${
-        slots.description && slots.description.props.variant !== 'block' ? inlineDescriptionId : ''
-      }`,
-      'aria-describedby': slots.description?.props.variant === 'block' ? blockDescriptionId : undefined,
-      ...(selectionAttribute && {[selectionAttribute]: selected}),
-      role: role || itemRole,
-    }
-
-    const containerProps = _PrivateItemWrapper ? {role: role || itemRole ? 'none' : undefined} : menuItemProps
-
-    const wrapperProps = _PrivateItemWrapper ? menuItemProps : {}
-
     return (
-      <ItemContext.Provider value={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
-        <LiBox ref={forwardedRef} sx={merge<BetterSystemStyleObject>(styles, sxProp)} {...containerProps} {...props}>
-          <ItemWrapper {...wrapperProps}>
-            <Selection selected={selected} />
-            {slots.leadingVisual}
-            <Box
-              data-component="ActionList.Item--DividerContainer"
-              sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
+      <Slots context={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
+        {slots => {
+          const menuItemProps = {
+            onClick: clickHandler,
+            onKeyPress: keyPressHandler,
+            'aria-disabled': disabled ? true : undefined,
+            tabIndex: disabled ? undefined : 0,
+            'aria-labelledby': `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
+            'aria-describedby': slots.BlockDescription ? blockDescriptionId : undefined,
+            ...(selectionAttribute && {[selectionAttribute]: selected}),
+            role: role || itemRole,
+          }
+          const containerProps = _PrivateItemWrapper
+            ? {
+                role: role || itemRole ? 'none' : undefined,
+              }
+            : menuItemProps
+          const wrapperProps = _PrivateItemWrapper ? menuItemProps : {}
+
+          return (
+            <LiBox
+              ref={forwardedRef}
+              sx={merge<BetterSystemStyleObject>(styles, sxProp)}
+              {...containerProps}
+              {...props}
             >
-              <ConditionalBox if={Boolean(slots.trailingVisual)} sx={{display: 'flex', flexGrow: 1}}>
-                <ConditionalBox
-                  if={!!slots.description && slots.description.props.variant !== 'block'}
-                  sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
+              <ItemWrapper {...wrapperProps}>
+                <Selection selected={selected} />
+                {slots.LeadingVisual}
+                <Box
+                  data-component="ActionList.Item--DividerContainer"
+                  sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
                 >
-                  <Box
-                    as="span"
-                    id={labelId}
-                    sx={{
-                      flexGrow: slots.description && slots.description.props.variant !== 'block' ? 0 : 1,
-                      fontWeight: slots.description && slots.description.props.variant !== 'block' ? 'bold' : 'normal',
-                    }}
-                  >
-                    {childrenWithoutSlots}
-                  </Box>
-                  {slots.description?.props.variant !== 'block' ? slots.description : null}
-                </ConditionalBox>
-                {slots.trailingVisual}
-              </ConditionalBox>
-              {slots.description?.props.variant === 'block' ? slots.description : null}
-            </Box>
-          </ItemWrapper>
-        </LiBox>
-      </ItemContext.Provider>
+                  <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{display: 'flex', flexGrow: 1}}>
+                    <ConditionalBox
+                      if={Boolean(slots.InlineDescription)}
+                      sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
+                    >
+                      <Box
+                        as="span"
+                        id={labelId}
+                        sx={{
+                          flexGrow: slots.InlineDescription ? 0 : 1,
+                          fontWeight: slots.InlineDescription ? 'bold' : 'normal',
+                        }}
+                      >
+                        {props.children}
+                      </Box>
+                      {slots.InlineDescription}
+                    </ConditionalBox>
+                    {slots.TrailingVisual}
+                  </ConditionalBox>
+                  {slots.BlockDescription}
+                </Box>
+              </ItemWrapper>
+            </LiBox>
+          )
+        }}
+      </Slots>
     )
   },
 ) as PolymorphicForwardRefComponent<'li', ActionListItemProps>

src/ActionList/Visuals.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import Box from '../Box'
-import {get} from '../constants'
 import {SxProp, merge} from '../sx'
-import {ItemContext, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
+import {get} from '../constants'
+import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './shared'
 
 type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
 
@@ -30,42 +30,48 @@ export const LeadingVisualContainer: React.FC<React.PropsWithChildren<VisualProp
 
 export type ActionListLeadingVisualProps = VisualProps
 export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
-  const {variant, disabled} = React.useContext(ItemContext)
   return (
-    <LeadingVisualContainer
-      sx={merge(
-        {
-          color: getVariantStyles(variant, disabled).iconColor,
-          svg: {fontSize: 0},
-        },
-        sx as SxProp,
+    <Slot name="LeadingVisual">
+      {({variant, disabled}: ItemContext) => (
+        <LeadingVisualContainer
+          sx={merge(
+            {
+              color: getVariantStyles(variant, disabled).iconColor,
+              svg: {fontSize: 0},
+            },
+            sx as SxProp,
+          )}
+          {...props}
+        >
+          {props.children}
+        </LeadingVisualContainer>
       )}
-      {...props}
-    >
-      {props.children}
-    </LeadingVisualContainer>
+    </Slot>
   )
 }
 
 export type ActionListTrailingVisualProps = VisualProps
 export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
-  const {variant, disabled} = React.useContext(ItemContext)
   return (
-    <Box
-      as="span"
-      sx={merge(
-        {
-          height: '20px', // match height of text row
-          flexShrink: 0,
-          color: getVariantStyles(variant, disabled).annotationColor,
-          marginLeft: 2,
-          fontWeight: 'initial',
-        },
-        sx as SxProp,
+    <Slot name="TrailingVisual">
+      {({variant, disabled}: ItemContext) => (
+        <Box
+          as="span"
+          sx={merge(
+            {
+              height: '20px', // match height of text row
+              flexShrink: 0,
+              color: getVariantStyles(variant, disabled).annotationColor,
+              marginLeft: 2,
+              fontWeight: 'initial',
+            },
+            sx as SxProp,
+          )}
+          {...props}
+        >
+          {props.children}
+        </Box>
       )}
-      {...props}
-    >
-      {props.children}
-    </Box>
+    </Slot>
   )
 }

src/ActionList/shared.ts

@@ -1,5 +1,6 @@
 import React from 'react'
 import {SxProp} from '../sx'
+import createSlots from '../utils/create-slots'
 import {AriaRole} from '../utils/types'
 
 export type ActionListItemProps = {
@@ -55,12 +56,10 @@ type MenuItemProps = {
 }
 
 export type ItemContext = Pick<ActionListItemProps, 'variant' | 'disabled'> & {
-  inlineDescriptionId?: string
-  blockDescriptionId?: string
+  inlineDescriptionId: string
+  blockDescriptionId: string
 }
 
-export const ItemContext = React.createContext<ItemContext>({})
-
 export const getVariantStyles = (
   variant: ActionListItemProps['variant'],
   disabled: ActionListItemProps['disabled'],
@@ -91,4 +90,6 @@ export const getVariantStyles = (
   }
 }
 
+export const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
+
 export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale

src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -1278,6 +1278,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   list-style: none;
 }
 
+.c9 {
+  padding: 0;
+  margin: 0;
+  display: none;
+}
+
 .c5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1289,12 +1295,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   flex-grow: 1;
 }
 
-.c9 {
-  padding: 0;
-  margin: 0;
-  display: none;
-}
-
 .c7 {
   height: 20px;
   -webkit-flex-shrink: 0;