Merge pull request #2908 from statisticsnorway/MIM-2045_bugfix_mobile…

…_scroll_attachment_table

[MIM-2045] Mim 2045 bugfix mobile scroll attachment table

package.json

@@ -74,7 +74,7 @@
     "@item-enonic-types/lib-thymeleaf": "~2.1.0",
     "@item-enonic-types/lib-time": "~1.0.4",
     "@reduxjs/toolkit": "~2.2.7",
-    "@statisticsnorway/ssb-component-library": "~2.2.14",
+    "@statisticsnorway/ssb-component-library": "~2.2.15",
     "@types/grecaptcha": "^3.0.9",
     "@types/ramda": "~0.30.2",
     "@types/react": "~18.3.5",

src/main/resources/lib/types/partTypes/attachmentTablesFigures.ts

@@ -1,3 +1,4 @@
+import { type TableProps } from '/lib/types/partTypes/table'
 import { type AccordionData } from '/lib/types/partTypes/accordion'
 
 export type AttachmentTablesFiguresProps = {
@@ -12,6 +13,6 @@ export type AttachmentTablesFiguresProps = {
 export interface AttachmentTablesFiguresData extends AccordionData {
   contentType: string
   subHeader: string
-  props?: object
+  props?: TableProps | object
   pageContributions?: XP.PageContributions
 }

src/main/resources/lib/types/partTypes/table.ts

@@ -23,6 +23,7 @@ export interface TableProps {
   sourceTableLabel: string
   statBankWebUrl: string
   hiddenTitle: string | undefined
+  checkIsOverflowing?: boolean
 }
 
 export interface TableStandardSymbolLink {

src/main/resources/react4xp/_entries/AttachmentTablesFigures.tsx

@@ -7,6 +7,7 @@ import {
   type AttachmentTablesFiguresProps,
   type AttachmentTablesFiguresData,
 } from '../../lib/types/partTypes/attachmentTablesFigures'
+import { type TableProps } from '../../lib/types/partTypes/table'
 
 import Table from '../table/Table'
 
@@ -15,6 +16,14 @@ function AttachmentTableFigures(props: AttachmentTablesFiguresProps) {
   const { accordions, freeText, showAll, showLess, title } = props
   const currentElement = useRef<null | HTMLLIElement>(null)
   const [focusElement, setFocusElement] = useState(false)
+  const [checkOverflow, setCheckOverflow] = useState(false)
+
+  useEffect(() => {
+    if (focusElement && currentElement.current) {
+      const btn = currentElement.current.firstChild?.firstChild as HTMLButtonElement
+      btn.focus()
+    }
+  }, [isHidden])
 
   function toggleBox() {
     setIsHidden((prevState) => !prevState)
@@ -79,7 +88,7 @@ function AttachmentTableFigures(props: AttachmentTablesFiguresProps) {
 
   function renderAccordionBody(accordion: AttachmentTablesFiguresData) {
     if (accordion.contentType === `${props.appName}:table`) {
-      return <Table {...accordion.props} />
+      return <Table checkIsOverflowing={checkOverflow} {...(accordion.props as TableProps)} />
     } else {
       // Table or figure from content studio (no user input), hence no need to sanitize
       return <div dangerouslySetInnerHTML={{ __html: accordion.body! }}></div>
@@ -89,13 +98,6 @@ function AttachmentTableFigures(props: AttachmentTablesFiguresProps) {
   const location = window.location
   const anchor = location && location.hash !== '' ? location.hash.substr(1) : undefined
 
-  useEffect(() => {
-    if (focusElement && currentElement.current) {
-      const btn = currentElement.current.firstChild?.firstChild as HTMLButtonElement
-      btn.focus()
-    }
-  }, [isHidden])
-
   return (
     <React.Fragment>
       <h2>{title}</h2>
@@ -113,6 +115,10 @@ function AttachmentTableFigures(props: AttachmentTablesFiguresProps) {
                       header={accordion.open}
                       subHeader={accordion.subHeader}
                       openByDefault={anchor && accordion.id && accordion.id === anchor}
+                      onToggle={() => {
+                        // Check for Table overflow when toggling accordion
+                        setCheckOverflow((prev) => !prev)
+                      }}
                     >
                       {renderAccordionBody(accordion)}
                     </Accordion>

src/main/resources/react4xp/table/Table.tsx

@@ -124,7 +124,12 @@ function Table(props: TableProps) {
   function createTable() {
     const { tableClass } = props.table
     return (
-      <SSBTable className={tableClass} caption={addCaption()} dataNoteRefs={props.table.caption?.noterefs}>
+      <SSBTable
+        className={tableClass}
+        caption={addCaption()}
+        dataNoteRefs={props.table.caption?.noterefs}
+        checkIsOverflowing={props.checkIsOverflowing}
+      >
         {props.table.thead?.map((t, index) => (
           <React.Fragment key={index}>
             {addThead(index)}