@instructure/outcomes-ui 4.0.0 → 4.1.0

package/lib/translated/da-x-k12/components/Gradebook/shared/TruncateWithTooltip/index.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import { TruncateText } from '@instructure/ui-truncate-text'
+import { Tooltip, type TooltipProps } from '@instructure/ui-tooltip'
+
+interface TruncateWithTooltipProps {
+  children: React.ReactNode
+  placement?: TooltipProps['placement']
+  /**
+   * Allows you to constrain the max width of the tooltip to prevent it from
+   * running off the screen.
+   */
+  maxTooltipWidth?: string | number
+  linesAllowed?: number
+  horizontalOffset?: number
+  backgroundColor?: 'primary' | 'primary-inverse'
+}
+
+/**
+ * Renders text that will truncate after a certain number of lines
+ * and show a tooltip with the full text on hover if truncated.
+ * There are a few versions of this in Canvas. However, this one is meant to be re-usable
+ * everywhere.
+ */
+const TruncateWithTooltip = ({
+  children,
+  placement = 'top',
+  maxTooltipWidth: maxWidth = '20rem',
+  linesAllowed,
+  horizontalOffset,
+  backgroundColor,
+}: TruncateWithTooltipProps) => {
+  const [isTruncated, setIsTruncated] = useState(false)
+
+  const handleUpdate = (truncated: boolean) => {
+    if (truncated !== isTruncated) {
+      setIsTruncated(truncated)
+    }
+  }
+
+  return isTruncated ? (
+    <Tooltip
+      as="div"
+      placement={placement}
+      color={backgroundColor}
+      offsetX={horizontalOffset}
+      renderTip={() => <div style={{overflowWrap: 'break-word', maxWidth}}>{children}</div>}
+    >
+      <TruncateText
+        maxLines={linesAllowed}
+        ignore={[' ', '.', ',']}
+        ellipsis=" ..."
+        onUpdate={handleUpdate}
+      >
+        {children}
+      </TruncateText>
+    </Tooltip>
+  ) : (
+    <TruncateText maxLines={linesAllowed} onUpdate={handleUpdate}>
+      {children}
+    </TruncateText>
+  )
+}
+
+export default TruncateWithTooltip

package/lib/translated/da-x-k12/components/Gradebook/storybook/decorators.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { Checkbox } from '@instructure/ui-checkbox'
+import { Flex } from '@instructure/ui-flex'
+import { NameDisplayFormatSelector } from '@/components/Gradebook/toolbar/SettingsTray/NameDisplaySelector'
+import { StudentPopover } from '@/components/Gradebook/popovers/StudentPopover'
+import { NameDisplayFormat } from '@/util/gradebook/constants'
+import GradebookApp from '..'
+import { createStudent, mockUserDetailsDefault } from '../__mocks__/mockData'
+import type {
+  GradebookComponents,
+  MasteryLevelConfig,
+  SettingsTrayContentProps,
+  StudentPopoverWrapperProps
+} from '../context/GradebookConfigContext/GradebookConfigContext'
+
+interface ExampleCustomSettings {
+  showStudentNames: boolean
+  nameDisplayFormat: NameDisplayFormat
+}
+
+interface StoryWrapperProps {
+  children: React.ReactNode;
+  masteryLevelConfig?: MasteryLevelConfig
+  components?: Partial<GradebookComponents<ExampleCustomSettings>>
+}
+
+const StudentPopoverWrapper: React.FC<StudentPopoverWrapperProps> = (props) => {
+  return (
+    <StudentPopover
+      {...props}
+      student={props.student || createStudent('1', 'John', 'Doe')}
+      studentName={props.studentName || 'John Doe'}
+      studentGradesUrl="/test-url"
+      userDetails={mockUserDetailsDefault}
+    />
+  )
+}
+
+const ExampleSettingsTrayContent: React.FC<SettingsTrayContentProps<ExampleCustomSettings>> = ({
+  settings,
+  onChange,
+}) => {
+  return (
+    <Flex direction="column" gap="large">
+      <Checkbox
+        label="Show student names"
+        checked={settings.showStudentNames}
+        onChange={() => {
+          action('onChangeShowStudentNames')(!settings.showStudentNames)
+          onChange({
+            ...settings,
+            showStudentNames: !settings.showStudentNames,
+          })
+        }}
+      />
+      <NameDisplayFormatSelector
+        value={settings.nameDisplayFormat}
+        onChange={(nameDisplayFormat) => {
+          action('onChangeNameDisplayFormat')(nameDisplayFormat)
+          onChange({
+            ...settings,
+            nameDisplayFormat,
+          })
+        }}
+      />
+    </Flex>
+  )
+}
+
+export const StoryWrapper: React.FC<StoryWrapperProps> =
+({ children, masteryLevelConfig, components }) => {
+  const defaultComponents: GradebookComponents<ExampleCustomSettings> = {
+    StudentPopover: StudentPopoverWrapper,
+    SettingsTrayContent: ExampleSettingsTrayContent,
+  }
+
+  return (
+    <GradebookApp
+      config={{
+        components: {
+          ...defaultComponents,
+          ...components,
+        },
+        masteryLevelConfig,
+      }}
+      settings={{
+        settings: {
+          showStudentNames: true,
+          nameDisplayFormat: NameDisplayFormat.FIRST_LAST,
+        },
+        onSave: async (settings) => {
+          action('onSave')(settings)
+          // Simulate API call
+          await new Promise(resolve => setTimeout(resolve, 1000))
+          // Simulate success
+          return { success: true }
+        },
+      }}
+    >
+      {children}
+    </GradebookApp>
+  )
+}

package/lib/translated/da-x-k12/components/Gradebook/table/Cell/__tests__/index.test.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+import { expect } from '@jest/globals'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Table } from '@instructure/ui-table'
+import { Cell, CellProps } from '../index'
+
+describe('Cell', () => {
+  const renderInTable = (ui: React.ReactElement, layout?: 'stacked' | 'fixed' | 'auto') => {
+    return render(
+      <Table caption="Test Table" layout={layout}>
+        <Table.Body>
+          <Table.Row>{ui}</Table.Row>
+        </Table.Body>
+      </Table>,
+    )
+  }
+
+  const defaultProps: CellProps = {
+    children: 'Test Content',
+  }
+
+  it('renders children content', () => {
+    renderInTable(<Cell {...defaultProps} />)
+    expect(screen.getByText('Test Content')).toBeInTheDocument()
+  })
+
+  it('renders as td element by default', () => {
+    renderInTable(<Cell {...defaultProps} />)
+    const cell = screen.getByRole('cell')
+    expect(cell.tagName).toBe('TD')
+  })
+
+  it('renders as div when table is stacked', () => {
+    renderInTable(<Cell {...defaultProps} />, 'stacked')
+    const cell = screen.getByRole('cell')
+    expect(cell.tagName).toBe('DIV')
+  })
+
+  it('adds cell role when table is stacked', () => {
+    renderInTable(<Cell {...defaultProps} />, 'stacked')
+    const cell = screen.getByRole('cell')
+    expect(cell).toHaveAttribute('role', 'cell')
+  })
+
+  it('applies width when provided', () => {
+    renderInTable(<Cell {...defaultProps} width="200px" />)
+    const cell = screen.getByRole('cell')
+    expect(cell).toHaveStyle({width: '200px'})
+  })
+
+  it('applies sticky position when isSticky is true', () => {
+    renderInTable(<Cell {...defaultProps} isSticky={true} />)
+    const cell = screen.getByRole('cell')
+    expect(cell).toHaveStyle({position: 'sticky'})
+  })
+
+  it('applies primary background when isSticky is true and no background provided', () => {
+    renderInTable(<Cell {...defaultProps} isSticky={true} />)
+    const cell = screen.getByRole('cell')
+    expect(cell).toBeInTheDocument()
+  })
+
+  it('applies custom id when provided', () => {
+    renderInTable(<Cell {...defaultProps} id="custom-cell-id" />)
+    const cell = screen.getByRole('cell')
+    expect(cell).toHaveAttribute('id', 'custom-cell-id')
+  })
+
+  it('applies custom background over default when isSticky is true', () => {
+    renderInTable(<Cell {...defaultProps} isSticky={true} background="secondary" />)
+    const cell = screen.getByRole('cell')
+    expect(cell).toBeInTheDocument()
+  })
+
+  it('renders children as function with focus state', () => {
+    const childrenFn = (focused: boolean) => (
+      <div>{focused ? 'Focused' : 'Not Focused'}</div>
+    )
+    renderInTable(<Cell>{childrenFn}</Cell>)
+    expect(screen.getByText('Not Focused')).toBeInTheDocument()
+  })
+
+  it('updates focus state when cell receives focus', () => {
+    const childrenFn = (focused: boolean) => (
+      <div>{focused ? 'Focused' : 'Not Focused'}</div>
+    )
+    renderInTable(<Cell>{childrenFn}</Cell>)
+    const cell = screen.getByRole('cell')
+
+    expect(screen.getByText('Not Focused')).toBeInTheDocument()
+
+    fireEvent.focus(cell)
+    expect(screen.getByText('Focused')).toBeInTheDocument()
+  })
+
+  it('removes focus state when cell loses focus', () => {
+    const childrenFn = (focused: boolean) => (
+      <div>{focused ? 'Focused' : 'Not Focused'}</div>
+    )
+    renderInTable(<Cell>{childrenFn}</Cell>)
+    const cell = screen.getByRole('cell')
+
+    fireEvent.focus(cell)
+    expect(screen.getByText('Focused')).toBeInTheDocument()
+
+    fireEvent.blur(cell)
+    expect(screen.getByText('Not Focused')).toBeInTheDocument()
+  })
+
+  it('maintains focus when focus moves to a descendant element', () => {
+    const childrenFn = (focused: boolean) => (
+      <div>
+        <button>Button</button>
+        <span>{focused ? 'Focused' : 'Not Focused'}</span>
+      </div>
+    )
+    renderInTable(<Cell>{childrenFn}</Cell>)
+    const cell = screen.getByRole('cell')
+    const button = screen.getByRole('button')
+
+    fireEvent.focus(cell)
+    expect(screen.getByText('Focused')).toBeInTheDocument()
+
+    fireEvent.blur(cell, { relatedTarget: button })
+
+    expect(screen.getByText('Focused')).toBeInTheDocument()
+  })
+
+  it('applies custom boxShadow when provided', () => {
+    renderInTable(<Cell {...defaultProps} boxShadow="4px 0 0 0 red" />)
+    const cell = screen.getByRole('cell')
+    expect(cell).toBeInTheDocument()
+  })
+
+  it('applies sticky positioning with left offset when isSticky is true', () => {
+    renderInTable(<Cell {...defaultProps} isSticky={true} />)
+    const cell = screen.getByRole('cell')
+    expect(cell).toHaveStyle({position: 'sticky'})
+  })
+
+  it('does not apply sticky positioning when isSticky is false', () => {
+    renderInTable(<Cell {...defaultProps} isSticky={false} />)
+    const cell = screen.getByRole('cell')
+    expect(cell).not.toHaveStyle({position: 'sticky'})
+  })
+})

package/lib/translated/da-x-k12/components/Gradebook/table/Cell/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { View, ViewProps } from '@instructure/ui-view'
+
+export type CellProps = Omit<ViewProps, 'children'> & {
+  id?: string
+  width?: number | string
+  boxShadow?: string
+  isSticky?: boolean
+  isStacked?: boolean
+  header?: string | (() => React.ReactNode)
+  children?: React.ReactNode | ((focused: boolean) => React.ReactNode)
+}
+
+export const Cell: React.FC<CellProps> = ({
+  id,
+  children,
+  width,
+  boxShadow,
+  isSticky,
+  isStacked,
+  header,
+  ...props
+}: CellProps) => {
+  const [focus, setFocus] = React.useState(false)
+  const cellRef = React.useRef<HTMLElement | null>(null)
+
+  const handleBlur = (event: React.FocusEvent) => {
+    const relatedTarget = event.relatedTarget as Node
+    if (relatedTarget && cellRef.current?.contains(relatedTarget)) {
+      return
+    }
+    setFocus(false)
+  }
+
+  return (
+    <View
+      id={id}
+      width={width}
+      height="inherit"
+      borderWidth="0 0 small 0"
+      overflowX="auto"
+      as={isStacked ? 'div' : 'td'}
+      role={isStacked ? 'cell' : undefined}
+      position={isSticky ? 'sticky' : 'static'}
+      stacking="above"
+      insetInlineStart={isSticky ? '0' : undefined}
+      background={isSticky && !props.background ? 'primary' : props.background}
+      focusPosition="inset"
+      elementRef={el => {
+        if (el instanceof HTMLElement) {
+          cellRef.current = el
+        }
+      }}
+      onFocus={() => setFocus(true)}
+      onBlur={handleBlur}
+      themeOverride={(_componentTheme, currentTheme) => ({
+        shadowAbove: boxShadow ?? `2px 0 0 0 ${currentTheme.colors.contrasts.grey1214}`,
+      })}
+      {...props}
+    >
+      {header ? (typeof header === 'function' ? header() : header) : null}
+      {typeof children === 'function' ? children(focus) : children}
+    </View>
+  )
+}
+
+export default Cell

package/lib/translated/da-x-k12/components/Gradebook/table/ColumnHeader/__tests__/index.test.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import type { ConnectDragSource } from 'react-dnd'
+import { expect } from '@jest/globals'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Table } from '@instructure/ui-table'
+import { ColumnHeader, ColumnHeaderProps } from '../index'
+
+describe('ColumnHeader', () => {
+  const renderInTable = (ui: React.ReactElement) => {
+    return render(
+      <Table caption="Test Table">
+        <Table.Head>
+          <Table.Row>{ui}</Table.Row>
+        </Table.Head>
+      </Table>,
+    )
+  }
+
+  const defaultProps: ColumnHeaderProps = {
+    children: 'Column Header Content',
+  }
+
+  it('renders children content', () => {
+    renderInTable(<ColumnHeader {...defaultProps} />)
+    expect(screen.getByText('Column Header Content')).toBeInTheDocument()
+  })
+
+  it('renders as th element by default', () => {
+    renderInTable(<ColumnHeader {...defaultProps} />)
+    const header = screen.getByRole('columnheader')
+    expect(header.tagName).toBe('TH')
+  })
+
+  it('renders as div when isStacked is true', () => {
+    render(<ColumnHeader {...defaultProps} isStacked={true} />)
+    const headerContent = screen.getByTestId('column-header-content')
+    expect(headerContent.parentElement?.tagName).toBe('DIV')
+  })
+
+  it('applies col scope to th element', () => {
+    renderInTable(<ColumnHeader {...defaultProps} />)
+    const header = screen.getByRole('columnheader')
+    expect(header).toHaveAttribute('scope', 'col')
+  })
+
+  it('applies sticky position when isSticky is true', () => {
+    renderInTable(<ColumnHeader {...defaultProps} isSticky={true} />)
+    const header = screen.getByRole('columnheader')
+    expect(header).toHaveStyle({position: 'sticky'})
+  })
+
+  it('applies primary background by default when no background provided', () => {
+    renderInTable(<ColumnHeader {...defaultProps} />)
+    const header = screen.getByRole('columnheader')
+    expect(header).toBeInTheDocument()
+  })
+
+  it('applies data-cell-id attribute', () => {
+    renderInTable(<ColumnHeader {...defaultProps} data-cell-id="cell-0-0" />)
+    const header = screen.getByRole('columnheader')
+    expect(header).toHaveAttribute('data-cell-id', 'cell-0-0')
+  })
+
+  it('applies custom background when provided', () => {
+    renderInTable(<ColumnHeader {...defaultProps} background="secondary" />)
+    const header = screen.getByRole('columnheader')
+    expect(header).toBeInTheDocument()
+  })
+
+  it('renders content wrapper with default opacity', () => {
+    renderInTable(<ColumnHeader {...defaultProps} />)
+    const contentWrapper = screen.getByTestId('column-header-content')
+    expect(contentWrapper).toHaveStyle({opacity: 1})
+  })
+
+  it('applies reduced opacity when isDragging is true', () => {
+    renderInTable(<ColumnHeader {...defaultProps} isDragging={true} />)
+    const contentWrapper = screen.getByTestId('column-header-content')
+    expect(contentWrapper).toHaveStyle({opacity: 0.5})
+  })
+
+  it('applies grab cursor when connectDragSource is provided', () => {
+    const mockConnectDragSource = (<T,>(el: T) => el) as ConnectDragSource
+    renderInTable(<ColumnHeader {...defaultProps} connectDragSource={mockConnectDragSource} />)
+    const contentWrapper = screen.getByTestId('column-header-content')
+    expect(contentWrapper).toHaveStyle({cursor: 'grab'})
+  })
+
+  it('applies default cursor when connectDragSource is not provided', () => {
+    renderInTable(<ColumnHeader {...defaultProps} />)
+    const contentWrapper = screen.getByTestId('column-header-content')
+    expect(contentWrapper).toHaveStyle({cursor: 'default'})
+  })
+
+  it('connects drag source when connectDragSource is provided', () => {
+    const mockConnectDragSource = jest.fn(<T,>(el: T) => el) as ConnectDragSource
+    renderInTable(<ColumnHeader {...defaultProps} connectDragSource={mockConnectDragSource} />)
+    expect(mockConnectDragSource).toHaveBeenCalled()
+  })
+
+  it('connects drag preview with empty image when connectDragPreview is provided', () => {
+    const mockConnectDragPreview = jest.fn()
+    renderInTable(<ColumnHeader {...defaultProps} connectDragPreview={mockConnectDragPreview} />)
+    expect(mockConnectDragPreview).toHaveBeenCalledWith(
+      expect.any(HTMLImageElement),
+      {captureDraggingState: true}
+    )
+  })
+
+  it('connects drop target when connectDropTarget is provided', () => {
+    const mockConnectDropTarget = jest.fn()
+    renderInTable(
+      <ColumnHeader {...defaultProps} connectDropTarget={mockConnectDropTarget} />
+    )
+    expect(mockConnectDropTarget).toHaveBeenCalledWith(expect.any(HTMLElement))
+  })
+
+  it('applies width from props to content wrapper', () => {
+    renderInTable(<ColumnHeader {...defaultProps} width="200px" />)
+    const contentWrapper = screen.getByTestId('column-header-content')
+    expect(contentWrapper).toHaveStyle({width: '200px'})
+  })
+
+  it('applies custom testid when provided', () => {
+    renderInTable(<ColumnHeader {...defaultProps} data-testid="custom-col-header" />)
+    const header = screen.getByTestId('custom-col-header')
+    expect(header).toBeInTheDocument()
+  })
+
+  it('filters out drag-drop specific props from DOM', () => {
+    const mockConnectDragSource = (<T,>(el: T) => el) as ConnectDragSource
+    const props = {
+      ...defaultProps,
+      connectDragSource: mockConnectDragSource,
+      onMove: jest.fn(),
+      onDragEnd: jest.fn(),
+      itemId: 'item-1',
+      index: 0,
+      type: 'column',
+    }
+    renderInTable(<ColumnHeader {...props} />)
+    const header = screen.getByRole('columnheader')
+    expect(header).not.toHaveAttribute('onMove')
+    expect(header).not.toHaveAttribute('onDragEnd')
+    expect(header).not.toHaveAttribute('itemId')
+    expect(header).not.toHaveAttribute('index')
+    expect(header).not.toHaveAttribute('type')
+  })
+})

package/lib/translated/da-x-k12/components/Gradebook/table/ColumnHeader/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect } from 'react'
+import { View, ViewProps } from '@instructure/ui-view'
+import { DragDropConnectorProps } from '@/components/Gradebook/dragdrop/DragDropWrapper'
+
+export type ColumnHeaderProps = {
+  children?: React.ReactNode
+  isSticky?: boolean
+  isStacked?: boolean
+  'data-cell-id'?: string
+  'data-testid'?: string
+} & Partial<DragDropConnectorProps> &
+  Omit<ViewProps, 'onDragLeave' | 'onDragEnd'>
+
+export const ColumnHeader = ({
+  children,
+  isSticky,
+  connectDragSource,
+  connectDragPreview,
+  connectDropTarget,
+  isDragging,
+  isStacked,
+  'data-cell-id': dataCellId,
+  ...viewProps
+}: ColumnHeaderProps) => {
+  // Filter out drag-drop specific props that shouldn't be passed to DOM
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { onMove, onDragEnd, itemId, index, type, component, ...cleanViewProps } = viewProps as typeof viewProps & {
+    onMove?: unknown
+    onDragEnd?: unknown
+    itemId?: unknown
+    index?: unknown
+    type?: unknown
+    component?: unknown
+  }
+
+  // Use an empty image as the drag preview to prevent the browser from
+  // screenshotting the table structure when dragging a <th> child
+  useEffect(() => {
+    if (connectDragPreview) {
+      const emptyImage = new Image()
+      emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
+      connectDragPreview(emptyImage, {captureDraggingState: true})
+    }
+  }, [connectDragPreview])
+
+  const headerContent = (
+    <div
+      style={{
+        opacity: isDragging ? 0.5 : 1,
+        transition: 'opacity 0.15s ease-in-out',
+        width: cleanViewProps.width,
+        cursor: connectDragSource ? 'grab' : 'default'
+      }}
+      data-testid="column-header-content"
+    >
+      {children}
+    </div>
+  )
+
+  const content = (
+    <View
+      data-cell-id={dataCellId}
+      as={isStacked ? 'div' : 'th'}
+      scope="col"
+      focusPosition="inset"
+      elementRef={ref => {
+        if (connectDropTarget && ref instanceof HTMLElement) {
+          connectDropTarget(ref as unknown as React.ReactElement)
+        }
+      }}
+      position={isSticky ? 'sticky' : 'static'}
+      insetInlineStart={isSticky ? '0' : undefined}
+      background={!cleanViewProps.background ? 'primary' : cleanViewProps.background}
+      cursor={connectDragSource ? 'grab' : 'default'}
+      stacking="above"
+      {...cleanViewProps}
+    >
+      {connectDragSource ? connectDragSource(headerContent) : headerContent}
+    </View>
+  )
+
+  return content
+}

package/lib/translated/da-x-k12/components/Gradebook/table/Row/__tests__/index.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Table } from '@instructure/ui-table'
+import { Cell } from '@/components/Gradebook/table/Cell'
+import { Row } from '..'
+
+describe('Row', () => {
+  const renderInTable = (ui: React.ReactElement, tableProps = {}) => {
+    return render(
+      <Table caption="Test Table" {...tableProps}>
+        <Table.Body>{ui}</Table.Body>
+      </Table>,
+    )
+  }
+
+  it('renders children content', () => {
+    renderInTable(
+      <Row>
+        <Cell>Cell 1</Cell>
+        <Cell>Cell 2</Cell>
+      </Row>,
+    )
+    expect(screen.getByText('Cell 1')).toBeInTheDocument()
+    expect(screen.getByText('Cell 2')).toBeInTheDocument()
+  })
+
+  it('renders as tr element by default', () => {
+    renderInTable(
+      <Row>
+        <Cell>Test</Cell>
+      </Row>,
+    )
+    const rows = screen.getAllByRole('row')
+    expect(rows.length).toBeGreaterThan(0)
+  })
+
+  it('calls setRef with the element when provided', () => {
+    const setRef = jest.fn()
+    renderInTable(
+      <Row setRef={setRef}>
+        <Cell>Test</Cell>
+      </Row>,
+    )
+    expect(setRef).toHaveBeenCalled()
+  })
+
+  it('renders non-element children that pass filter', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    renderInTable(
+      <Row>
+        <Cell>Cell 1</Cell>
+        {'Plain text'}
+        <Cell>Cell 2</Cell>
+      </Row>,
+    )
+    expect(screen.getByText('Cell 1')).toBeInTheDocument()
+    expect(screen.getByText('Plain text')).toBeInTheDocument()
+    expect(screen.getByText('Cell 2')).toBeInTheDocument()
+
+    consoleSpy.mockRestore()
+  })
+
+  it('renders as div with role when table is stacked', () => {
+    const { container } = renderInTable(
+      <Row>
+        <Cell>Test</Cell>
+      </Row>,
+      { layout: 'stacked' },
+    )
+    const row = container.querySelector('[role="row"]')
+    expect(row).toBeInTheDocument()
+    expect(row?.tagName).toBe('DIV')
+  })
+})