@civicactions/cmsds-open-data-components 4.0.6 → 4.0.7-oe

package/dist/main.js

@@ -1,6 +1,6 @@
 import "./main.css";
 import {jsx as $hgUW1$jsx, jsxs as $hgUW1$jsxs, Fragment as $hgUW1$Fragment} from "react/jsx-runtime";
-import {Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, Button as $hgUW1$Button, CloseIconThin as $hgUW1$CloseIconThin, ArrowIcon as $hgUW1$ArrowIcon, Spinner as $hgUW1$Spinner, Alert as $hgUW1$Alert, Dialog as $hgUW1$Dialog, TextField as $hgUW1$TextField, Tooltip as $hgUW1$Tooltip, TooltipIcon as $hgUW1$TooltipIcon, Choice as $hgUW1$Choice, Dropdown as $hgUW1$Dropdown, Pagination as $hgUW1$Pagination, Table as $hgUW1$Table, TableHead as $hgUW1$TableHead, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableBody as $hgUW1$TableBody, Tabs as $hgUW1$Tabs, TabPanel as $hgUW1$TabPanel, ExternalLinkIcon as $hgUW1$ExternalLinkIcon, Badge as $hgUW1$Badge} from "@cmsgov/design-system";
+import {Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, Button as $hgUW1$Button, CloseIconThin as $hgUW1$CloseIconThin, ArrowIcon as $hgUW1$ArrowIcon, Spinner as $hgUW1$Spinner, Alert as $hgUW1$Alert, Dialog as $hgUW1$Dialog, TextField as $hgUW1$TextField, Tooltip as $hgUW1$Tooltip, TooltipIcon as $hgUW1$TooltipIcon, Choice as $hgUW1$Choice, Dropdown as $hgUW1$Dropdown, Pagination as $hgUW1$Pagination, Table as $hgUW1$Table, TableHead as $hgUW1$TableHead, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableBody as $hgUW1$TableBody, Tabs as $hgUW1$Tabs, TabPanel as $hgUW1$TabPanel, Badge as $hgUW1$Badge} from "@cmsgov/design-system";
 import $hgUW1$react, {createContext as $hgUW1$createContext, useState as $hgUW1$useState, useRef as $hgUW1$useRef, useEffect as $hgUW1$useEffect, useContext as $hgUW1$useContext, useMemo as $hgUW1$useMemo, useCallback as $hgUW1$useCallback} from "react";
 import {NavLink as $hgUW1$NavLink, Link as $hgUW1$Link, useNavigate as $hgUW1$useNavigate, useLocation as $hgUW1$useLocation, useSearchParams as $hgUW1$useSearchParams} from "react-router-dom";
 import $hgUW1$qs from "qs";
@@ -369,9 +369,15 @@ const $10bc3aae21fc1572$var$DatasetListSubmenu = ({ rootUrl: rootUrl, enablePagi
             })}`);
         }
     });
+    // Sync totalItems state with API response data
+    // Moved to useEffect to prevent state updates during render (which can cause infinite loops)
+    (0, $hgUW1$useEffect)(()=>{
+        if (data?.data?.total !== undefined && data.data.total !== totalItems) setTotalItems(data.data.total);
+    }, [
+        data?.data?.total
+    ]);
     let submenuItemsCount = 0;
     if (data) {
-        if (data.data.total && totalItems !== data.data.total) setTotalItems(data.data.total);
         let resultsCount = Object.keys(data.data.results).length;
         // For the submenu pager, If there are fewer than 4 dataset items, display the dataset item count, otherwise, show "Viewing 4..".
         submenuItemsCount = resultsCount > defaultPageSize ? defaultPageSize : resultsCount;
@@ -2258,13 +2264,16 @@ function $7264a673914aa746$export$2b9377795161999(type) {
 
 
 
-const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: header, sortElement: sortElement, setAriaLiveFeedback: setAriaLiveFeedback })=>{
+const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: header, sortElement: sortElement, id: id })=>{
     const [columnResizing, setColumnResizing] = (0, $hgUW1$useState)("");
+    // Fix for JSX in Data Dictionary Title header cell
+    const ariaLabel = header.id === "titleResizable" ? "Title" : header.column.columnDef.header;
     return /*#__PURE__*/ (0, $hgUW1$jsxs)("th", {
         key: header.id,
         style: {
             width: header.getSize()
         },
+        id: id,
         title: typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "",
         className: "ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold",
         "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none",
@@ -2280,7 +2289,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
                     sortElement && /*#__PURE__*/ (0, $hgUW1$jsx)("button", {
                         onClick: header.column.getToggleSortingHandler(),
                         className: header.column.getCanSort() ? `cursor-pointer select-none ds-u-focus-visible ${sortElement(header.column.getIsSorted())}` : "",
-                        "aria-label": `${header.column.columnDef.header} sort order`
+                        "aria-label": `${ariaLabel} sort order`
                     })
                 ]
             }),
@@ -2288,7 +2297,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
                 onMouseDown: header.getResizeHandler(),
                 onTouchStart: header.getResizeHandler(),
                 className: `dc-c-resize-handle ds-u-focus-visible ${header.column.getIsResizing() || header.column.id == columnResizing ? "isResizing" : ""}`,
-                "aria-label": `Resize ${header.column.columnDef.header} column`,
+                "aria-label": `Resize ${ariaLabel} column`,
                 onKeyDown: (e)=>{
                     const columnSizingObject = table.getState().columnSizing;
                     switch(e.key){
@@ -2296,21 +2305,13 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
                         case " ":
                             e.preventDefault();
                             e.stopPropagation();
-                            if (columnResizing) {
-                                // end resizing
-                                setColumnResizing("");
-                                setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`);
-                            } else {
-                                // start resizing
-                                setColumnResizing(header.column.id);
-                                setAriaLiveFeedback(`${header.column.columnDef.header} grabbed.`);
-                            }
+                            if (columnResizing) // end resizing
+                            setColumnResizing("");
+                            else // start resizing
+                            setColumnResizing(header.column.id);
                             break;
                         case "Escape":
-                            if (columnResizing) {
-                                setColumnResizing("");
-                                setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`);
-                            }
+                            if (columnResizing) setColumnResizing("");
                             break;
                         case "ArrowRight":
                             e.preventDefault();
@@ -2318,7 +2319,6 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
                             if (columnResizing) {
                                 columnSizingObject[header.column.id] = header.getSize() + 10;
                                 table.setColumnSizing(columnSizingObject);
-                                setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
                             }
                             break;
                         case "ArrowLeft":
@@ -2327,7 +2327,6 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
                             if (columnResizing) {
                                 columnSizingObject[header.column.id] = header.getSize() - 10;
                                 table.setColumnSizing(columnSizingObject);
-                                setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
                             }
                             break;
                     }
@@ -2342,7 +2341,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
 var $64a351d3fd8413c3$export$2e2bcd8739ae039 = $64a351d3fd8413c3$var$HeaderResizeElement;
 
 
-const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElement: sortElement = null, setAriaLiveFeedback: setAriaLiveFeedback })=>{
+const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElement: sortElement = null })=>{
     return /*#__PURE__*/ (0, $hgUW1$jsx)("thead", {
         className: "dc-thead--truncated dc-thead--resizeable",
         children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
@@ -2350,8 +2349,7 @@ const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElem
                 children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
                         table: table,
                         header: header,
-                        sortElement: sortElement,
-                        setAriaLiveFeedback: setAriaLiveFeedback
+                        sortElement: sortElement
                     }, header.id + "_dataTableResize"))
             }, headerGroup.id))
     });
@@ -3664,7 +3662,6 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ columns: columns, sortTransform: sort
     const { conditions: conditions } = resource;
     const data = resource.values;
     const [sorting, setSorting] = (0, $hgUW1$useState)([]);
-    const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)("");
     const dataTableWrapperElement = (0, $hgUW1$useRef)(null);
     const columnHelper = (0, $hgUW1$createColumnHelper)();
     const table_columns = columns.map((col)=>{
@@ -3860,57 +3857,48 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ columns: columns, sortTransform: sort
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                 className: "dc-c-datatable-wrapper ds-u-border-x--1 ds-u-border-bottom--1",
                 tabIndex: 0,
                 ref: dataTableWrapperElement,
-                children: [
-                    /*#__PURE__*/ (0, $hgUW1$jsxs)("table", {
-                        style: {
-                            width: canResize ? table.getCenterTotalSize() : "100%",
-                            minWidth: tableWrapperWidth()
-                        },
-                        className: "dc-c-datatable",
-                        children: [
-                            canResize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $96d341d082bffec5$export$2e2bcd8739ae039), {
-                                table: table,
-                                sortElement: sortElement,
-                                setAriaLiveFeedback: setAriaLiveFeedback
-                            }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $23763e27eda0e8d7$export$2e2bcd8739ae039), {
-                                table: table,
-                                sortElement: sortElement
-                            }),
-                            loading ? /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {}) : /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {
-                                children: table.getRowModel().rows.map((row, index)=>{
-                                    const even = (index + 1) % 2 === 0;
-                                    const highlight = highlightRow === row.id;
-                                    return /*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
-                                        className: `${highlight ? "dc-c-datatable--highlight-row" : even && "dc-c-datatable--even-row"}`,
-                                        onClick: ()=>setHighlightRow(row.id),
-                                        children: row.getVisibleCells().map((cell)=>{
-                                            let classList = "dc-truncate ds-u-padding-x--1";
-                                            return /*#__PURE__*/ (0, $hgUW1$jsx)("td", {
-                                                key: cell.id,
-                                                style: {
-                                                    maxWidth: cell.column.getSize()
-                                                },
-                                                className: `${classList} ${tablePadding}`,
-                                                title: cell.getValue(),
-                                                children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
-                                            });
-                                        })
-                                    }, row.id);
-                                })
+                children: /*#__PURE__*/ (0, $hgUW1$jsxs)("table", {
+                    style: {
+                        width: canResize ? table.getCenterTotalSize() : "100%",
+                        minWidth: tableWrapperWidth()
+                    },
+                    className: "dc-c-datatable",
+                    children: [
+                        canResize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $96d341d082bffec5$export$2e2bcd8739ae039), {
+                            table: table,
+                            sortElement: sortElement
+                        }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $23763e27eda0e8d7$export$2e2bcd8739ae039), {
+                            table: table,
+                            sortElement: sortElement
+                        }),
+                        loading ? /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {}) : /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {
+                            children: table.getRowModel().rows.map((row, index)=>{
+                                const even = (index + 1) % 2 === 0;
+                                const highlight = highlightRow === row.id;
+                                return /*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
+                                    className: `${highlight ? "dc-c-datatable--highlight-row" : even && "dc-c-datatable--even-row"}`,
+                                    onClick: ()=>setHighlightRow(row.id),
+                                    children: row.getVisibleCells().map((cell)=>{
+                                        let classList = "dc-truncate ds-u-padding-x--1";
+                                        return /*#__PURE__*/ (0, $hgUW1$jsx)("td", {
+                                            key: cell.id,
+                                            style: {
+                                                maxWidth: cell.column.getSize()
+                                            },
+                                            className: `${classList} ${tablePadding}`,
+                                            title: cell.getValue(),
+                                            children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
+                                        });
+                                    })
+                                }, row.id);
                             })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                        className: "sr-only",
-                        "aria-live": "assertive",
-                        "aria-atomic": "true",
-                        children: ariaLiveFeedback
-                    })
-                ]
+                        })
+                    ]
+                })
             }),
             loading && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
                 "aria-valuetext": "Dataset loading",
@@ -4541,42 +4529,6 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
         window.history.pushState({}, "", `${url.origin}${url.pathname}${urlString}`);
     }
     const pageSize = defaultPageSize;
-    (0, $hgUW1$useEffect)(()=>{
-        const baseNumber = Number(totalItems) > 0 ? 1 : 0;
-        const startingNumber = baseNumber + (Number(pageSize) * Number(page) - Number(pageSize));
-        const endingNumber = Number(pageSize) * Number(page);
-        setCurrentResultNumbers({
-            total: Number(totalItems),
-            startingNumber: Number(totalItems) >= startingNumber ? startingNumber : 0,
-            endingNumber: Number(totalItems) < endingNumber ? Number(totalItems) : endingNumber
-        });
-        setTimeout(()=>{
-            setAnnouncementText(`Showing ${startingNumber} to ${endingNumber} of ${totalItems} datasets`);
-        }, 100);
-        if (totalItems <= 0 && currentResultNumbers !== null) setNoResults(true);
-        else setNoResults(false);
-    }, [
-        totalItems,
-        pageSize,
-        page
-    ]);
-    (0, $hgUW1$useEffect)(()=>{
-        if (page !== 1 && (transformedParams.fulltext !== fulltext || transformedParams.selectedFacets !== selectedFacets)) setPage(1);
-    }, [
-        fulltext,
-        selectedFacets
-    ]);
-    (0, $hgUW1$useEffect)(()=>{
-        if (totalItems !== null && totalItems !== undefined && totalItems > 0) {
-            var params = buildSearchParams(true);
-            if (params !== location.search) setSearchParams(params);
-        }
-    }, [
-        page,
-        sort,
-        sortOrder,
-        totalItems
-    ]);
     function resetFilters() {
         setFullText(defaultFulltext);
         setFilterText(defaultFulltext);
@@ -4619,11 +4571,61 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
             })}`);
         }
     });
-    if (data && data.data.total && totalItems != data.data.total) setTotalItems(data.data.total);
+    // Sync totalItems state with API response data
+    // Moved to useEffect to prevent state updates during render (which can cause infinite loops)
+    (0, $hgUW1$useEffect)(()=>{
+        if (data?.data?.total !== undefined && data.data.total !== totalItems) setTotalItems(data.data.total);
+    }, [
+        data?.data?.total
+    ]);
     const facets = data && data.data.facets ? (0, $eff7d34c30f5a0fc$export$959638e8dca60ce6)(data ? data.data.facets : []) : {
         theme: null,
         keyword: null
     };
+    (0, $hgUW1$useEffect)(()=>{
+        const baseNumber = Number(totalItems) > 0 ? 1 : 0;
+        const startingNumber = baseNumber + (Number(pageSize) * Number(page) - Number(pageSize));
+        const endingNumber = Number(pageSize) * Number(page);
+        setCurrentResultNumbers({
+            total: Number(totalItems),
+            startingNumber: Number(totalItems) >= startingNumber ? startingNumber : 0,
+            endingNumber: Number(totalItems) < endingNumber ? Number(totalItems) : endingNumber
+        });
+        if (totalItems <= 0 && currentResultNumbers !== null) setNoResults(true);
+        else setNoResults(false);
+    }, [
+        totalItems,
+        pageSize,
+        page
+    ]);
+    (0, $hgUW1$useEffect)(()=>{
+        if (page !== 1 && (transformedParams.fulltext !== fulltext || transformedParams.selectedFacets !== selectedFacets)) setPage(1);
+    }, [
+        fulltext,
+        selectedFacets
+    ]);
+    (0, $hgUW1$useEffect)(()=>{
+        if (totalItems !== null && totalItems !== undefined && totalItems > 0) {
+            var params = buildSearchParams(true);
+            if (params !== location.search) setSearchParams(params);
+        }
+    }, [
+        page,
+        sort,
+        sortOrder,
+        totalItems
+    ]);
+    (0, $hgUW1$useEffect)(()=>{
+        // No results found
+        if (noResults) setAnnouncementText("No results found.");
+        else if (!isPending && (!data || !data.data.results)) setAnnouncementText("Could not connect to the API.");
+        else setAnnouncementText(`Showing ${currentResultNumbers.startingNumber} to ${currentResultNumbers.endingNumber} of ${currentResultNumbers.total} datasets`);
+    }, [
+        data,
+        isPending,
+        noResults,
+        currentResultNumbers
+    ]);
     return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)((0, $5723016a5461c1ca$export$2e2bcd8739ae039), {
@@ -4632,6 +4634,15 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
             /*#__PURE__*/ (0, $hgUW1$jsxs)("section", {
                 className: "ds-l-container",
                 children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                        children: /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
+                            className: "ds-u-visibility--screen-reader",
+                            "aria-live": "assertive",
+                            "aria-atomic": "true",
+                            "data-testid": "currentResults",
+                            children: announcementText
+                        })
+                    }),
                     /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                         className: "ds-l-row",
                         children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
@@ -4716,34 +4727,23 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
                                         /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                                             className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--end ds-u-flex-wrap--reverse ds-u-sm-flex-wrap--wrap",
                                             children: [
-                                                enablePagination && /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                                                enablePagination && /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                                                     className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--8 ds-u-sm-padding-left--0",
-                                                    children: [
-                                                        /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                                                            className: "ds-u-margin-y--0",
-                                                            "aria-hidden": "true",
-                                                            children: currentResultNumbers && data && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
-                                                                children: [
-                                                                    "Showing ",
-                                                                    currentResultNumbers.startingNumber,
-                                                                    " -",
-                                                                    " ",
-                                                                    currentResultNumbers.endingNumber,
-                                                                    " of ",
-                                                                    data.data.total,
-                                                                    " datasets"
-                                                                ]
-                                                            })
-                                                        }),
-                                                        /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                                                            className: "ds-u-visibility--screen-reader",
-                                                            role: "status",
-                                                            "aria-live": "assertive",
-                                                            "aria-atomic": "true",
-                                                            "data-testid": "currentResults",
-                                                            children: announcementText
+                                                    children: /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
+                                                        className: "ds-u-margin-y--0",
+                                                        children: currentResultNumbers && data && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
+                                                            children: [
+                                                                "Showing ",
+                                                                currentResultNumbers.startingNumber,
+                                                                " -",
+                                                                " ",
+                                                                currentResultNumbers.endingNumber,
+                                                                " of ",
+                                                                data.data.total,
+                                                                " datasets"
+                                                            ]
                                                         })
-                                                    ]
+                                                    })
                                                 }),
                                                 enableSort && /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                                                     className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-u-sm-padding-right--0",
@@ -4764,6 +4764,7 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
                                             children: [
                                                 noResults && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
                                                     variation: "error",
+                                                    role: "region",
                                                     heading: "No results found."
                                                 }),
                                                 data && data.data.results ? Object.keys(data.data.results).map((key)=>{
@@ -4791,6 +4792,7 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
                                                     }, item.identifier);
                                                 }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
                                                     variation: "error",
+                                                    role: "region",
                                                     heading: "Could not connect to the API."
                                                 })
                                             ]
@@ -4903,37 +4905,6 @@ const $550bcc185f420ff5$var$DatasetList = ({ rootUrl: rootUrl, enableSort: enabl
         }
     };
     const pageSize = defaultPageSize;
-    (0, $hgUW1$useEffect)(()=>{
-        // Update browser URL with current search params
-        const params = buildSearchParams(true);
-        const url = new URL(window.location.href);
-        window.history.pushState({}, "", `${url.origin}${url.pathname}${params}`);
-        const baseNumber = Number(totalItems) > 0 ? 1 : 0;
-        const startingNumber = baseNumber + (Number(pageSize) * Number(page) - Number(pageSize));
-        const endingNumber = Number(pageSize) * Number(page);
-        setCurrentResultNumbers({
-            total: Number(totalItems),
-            startingNumber: Number(totalItems) >= startingNumber ? startingNumber : 0,
-            endingNumber: Number(totalItems) < endingNumber ? Number(totalItems) : endingNumber
-        });
-        setTimeout(()=>{
-            setAnnouncementText(`Showing ${startingNumber} to ${endingNumber} of ${totalItems} datasets`);
-        }, 100);
-        if (totalItems <= 0 && currentResultNumbers !== null) setNoResults(true);
-        else setNoResults(false);
-    }, [
-        totalItems,
-        pageSize,
-        page
-    ]);
-    (0, $hgUW1$useEffect)(()=>{
-        var params = buildSearchParams(true);
-        if (params !== location.search) setSearchParams(params);
-    }, [
-        page,
-        sort,
-        sortOrder
-    ]);
     function buildSearchParams(includePage) {
         let newParams = {};
         if (Number(page) !== 1 && includePage) newParams.page = page;
@@ -4962,7 +4933,52 @@ const $550bcc185f420ff5$var$DatasetList = ({ rootUrl: rootUrl, enableSort: enabl
             })}`);
         }
     });
-    if (data && data.data.total && totalItems != data.data.total) setTotalItems(data.data.total);
+    // Sync totalItems state with API response data
+    // Moved to useEffect to prevent state updates during render (which can cause infinite loops)
+    (0, $hgUW1$useEffect)(()=>{
+        if (data?.data?.total !== undefined && data.data.total !== totalItems) setTotalItems(data.data.total);
+    }, [
+        data?.data?.total
+    ]);
+    (0, $hgUW1$useEffect)(()=>{
+        // Update browser URL with current search params
+        const params = buildSearchParams(true);
+        const url = new URL(window.location.href);
+        window.history.pushState({}, "", `${url.origin}${url.pathname}${params}`);
+        const baseNumber = Number(totalItems) > 0 ? 1 : 0;
+        const startingNumber = baseNumber + (Number(pageSize) * Number(page) - Number(pageSize));
+        const endingNumber = Number(pageSize) * Number(page);
+        setCurrentResultNumbers({
+            total: Number(totalItems),
+            startingNumber: Number(totalItems) >= startingNumber ? startingNumber : 0,
+            endingNumber: Number(totalItems) < endingNumber ? Number(totalItems) : endingNumber
+        });
+        if (totalItems <= 0 && currentResultNumbers !== null) setNoResults(true);
+        else setNoResults(false);
+    }, [
+        totalItems,
+        pageSize,
+        page
+    ]);
+    (0, $hgUW1$useEffect)(()=>{
+        var params = buildSearchParams(true);
+        if (params !== location.search) setSearchParams(params);
+    }, [
+        page,
+        sort,
+        sortOrder
+    ]);
+    (0, $hgUW1$useEffect)(()=>{
+        // No results found
+        if (noResults) setAnnouncementText("No results found.");
+        else if (!isPending && (!data || !data.data.results)) setAnnouncementText("Could not connect to the API.");
+        else setAnnouncementText(`Showing ${currentResultNumbers.startingNumber} to ${currentResultNumbers.endingNumber} of ${currentResultNumbers.total} datasets`);
+    }, [
+        data,
+        isPending,
+        noResults,
+        currentResultNumbers
+    ]);
     return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)((0, $5723016a5461c1ca$export$2e2bcd8739ae039), {
@@ -4971,6 +4987,15 @@ const $550bcc185f420ff5$var$DatasetList = ({ rootUrl: rootUrl, enableSort: enabl
             /*#__PURE__*/ (0, $hgUW1$jsxs)("section", {
                 className: "ds-l-container",
                 children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                        children: /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
+                            className: "ds-u-visibility--screen-reader",
+                            "aria-live": "assertive",
+                            "aria-atomic": "true",
+                            "data-testid": "currentResults",
+                            children: announcementText
+                        })
+                    }),
                     /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                         className: "ds-l-row",
                         children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
@@ -5011,33 +5036,22 @@ const $550bcc185f420ff5$var$DatasetList = ({ rootUrl: rootUrl, enableSort: enabl
                                                         className: "ds-u-margin-bottom--3",
                                                         children: introText ? introText : null
                                                     }),
-                                                    enablePagination && /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                                                        children: [
-                                                            /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                                                                className: "ds-u-margin-y--0",
-                                                                "aria-hidden": "true",
-                                                                children: currentResultNumbers && data && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
-                                                                    children: [
-                                                                        "Showing ",
-                                                                        currentResultNumbers.startingNumber,
-                                                                        " -",
-                                                                        " ",
-                                                                        currentResultNumbers.endingNumber,
-                                                                        " of ",
-                                                                        data.data.total,
-                                                                        " datasets"
-                                                                    ]
-                                                                })
-                                                            }),
-                                                            /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                                                                className: "ds-u-visibility--screen-reader",
-                                                                role: "status",
-                                                                "aria-live": "assertive",
-                                                                "aria-atomic": "true",
-                                                                "data-testid": "currentResults",
-                                                                children: announcementText
+                                                    enablePagination && /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                                                        children: /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
+                                                            className: "ds-u-margin-y--0",
+                                                            children: currentResultNumbers && data && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
+                                                                children: [
+                                                                    "Showing ",
+                                                                    currentResultNumbers.startingNumber,
+                                                                    " -",
+                                                                    " ",
+                                                                    currentResultNumbers.endingNumber,
+                                                                    " of ",
+                                                                    data.data.total,
+                                                                    " datasets"
+                                                                ]
                                                             })
-                                                        ]
+                                                        })
                                                     })
                                                 ]
                                             }),
@@ -5060,6 +5074,7 @@ const $550bcc185f420ff5$var$DatasetList = ({ rootUrl: rootUrl, enableSort: enabl
                                         children: [
                                             noResults && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
                                                 variation: "error",
+                                                role: "region",
                                                 heading: "No results found."
                                             }),
                                             data && data.data.results ? Object.keys(data.data.results).map((key)=>{
@@ -5074,6 +5089,7 @@ const $550bcc185f420ff5$var$DatasetList = ({ rootUrl: rootUrl, enableSort: enabl
                                                 }, item.identifier);
                                             }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
                                                 variation: "error",
+                                                role: "region",
                                                 heading: "Could not connect to the API."
                                             })
                                         ]
@@ -5190,6 +5206,11 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
     const [schema, setSchema] = (0, $hgUW1$useState)({});
     // const [joins, setJoins] = useState()
     const [properties, setProperties] = (0, $hgUW1$useState)(options.properties ? options.properties : undefined);
+    // Check drupalSettings for datastore_query_api
+    const useDatasetAPI = typeof window !== "undefined" && window.drupalSettings?.datastore_query_api === true;
+    const datasetID = additionalParams.datasetID;
+    // Remove datasetID from params to avoid sending it to the API
+    const { datasetID: _, ...restAdditionalParams } = additionalParams;
     let params = {
         keys: keys,
         limit: limit,
@@ -5198,7 +5219,7 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
         sorts: sort,
         properties: properties,
         groupings: groupings,
-        ...additionalParams
+        ...restAdditionalParams
     };
     params = (0, $6d5c0212e738499b$export$34e95918366a058e)(params, ACA);
     const paramsString = Object.keys(params).length ? `${(0, $hgUW1$qs).stringify(params)}` : "";
@@ -5207,13 +5228,15 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
         if (!requireConditions) enabled = true;
         if (conditions && conditions.length) enabled = true;
     }
+    // Change whether distribution API or dataset API is used based on option
+    const queryID = useDatasetAPI && datasetID ? `${datasetID}/0` : id;
     const { data: data, isPending: isPending, error: error } = (0, $hgUW1$useQuery)({
         queryKey: [
             "datastore" + id + paramsString
         ],
         queryFn: ()=>{
             setCount(null);
-            return fetch(`${rootUrl}/datastore/query/${id}?${paramsString}`).then((res)=>res.json());
+            return fetch(`${rootUrl}/datastore/query/${queryID}?${paramsString}`).then((res)=>res.json());
         },
         enabled: enabled
     });
@@ -5227,7 +5250,7 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
                 count: true,
                 schema: true
             };
-            return fetch(`${rootUrl}/datastore/query/${id}?${(0, $hgUW1$qs).stringify((0, $6d5c0212e738499b$export$34e95918366a058e)(unfilteredParams, ACA))}`).then((res)=>res.json());
+            return fetch(`${rootUrl}/datastore/query/${queryID}?${(0, $hgUW1$qs).stringify((0, $6d5c0212e738499b$export$34e95918366a058e)(unfilteredParams, ACA))}`).then((res)=>res.json());
         }
     });
     (0, $hgUW1$useEffect)(()=>{
@@ -5829,7 +5852,6 @@ var $cf6eaefd6b928de3$export$2e2bcd8739ae039 = $cf6eaefd6b928de3$var$DatasetAPI;
 
 const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns, tableData: tableData, pageSize: pageSize, columnFilters: columnFilters })=>{
     const [sorting, setSorting] = (0, $hgUW1$useState)([]);
-    const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)("");
     const mobile = (0, $hgUW1$useMediaQuery)({
         minWidth: 0,
         maxWidth: 544
@@ -5942,8 +5964,8 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
                                             return header.id === "titleResizable" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
                                                 table: table,
                                                 header: header,
-                                                setAriaLiveFeedback: setAriaLiveFeedback,
-                                                sortElement: sortElement
+                                                sortElement: sortElement,
+                                                id: "dataDictionary_" + header.id
                                             }, header.id + "_resize") : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$TableCell), {
                                                 key: header.id,
                                                 className: `ds-u-border-y--2 ds-u-border--dark ds-u-border-x--0`,
@@ -5981,12 +6003,6 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                        className: "sr-only",
-                        "aria-live": "assertive",
-                        "aria-atomic": "true",
-                        children: ariaLiveFeedback
-                    }),
                     table.getRowModel().rows.length === 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
                         variation: "warn",
                         children: "No results found for the current filters"
@@ -6296,7 +6312,7 @@ const $2bd73bb95b0c04ed$var$DatasetDescription = ({ distribution: distribution,
             if (distribution.data && distribution.data.description) newDescription = distribution.data.description;
             else if (dataset.description) newDescription = dataset.description;
         }
-        if (typeof newDescription === "string" && description !== newDescription && updateAriaLive) updateAriaLive(newDescription);
+        if (description !== newDescription && updateAriaLive) updateAriaLive(newDescription);
         setDescription(newDescription);
     }, [
         resource,
@@ -6308,11 +6324,9 @@ const $2bd73bb95b0c04ed$var$DatasetDescription = ({ distribution: distribution,
         className: "ds-u-measure--wide ds-u-margin-bottom--7",
         children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
             className: "ds-u-margin-top--0 dc-c-metadata-description",
-            children: typeof description === "string" ? /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                dangerouslySetInnerHTML: {
-                    __html: (0, $hgUW1$dompurify).sanitize(description)
-                }
-            }) : description
+            dangerouslySetInnerHTML: {
+                __html: (0, $hgUW1$dompurify).sanitize(description)
+            }
         })
     });
 };
@@ -6359,6 +6373,8 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, customColumns
     const resource = (0, $1d3d480a9cfaabe0$export$2e2bcd8739ae039)("", rootUrl, {
         ...options,
         limit: defaultPageSize
+    }, {
+        datasetID: id // pass datasetID into additional params to enable dataset API option in useDatastore
     });
     const siteWideDataDictionary = dataDictionaryUrl ? $a0f13962e513caa1$var$getDataDictionary(rootUrl + dataDictionaryUrl).dataDictionary : null;
     // compare schema fields with siteWideDataDictionary to display commonalities for now
@@ -6424,7 +6440,6 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, customColumns
         window.location.hash
     ]);
     const displayDataDictionaryTab = distribution.data && distribution.data.describedBy && distribution.data.describedByType === "application/vnd.tableschema+json" || datasetSitewideDictionary && datasetSitewideDictionary.length > 0;
-    const formatType = (0, $f764661366bd9e1b$export$ee48b7e0e4eb536e)(distribution);
     return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
         children: dataset.error ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $026cb986f9fea2b1$export$2e2bcd8739ae039), {
             content: notFoundContent,
@@ -6696,21 +6711,15 @@ var $b9af6ce5e2c06331$export$2e2bcd8739ae039 = $b9af6ce5e2c06331$var$Header;
 
 
 
-
 const $24918217e48ac525$var$NavLink = ({ link: link, className: className = null, wrapLabel: wrapLabel = false, clickHandler: clickHandler })=>{
     const innerHtml = wrapLabel ? /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
         children: link.label
     }) : link.label;
-    return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$NavLink), {
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$NavLink), {
         className: ({ isActive: isActive })=>isActive ? `dc-c-active-link ${className}` : `${className}`,
         to: link.url,
         onClick: clickHandler ? clickHandler : undefined,
-        children: [
-            innerHtml,
-            link?.target === "_blank" && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$ExternalLinkIcon), {
-                className: "ds-u-margin-left--05 ds-c-external-link-icon"
-            })
-        ]
+        children: innerHtml
     });
 // }
 };
@@ -7100,15 +7109,10 @@ const $a6df0aa147323304$var$Footer = ({ links: links, showEmail: showEmail = tru
                         children: /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
                             className: "ds-u-padding--0 ds-u-display--flex ds-u-lg-flex-direction--row ds-u-flex-direction--column",
                             children: footerUtilityLinks.map((link)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
-                                    children: /*#__PURE__*/ (0, $hgUW1$jsxs)("a", {
+                                    children: /*#__PURE__*/ (0, $hgUW1$jsx)("a", {
                                         href: link.url,
                                         className: "ds-u-margin-right--2",
-                                        children: [
-                                            link.label,
-                                            link?.target === "_blank" && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$ExternalLinkIcon), {
-                                                className: "ds-u-margin-left--05 ds-c-external-link-icon"
-                                            })
-                                        ]
+                                        children: link.label
                                     })
                                 }, link.id))
                         })
@@ -7767,6 +7771,8 @@ const $dd6eb2b30d7ad75d$var$FilteredResourceBody = ({ id: id, dataset: dataset,
     const resource = (0, $1d3d480a9cfaabe0$export$2e2bcd8739ae039)("", rootUrl, {
         ...options,
         limit: 25
+    }, {
+        datasetID: id
     });
     (0, $hgUW1$useEffect)(()=>{
         if (distribution.identifier) resource.setResource(distribution.identifier);