release of v10.101.2 (#7181)

Author: langz

packages/dnb-design-system-portal/src/docs/uilib/components/list/events.mdx

@@ -3,8 +3,15 @@ showTabs: true
 ---
 
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
-import { ItemActionEvents } from '@dnb/eufemia/src/components/list/ListDocs'
+import {
+  ItemActionEvents,
+  ItemAccordionEvents,
+} from '@dnb/eufemia/src/components/list/ListDocs'
 
 ## List.Item.Action Events
 
 <PropertiesTable props={ItemActionEvents} />
+
+## List.Item.Accordion Events
+
+<PropertiesTable props={ItemAccordionEvents} />

packages/dnb-design-system-portal/src/docs/uilib/components/stat.mdx

@@ -5,11 +5,11 @@ status: 'new'
 showTabs: true
 tabs:
   - title: Info
-    key: /uilib/components/stat/info
+    key: /info
   - title: Demos
-    key: /uilib/components/stat/demos
+    key: /demos
   - title: Properties
-    key: /uilib/components/stat/properties
+    key: /properties
 ---
 
 import StatInfo from 'Docs/uilib/components/stat/info'

packages/dnb-design-system-portal/src/docs/uilib/components/stat/info.mdx

@@ -49,3 +49,8 @@ import { Stat } from '@dnb/eufemia'
 - When e.g. `signDisplay="always"` is used, the sign is rendered as a separate visual element with CSS spacing, while the accessible text stays based on the formatted number string.
 
 - All Stat variants keep dedicated accessibility handling. `Currency`, `Percent`, and `Trend` use a dedicated screen-reader value (`.dnb-sr-only`) based on the formatted content. `Rating` uses an accessible label (`role="img"` + `aria-label`) that includes value and max.
+
+## Relevant links
+
+- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/stat)
+- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/stat)

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 { warn } from '../../shared/component-helper'
 import Context from '../../shared/Context'
 
 export type ItemAccordionIconPosition = 'left' | 'right'
@@ -41,7 +42,6 @@ export type ItemAccordionProps = {
 } & Omit<ItemContentProps, 'title'>
 
 const ItemAccordionContext = createContext<{
-  open?: boolean
   openState: boolean
   pending?: boolean
   disabled?: boolean
@@ -89,7 +89,6 @@ function ItemAccordion(props: ItemAccordionProps) {
   return (
     <ItemAccordionContext.Provider
       value={{
-        open,
         openState,
         pending,
         disabled: appliedDisabled,
@@ -124,36 +123,26 @@ function ItemAccordion(props: ItemAccordionProps) {
 ItemAccordion._supportsSpacingProps = true
 
 export type AccordionHeaderProps = {
-  open?: boolean
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 } & ItemContentProps
 
 function AccordionHeader(props: AccordionHeaderProps) {
   const { className, children, ...rest } = props
-  const {
-    setOpen,
-    onClick,
-    pending,
-    disabled,
-    chevronPosition,
-    accordionId,
-    openState,
-    icon,
-    title,
-  } = useContext(ItemAccordionContext)
-
+  const accordionContext = useContext(ItemAccordionContext)
   const context = useContext(Context)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
-  const isInactive = pending || disabled
+
+  const isInactive =
+    accordionContext?.pending || accordionContext?.disabled
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      if (!isInactive) {
-        setOpen((prev) => !prev)
-        onClick && onClick(event)
+      if (!isInactive && accordionContext) {
+        accordionContext.setOpen((prev) => !prev)
+        accordionContext.onClick && accordionContext.onClick(event)
       }
     },
-    [onClick, isInactive, setOpen]
+    [accordionContext, isInactive]
   )
 
   const handleKeyDown = useCallback(
@@ -168,6 +157,16 @@ function AccordionHeader(props: AccordionHeaderProps) {
     [handleClick]
   )
 
+  if (!accordionContext) {
+    warn(
+      'List.Item.Accordion.Header should be used inside List.Item.Accordion.'
+    )
+    return null
+  }
+
+  const { chevronPosition, accordionId, openState, icon, title } =
+    accordionContext
+
   const content = (
     <FlexItem
       className={classnames(
@@ -212,11 +211,18 @@ AccordionHeader._supportsSpacingProps = true
 function AccordionContent(props: ItemContentProps) {
   const { className, children, ...rest } = props
   const context = useContext(Context)
-  const { openState, accordionId, keepInDOM } = useContext(
-    ItemAccordionContext
-  )
+  const accordionContext = useContext(ItemAccordionContext)
   const inheritedSkeleton = useContext(ListContext)?.skeleton
 
+  if (!accordionContext) {
+    warn(
+      'List.Item.Accordion.Content should be used inside List.Item.Accordion.'
+    )
+    return null
+  }
+
+  const { openState, accordionId, keepInDOM } = accordionContext
+
   const spacingProps = pickSpacingProps(rest)
 
   const content = (
@@ -229,7 +235,6 @@ function AccordionContent(props: ItemContentProps) {
       id={`${accordionId}-content`}
       aria-labelledby={`${accordionId}-header`}
       aria-hidden={!openState}
-      aria-expanded={openState}
       {...omitSpacingProps(rest)}
     >
       <HeightAnimation open={openState} keepInDOM={keepInDOM}>

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

@@ -76,6 +76,15 @@ function ItemAction(props: ItemActionProps) {
 
   const anchorRef = useRef<HTMLAnchorElement>(null)
 
+  const handleLinkClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (!isInactive) {
+        onClick?.(event)
+      }
+    },
+    [onClick, isInactive]
+  )
+
   const handleLinkKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'Enter' || event.key === ' ') {
@@ -113,12 +122,13 @@ function ItemAction(props: ItemActionProps) {
         role="link"
         tabIndex={isInactive ? -1 : 0}
         aria-disabled={isInactive ? true : undefined}
+        onClick={handleLinkClick}
         onKeyDown={handleLinkKeyDown}
         variant={variant}
         selected={selected}
         skeleton={skeleton}
         pending={pending}
-        disabled={disabled}
+        disabled={appliedDisabled}
         {...rest}
       >
         <Anchor
@@ -148,7 +158,7 @@ function ItemAction(props: ItemActionProps) {
       selected={selected}
       skeleton={skeleton}
       pending={pending}
-      disabled={disabled}
+      disabled={appliedDisabled}
       {...rest}
     >
       {content}

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

@@ -15,13 +15,16 @@ import Context from '../../shared/Context'
 export type ItemTitleProps = FlexItemProps & {
   /** Font size of the title content. Defaults to `basis`. */
   fontSize?: 'small' | 'basis'
+  /** Font weight of the title content. Defaults to `regular`. */
+  fontWeight?: 'regular' | 'medium'
   /** If `true`, applies skeleton loading state. Inherits from parent List context when not set. */
   skeleton?: SkeletonShow
 }
 
 function ItemTitleBase({
   className,
   fontSize = 'basis',
+  fontWeight,
   skeleton,
   children,
   ...rest
@@ -40,7 +43,14 @@ function ItemTitleBase({
       )}
       {...rest}
     >
-      <span className={`dnb-t__size--${fontSize}`}>{children}</span>
+      <span
+        className={classnames(
+          `dnb-t__size--${fontSize}`,
+          fontWeight === 'medium' && 'dnb-t__weight--medium'
+        )}
+      >
+        {children}
+      </span>
     </FlexItem>
   )
 

packages/dnb-eufemia/src/components/list/ListDocs.ts

@@ -285,8 +285,8 @@ export const ItemAccordionHeaderProperties: PropertiesTableProps = {
     type: 'React.ReactNode',
     status: 'optional',
   },
-  '[List.Item.Basic](/uilib/components/list/properties/#listitembasic)': {
-    doc: 'Inherits List.Item.Basic properties (variant, pending, spacing, etc.).',
+  '[Flex.Item](/uilib/layout/flex/item/properties)': {
+    doc: 'Renders as a `Flex.Item`. Supports all `Flex.Item` properties.',
     type: 'Various',
     status: 'optional',
   },
@@ -387,6 +387,14 @@ export const ItemActionEvents: PropertiesTableProps = {
   },
 }
 
+export const ItemAccordionEvents: PropertiesTableProps = {
+  onClick: {
+    doc: 'Fired when the user clicks or activates the accordion header (click or Enter/Space key). In controlled mode (when `open` is provided), use this to update the `open` prop. Receives the native event.',
+    type: '(event) => void',
+    status: 'optional',
+  },
+}
+
 export const CardProperties: PropertiesTableProps = {
   children: {
     doc: 'Card content. Typically a `List.Container` (optionally wrapped in `List.ScrollView`). The card provides a visual container with border-radius resets and scrollbar integration for the list inside it.',

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

@@ -221,7 +221,7 @@ describe('ItemAccordion', () => {
     expect(header.getAttribute('tabindex')).toBe('-1')
   })
 
-  it('content region has id, aria-labelledby, aria-hidden and aria-expanded', () => {
+  it('content region has id, aria-labelledby and aria-hidden', () => {
     render(
       <ItemAccordion>
         <ItemAccordion.Header>Title</ItemAccordion.Header>
@@ -240,10 +240,10 @@ describe('ItemAccordion', () => {
     expect(contentRegion.getAttribute('id')).toBe(contentId)
     expect(contentRegion.getAttribute('aria-labelledby')).toBe(headerId)
     expect(contentRegion.getAttribute('aria-hidden')).toBe('true')
-    expect(contentRegion.getAttribute('aria-expanded')).toBe('false')
+    expect(contentRegion).not.toHaveAttribute('aria-expanded')
   })
 
-  it('content region has aria-hidden false and aria-expanded true when open', () => {
+  it('content region has aria-hidden false when open and no aria-expanded', () => {
     render(
       <ItemAccordion open>
         <ItemAccordion.Header>Title</ItemAccordion.Header>
@@ -259,7 +259,7 @@ describe('ItemAccordion', () => {
 
     expect(contentRegion).toBeInTheDocument()
     expect(contentRegion.getAttribute('aria-hidden')).toBe('false')
-    expect(contentRegion.getAttribute('aria-expanded')).toBe('true')
+    expect(contentRegion).not.toHaveAttribute('aria-expanded')
   })
 
   describe('keepInDOM', () => {
@@ -812,4 +812,50 @@ describe('ItemAccordion', () => {
     const consumer = document.querySelector('[data-skeleton]')
     expect(consumer.getAttribute('data-skeleton')).toBe('true')
   })
+
+  it('warns and returns null when AccordionHeader is used outside ItemAccordion', () => {
+    const spy = jest.spyOn(console, 'log').mockImplementation(() => {})
+
+    render(<ItemAccordion.Header>Orphan header</ItemAccordion.Header>)
+
+    const header = document.querySelector(
+      '.dnb-list__item__accordion__header'
+    )
+    expect(header).not.toBeInTheDocument()
+
+    const didWarn = spy.mock.calls.some((call) =>
+      call
+        .map((entry) => String(entry))
+        .join(' ')
+        .includes(
+          'List.Item.Accordion.Header should be used inside List.Item.Accordion.'
+        )
+    )
+    expect(didWarn).toBe(true)
+
+    spy.mockRestore()
+  })
+
+  it('warns and returns null when AccordionContent is used outside ItemAccordion', () => {
+    const spy = jest.spyOn(console, 'log').mockImplementation(() => {})
+
+    render(<ItemAccordion.Content>Orphan content</ItemAccordion.Content>)
+
+    const content = document.querySelector(
+      '.dnb-list__item__accordion__content'
+    )
+    expect(content).not.toBeInTheDocument()
+
+    const didWarn = spy.mock.calls.some((call) =>
+      call
+        .map((entry) => String(entry))
+        .join(' ')
+        .includes(
+          'List.Item.Accordion.Content should be used inside List.Item.Accordion.'
+        )
+    )
+    expect(didWarn).toBe(true)
+
+    spy.mockRestore()
+  })
 })