@oslokommune/punkt-react 16.13.3 → 16.15.0

package/src/components/fileupload/Truncate.test.tsx

@@ -1,256 +1,114 @@
 import '@testing-library/jest-dom'
 
-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
-import { Truncate } from './Truncate'
+import { Truncate, TruncateContext } from './Truncate'
 
 expect.extend(toHaveNoViolations)
 
-describe('MiddleTruncate', () => {
-  let resizeObserverCallback: ResizeObserverCallback
-  let observedElements: Set<Element>
-  let originalGetComputedStyle: typeof window.getComputedStyle
+describe('Truncate', () => {
+  test('renders a short filename as a single span with no tail', () => {
+    const { container } = render(<Truncate tail={5}>file.txt</Truncate>)
 
-  beforeEach(() => {
-    observedElements = new Set()
+    const first = container.querySelector('[data-pkt-truncate-part="first"]')
+    const tail = container.querySelector('[data-pkt-truncate-part="tail"]')
 
-    originalGetComputedStyle = window.getComputedStyle
-    // Stable line-height/font-size for overflow calculations in tests
-    window.getComputedStyle = ((...args: any[]) => {
-      const style = originalGetComputedStyle(...(args as [Element]))
-      // Keep CSSStyleDeclaration methods (like getPropertyValue) intact.
-      return new Proxy(style, {
-        get(target, prop) {
-          if (prop === 'lineHeight') return '16px'
-          return (target as any)[prop]
-        },
-      })
-    }) as any
-
-    // Mock ResizeObserver
-    global.ResizeObserver = class ResizeObserver {
-      constructor(callback: ResizeObserverCallback) {
-        resizeObserverCallback = callback
-      }
-
-      observe(element: Element) {
-        observedElements.add(element)
-      }
-
-      unobserve(element: Element) {
-        observedElements.delete(element)
-      }
-
-      disconnect() {
-        observedElements.clear()
-      }
-    } as any
-  })
-
-  afterEach(() => {
-    observedElements.clear()
-    window.getComputedStyle = originalGetComputedStyle
-  })
-
-  const triggerResize = (element: HTMLElement) => {
-    resizeObserverCallback(
-      [
-        {
-          target: element,
-          contentRect: {} as DOMRectReadOnly,
-          borderBoxSize: [] as ResizeObserverSize[],
-          contentBoxSize: [] as ResizeObserverSize[],
-          devicePixelContentBoxSize: [] as ResizeObserverSize[],
-        },
-      ],
-      {} as ResizeObserver,
-    )
-  }
-
-  test('renders text content correctly', () => {
-    render(<Truncate>short-filename.txt</Truncate>)
-
-    expect(
-      screen.getByText(
-        (content, element) =>
-          content === 'short-filename.txt' && element?.getAttribute('data-pkt-truncate-part') === 'first',
-      ),
-    ).toBeInTheDocument()
-  })
-
-  test('renders with custom tail length', () => {
-    const longText = 'very-long-filename-that-needs-truncation.txt'
-    const { container } = render(<Truncate tail={3}>{longText}</Truncate>)
-
-    // Check that the full text is in the first part
-    const wrapper = container.querySelector('[data-pkt-truncate-part="wrapper"]')
-    const firstPart = container.querySelector('[data-pkt-truncate-part="first"]')
-    expect(wrapper).toBeTruthy()
-    expect(firstPart).toBeTruthy()
-    expect(firstPart).toHaveTextContent(longText)
-    expect(wrapper as HTMLElement).toContainElement(firstPart as HTMLElement)
-
-    // Check that the tail part contains the last 3 characters
-    const tailSpan = container.querySelector('[data-pkt-truncate-part="tail"]')
-    expect(tailSpan).toHaveTextContent('txt')
+    expect(first).toHaveTextContent('file.txt')
+    expect(tail).toBeNull() // no split when filename is not longer than tail + 3
   })
 
-  test('uses default tail length of 5', () => {
-    const longText = 'very-long-filename.txt'
-    const { container } = render(<Truncate>{longText}</Truncate>)
-
-    const tailSpan = container.querySelector('[data-pkt-truncate-part="tail"]')
-    expect(tailSpan).toHaveTextContent('e.txt') // last 5 characters
-  })
+  test('splits a long filename into head + tail spans that reconstruct the original', () => {
+    const name = 'very-long-filename-that-needs-truncation.txt'
+    const { container } = render(<Truncate tail={3}>{name}</Truncate>)
 
-  test('does not show tail for very short strings', () => {
-    const shortText = 'file.txt' // 8 characters, tail=5, so 5+3=8, no tail shown
-    const { container } = render(<Truncate tail={5}>{shortText}</Truncate>)
+    const head = container.querySelector('[data-pkt-truncate-part="first"]')
+    const tail = container.querySelector('[data-pkt-truncate-part="tail"]')
 
-    const tailSpan = container.querySelector('[data-pkt-truncate-part="tail"]')
-    expect(tailSpan).toHaveTextContent('') // no tail content (secondPart is null)
+    expect(head).toHaveTextContent(name.slice(0, name.length - 3))
+    expect(tail).toHaveTextContent('txt')
+    expect((head?.textContent ?? '') + (tail?.textContent ?? '')).toBe(name)
   })
 
-  test('tail is hidden when not overflowing', () => {
-    const { container } = render(<Truncate>some-filename.txt</Truncate>)
-
-    const tailSpan = container.querySelector('[data-pkt-truncate-part="tail"]')
-
-    expect(tailSpan).toHaveStyle({ display: 'none' })
-  })
-
-  test('tail becomes visible when overflowing', async () => {
-    const { container } = render(<Truncate>very-long-filename-that-overflows.txt</Truncate>)
-
-    const wrapper = container.querySelector('[data-pkt-truncate-part="wrapper"]') as HTMLElement
-    const measure = container.querySelector('[data-pkt-truncate-part="measure"]') as HTMLElement
-    const tail = container.querySelector('[data-pkt-truncate-part="tail"]') as HTMLElement
-    expect(wrapper).toBeTruthy()
-    expect(measure).toBeTruthy()
-    expect(tail).toBeTruthy()
-
-    // Simulate > 2 lines (lineHeight=16px -> maxHeight=32px)
-    measure.getBoundingClientRect = () => ({ height: 40 } as any)
-
-    // Trigger overflow recalculation (ResizeObserver observes wrapper)
-    act(() => triggerResize(wrapper))
-
-    await waitFor(() => {
-      expect(tail).toHaveStyle({ display: 'inline' })
-    })
-  })
-
-  test('observes the wrapper element with ResizeObserver', () => {
-    const { container } = render(<Truncate>filename.txt</Truncate>)
-
-    const wrapper = container.querySelector('[data-pkt-truncate-part="wrapper"]')
-    expect(observedElements.has(wrapper!)).toBe(true)
-  })
-
-  test('disconnects ResizeObserver on unmount', () => {
-    const { unmount } = render(<Truncate>filename.txt</Truncate>)
-
-    expect(observedElements.size).toBe(1)
-
-    unmount()
+  test('defaults to a tail of 5 characters', () => {
+    const { container } = render(<Truncate>very-long-filename.txt</Truncate>)
 
-    expect(observedElements.size).toBe(0)
+    const tail = container.querySelector('[data-pkt-truncate-part="tail"]')
+    expect(tail).toHaveTextContent('e.txt')
   })
 
-  test('forwards additional props to wrapper span', () => {
-    render(
-      <Truncate className="custom-class" data-testid="test-truncate">
-        filename.txt
-      </Truncate>,
+  test('takes the tail prop over the context default', () => {
+    const { container } = render(
+      <TruncateContext.Provider value={{ tail: 10 }}>
+        <Truncate tail={3}>very-long-filename.txt</Truncate>
+      </TruncateContext.Provider>,
     )
 
-    const wrapper = screen.getByTestId('test-truncate')
-    expect(wrapper).toHaveClass('custom-class')
-    expect(wrapper.tagName).toBe('SPAN')
+    const tail = container.querySelector('[data-pkt-truncate-part="tail"]')
+    expect(tail).toHaveTextContent('txt')
   })
 
-  test('merges custom styles with default styles', () => {
+  test('uses the context tail when no prop is given', () => {
     const { container } = render(
-      <Truncate style={{ color: 'rgb(255, 0, 0)', fontSize: '14px' }}>filename.txt</Truncate>,
+      <TruncateContext.Provider value={{ tail: 4 }}>
+        <Truncate>very-long-filename.txt</Truncate>
+      </TruncateContext.Provider>,
     )
 
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveStyle({
-      display: 'grid',
-      color: 'rgb(255, 0, 0)',
-      fontSize: '14px',
-    })
+    const tail = container.querySelector('[data-pkt-truncate-part="tail"]')
+    expect(tail).toHaveTextContent('.txt')
   })
 
-  test('tail span has aria-hidden attribute', () => {
-    const { container } = render(<Truncate>very-long-filename.txt</Truncate>)
-
-    const tailSpan = container.querySelector('[data-pkt-truncate-part="tail"]')
-    expect(tailSpan).toHaveAttribute('aria-hidden', 'true')
-  })
+  test('does not split when the filename is exactly `tail + 3` characters', () => {
+    const { container } = render(<Truncate tail={5}>{'12345678'}</Truncate>)
 
-  test('applies correct clamp styles to first part', () => {
-    const { container } = render(<Truncate>filename.txt</Truncate>)
+    const head = container.querySelector('[data-pkt-truncate-part="first"]')
+    const tail = container.querySelector('[data-pkt-truncate-part="tail"]')
 
-    const firstPart = container.querySelector('[data-pkt-truncate-part="first"]')
-    expect(firstPart).toHaveStyle({
-      display: '-webkit-box',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'normal',
-      overflowWrap: 'anywhere',
-    })
-    expect(firstPart).toHaveStyle('-webkit-line-clamp: 2')
+    expect(head).toHaveTextContent('12345678')
+    expect(tail).toBeNull()
   })
 
-  test('applies correct styles to tail span', () => {
-    const { container } = render(<Truncate>very-long-filename.txt</Truncate>)
+  test('does not split when tail is 0 or undefined', () => {
+    const { container: zero } = render(<Truncate tail={0}>very-long-filename.txt</Truncate>)
+    expect(zero.querySelector('[data-pkt-truncate-part="tail"]')).toBeNull()
 
-    const tailSpan = container.querySelector('[data-pkt-truncate-part="tail"]')
-    expect(tailSpan).toHaveStyle({
-      whiteSpace: 'nowrap',
-      paddingRight: '0.5rem',
-    })
+    const { container: none } = render(
+      <TruncateContext.Provider value={{ tail: undefined }}>
+        <Truncate>very-long-filename.txt</Truncate>
+      </TruncateContext.Provider>,
+    )
+    expect(none.querySelector('[data-pkt-truncate-part="tail"]')).toBeNull()
   })
 
-  test('handles empty string', () => {
+  test('handles an empty string', () => {
     const { container } = render(<Truncate>{''}</Truncate>)
 
-    const firstPart = container.querySelector('[data-pkt-truncate-part="first"]')
-    expect(firstPart).toHaveTextContent('')
-  })
-
-  test('handles string exactly equal to tail + 3', () => {
-    const text = '12345678' // 8 characters, tail=5, so 5+3=8
-    const { container } = render(<Truncate tail={5}>{text}</Truncate>)
-
-    const tailSpan = container.querySelector('[data-pkt-truncate-part="tail"]')
-    expect(tailSpan).toHaveTextContent('') // secondPart should be null
+    const first = container.querySelector('[data-pkt-truncate-part="first"]')
+    expect(first).toHaveTextContent('')
+    expect(container.querySelector('[data-pkt-truncate-part="tail"]')).toBeNull()
   })
 
   describe('accessibility', () => {
-    test('renders with no wcag errors', async () => {
-      const { container } = render(<Truncate>filename-with-accessibility.txt</Truncate>)
+    test('has no wcag violations for a short filename', async () => {
+      const { container } = render(<Truncate>filename.txt</Truncate>)
       const results = await axe(container)
-
       expect(results).toHaveNoViolations()
     })
 
-    test('renders with no wcag errors when overflowing', async () => {
+    test('has no wcag violations for a split filename — both head and tail are readable text', async () => {
       const { container } = render(
-        <Truncate>very-long-filename-that-definitely-overflows-the-container.txt</Truncate>,
+        <Truncate>very-long-filename-that-definitely-needs-truncation.txt</Truncate>,
       )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
 
-      const wrapper = container.querySelector('[data-pkt-truncate-part="wrapper"]') as HTMLElement
-      const measure = container.querySelector('[data-pkt-truncate-part="measure"]') as HTMLElement
-      measure.getBoundingClientRect = () => ({ height: 40 } as any)
-      act(() => triggerResize(wrapper))
-
-      await waitFor(async () => {
-        const results = await axe(container)
-        expect(results).toHaveNoViolations()
-      })
+      // head + tail together equal the original, so screen readers read the full name.
+      const head = screen.getByText(/very-long-filename-that-definitely-needs-trunc/)
+      const tail = screen.getByText('n.txt')
+      expect((head.textContent ?? '') + (tail.textContent ?? '')).toBe(
+        'very-long-filename-that-definitely-needs-truncation.txt',
+      )
     })
   })
 })

package/src/components/fileupload/Truncate.tsx

@@ -1,137 +1,41 @@
-import {
-  createContext,
-  HTMLAttributes,
-  useCallback,
-  useContext,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { createContext, useContext } from 'react'
 
-const MAX_LINES = 2
+import { splitFilenameForTruncation } from 'shared-utils/fileupload'
 
-const getLineHeightPx = (element: HTMLElement): number => {
-  const style = window.getComputedStyle(element)
-  const lineHeight = parseFloat(style.lineHeight)
-  if (!Number.isNaN(lineHeight) && lineHeight > 0) return lineHeight
-
-  // `line-height: normal` fallback (approx. 1.2 * font-size)
-  const fontSize = parseFloat(style.fontSize)
-  return (!Number.isNaN(fontSize) && fontSize > 0 ? fontSize : 16) * 1.2
-}
-
-const elementOverflowsLines = (measureEl: HTMLElement, lineHeightPx: number, maxLines: number): boolean => {
-  const maxHeight = lineHeightPx * maxLines
-  const height = measureEl.getBoundingClientRect().height
-  return height > maxHeight + 0.5
-}
-
-export interface IMiddleTruncate extends HTMLAttributes<HTMLSpanElement> {
+export interface IMiddleTruncate {
   children: string
+  /** Trailing chars to preserve when the name is long enough to split. */
   tail?: number
 }
 
 type TTruncateContext = { tail: number | undefined }
 export const TruncateContext = createContext<TTruncateContext>({ tail: 5 })
 
-export const Truncate = ({ children, tail: tailProp, ...props }: IMiddleTruncate): JSX.Element => {
-  const firstPart = children
+/**
+ * Middle-truncate a filename. Renders as a React fragment — the parent element
+ * (typically a `<p className="…__title">`) is the grid container that drives
+ * the layout via CSS in `_fileupload.scss`. The split threshold is shared with
+ * the Lit implementation through `splitFilenameForTruncation`.
+ *
+ * For short filenames the tail span is omitted and the text renders unwrapped.
+ */
+export const Truncate = ({ children, tail: tailProp }: IMiddleTruncate): JSX.Element => {
   const context = useContext(TruncateContext)
-  const tail = tailProp !== undefined ? tailProp : context.tail || 0
-  const secondPart = children.length <= tail + 3 ? null : children.slice(-tail)
-  const showingSecondPart = secondPart !== null && tail > 0
-  const wrapperRef = useRef<HTMLSpanElement>(null)
-  const measureRef = useRef<HTMLSpanElement>(null)
-  const [isOverflowing, setIsOverflowing] = useState(false)
-
-  const computeOverflow = useCallback(() => {
-    const wrapper = wrapperRef.current
-    const measureEl = measureRef.current
-    if (!wrapper || !measureEl) return
+  const tail = tailProp !== undefined ? tailProp : context.tail
+  const split = splitFilenameForTruncation(children, tail)
 
-    const lineHeightPx = getLineHeightPx(wrapper)
-    setIsOverflowing(elementOverflowsLines(measureEl, lineHeightPx, MAX_LINES))
-  }, [])
+  if (!split) {
+    return <span data-pkt-truncate-part="first">{children}</span>
+  }
 
-  const resizeObserver = useMemo(() => {
-    return new ResizeObserver((entries) => {
-      if (entries.some((entry) => entry.target === wrapperRef.current)) {
-        computeOverflow()
-      }
-    })
-  }, [computeOverflow])
-  useLayoutEffect(() => {
-    if (wrapperRef.current) {
-      resizeObserver.observe(wrapperRef.current)
-    }
-    computeOverflow()
-    return () => resizeObserver.disconnect()
-  }, [children, resizeObserver, computeOverflow])
   return (
-    <span
-      ref={wrapperRef}
-      {...props}
-      data-pkt-truncate-part="wrapper"
-      style={{
-        maxWidth: '100%',
-        width: '100%',
-        display: 'grid',
-        gridTemplateColumns: 'minmax(0, 1fr) auto',
-        alignItems: 'end',
-        columnGap: '0.25rem',
-        overflow: 'hidden',
-        position: 'relative',
-        ...props.style,
-      }}
-    >
-      <span
-        data-pkt-truncate-part="first"
-        style={{
-          minWidth: 0,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
-          WebkitLineClamp: MAX_LINES,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'normal',
-          overflowWrap: 'anywhere',
-        }}
-      >
-        {firstPart}
+    <>
+      <span className="pkt-fileupload__queue-display__item__title__head" data-pkt-truncate-part="first">
+        {split.head}
       </span>
-      {tail !== 0 && (
-        <span
-          data-pkt-truncate-part="tail"
-          style={{
-            whiteSpace: 'nowrap',
-            display: isOverflowing ? 'inline' : 'none',
-            paddingRight: '0.5rem',
-          }}
-          aria-hidden={true}
-        >
-          {secondPart}
-        </span>
-      )}
-
-      {/* Hidden measuring element (full text, wraps normally) */}
-      <span
-        ref={measureRef}
-        aria-hidden={true}
-        data-pkt-truncate-part="measure"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          visibility: 'hidden',
-          pointerEvents: 'none',
-          whiteSpace: 'normal',
-          overflowWrap: 'anywhere',
-        }}
-      >
-        {children}
+      <span className="pkt-fileupload__queue-display__item__title__tail" data-pkt-truncate-part="tail">
+        {split.tail}
       </span>
-    </span>
+    </>
   )
 }