npm - @popsure/dirty-swan - Versions diffs - 0.66.25 → 0.66.26 - Mend

@popsure/dirty-swan 0.66.25 → 0.66.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/cjs/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts CHANGED Viewed

@@ -3,11 +3,13 @@ interface UseTableNavigationReturn {
     activeSection: number;
     navigateTable: (increase?: boolean) => void;
     setActiveSection: (section: number) => void;
+    syncActiveSection: (section: number) => void;
 }
 interface UseTableNavigationProps {
     containerRef: React.RefObject<HTMLElement>;
     enabled?: boolean;
+    initialSection?: number;
     onSelectionChanged?: (index: number) => void;
 }
-export declare const useTableNavigation: ({ enabled, containerRef, onSelectionChanged }: UseTableNavigationProps) => UseTableNavigationReturn;
+export declare const useTableNavigation: ({ enabled, containerRef, initialSection, onSelectionChanged }: UseTableNavigationProps) => UseTableNavigationReturn;
 export {};

package/dist/esm/components/table/Table.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { Card } from '../cards/card/index.js';
 import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
 import { u as useMediaQuery } from '../../useMediaQuery-BlEUymPA.js';
 import { TableContents } from './components/TableContents/TableContents.js';
-import { u as useTableNavigation } from '../../useTableNavigation-CrxoXTVd.js';
+import { u as useTableNavigation } from '../../useTableNavigation-C-vb2BxI.js';
 import { TableControls } from './components/TableControls/TableControls.js';
 import { i as isBaseCell, T as TableSection } from '../../TableSection-Cm50RX-V.js';
 import { u as useScrollSync } from '../../useScrollSync-C5UXYPIB.js';
@@ -70,8 +70,9 @@ var Table = function (_a) {
     var _s = useTableNavigation({
         enabled: isMobile,
         containerRef: containerRef,
+        initialSection: externalActiveSection ? externalActiveSection - 1 : 0,
         onSelectionChanged: onSelectionChanged,
-    }), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection;
+    }), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection, syncActiveSection = _s.syncActiveSection;
     var headerRow = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0];
     var titleCell = __assign({ text: '' }, ((headerRow === null || headerRow === void 0 ? void 0 : headerRow[0]) || {}));
     var currentActiveSection = headerRow === null || headerRow === void 0 ? void 0 : headerRow[activeSection];
@@ -98,7 +99,7 @@ var Table = function (_a) {
     }, []);
     useEffect(function () {
         if (externalActiveSection && externalActiveSection !== activeSection) {
-            setActiveSection(externalActiveSection - 1);
+            syncActiveSection(externalActiveSection - 1);
         }
     }, [externalActiveSection]);
     return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsxs(Fragment, { children: [!useTabs && (titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsx(TableCell, __assign({}, titleCell, { align: "left", isNavigation: true, isTopLeftCell: true, type: undefined }))), !hideTableNavigation && currentActiveSection && (useTabs ? (jsx("div", { className: classNames('bg-white', styles.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx(Tabs, { tabs: mobileTabs, activeIndex: activeSection - 1, onTabChange: function (index) { return setActiveSection(index); }, className: "mb16" }) })) : (jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)

package/dist/esm/components/table/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n CellReplacements,\n isBaseCell,\n ModalData,\n ModalFunction,\n TableCellData,\n TableData,\n} from './types';\nimport { Tabs, TabItem } from '../tabs/Tabs';\n\nexport type { TableData } from './types';\n\ntype TextOverrides = {\n showDetails?: string;\n hideDetails?: string;\n};\n\nexport interface TableProps {\n cellReplacements?: CellReplacements;\n className?: string;\n collapsibleSections?: boolean;\n hideColumns?: number[];\n hideDetails?: boolean;\n hideRows?: number[];\n imageComponent?: (args: any) => JSX.Element;\n modalContentRenderer?: (content: ReactNode) => ReactNode;\n onModalOpen?: ModalFunction;\n onSelectionChanged?: (index: number) => void;\n scrollOnOpen?: boolean;\n scrollTopOffset?: number;\n stickyHeaderTopOffset?: number;\n tableData: TableData;\n textOverrides?: TextOverrides;\n title: string;\n activeSection?: number;\n hideTableNavigation?: boolean;\n hideStickyHeader?: boolean;\n showSelectedColumn?: boolean;\n mobileNavigationMode?: 'arrows' \| 'tabs';\n}\n\nconst defaultTextOverrides = {\n showDetails: 'Show details',\n hideDetails: 'Hide details',\n};\n\nconst Table = ({\n cellReplacements,\n className,\n collapsibleSections,\n hideColumns = [],\n hideDetails,\n hideRows = [],\n imageComponent,\n modalContentRenderer,\n onModalOpen,\n onSelectionChanged,\n scrollOnOpen,\n scrollTopOffset = 0,\n stickyHeaderTopOffset = 0,\n tableData,\n textOverrides: definedTextOverrides,\n title,\n activeSection: externalActiveSection,\n hideTableNavigation = false,\n hideStickyHeader = false,\n showSelectedColumn = false,\n mobileNavigationMode = 'arrows',\n}: TableProps) => {\n const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n const isMobile = useMediaQuery('BELOW_MOBILE');\n const [infoModalData, setInfoModalData] = useState<ModalData \| null>(null);\n const [shouldHideDetails, setShouldHideDetails] = useState(true);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLDivElement \| null>(null);\n const stickyHeaderRef = useRef<HTMLDivElement \| null>(null);\n const columnsLength = tableData[0].rows[0].length;\n\n useScrollSync(headerRef, containerRef, !isMobile);\n\n const useTabs = isMobile && mobileNavigationMode === 'tabs';\n\n const { activeSection, navigateTable, setActiveSection } = useTableNavigation(\n {\n enabled: isMobile,\n containerRef,\n onSelectionChanged,\n }\n );\n\n const headerRow = tableData?.[0]?.rows?.[0];\n const titleCell = {\n text: '',\n ...(headerRow?.[0] \|\| {}),\n };\n const currentActiveSection = headerRow?.[activeSection];\n\n const mobileTabs: TabItem[] = useTabs\n ? headerRow\n ?.slice(1)\n .map((cell, index) => {\n let label = '';\n if (!cell.type) label = String(cell.text \|\| '');\n else if (cell.type === 'CTA') label = String(cell.title \|\| '');\n else if (cell.type === 'BUTTON') label = String(cell.buttonCaption \|\| '');\n return { id: String(index), label };\n }) ?? []\n : [];\n\n const currentActiveSectionReplacements =\n (currentActiveSection?.cellId &&\n cellReplacements?.[currentActiveSection.cellId]) \|\|\n {};\n\n const activeCellProps = {\n ...currentActiveSection,\n ...currentActiveSectionReplacements,\n } as TableCellData;\n\n const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n onModalOpen?.({ body, title });\n setInfoModalData({ body, title });\n }, []);\n\n useEffect(() => {\n if (externalActiveSection && externalActiveSection !== activeSection) {\n setActiveSection(externalActiveSection - 1);\n }\n }, [externalActiveSection]);\n\n return (\n <div className={classNames(styles.wrapper, 'bg-white')}>\n {isMobile ? (\n <>\n {!useTabs && titleCell?.text && (\n <TableCell\n {...titleCell}\n align=\"left\"\n isNavigation\n isTopLeftCell\n type={undefined}\n />\n )}\n\n {!hideTableNavigation && currentActiveSection && (\n useTabs ? (\n <div\n className={classNames(\n 'bg-white',\n styles.stickyHeader\n )}\n style={{ top: `${stickyHeaderTopOffset}px` }}\n >\n <Tabs\n tabs={mobileTabs}\n activeIndex={activeSection - 1}\n onTabChange={(index) => setActiveSection(index)}\n className=\"mb16\"\n />\n </div>\n ) : (\n <TableControls\n activeSection={activeSection}\n columnsLength={columnsLength}\n navigateTable={navigateTable}\n stickyHeaderTopOffset={stickyHeaderTopOffset}\n >\n <TableCell\n {...(isBaseCell(currentActiveSection)\n ? {\n openModal: (body: ReactNode) =>\n handleOpenModal({\n body,\n title: currentActiveSection?.text,\n }),\n }\n : {})}\n {...activeCellProps}\n imageComponent={imageComponent}\n isNavigation\n />\n </TableControls>\n )\n )}\n </>\n ) : (\n !hideStickyHeader && (\n <div\n ref={stickyHeaderRef}\n aria-hidden\n className={styles.stickyHeader}\n style={{ top: `${stickyHeaderTopOffset}px` }}\n >\n <div className={styles.container} ref={headerRef}>\n <TableSection\n cellReplacements={cellReplacements}\n className={className}\n hideColumns={hideColumns}\n hideRows={hideRows}\n openModal={handleOpenModal}\n tableCellRows={[tableData?.[0]?.rows?.[0]]}\n title={title}\n imageComponent={imageComponent}\n />\n </div>\n </div>\n )\n )}\n\n <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n <TableContents\n tableData={tableData}\n title={title}\n className={className}\n collapsibleSections={collapsibleSections}\n scrollOnOpen={scrollOnOpen}\n scrollTopOffset={scrollTopOffset}\n stickyHeaderRef={stickyHeaderRef}\n hideColumns={hideColumns}\n hideDetails={hideDetails}\n hideRows={hideRows}\n isMobile={isMobile}\n shouldHideDetails={shouldHideDetails}\n openModal={handleOpenModal}\n cellReplacements={cellReplacements}\n imageComponent={imageComponent}\n selectedColumn={showSelectedColumn ? activeSection : undefined}\n showHeader={useTabs}\n />\n </div>\n\n {tableData?.length > 1 && hideDetails && (\n <Card\n data-testid=\"show-hide-details\"\n classNames={{\n buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),\n title: 'd-flex gap8 ai-center jc-center fw-bold',\n }}\n title={\n <>\n {shouldHideDetails\n ? textOverrides.showDetails\n : textOverrides.hideDetails}\n {shouldHideDetails ? (\n <ChevronDownIcon size={20} />\n ) : (\n <ChevronUpIcon size={20} />\n )}\n </>\n }\n actionIcon={null}\n dropShadow={false}\n titleVariant=\"small\"\n density=\"xsmall\"\n onClick={() => setShouldHideDetails((current) => !current)}\n />\n )}\n\n <BottomOrRegularModal\n isOpen={infoModalData?.body ? true : false}\n title={infoModalData?.title}\n onClose={() => setInfoModalData(null)}\n >\n <div className={classNames(styles.modalContent, 'pt8 p24 wmn6')}>\n {modalContentRenderer\n ? modalContentRenderer(infoModalData?.body)\n : infoModalData?.body}\n </div>\n </BottomOrRegularModal>\n </div>\n );\n};\n\nexport { Table };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAM,oBAAoB,GAAG;AAC3B,IAAA,WAAW,EAAE,cAAc;AAC3B,IAAA,WAAW,EAAE,cAAc;CAC5B;AAED,IAAM,KAAK,GAAG,UAAC,EAsBF,EAAA;;QArBX,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,EAAA,GAAA,EAAA,CAAA,WAAgB,EAAhB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,KAAA,EAChB,WAAW,iBAAA,EACX,EAAA,GAAA,EAAA,CAAA,QAAa,EAAb,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACb,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,oBAAoB,GAAA,EAAA,CAAA,oBAAA,EACpB,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,GAAA,EAAA,EACnB,EAAA,GAAA,EAAA,CAAA,qBAAyB,EAAzB,qBAAqB,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,KAAA,EACzB,SAAS,eAAA,EACM,oBAAoB,mBAAA,EACnC,KAAK,WAAA,EACU,qBAAqB,mBAAA,EACpC,EAAA,GAAA,EAAA,CAAA,mBAA2B,EAA3B,mBAAmB,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EAC3B,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,GAAA,EAAA,EACxB,EAAA,GAAA,EAAA,CAAA,kBAA0B,EAA1B,kBAAkB,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,KAAA,EAC1B,EAAA,GAAA,EAAA,CAAA,oBAA+B,EAA/B,oBAAoB,GAAA,EAAA,KAAA,MAAA,GAAG,QAAQ,GAAA,EAAA;AAE/B,IAAA,IAAM,aAAa,GAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,oBAAoB,CAAA,EAAK,oBAAoB,CAAE;AAC1E,IAAA,IAAM,QAAQ,GAAG,aAAa,CAAC,cAAc,CAAC;IACxC,IAAA,EAAA,GAAoC,QAAQ,CAAmB,IAAI,CAAC,EAAnE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAoC;IACpE,IAAA,EAAA,GAA4C,QAAQ,CAAC,IAAI,CAAC,EAAzD,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,oBAAoB,GAAA,EAAA,CAAA,CAAA,CAAkB;AAChE,IAAA,IAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,IAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC;AACrD,IAAA,IAAM,eAAe,GAAG,MAAM,CAAwB,IAAI,CAAC;AAC3D,IAAA,IAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM;IAEjD,aAAa,CAAC,SAAS,EAAE,YAAY,EAAE,CAAC,QAAQ,CAAC;AAEjD,IAAA,IAAM,OAAO,GAAG,QAAQ,IAAI,oBAAoB,KAAK,MAAM;IAErD,IAAA,EAAA,GAAqD,kBAAkB,CAC3E;AACE,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,kBAAkB,EAAA,kBAAA;KACnB,CACF,EANO,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,gBAAgB,GAAA,EAAA,CAAA,gBAMrD;AAED,IAAA,IAAM,SAAS,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAG,CAAC,CAAC;IAC3C,IAAM,SAAS,cACb,IAAI,EAAE,EAAE,EAAA,GACJ,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAG,CAAC,CAAC,KAAI,EAAE,EACzB;IACD,IAAM,oBAAoB,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAG,aAAa,CAAC;IAEvD,IAAM,UAAU,GAAc;AAC5B,UAAE,CAAA,EAAA,GAAA,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CACL,KAAK,CAAC,CAAC,CAAA,CACR,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,EAAA;YACf,IAAI,KAAK,GAAG,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAC1C,iBAAA,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK;gBAAE,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;AACzD,iBAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAAE,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;YACzE,OAAO,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,EAAA,KAAA,EAAE;QACrC,CAAC,CAAC,mCAAI;UACR,EAAE;IAEN,IAAM,gCAAgC,GACpC,CAAC,CAAA,oBAAoB,aAApB,oBAAoB,KAAA,MAAA,GAAA,MAAA,GAApB,oBAAoB,CAAE,MAAM;SAC3B,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAG,oBAAoB,CAAC,MAAM,CAAC,CAAA;AACjD,QAAA,EAAE;AAEJ,IAAA,IAAM,eAAe,GAAG,QAAA,CAAA,QAAA,CAAA,EAAA,EACnB,oBAAoB,CAAA,EACpB,gCAAgC,CACnB;AAElB,IAAA,IAAM,eAAe,GAAkB,WAAW,CAAC,UAAC,EAAe,EAAA;YAAb,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA;AAC/D,QAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAG,EAAE,IAAI,EAAA,IAAA,EAAE,KAAK,EAAA,KAAA,EAAE,CAAC;QAC9B,gBAAgB,CAAC,EAAE,IAAI,EAAA,IAAA,EAAE,KAAK,EAAA,KAAA,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,qBAAqB,IAAI,qBAAqB,KAAK,aAAa,EAAE;AACpE,YAAA,gBAAgB,CAAC,qBAAqB,GAAG,CAAC,CAAC;QAC7C;AACF,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC;AAE3B,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,EAAA,QAAA,EAAA,CACnD,QAAQ,IACPA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,CAAC,OAAO,KAAI,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,CAAA,KAC1BC,IAAC,SAAS,EAAA,QAAA,CAAA,EAAA,EACJ,SAAS,EAAA,EACb,KAAK,EAAC,MAAM,EACZ,YAAY,EAAA,IAAA,EACZ,aAAa,EAAA,IAAA,EACb,IAAI,EAAE,SAAS,EAAA,CAAA,CACf,CACH,EAEA,CAAC,mBAAmB,IAAI,oBAAoB,KAC3C,OAAO,IACLA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,UAAU,EACV,MAAM,CAAC,YAAY,CACpB,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,EAAA,IAAA,CAAI,EAAE,EAAA,QAAA,EAE5CA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,aAAa,GAAG,CAAC,EAC9B,WAAW,EAAE,UAAC,KAAK,EAAA,EAAK,OAAA,gBAAgB,CAAC,KAAK,CAAC,EAAvB,CAAuB,EAC/C,SAAS,EAAC,MAAM,EAAA,CAChB,EAAA,CACE,KAENA,GAAA,CAAC,aAAa,EAAA,EACZ,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,qBAAqB,EAAE,qBAAqB,EAAA,QAAA,EAE5CA,GAAA,CAAC,SAAS,EAAA,QAAA,CAAA,EAAA,GACH,UAAU,CAAC,oBAAoB;AAClC,8BAAE;gCACE,SAAS,EAAE,UAAC,IAAe,EAAA;AACzB,oCAAA,OAAA,eAAe,CAAC;AACd,wCAAA,IAAI,EAAA,IAAA;AACJ,wCAAA,KAAK,EAAE,oBAAoB,KAAA,IAAA,IAApB,oBAAoB,KAAA,MAAA,GAAA,MAAA,GAApB,oBAAoB,CAAE,IAAI;qCAClC,CAAC;gCAHF,CAGE;AACL;8BACD,EAAE,GACF,eAAe,IACnB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAA,IAAA,EAAA,CAAA,CACZ,GACY,CACjB,CACF,CAAA,EAAA,CACA,KAEH,CAAC,gBAAgB,KACfA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,eAAe,EAAA,aAAA,EAAA,IAAA,EAEpB,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,EAAA,IAAA,CAAI,EAAE,EAAA,QAAA,EAE5CA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,SAAS,YAC9CA,GAAA,CAAC,YAAY,EAAA,EACX,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAa,EAAE,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAG,CAAC,CAAC,CAAC,EAC1C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAAA,CAC9B,EAAA,CACE,EAAA,CACF,CACP,CACF,EAEDA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,EAAA,QAAA,EACpEA,IAAC,aAAa,EAAA,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,mBAAmB,EACxC,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,eAAe,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,kBAAkB,GAAG,aAAa,GAAG,SAAS,EAC9D,UAAU,EAAE,OAAO,EAAA,CACnB,EAAA,CACE,EAEL,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,MAAM,IAAG,CAAC,IAAI,WAAW,KACnCA,GAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EACS,mBAAmB,EAC/B,UAAU,EAAE;oBACV,aAAa,EAAE,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC;AACvD,oBAAA,KAAK,EAAE,yCAAyC;iBACjD,EACD,KAAK,EACHF,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG;8BACG,aAAa,CAAC;8BACd,aAAa,CAAC,WAAW,EAC5B,iBAAiB,IAChBC,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,KAE7BA,GAAA,CAAC,aAAa,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,CAC5B,CAAA,EAAA,CACA,EAEL,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,KAAK,EACjB,YAAY,EAAC,OAAO,EACpB,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,YAAA,EAAM,OAAA,oBAAoB,CAAC,UAAC,OAAO,EAAA,EAAK,OAAA,CAAC,OAAO,CAAA,CAAR,CAAQ,CAAC,CAAA,CAA3C,CAA2C,EAAA,CAC1D,CACH,EAEDA,GAAA,CAAC,oBAAoB,EAAA,EACnB,MAAM,EAAE,CAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI,IAAG,IAAI,GAAG,KAAK,EAC1C,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAC3B,OAAO,EAAE,YAAA,EAAM,OAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,CAAtB,CAAsB,EAAA,QAAA,EAErCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,EAAA,QAAA,EAC5D;0BACG,oBAAoB,CAAC,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AAC1C,0BAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI,EAAA,CACnB,EAAA,CACe,CAAA,EAAA,CACnB;AAEV;;;;"}
1	+ {"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n CellReplacements,\n isBaseCell,\n ModalData,\n ModalFunction,\n TableCellData,\n TableData,\n} from './types';\nimport { Tabs, TabItem } from '../tabs/Tabs';\n\nexport type { TableData } from './types';\n\ntype TextOverrides = {\n showDetails?: string;\n hideDetails?: string;\n};\n\nexport interface TableProps {\n cellReplacements?: CellReplacements;\n className?: string;\n collapsibleSections?: boolean;\n hideColumns?: number[];\n hideDetails?: boolean;\n hideRows?: number[];\n imageComponent?: (args: any) => JSX.Element;\n modalContentRenderer?: (content: ReactNode) => ReactNode;\n onModalOpen?: ModalFunction;\n onSelectionChanged?: (index: number) => void;\n scrollOnOpen?: boolean;\n scrollTopOffset?: number;\n stickyHeaderTopOffset?: number;\n tableData: TableData;\n textOverrides?: TextOverrides;\n title: string;\n activeSection?: number;\n hideTableNavigation?: boolean;\n hideStickyHeader?: boolean;\n showSelectedColumn?: boolean;\n mobileNavigationMode?: 'arrows' \| 'tabs';\n}\n\nconst defaultTextOverrides = {\n showDetails: 'Show details',\n hideDetails: 'Hide details',\n};\n\nconst Table = ({\n cellReplacements,\n className,\n collapsibleSections,\n hideColumns = [],\n hideDetails,\n hideRows = [],\n imageComponent,\n modalContentRenderer,\n onModalOpen,\n onSelectionChanged,\n scrollOnOpen,\n scrollTopOffset = 0,\n stickyHeaderTopOffset = 0,\n tableData,\n textOverrides: definedTextOverrides,\n title,\n activeSection: externalActiveSection,\n hideTableNavigation = false,\n hideStickyHeader = false,\n showSelectedColumn = false,\n mobileNavigationMode = 'arrows',\n}: TableProps) => {\n const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n const isMobile = useMediaQuery('BELOW_MOBILE');\n const [infoModalData, setInfoModalData] = useState<ModalData \| null>(null);\n const [shouldHideDetails, setShouldHideDetails] = useState(true);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLDivElement \| null>(null);\n const stickyHeaderRef = useRef<HTMLDivElement \| null>(null);\n const columnsLength = tableData[0].rows[0].length;\n\n useScrollSync(headerRef, containerRef, !isMobile);\n\n const useTabs = isMobile && mobileNavigationMode === 'tabs';\n\n const { activeSection, navigateTable, setActiveSection, syncActiveSection } =\n useTableNavigation({\n enabled: isMobile,\n containerRef,\n initialSection: externalActiveSection ? externalActiveSection - 1 : 0,\n onSelectionChanged,\n });\n\n const headerRow = tableData?.[0]?.rows?.[0];\n const titleCell = {\n text: '',\n ...(headerRow?.[0] \|\| {}),\n };\n const currentActiveSection = headerRow?.[activeSection];\n\n const mobileTabs: TabItem[] = useTabs\n ? headerRow\n ?.slice(1)\n .map((cell, index) => {\n let label = '';\n if (!cell.type) label = String(cell.text \|\| '');\n else if (cell.type === 'CTA') label = String(cell.title \|\| '');\n else if (cell.type === 'BUTTON') label = String(cell.buttonCaption \|\| '');\n return { id: String(index), label };\n }) ?? []\n : [];\n\n const currentActiveSectionReplacements =\n (currentActiveSection?.cellId &&\n cellReplacements?.[currentActiveSection.cellId]) \|\|\n {};\n\n const activeCellProps = {\n ...currentActiveSection,\n ...currentActiveSectionReplacements,\n } as TableCellData;\n\n const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n onModalOpen?.({ body, title });\n setInfoModalData({ body, title });\n }, []);\n\n useEffect(() => {\n if (externalActiveSection && externalActiveSection !== activeSection) {\n syncActiveSection(externalActiveSection - 1);\n }\n }, [externalActiveSection]);\n\n return (\n <div className={classNames(styles.wrapper, 'bg-white')}>\n {isMobile ? (\n <>\n {!useTabs && titleCell?.text && (\n <TableCell\n {...titleCell}\n align=\"left\"\n isNavigation\n isTopLeftCell\n type={undefined}\n />\n )}\n\n {!hideTableNavigation && currentActiveSection && (\n useTabs ? (\n <div\n className={classNames(\n 'bg-white',\n styles.stickyHeader\n )}\n style={{ top: `${stickyHeaderTopOffset}px` }}\n >\n <Tabs\n tabs={mobileTabs}\n activeIndex={activeSection - 1}\n onTabChange={(index) => setActiveSection(index)}\n className=\"mb16\"\n />\n </div>\n ) : (\n <TableControls\n activeSection={activeSection}\n columnsLength={columnsLength}\n navigateTable={navigateTable}\n stickyHeaderTopOffset={stickyHeaderTopOffset}\n >\n <TableCell\n {...(isBaseCell(currentActiveSection)\n ? {\n openModal: (body: ReactNode) =>\n handleOpenModal({\n body,\n title: currentActiveSection?.text,\n }),\n }\n : {})}\n {...activeCellProps}\n imageComponent={imageComponent}\n isNavigation\n />\n </TableControls>\n )\n )}\n </>\n ) : (\n !hideStickyHeader && (\n <div\n ref={stickyHeaderRef}\n aria-hidden\n className={styles.stickyHeader}\n style={{ top: `${stickyHeaderTopOffset}px` }}\n >\n <div className={styles.container} ref={headerRef}>\n <TableSection\n cellReplacements={cellReplacements}\n className={className}\n hideColumns={hideColumns}\n hideRows={hideRows}\n openModal={handleOpenModal}\n tableCellRows={[tableData?.[0]?.rows?.[0]]}\n title={title}\n imageComponent={imageComponent}\n />\n </div>\n </div>\n )\n )}\n\n <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n <TableContents\n tableData={tableData}\n title={title}\n className={className}\n collapsibleSections={collapsibleSections}\n scrollOnOpen={scrollOnOpen}\n scrollTopOffset={scrollTopOffset}\n stickyHeaderRef={stickyHeaderRef}\n hideColumns={hideColumns}\n hideDetails={hideDetails}\n hideRows={hideRows}\n isMobile={isMobile}\n shouldHideDetails={shouldHideDetails}\n openModal={handleOpenModal}\n cellReplacements={cellReplacements}\n imageComponent={imageComponent}\n selectedColumn={showSelectedColumn ? activeSection : undefined}\n showHeader={useTabs}\n />\n </div>\n\n {tableData?.length > 1 && hideDetails && (\n <Card\n data-testid=\"show-hide-details\"\n classNames={{\n buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),\n title: 'd-flex gap8 ai-center jc-center fw-bold',\n }}\n title={\n <>\n {shouldHideDetails\n ? textOverrides.showDetails\n : textOverrides.hideDetails}\n {shouldHideDetails ? (\n <ChevronDownIcon size={20} />\n ) : (\n <ChevronUpIcon size={20} />\n )}\n </>\n }\n actionIcon={null}\n dropShadow={false}\n titleVariant=\"small\"\n density=\"xsmall\"\n onClick={() => setShouldHideDetails((current) => !current)}\n />\n )}\n\n <BottomOrRegularModal\n isOpen={infoModalData?.body ? true : false}\n title={infoModalData?.title}\n onClose={() => setInfoModalData(null)}\n >\n <div className={classNames(styles.modalContent, 'pt8 p24 wmn6')}>\n {modalContentRenderer\n ? modalContentRenderer(infoModalData?.body)\n : infoModalData?.body}\n </div>\n </BottomOrRegularModal>\n </div>\n );\n};\n\nexport { Table };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/components/table/Table.stories.js CHANGED Viewed

@@ -43,7 +43,7 @@ import '../../useMediaQuery-BlEUymPA.js';
 import './components/TableContents/TableContents.js';
 import '../../TableSection-Cm50RX-V.js';
 import './components/TableContents/Collapsible.js';
-import '../../useTableNavigation-CrxoXTVd.js';
+import '../../useTableNavigation-C-vb2BxI.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-C5UXYPIB.js';

package/dist/esm/components/table/Table.test.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { _ as __awaiter, a as __generator } from '../../tslib.es6-CVlKGIvp.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { c as customRender, s as screen } from '../../customRender-DzdqZxUd.js';
+import { u as useMediaQuery } from '../../useMediaQuery-BlEUymPA.js';
 import { Table } from './Table.js';
 import '../../_commonjsHelpers-BFTU3MAI.js';
-import 'react';
 import 'react-dom';
 import 'util';
 import 'react-dom/test-utils';
@@ -41,16 +42,18 @@ import '../../context.js';
 import '../../index-DuaJiEiT.js';
 import '../../index-hWqCLhoS.js';
 import '../modal/regularModal/index.js';
-import '../../useMediaQuery-BlEUymPA.js';
 import './components/TableContents/TableContents.js';
 import '../../TableSection-Cm50RX-V.js';
 import './components/TableContents/Collapsible.js';
-import '../../useTableNavigation-CrxoXTVd.js';
+import '../../useTableNavigation-C-vb2BxI.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-C5UXYPIB.js';
 import '../tabs/Tabs.js';
+jest.mock('../../hooks/useMediaQuery', function () { return ({
+    useMediaQuery: jest.fn(function () { return false; }),
+}); });
 var tableData = [
     {
         section: {
@@ -156,4 +159,40 @@ describe('Table', function () {
         expect(screen.getByText('I am custom')).toBeInTheDocument();
     });
 });
+describe('Table on mobile with a parent-controlled section', function () {
+    var planTable = [
+        {
+            rows: [
+                [{ text: 'Choose your plan' }, { text: 'Basic' }, { text: 'Advanced' }],
+            ],
+        },
+    ];
+    var ControlledTable = function (_a) {
+        var onSelectionChanged = _a.onSelectionChanged;
+        var _b = useState(2), activeSection = _b[0], setActiveSection = _b[1];
+        return (jsx(Table, { title: "Plans", tableData: planTable, activeSection: activeSection, onSelectionChanged: function (index) {
+                onSelectionChanged(index);
+                setActiveSection(index);
+            } }));
+    };
+    beforeAll(function () {
+        HTMLElement.prototype.scroll = jest.fn();
+        useMediaQuery.mockReturnValue(true);
+    });
+    afterAll(function () {
+        useMediaQuery.mockReturnValue(false);
+    });
+    it('settles on the parent section instead of bouncing between columns', function () {
+        var reported = [];
+        customRender(jsx(ControlledTable, { onSelectionChanged: function (index) {
+                reported.push(index);
+                if (reported.length > 5) {
+                    throw new Error("selection bounced: ".concat(reported.join(',')));
+                }
+            } }));
+        expect(reported).toEqual([2]);
+        expect(screen.getByTestId('previous-section-button')).toBeEnabled();
+        expect(screen.getByTestId('next-section-button')).toBeDisabled();
+    });
+});
 //# sourceMappingURL=Table.test.js.map

package/dist/esm/components/table/Table.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.test.js","sources":["../../../../../src/lib/components/table/Table.test.tsx"],"sourcesContent":["import { render, screen } from '../../util/testUtils';\nimport { Table } from './Table';\nimport { TableSectionData } from './types';\n\nconst tableData: TableSectionData[] = [\n {\n section: {\n title: 'Section 1',\n icon: <span>Icon 1</span>,\n },\n rows: [[{ text: 'Item 1', cellId: '#item1' }, { text: 'Item 2' }]],\n },\n {\n section: {\n title: 'Section 2',\n icon: 'https://placehold.co/30x30/orange/white',\n },\n rows: [\n [{ text: 'Item 3' }, { text: 'Item 4', modalContent: 'Additional item' }],\n ],\n },\n];\n\ndescribe('Table', () => {\n it('renders the table with sections and items', () => {\n render(<Table tableData={tableData} title=\"Test Table\" />);\n\n expect(screen.getByText('Section 1')).toBeInTheDocument();\n expect(screen.getByText('Section 2')).toBeInTheDocument();\n\n expect(screen.getAllByText('Item 1')[0]).toBeInTheDocument();\n expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();\n expect(screen.getByText('Item 3')).toBeInTheDocument();\n expect(screen.getByText('Item 4')).toBeInTheDocument();\n });\n\n it('renders the table without sections', () => {\n const dataWithoutSections = [{ rows: tableData[0].rows }];\n\n render(<Table tableData={dataWithoutSections} title=\"Test Table\" />);\n\n expect(screen.getAllByText('Item 1')[0]).toBeVisible();\n expect(screen.getAllByText('Item 2')[0]).toBeVisible();\n });\n\n it('hides the show/hide details button if hideDetails is false', () => {\n render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n expect(screen.queryByTestId('show-hide-details')).toBeInTheDocument();\n });\n\n it('shows the show/hide details button if hideDetails is true', () => {\n render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n });\n\n it('hides the sections if hideDetails is true', () => {\n render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n });\n\n it('hides the sections if hideDetails is true and shows if clicking on button', async () => {\n const { user } = render(\n <Table tableData={tableData} hideDetails title=\"Test Table\" />\n );\n\n expect(screen.getByText('Show details')).toBeVisible();\n\n await user.click(screen.getByTestId('show-hide-details'));\n\n expect(screen.getByText('Section 2')).toBeVisible();\n expect(screen.getByText('Hide details')).toBeVisible();\n });\n\n it('does not render the sticky header row when hideStickyHeader is true', () => {\n const { rerender } = render(\n <Table tableData={tableData} title=\"Test Table\" />\n );\n const countWithStickyHeader = screen.getAllByText('Item 1').length;\n\n rerender(\n <Table tableData={tableData} hideStickyHeader title=\"Test Table\" />\n );\n\n expect(screen.getAllByText('Item 1')).toHaveLength(\n countWithStickyHeader - 1\n );\n });\n\n it('shows a modal when clicking on info icon', async () => {\n const { user } = render(<Table tableData={tableData} title=\"Test Table\" />);\n\n await user.click(screen.getByTestId('ds-table-info-button'));\n\n expect(screen.getByText('Additional item')).toBeVisible();\n });\n\n it('renders the table with cell replacements', () => {\n render(\n <Table\n tableData={tableData}\n title=\"Test Table\"\n cellReplacements={{\n '#item1': {\n text: 'I was replaced',\n },\n }}\n />\n );\n\n expect(screen.getByText('Section 1')).toBeInTheDocument();\n expect(screen.getByText('Section 2')).toBeInTheDocument();\n\n expect(screen.getAllByText('I was replaced')[0]).toBeInTheDocument();\n expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();\n expect(screen.getAllByText('Item 3')[0]).toBeInTheDocument();\n expect(screen.getAllByText('Item 4')[0]).toBeInTheDocument();\n });\n\n it('renders icons with a custom image component', () => {\n const CustomImageComponent = ({ src }: { src: string }) => (\n <>\n <p>I am custom</p>\n <img src={src} alt=\"\" />\n </>\n );\n\n render(\n <Table\n tableData={tableData}\n title=\"Test Table\"\n imageComponent={CustomImageComponent}\n />\n );\n\n expect(screen.getByText('I am custom')).toBeInTheDocument();\n });\n});\n"],"names":["_jsx","render","_jsxs","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"Table.test.js","sources":["../../../../../src/lib/components/table/Table.test.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { render, screen } from '../../util/testUtils';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { Table } from './Table';\nimport { TableSectionData } from './types';\n\njest.mock('../../hooks/useMediaQuery', () => ({\n useMediaQuery: jest.fn(() => false),\n}));\n\nconst tableData: TableSectionData[] = [\n {\n section: {\n title: 'Section 1',\n icon: <span>Icon 1</span>,\n },\n rows: [[{ text: 'Item 1', cellId: '#item1' }, { text: 'Item 2' }]],\n },\n {\n section: {\n title: 'Section 2',\n icon: 'https://placehold.co/30x30/orange/white',\n },\n rows: [\n [{ text: 'Item 3' }, { text: 'Item 4', modalContent: 'Additional item' }],\n ],\n },\n];\n\ndescribe('Table', () => {\n it('renders the table with sections and items', () => {\n render(<Table tableData={tableData} title=\"Test Table\" />);\n\n expect(screen.getByText('Section 1')).toBeInTheDocument();\n expect(screen.getByText('Section 2')).toBeInTheDocument();\n\n expect(screen.getAllByText('Item 1')[0]).toBeInTheDocument();\n expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();\n expect(screen.getByText('Item 3')).toBeInTheDocument();\n expect(screen.getByText('Item 4')).toBeInTheDocument();\n });\n\n it('renders the table without sections', () => {\n const dataWithoutSections = [{ rows: tableData[0].rows }];\n\n render(<Table tableData={dataWithoutSections} title=\"Test Table\" />);\n\n expect(screen.getAllByText('Item 1')[0]).toBeVisible();\n expect(screen.getAllByText('Item 2')[0]).toBeVisible();\n });\n\n it('hides the show/hide details button if hideDetails is false', () => {\n render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n expect(screen.queryByTestId('show-hide-details')).toBeInTheDocument();\n });\n\n it('shows the show/hide details button if hideDetails is true', () => {\n render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n });\n\n it('hides the sections if hideDetails is true', () => {\n render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n });\n\n it('hides the sections if hideDetails is true and shows if clicking on button', async () => {\n const { user } = render(\n <Table tableData={tableData} hideDetails title=\"Test Table\" />\n );\n\n expect(screen.getByText('Show details')).toBeVisible();\n\n await user.click(screen.getByTestId('show-hide-details'));\n\n expect(screen.getByText('Section 2')).toBeVisible();\n expect(screen.getByText('Hide details')).toBeVisible();\n });\n\n it('does not render the sticky header row when hideStickyHeader is true', () => {\n const { rerender } = render(\n <Table tableData={tableData} title=\"Test Table\" />\n );\n const countWithStickyHeader = screen.getAllByText('Item 1').length;\n\n rerender(\n <Table tableData={tableData} hideStickyHeader title=\"Test Table\" />\n );\n\n expect(screen.getAllByText('Item 1')).toHaveLength(\n countWithStickyHeader - 1\n );\n });\n\n it('shows a modal when clicking on info icon', async () => {\n const { user } = render(<Table tableData={tableData} title=\"Test Table\" />);\n\n await user.click(screen.getByTestId('ds-table-info-button'));\n\n expect(screen.getByText('Additional item')).toBeVisible();\n });\n\n it('renders the table with cell replacements', () => {\n render(\n <Table\n tableData={tableData}\n title=\"Test Table\"\n cellReplacements={{\n '#item1': {\n text: 'I was replaced',\n },\n }}\n />\n );\n\n expect(screen.getByText('Section 1')).toBeInTheDocument();\n expect(screen.getByText('Section 2')).toBeInTheDocument();\n\n expect(screen.getAllByText('I was replaced')[0]).toBeInTheDocument();\n expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();\n expect(screen.getAllByText('Item 3')[0]).toBeInTheDocument();\n expect(screen.getAllByText('Item 4')[0]).toBeInTheDocument();\n });\n\n it('renders icons with a custom image component', () => {\n const CustomImageComponent = ({ src }: { src: string }) => (\n <>\n <p>I am custom</p>\n <img src={src} alt=\"\" />\n </>\n );\n\n render(\n <Table\n tableData={tableData}\n title=\"Test Table\"\n imageComponent={CustomImageComponent}\n />\n );\n\n expect(screen.getByText('I am custom')).toBeInTheDocument();\n });\n});\n\ndescribe('Table on mobile with a parent-controlled section', () => {\n const planTable: TableSectionData[] = [\n {\n rows: [\n [{ text: 'Choose your plan' }, { text: 'Basic' }, { text: 'Advanced' }],\n ],\n },\n ];\n\n const ControlledTable = ({\n onSelectionChanged,\n }: {\n onSelectionChanged: (index: number) => void;\n }) => {\n const [activeSection, setActiveSection] = useState(2);\n\n return (\n <Table\n title=\"Plans\"\n tableData={planTable}\n activeSection={activeSection}\n onSelectionChanged={(index) => {\n onSelectionChanged(index);\n setActiveSection(index);\n }}\n />\n );\n };\n\n beforeAll(() => {\n HTMLElement.prototype.scroll = jest.fn();\n (useMediaQuery as jest.Mock).mockReturnValue(true);\n });\n\n afterAll(() => {\n (useMediaQuery as jest.Mock).mockReturnValue(false);\n });\n\n it('settles on the parent section instead of bouncing between columns', () => {\n const reported: number[] = [];\n\n render(\n <ControlledTable\n onSelectionChanged={(index) => {\n reported.push(index);\n if (reported.length > 5) {\n throw new Error(`selection bounced: ${reported.join(',')}`);\n }\n }}\n />\n );\n\n expect(reported).toEqual([2]);\n expect(screen.getByTestId('previous-section-button')).toBeEnabled();\n expect(screen.getByTestId('next-section-button')).toBeDisabled();\n });\n});\n"],"names":["_jsx","render","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/components/table/utils/useTableNavigation/useTableNavigation.test.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { l as libExports } from '../../../../index-CVgMNqD7.js';
-import { u as useTableNavigation } from '../../../../useTableNavigation-CrxoXTVd.js';
+import { u as useTableNavigation } from '../../../../useTableNavigation-C-vb2BxI.js';
 import '../../../../index-BClARCFl.js';
 import '../../../../_commonjsHelpers-BFTU3MAI.js';
 import 'react';
@@ -75,5 +75,55 @@ describe('useTableNavigation', function () {
         });
         expect(onSelectionChanged).toHaveBeenCalledWith(0);
     });
+    it('starts on the section passed by the parent instead of the first one', function () {
+        var _a;
+        var result = libExports.renderHook(function () {
+            return useTableNavigation({
+                enabled: true,
+                containerRef: containerRef,
+                onSelectionChanged: onSelectionChanged,
+                initialSection: 1,
+            });
+        }).result;
+        expect(result.current.activeSection).toBe(2);
+        expect((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scroll).toHaveBeenCalledWith({
+            top: 0,
+            left: 400,
+            behavior: 'smooth',
+        });
+    });
+    it('does not report a section pushed in by the parent as a user selection', function () {
+        var result = libExports.renderHook(function () {
+            return useTableNavigation({
+                enabled: true,
+                containerRef: containerRef,
+                onSelectionChanged: onSelectionChanged,
+            });
+        }).result;
+        onSelectionChanged.mockClear();
+        libExports.act(function () {
+            result.current.syncActiveSection(1);
+        });
+        expect(result.current.activeSection).toBe(2);
+        expect(onSelectionChanged).not.toHaveBeenCalled();
+    });
+    it('keeps reporting user navigation after a parent sync', function () {
+        var result = libExports.renderHook(function () {
+            return useTableNavigation({
+                enabled: true,
+                containerRef: containerRef,
+                onSelectionChanged: onSelectionChanged,
+            });
+        }).result;
+        libExports.act(function () {
+            result.current.syncActiveSection(1);
+        });
+        onSelectionChanged.mockClear();
+        libExports.act(function () {
+            result.current.navigateTable(false);
+        });
+        expect(result.current.activeSection).toBe(1);
+        expect(onSelectionChanged).toHaveBeenCalledWith(1);
+    });
 });
 //# sourceMappingURL=useTableNavigation.test.js.map

package/dist/esm/components/table/utils/useTableNavigation/useTableNavigation.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTableNavigation.test.js","sources":["../../../../../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.test.tsx"],"sourcesContent":["import { renderHook, act } from '@testing-library/react-hooks';\nimport { useTableNavigation } from './useTableNavigation';\nimport { RefObject } from 'react';\nconst defaultContainerRef = {\n current: {\n scroll: jest.fn(),\n addEventListener: jest.fn(),\n removeEventListener: jest.fn(),\n getBoundingClientRect: jest.fn(() => ({ width: 800 })),\n },\n} as unknown as RefObject<HTMLElement>;\n\ndescribe('useTableNavigation', () => {\n let onSelectionChanged = jest.fn();\n let containerRef = defaultContainerRef;\n\n beforeEach(() => {\n containerRef = defaultContainerRef;\n onSelectionChanged = jest.fn();\n });\n\n it('should not navigate when enabled is false', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: false,\n containerRef,\n onSelectionChanged,\n })\n );\n\n act(() => {\n result.current.navigateTable(true);\n });\n\n expect(result.current.activeSection).toBe(1);\n expect(containerRef.current?.scroll).not.toHaveBeenCalled();\n expect(onSelectionChanged).not.toHaveBeenCalled();\n });\n\n it('should navigate to the next section when increase is true', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: true,\n containerRef,\n onSelectionChanged,\n })\n );\n\n act(() => {\n result.current.navigateTable(true);\n });\n\n expect(result.current.activeSection).toBe(2);\n expect(containerRef.current?.scroll).toHaveBeenCalledWith({\n top: 0,\n left: expect.any(Number),\n behavior: 'smooth',\n });\n expect(onSelectionChanged).toHaveBeenCalledWith(2);\n });\n\n it('should navigate to the previous section when increase is false', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: true,\n containerRef,\n onSelectionChanged,\n })\n );\n\n act(() => {\n result.current.navigateTable(false);\n });\n\n expect(result.current.activeSection).toBe(0);\n expect(containerRef.current?.scroll).toHaveBeenCalledWith({\n top: 0,\n left: expect.any(Number),\n behavior: 'smooth',\n });\n expect(onSelectionChanged).toHaveBeenCalledWith(0);\n });\n});\n"],"names":["renderHook","act"],"mappings":"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"}
1	+ {"version":3,"file":"useTableNavigation.test.js","sources":["../../../../../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.test.tsx"],"sourcesContent":["import { renderHook, act } from '@testing-library/react-hooks';\nimport { useTableNavigation } from './useTableNavigation';\nimport { RefObject } from 'react';\nconst defaultContainerRef = {\n current: {\n scroll: jest.fn(),\n addEventListener: jest.fn(),\n removeEventListener: jest.fn(),\n getBoundingClientRect: jest.fn(() => ({ width: 800 })),\n },\n} as unknown as RefObject<HTMLElement>;\n\ndescribe('useTableNavigation', () => {\n let onSelectionChanged = jest.fn();\n let containerRef = defaultContainerRef;\n\n beforeEach(() => {\n containerRef = defaultContainerRef;\n onSelectionChanged = jest.fn();\n });\n\n it('should not navigate when enabled is false', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: false,\n containerRef,\n onSelectionChanged,\n })\n );\n\n act(() => {\n result.current.navigateTable(true);\n });\n\n expect(result.current.activeSection).toBe(1);\n expect(containerRef.current?.scroll).not.toHaveBeenCalled();\n expect(onSelectionChanged).not.toHaveBeenCalled();\n });\n\n it('should navigate to the next section when increase is true', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: true,\n containerRef,\n onSelectionChanged,\n })\n );\n\n act(() => {\n result.current.navigateTable(true);\n });\n\n expect(result.current.activeSection).toBe(2);\n expect(containerRef.current?.scroll).toHaveBeenCalledWith({\n top: 0,\n left: expect.any(Number),\n behavior: 'smooth',\n });\n expect(onSelectionChanged).toHaveBeenCalledWith(2);\n });\n\n it('should navigate to the previous section when increase is false', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: true,\n containerRef,\n onSelectionChanged,\n })\n );\n\n act(() => {\n result.current.navigateTable(false);\n });\n\n expect(result.current.activeSection).toBe(0);\n expect(containerRef.current?.scroll).toHaveBeenCalledWith({\n top: 0,\n left: expect.any(Number),\n behavior: 'smooth',\n });\n expect(onSelectionChanged).toHaveBeenCalledWith(0);\n });\n\n it('starts on the section passed by the parent instead of the first one', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: true,\n containerRef,\n onSelectionChanged,\n initialSection: 1,\n })\n );\n\n expect(result.current.activeSection).toBe(2);\n expect(containerRef.current?.scroll).toHaveBeenCalledWith({\n top: 0,\n left: 400,\n behavior: 'smooth',\n });\n });\n\n it('does not report a section pushed in by the parent as a user selection', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: true,\n containerRef,\n onSelectionChanged,\n })\n );\n onSelectionChanged.mockClear();\n\n act(() => {\n result.current.syncActiveSection(1);\n });\n\n expect(result.current.activeSection).toBe(2);\n expect(onSelectionChanged).not.toHaveBeenCalled();\n });\n\n it('keeps reporting user navigation after a parent sync', () => {\n const { result } = renderHook(() =>\n useTableNavigation({\n enabled: true,\n containerRef,\n onSelectionChanged,\n })\n );\n\n act(() => {\n result.current.syncActiveSection(1);\n });\n onSelectionChanged.mockClear();\n\n act(() => {\n result.current.navigateTable(false);\n });\n\n expect(result.current.activeSection).toBe(1);\n expect(onSelectionChanged).toHaveBeenCalledWith(1);\n });\n});\n"],"names":["renderHook","act"],"mappings":"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"}

package/dist/esm/index.js CHANGED Viewed

@@ -474,7 +474,7 @@ import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
 import './components/table/components/TableContents/TableContents.js';
 import './TableSection-Cm50RX-V.js';
 import './components/table/components/TableContents/Collapsible.js';
-import './useTableNavigation-CrxoXTVd.js';
+import './useTableNavigation-C-vb2BxI.js';
 import './components/table/components/TableControls/TableControls.js';
 import './useScrollSync-C5UXYPIB.js';
 import './components/logo/LogoWrapper/LogoWrapper.js';

package/dist/esm/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts CHANGED Viewed

@@ -3,11 +3,13 @@ interface UseTableNavigationReturn {
     activeSection: number;
     navigateTable: (increase?: boolean) => void;
     setActiveSection: (section: number) => void;
+    syncActiveSection: (section: number) => void;
 }
 interface UseTableNavigationProps {
     containerRef: React.RefObject<HTMLElement>;
     enabled?: boolean;
+    initialSection?: number;
     onSelectionChanged?: (index: number) => void;
 }
-export declare const useTableNavigation: ({ enabled, containerRef, onSelectionChanged }: UseTableNavigationProps) => UseTableNavigationReturn;
+export declare const useTableNavigation: ({ enabled, containerRef, initialSection, onSelectionChanged }: UseTableNavigationProps) => UseTableNavigationReturn;
 export {};

package/dist/esm/{useTableNavigation-CrxoXTVd.js → useTableNavigation-C-vb2BxI.js} RENAMED Viewed

@@ -1,9 +1,18 @@
 import { d as debounce } from './index-BClARCFl.js';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 var useTableNavigation = function (_a) {
-    var enabled = _a.enabled, containerRef = _a.containerRef, onSelectionChanged = _a.onSelectionChanged;
-    var _b = useState(0), activeSection = _b[0], setActiveSection = _b[1];
+    var enabled = _a.enabled, containerRef = _a.containerRef, _b = _a.initialSection, initialSection = _b === void 0 ? 0 : _b, onSelectionChanged = _a.onSelectionChanged;
+    var _c = useState(initialSection), activeSection = _c[0], setActiveSection = _c[1];
+    var activeSectionRef = useRef(initialSection);
+    var skipNextReportRef = useRef(false);
+    var syncActiveSection = useCallback(function (section) {
+        if (section === activeSectionRef.current) {
+            return;
+        }
+        skipNextReportRef.current = true;
+        setActiveSection(section);
+    }, []);
     var handleScrollToSection = function (increase) {
         if (!enabled) {
             return;
@@ -30,10 +39,15 @@ var useTableNavigation = function (_a) {
         return container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleTableScroll);
     }, [enabled]);
     useEffect(function () {
+        activeSectionRef.current = activeSection;
+        var skipReport = skipNextReportRef.current;
+        skipNextReportRef.current = false;
         if (!enabled) {
             return;
         }
-        onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged(activeSection + 1);
+        if (!skipReport) {
+            onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged(activeSection + 1);
+        }
         if (containerRef.current) {
             var containerWidth = containerRef.current.getBoundingClientRect().width;
             var cellWidth = containerWidth / 2;
@@ -48,8 +62,9 @@ var useTableNavigation = function (_a) {
         activeSection: activeSection + 1,
         navigateTable: handleScrollToSection,
         setActiveSection: setActiveSection,
+        syncActiveSection: syncActiveSection,
     };
 };
 export { useTableNavigation as u };
-//# sourceMappingURL=useTableNavigation-CrxoXTVd.js.map
+//# sourceMappingURL=useTableNavigation-C-vb2BxI.js.map

package/dist/esm/useTableNavigation-C-vb2BxI.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useTableNavigation-C-vb2BxI.js","sources":["../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\ninterface UseTableNavigationReturn {\n activeSection: number;\n navigateTable: (increase?: boolean) => void;\n setActiveSection: (section: number) => void;\n syncActiveSection: (section: number) => void;\n}\n\ninterface UseTableNavigationProps {\n containerRef: React.RefObject<HTMLElement>,\n enabled?: boolean,\n initialSection?: number,\n onSelectionChanged?: (index: number) => void\n}\n\nexport const useTableNavigation = ({\n enabled,\n containerRef,\n initialSection = 0,\n onSelectionChanged\n}: UseTableNavigationProps): UseTableNavigationReturn => {\n const [activeSection, setActiveSection] = useState(initialSection);\n const activeSectionRef = useRef(initialSection);\n const skipNextReportRef = useRef(false);\n\n const syncActiveSection = useCallback((section: number) => {\n if (section === activeSectionRef.current) {\n return;\n }\n\n skipNextReportRef.current = true;\n setActiveSection(section);\n }, []);\n\n const handleScrollToSection = (increase?: boolean) => {\n if (!enabled) {\n return;\n }\n\n setActiveSection((prevSection) => \n prevSection + (increase ? 1 : -1)\n );\n };\n\n const handleTableScroll = useCallback(() => {\n if (!containerRef.current || !enabled) {\n return;\n }\n\n const containerWidth = containerRef.current.getBoundingClientRect().width;\n const scrollLeft = containerRef.current.scrollLeft * 1.1;\n const cellWidth = containerWidth / 2;\n\n setActiveSection(Math.floor(scrollLeft / cellWidth));\n }, [activeSection, containerRef, enabled]);\n\n const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n useEffect(() => {\n const container = containerRef.current;\n\n container?.addEventListener('scroll', debouncedTableScroll, {\n passive: true,\n });\n\n return container?.removeEventListener('scroll', handleTableScroll);\n }, [enabled]);\n\n useEffect(() => {\n activeSectionRef.current = activeSection;\n\n const skipReport = skipNextReportRef.current;\n skipNextReportRef.current = false;\n\n if (!enabled) {\n return\n }\n\n if (!skipReport) {\n onSelectionChanged?.(activeSection + 1);\n }\n\n if (containerRef.current) {\n const containerWidth = containerRef.current.getBoundingClientRect().width;\n const cellWidth = containerWidth / 2;\n\n containerRef.current.scroll({\n top: 0,\n left: cellWidth * activeSection,\n behavior: 'smooth',\n });\n }\n }, [enabled, activeSection]);\n\n return {\n activeSection: activeSection + 1,\n navigateTable: handleScrollToSection,\n setActiveSection,\n syncActiveSection,\n }\n}"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.66.25",
+  "version": "0.66.26",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/table/Table.test.tsx CHANGED Viewed

@@ -1,7 +1,13 @@
+import { useState } from 'react';
 import { render, screen } from '../../util/testUtils';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { Table } from './Table';
 import { TableSectionData } from './types';
+jest.mock('../../hooks/useMediaQuery', () => ({
+  useMediaQuery: jest.fn(() => false),
+}));
 const tableData: TableSectionData[] = [
   {
     section: {
@@ -139,3 +145,61 @@ describe('Table', () => {
     expect(screen.getByText('I am custom')).toBeInTheDocument();
   });
 });
+describe('Table on mobile with a parent-controlled section', () => {
+  const planTable: TableSectionData[] = [
+    {
+      rows: [
+        [{ text: 'Choose your plan' }, { text: 'Basic' }, { text: 'Advanced' }],
+      ],
+    },
+  ];
+  const ControlledTable = ({
+    onSelectionChanged,
+  }: {
+    onSelectionChanged: (index: number) => void;
+  }) => {
+    const [activeSection, setActiveSection] = useState(2);
+    return (
+      <Table
+        title="Plans"
+        tableData={planTable}
+        activeSection={activeSection}
+        onSelectionChanged={(index) => {
+          onSelectionChanged(index);
+          setActiveSection(index);
+        }}
+      />
+    );
+  };
+  beforeAll(() => {
+    HTMLElement.prototype.scroll = jest.fn();
+    (useMediaQuery as jest.Mock).mockReturnValue(true);
+  });
+  afterAll(() => {
+    (useMediaQuery as jest.Mock).mockReturnValue(false);
+  });
+  it('settles on the parent section instead of bouncing between columns', () => {
+    const reported: number[] = [];
+    render(
+      <ControlledTable
+        onSelectionChanged={(index) => {
+          reported.push(index);
+          if (reported.length > 5) {
+            throw new Error(`selection bounced: ${reported.join(',')}`);
+          }
+        }}
+      />
+    );
+    expect(reported).toEqual([2]);
+    expect(screen.getByTestId('previous-section-button')).toBeEnabled();
+    expect(screen.getByTestId('next-section-button')).toBeDisabled();
+  });
+});

package/src/lib/components/table/Table.tsx CHANGED Viewed

@@ -94,13 +94,13 @@ const Table = ({
   const useTabs = isMobile && mobileNavigationMode === 'tabs';
-  const { activeSection, navigateTable, setActiveSection } = useTableNavigation(
-    {
+  const { activeSection, navigateTable, setActiveSection, syncActiveSection } =
+    useTableNavigation({
       enabled: isMobile,
       containerRef,
+      initialSection: externalActiveSection ? externalActiveSection - 1 : 0,
       onSelectionChanged,
-    }
-  );
+    });
   const headerRow = tableData?.[0]?.rows?.[0];
   const titleCell = {
@@ -138,7 +138,7 @@ const Table = ({
   useEffect(() => {
     if (externalActiveSection && externalActiveSection !== activeSection) {
-      setActiveSection(externalActiveSection - 1);
+      syncActiveSection(externalActiveSection - 1);
     }
   }, [externalActiveSection]);