fix(List): propagate skeleton property to children via shared Context (#7161)

Author: langz

packages/dnb-eufemia/src/components/list/ItemAccordion.tsx

@@ -19,6 +19,7 @@ import { omitSpacingProps, pickSpacingProps } from '../flex/utils'
 import ItemIcon from './ItemIcon'
 import ItemTitle from './ItemTitle'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import Context from '../../shared/Context'
 
 export type ItemAccordionIconPosition = 'left' | 'right'
 
@@ -141,6 +142,7 @@ function AccordionHeader(props: AccordionHeaderProps) {
     title,
   } = useContext(ItemAccordionContext)
 
+  const context = useContext(Context)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
   const isInactive = pending || disabled
 
@@ -166,7 +168,7 @@ function AccordionHeader(props: AccordionHeaderProps) {
     [handleClick]
   )
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__accordion__header',
@@ -191,20 +193,33 @@ function AccordionHeader(props: AccordionHeaderProps) {
       {chevronPosition === 'right' && <ChevronIcon />}
     </FlexItem>
   )
+
+  if (inheritedSkeleton) {
+    return (
+      <Context.Provider
+        value={{ ...context, skeleton: inheritedSkeleton }}
+      >
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemAccordion.Header = AccordionHeader
 AccordionHeader._supportsSpacingProps = true
 
 function AccordionContent(props: ItemContentProps) {
   const { className, children, ...rest } = props
+  const context = useContext(Context)
   const { openState, accordionId, keepInDOM } = useContext(
     ItemAccordionContext
   )
   const inheritedSkeleton = useContext(ListContext)?.skeleton
 
   const spacingProps = pickSpacingProps(rest)
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__accordion__content',
@@ -223,6 +238,18 @@ function AccordionContent(props: ItemContentProps) {
       </HeightAnimation>
     </FlexItem>
   )
+
+  if (inheritedSkeleton) {
+    return (
+      <Context.Provider
+        value={{ ...context, skeleton: inheritedSkeleton }}
+      >
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemAccordion.Content = AccordionContent
 AccordionContent._supportsSpacingProps = true

packages/dnb-eufemia/src/components/list/ItemCenter.tsx

@@ -4,6 +4,7 @@ import FlexItem, { type Props as FlexItemProps } from '../flex/Item'
 import { ListContext } from './ListContext'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import type { SkeletonShow } from '../Skeleton'
+import Context from '../../shared/Context'
 
 export type ItemCenterProps = FlexItemProps & {
   /** Font size of the center content. Defaults to `basis`. */
@@ -19,12 +20,14 @@ function ItemCenter({
   fontSize = 'basis',
   fontWeight = 'regular',
   skeleton,
+  children,
   ...rest
 }: ItemCenterProps) {
+  const context = useContext(Context)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
   const appliedSkeleton = skeleton ?? inheritedSkeleton
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__center',
@@ -35,8 +38,20 @@ function ItemCenter({
       )}
       innerSpace={{ left: 'small' }}
       {...rest}
-    />
+    >
+      {children}
+    </FlexItem>
   )
+
+  if (appliedSkeleton) {
+    return (
+      <Context.Provider value={{ ...context, skeleton: appliedSkeleton }}>
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 
 ItemCenter._supportsSpacingProps = true

packages/dnb-eufemia/src/components/list/ItemContent.tsx

@@ -4,6 +4,7 @@ import { ListVariant, ListContext } from './ListContext'
 import FlexContainer, { Props as FlexProps } from '../flex/Container'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import type { SkeletonShow } from '../Skeleton'
+import Context from '../../shared/Context'
 
 export type ItemContentProps = {
   variant?: ListVariant
@@ -24,14 +25,15 @@ function ItemContent(props: ItemContentProps) {
     skeleton,
     ...rest
   } = props
+  const context = useContext(Context)
   const inheritedVariant = useContext(ListContext)?.variant
   const inheritedSkeleton = useContext(ListContext)?.skeleton
   const inheritedDisabled = useContext(ListContext)?.disabled
   const appliedVariant = variant ?? inheritedVariant
   const appliedSkeleton = skeleton ?? inheritedSkeleton
   const appliedDisabled = disabled ?? inheritedDisabled
 
-  return (
+  const content = (
     <FlexContainer
       element="li"
       direction="horizontal"
@@ -55,6 +57,16 @@ function ItemContent(props: ItemContentProps) {
       {pending && <Pending />}
     </FlexContainer>
   )
+
+  if (appliedSkeleton) {
+    return (
+      <Context.Provider value={{ ...context, skeleton: appliedSkeleton }}>
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemContent._supportsSpacingProps = true
 

packages/dnb-eufemia/src/components/list/ItemEnd.tsx

@@ -4,6 +4,7 @@ import FlexItem, { type Props as FlexItemProps } from '../flex/Item'
 import { ListContext } from './ListContext'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import type { SkeletonShow } from '../Skeleton'
+import Context from '../../shared/Context'
 
 /**
  * Props for List.Cell.End (ItemEnd).
@@ -24,12 +25,14 @@ function ItemEnd(props: ItemEndProps) {
     fontSize = 'basis',
     skeleton,
     className,
+    children,
     ...rest
   } = props
+  const context = useContext(Context)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
   const appliedSkeleton = skeleton ?? inheritedSkeleton
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__end',
@@ -40,8 +43,20 @@ function ItemEnd(props: ItemEndProps) {
       )}
       innerSpace={{ left: 'small', right: 'medium' }}
       {...rest}
-    />
+    >
+      {children}
+    </FlexItem>
   )
+
+  if (appliedSkeleton) {
+    return (
+      <Context.Provider value={{ ...context, skeleton: appliedSkeleton }}>
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemEnd._supportsSpacingProps = true
 

packages/dnb-eufemia/src/components/list/ItemFooter.tsx

@@ -5,6 +5,7 @@ import Hr from '../../elements/Hr'
 import { ListContext } from './ListContext'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import type { SkeletonShow } from '../Skeleton'
+import Context from '../../shared/Context'
 
 export type ItemFooterProps = FlexItemProps & {
   /** If `true`, applies skeleton loading state. Inherits from parent List context when not set. */
@@ -17,10 +18,11 @@ function ItemFooter({
   children,
   ...rest
 }: ItemFooterProps) {
+  const context = useContext(Context)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
   const appliedSkeleton = skeleton ?? inheritedSkeleton
 
-  return (
+  const content = (
     <>
       <Hr
         top={false}
@@ -39,6 +41,16 @@ function ItemFooter({
       </FlexItem>
     </>
   )
+
+  if (appliedSkeleton) {
+    return (
+      <Context.Provider value={{ ...context, skeleton: appliedSkeleton }}>
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemFooter._supportsSpacingProps = true
 

packages/dnb-eufemia/src/components/list/ItemOverline.tsx

@@ -4,6 +4,7 @@ import FlexItem, { type Props as FlexItemProps } from '../flex/Item'
 import { ListContext } from './ListContext'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import type { SkeletonShow } from '../Skeleton'
+import Context from '../../shared/Context'
 
 /**
  * Props for List.Cell.Title.Overline (ItemOverline).
@@ -26,10 +27,11 @@ function ItemOverline({
   children,
   ...rest
 }: ItemOverlineProps) {
+  const context = useContext(Context)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
   const appliedSkeleton = skeleton ?? inheritedSkeleton
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__overline',
@@ -43,6 +45,16 @@ function ItemOverline({
       {children}
     </FlexItem>
   )
+
+  if (appliedSkeleton) {
+    return (
+      <Context.Provider value={{ ...context, skeleton: appliedSkeleton }}>
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemOverline._supportsSpacingProps = true
 

packages/dnb-eufemia/src/components/list/ItemStart.tsx

@@ -4,6 +4,7 @@ import FlexItem, { type Props as FlexItemProps } from '../flex/Item'
 import { ListContext } from './ListContext'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import type { SkeletonShow } from '../Skeleton'
+import Context from '../../shared/Context'
 
 /**
  * Props for List.Cell.Start (ItemStart).
@@ -23,12 +24,14 @@ function ItemStart({
   fontSize = 'basis',
   fontWeight = 'regular',
   skeleton,
+  children,
   ...rest
 }: ItemStartProps) {
+  const context = useContext(Context)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
   const appliedSkeleton = skeleton ?? inheritedSkeleton
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__start',
@@ -39,8 +42,20 @@ function ItemStart({
       )}
       innerSpace={{ left: 'small' }}
       {...rest}
-    />
+    >
+      {children}
+    </FlexItem>
   )
+
+  if (appliedSkeleton) {
+    return (
+      <Context.Provider value={{ ...context, skeleton: appliedSkeleton }}>
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemStart._supportsSpacingProps = true
 

packages/dnb-eufemia/src/components/list/ItemSubline.tsx

@@ -4,6 +4,7 @@ import FlexItem, { type Props as FlexItemProps } from '../flex/Item'
 import { ListContext } from './ListContext'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import type { SkeletonShow } from '../Skeleton'
+import Context from '../../shared/Context'
 
 export type ItemSublineVariant = 'description'
 
@@ -31,10 +32,11 @@ function ItemSubline({
   children,
   ...rest
 }: ItemSublineProps) {
+  const context = useContext(Context)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
   const appliedSkeleton = skeleton ?? inheritedSkeleton
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__subline',
@@ -49,6 +51,16 @@ function ItemSubline({
       {children}
     </FlexItem>
   )
+
+  if (appliedSkeleton) {
+    return (
+      <Context.Provider value={{ ...context, skeleton: appliedSkeleton }}>
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemSubline._supportsSpacingProps = true