@civicactions/cmsds-open-data-components 2.1.0 → 3.0.0-alpha.1

package/dist/main.js

@@ -1,14 +1,15 @@
 import "./main.css";
 import {jsxs as $hgUW1$jsxs, jsx as $hgUW1$jsx, Fragment as $hgUW1$Fragment} from "react/jsx-runtime";
 import $hgUW1$react, {useState as $hgUW1$useState, useRef as $hgUW1$useRef, useEffect as $hgUW1$useEffect} from "react";
-import {Button as $hgUW1$Button, TextField as $hgUW1$TextField, Spinner as $hgUW1$Spinner, Alert as $hgUW1$Alert, Pagination as $hgUW1$Pagination, Dropdown as $hgUW1$Dropdown, Badge as $hgUW1$Badge, Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, Choice as $hgUW1$Choice, Tooltip as $hgUW1$Tooltip, Table as $hgUW1$Table, TableHead as $hgUW1$TableHead, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableBody as $hgUW1$TableBody, Dialog as $hgUW1$Dialog, HelpDrawer as $hgUW1$HelpDrawer} from "@cmsgov/design-system";
+import {Button as $hgUW1$Button, TextField as $hgUW1$TextField, Spinner as $hgUW1$Spinner, Dropdown as $hgUW1$Dropdown, Alert as $hgUW1$Alert, Pagination as $hgUW1$Pagination, Badge as $hgUW1$Badge, Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, Choice as $hgUW1$Choice, Tooltip as $hgUW1$Tooltip, Table as $hgUW1$Table, TableHead as $hgUW1$TableHead, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableBody as $hgUW1$TableBody, Dialog as $hgUW1$Dialog, HelpDrawer as $hgUW1$HelpDrawer} from "@cmsgov/design-system";
 import $hgUW1$proptypes from "prop-types";
 import {NavLink as $hgUW1$NavLink, useLocation as $hgUW1$useLocation, useSearchParams as $hgUW1$useSearchParams, Link as $hgUW1$Link, useNavigate as $hgUW1$useNavigate} from "react-router-dom";
+import $hgUW1$qs from "qs";
 import $hgUW1$swaggeruireact from "swagger-ui-react";
 import "swagger-ui-react/swagger-ui.css";
-import $hgUW1$qs from "qs";
 import {useQuery as $hgUW1$useQuery, QueryClient as $hgUW1$QueryClient, QueryClientProvider as $hgUW1$QueryClientProvider} from "@tanstack/react-query";
 import $hgUW1$axios from "axios";
+import $hgUW1$dompurify from "dompurify";
 import $hgUW1$reacttexttruncate from "react-text-truncate";
 import {createColumnHelper as $hgUW1$createColumnHelper, useReactTable as $hgUW1$useReactTable, getCoreRowModel as $hgUW1$getCoreRowModel, getSortedRowModel as $hgUW1$getSortedRowModel, flexRender as $hgUW1$flexRender} from "@tanstack/react-table";
 import {useMediaQuery as $hgUW1$useMediaQuery} from "react-responsive";
@@ -165,14 +166,25 @@ var $f57121650539d8c5$export$2e2bcd8739ae039 = $f57121650539d8c5$var$NavBar;
 
 
 
-const $c96c4b9ef7203c1f$var$APIPage = ({ hideAuth: hideAuth , additionalParams: additionalParams , rootUrl: rootUrl  })=>/*#__PURE__*/ (0, $hgUW1$jsx)("section", {
+
+const $c96c4b9ef7203c1f$var$APIPage = ({ hideAuth: hideAuth , additionalParams: additionalParams , rootUrl: rootUrl  })=>{
+    const hasACA = additionalParams && additionalParams.ACA ? true : false;
+    let params = {
+        authentication: hideAuth ? false : undefined,
+        ACA: hasACA ? additionalParams.ACA : undefined,
+        redirect: hasACA ? false : undefined
+    };
+    return /*#__PURE__*/ (0, $hgUW1$jsx)("section", {
         className: "ds-l-container",
         children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$swaggeruireact), {
-            url: `${rootUrl}?${hideAuth ? "authentication=false&" : ""}${additionalParams && additionalParams.ACA ? "ACA=" + additionalParams.ACA + "&redirect=false" : ""}`,
+            url: `${rootUrl}${(0, $hgUW1$qs).stringify(params, {
+                addQueryPrefix: true
+            })}`,
             docExpansion: "list",
             defaultModelsExpandDepth: -1
         })
     });
+};
 $c96c4b9ef7203c1f$var$APIPage.defaultProps = {
     hideAuth: true
 };
@@ -257,6 +269,7 @@ var $61ff88fb3f6ee2c8$export$2e2bcd8739ae039 = $61ff88fb3f6ee2c8$var$withQueryPr
 
 
 
+
 const $bd76a91923d7e8a7$var$TransformedDate = ({ date: date , options: options  })=>{
     const rawDate = new Date(date);
     let modifiedDate = "";
@@ -279,7 +292,7 @@ var $bd76a91923d7e8a7$export$2e2bcd8739ae039 = $bd76a91923d7e8a7$var$Transformed
 
 const $dc6d3aaf3e07417b$var$dangerousDescriptionElement = ({ children: children  })=>/*#__PURE__*/ (0, $hgUW1$jsx)("span", {
         dangerouslySetInnerHTML: {
-            __html: children
+            __html: (0, $hgUW1$dompurify).sanitize(children)
         }
     });
 const $dc6d3aaf3e07417b$var$DatasetSearchListItem = ({ item: item , updateFacets: updateFacets  })=>{
@@ -300,7 +313,7 @@ const $dc6d3aaf3e07417b$var$DatasetSearchListItem = ({ item: item , updateFacets
                 className: "ds-l-row ds-u-padding-top--5",
                 children: [
                     /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                        className: "ds-l-col--7",
+                        className: "ds-l-sm-col--7 ds-l-col--12",
                         children: theme && /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
                             className: "ds-u-padding--0 ds-u-display--flex ds-u-flex-direction--row ds-u-flex-wrap--wrap",
                             children: theme.map((t)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
@@ -313,7 +326,7 @@ const $dc6d3aaf3e07417b$var$DatasetSearchListItem = ({ item: item , updateFacets
                         })
                     }),
                     /*#__PURE__*/ (0, $hgUW1$jsxs)("span", {
-                        className: "ds-l-col--5 ds-u-color--gray ds-u-text-align--right",
+                        className: "ds-l-sm-col--5 ds-l-col--12 ds-u-color--gray ds-u-sm-text-align--right",
                         children: [
                             "Updated ",
                             /*#__PURE__*/ (0, $hgUW1$jsx)((0, $bd76a91923d7e8a7$export$2e2bcd8739ae039), {
@@ -518,7 +531,7 @@ function $116bd29db288848e$export$28fa7926a3fa4176(selectedFacets, fulltext, sor
 
 
 
-const $007dd6bfbe0f2956$var$DatasetSearch = ({ rootUrl: rootUrl , pageTitle: pageTitle , introText: introText , fulltextLabel: fulltextLabel , fulltextLabelClassName: fulltextLabelClassName , fulltextPlaceholder: fulltextPlaceholder , formClassName: formClassName , additionalParams: additionalParams , sortOptions: sortOptions , defaultSort: defaultSort , showSort: showSort  })=>{
+const $007dd6bfbe0f2956$var$DatasetSearch = ({ rootUrl: rootUrl , pageTitle: pageTitle , introText: introText , fulltextLabel: fulltextLabel , fulltextLabelClassName: fulltextLabelClassName , fulltextPlaceholder: fulltextPlaceholder , filterTitle: filterTitle , formClassName: formClassName , additionalParams: additionalParams , sortOptions: sortOptions , defaultSort: defaultSort , showSort: showSort  })=>{
     const defaultSortBy = "";
     const defaultFulltext = "";
     const defaultSelectedFacets = {};
@@ -539,7 +552,31 @@ const $007dd6bfbe0f2956$var$DatasetSearch = ({ rootUrl: rootUrl , pageTitle: pag
     const [page, setPage] = (0, $hgUW1$useState)(transformedParams.page ? transformedParams.page : defaultPage);
     const [sort, setSort] = (0, $hgUW1$useState)(transformedParams.sort ? transformedParams.sort : defaultSort ? defaultSort.defaultSort : defaultSortBy);
     const [sortOrder, setSortOrder] = (0, $hgUW1$useState)(transformedParams.sortOrder ? transformedParams.sortOrder : defaultSort ? defaultSort.defaultOrder : defaultSortOrder);
+    const [sortDisplay, setSortDisplay] = (0, $hgUW1$useState)(()=>{
+        return sort === "modified" ? sortOrder === "desc" ? "newest" : "oldest" : sortOrder === "desc" ? "titleZA" : "titleAZ";
+    });
     const [selectedFacets, setSelectedFacets] = (0, $hgUW1$useState)(transformedParams.selectedFacets ? transformedParams.selectedFacets : defaultSelectedFacets);
+    const setSortOptions = (value)=>{
+        setSortDisplay(value);
+        switch(value){
+            case "newest":
+                setSort("modified");
+                setSortOrder("desc");
+                break;
+            case "oldest":
+                setSort("modified");
+                setSortOrder("asc");
+                break;
+            case "titleAZ":
+                setSort("title");
+                setSortOrder("asc");
+                break;
+            case "titleZA":
+                setSort("title");
+                setSortOrder("desc");
+                break;
+        }
+    };
     function updateSelectedFacets(currentFacet) {
         const facets = (0, $116bd29db288848e$export$9ef1e909a5e43470)(currentFacet, selectedFacets);
         setPage(1);
@@ -618,187 +655,159 @@ const $007dd6bfbe0f2956$var$DatasetSearch = ({ rootUrl: rootUrl , pageTitle: pag
                 className: "dc-search-header ds-title ds-u-margin-y--3",
                 children: pageTitle
             }),
-            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                 className: "ds-l-row",
-                children: [
-                    /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                        className: "ds-l-md-col--8 ds-l-sm-col--12ds-u-margin-bottom--3",
-                        children: [
-                            introText ? introText : null,
-                            /*#__PURE__*/ (0, $hgUW1$jsxs)("form", {
-                                onSubmit: (e)=>{
-                                    e.preventDefault();
-                                    ()=>{
+                children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                    className: "ds-l-col--12",
+                    children: [
+                        introText ? introText : null,
+                        /*#__PURE__*/ (0, $hgUW1$jsxs)("form", {
+                            onSubmit: (e)=>{
+                                e.preventDefault();
+                                ()=>{
+                                    setFullText(filterText);
+                                    setPage(defaultPage);
+                                };
+                            },
+                            className: formClassName,
+                            children: [
+                                /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TextField), {
+                                    fieldClassName: "ds-u-margin--0",
+                                    value: filterText,
+                                    className: "dc-fulltext--input-container ds-u-padding-right--2",
+                                    label: fulltextLabel,
+                                    labelClassName: fulltextLabelClassName,
+                                    placeholder: fulltextPlaceholder,
+                                    name: "dataset_fulltext_search",
+                                    onChange: (e)=>setFilterText(e.target.value)
+                                }),
+                                /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
+                                    type: "submit",
+                                    variation: "solid",
+                                    htmlFor: "dataset_fulltext_search",
+                                    onClick: ()=>{
                                         setFullText(filterText);
                                         setPage(defaultPage);
-                                    };
-                                },
-                                className: formClassName,
-                                children: [
-                                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TextField), {
-                                        fieldClassName: "ds-u-margin--0",
-                                        value: filterText,
-                                        className: "dc-fulltext--input-container ds-u-padding-right--2",
-                                        label: fulltextLabel,
-                                        labelClassName: fulltextLabelClassName,
-                                        placeholder: fulltextPlaceholder,
-                                        name: "dataset_fulltext_search",
-                                        onChange: (e)=>setFilterText(e.target.value)
-                                    }),
-                                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
-                                        type: "submit",
-                                        variation: "solid",
-                                        htmlFor: "dataset_fulltext_search",
-                                        onClick: ()=>{
-                                            setFullText(filterText);
-                                            setPage(defaultPage);
-                                        },
-                                        children: "Search"
-                                    })
-                                ]
-                            }),
-                            status === "loading" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
-                                className: "ds-u-valign--middle",
-                                "aria-valuetext": "Dataset Search loading",
-                                role: "status"
-                            }) : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
-                                children: [
-                                    /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                                        className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--end",
-                                        children: [
-                                            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                                                children: [
-                                                    currentResultNumbers && /*#__PURE__*/ (0, $hgUW1$jsxs)("p", {
-                                                        className: "ds-u-margin-y--0",
-                                                        role: "region",
-                                                        "aria-live": "polite",
-                                                        "data-testid": "currentResults",
-                                                        children: [
-                                                            "Showing ",
-                                                            currentResultNumbers.startingNumber,
-                                                            " -",
-                                                            " ",
-                                                            currentResultNumbers.endingNumber,
-                                                            " of ",
-                                                            data.data.total,
-                                                            " datasets"
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                                                        className: "ds-u-margin-y--0",
-                                                        children: (0, $116bd29db288848e$export$b638ec7c7eac7f18)(selectedFacets, {
-                                                            theme: "Categories",
-                                                            keyword: "Tags"
-                                                        })
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
-                                                className: "ds-u-padding--0 dc-c-clear-filters",
-                                                variation: "ghost",
-                                                onClick: ()=>resetFilters(),
-                                                children: "Clear all filters"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, $hgUW1$jsxs)("ol", {
-                                        className: "dc-dataset-search-list ds-u-padding--0",
-                                        children: [
-                                            noResults && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
-                                                variation: "error",
-                                                heading: "No results found."
-                                            }),
-                                            Object.keys(data.data.results).map((key)=>{
-                                                return data.data.results[key];
-                                            }).map((item)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
-                                                    className: "ds-u-padding--0",
-                                                    children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $dc6d3aaf3e07417b$export$2e2bcd8739ae039), {
-                                                        item: item,
-                                                        updateFacets: updateSelectedFacets
-                                                    })
-                                                }, item.identifier))
-                                        ]
-                                    }),
-                                    data.data.total != 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
-                                        id: "test-default",
-                                        currentPage: Number(page),
-                                        totalPages: Math.ceil(Number(data.data.total) / pageSize),
-                                        onPageChange: (evt, page)=>{
-                                            evt.preventDefault();
-                                            window.scroll(0, 0);
-                                            setPage(page);
-                                        },
-                                        renderHref: (page)=>{
-                                            const searchParams = buildSearchParams(false);
-                                            const includeAnd = searchParams ? "&" : "";
-                                            return `/datasets?page=${page}${includeAnd}${searchParams}`;
-                                        }
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
+                                    },
+                                    children: "Search"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                className: "ds-l-row ds-u-padding-top--6",
+                children: [
                     /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                        className: "ds-l-md-col--4 ds-l-sm-col--12",
+                        className: "ds-l-col--12 ds-l-sm-col--4",
                         children: [
-                            showSort && /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                                className: "ds-u-padding--2 ds-u-margin-bottom--4 ds-u-border--1",
-                                children: [
-                                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
-                                        options: sortOptions,
-                                        value: sort,
-                                        label: "Sort by",
-                                        labelClassName: "ds-u-margin-top--0",
-                                        name: "dataset_search_sort",
-                                        onChange: (e)=>setSort(e.target.value)
-                                    }),
-                                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
-                                        options: [
-                                            {
-                                                label: "Ascending",
-                                                value: "asc"
-                                            },
-                                            {
-                                                label: "Descending",
-                                                value: "desc"
-                                            }
-                                        ],
-                                        value: sortOrder,
-                                        label: "Sort order",
-                                        labelClassName: "ds-u-margin-top--0",
-                                        name: "dataset_search_sort_order",
-                                        onChange: (e)=>setSortOrder(e.target.value)
-                                    })
-                                ]
+                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
+                                className: "dc-dataset-search--clear-all-filters ds-u-margin-bottom--2",
+                                onClick: ()=>resetFilters(),
+                                children: "Clear all filters"
                             }),
-                            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                                className: "ds-u-padding--2 ds-u-margin-bottom--4 ds-u-border--1",
-                                children: [
-                                    theme ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $19c005961efdef1a$export$2e2bcd8739ae039), {
-                                        title: "Categories",
-                                        facets: theme,
-                                        onclickFunction: updateSelectedFacets,
-                                        selectedFacets: selectedFacets.theme,
-                                        loading: status === "loading"
-                                    }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
-                                        className: "ds-u-valign--middle",
-                                        "aria-valuetext": "Categories loading",
-                                        role: "status"
-                                    }),
-                                    keyword ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $19c005961efdef1a$export$2e2bcd8739ae039), {
-                                        title: "Tags",
-                                        facets: keyword,
-                                        onclickFunction: updateSelectedFacets,
-                                        selectedFacets: selectedFacets.keyword,
-                                        loading: status === "loading"
-                                    }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
-                                        className: "ds-u-valign--middle",
-                                        "aria-valuetext": "Tags loading",
-                                        role: "status"
-                                    })
-                                ]
+                            data && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $19c005961efdef1a$export$2e2bcd8739ae039), {
+                                facets: theme,
+                                title: "Categories",
+                                onClickFunction: updateSelectedFacets,
+                                selectedFacets: selectedFacets.theme
+                            }),
+                            data && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $19c005961efdef1a$export$2e2bcd8739ae039), {
+                                facets: keyword,
+                                title: filterTitle ? filterTitle : "Tags",
+                                onClickFunction: updateSelectedFacets,
+                                selectedFacets: selectedFacets.keyword
                             })
                         ]
+                    }),
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                        className: "ds-l-col--12 ds-l-sm-col--8",
+                        children: status === "loading" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
+                            className: "ds-u-valign--middle",
+                            "aria-valuetext": "Dataset Search loading",
+                            role: "status"
+                        }) : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
+                            children: [
+                                /*#__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: [
+                                        /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                                            className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--8",
+                                            children: [
+                                                currentResultNumbers && /*#__PURE__*/ (0, $hgUW1$jsxs)("p", {
+                                                    className: "ds-u-margin-y--0",
+                                                    role: "region",
+                                                    "aria-live": "polite",
+                                                    "data-testid": "currentResults",
+                                                    children: [
+                                                        "Showing ",
+                                                        currentResultNumbers.startingNumber,
+                                                        " -",
+                                                        " ",
+                                                        currentResultNumbers.endingNumber,
+                                                        " of ",
+                                                        data.data.total,
+                                                        " datasets"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
+                                                    className: "ds-u-margin-y--0",
+                                                    children: (0, $116bd29db288848e$export$b638ec7c7eac7f18)(selectedFacets, {
+                                                        theme: "Categories",
+                                                        keyword: "Tags"
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        showSort && /*#__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",
+                                            children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
+                                                options: sortOptions,
+                                                value: sortDisplay,
+                                                label: "Sort",
+                                                labelClassName: "ds-u-margin-top--0",
+                                                name: "dataset_search_sort",
+                                                onChange: (e)=>setSortOptions(e.target.value)
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, $hgUW1$jsxs)("ol", {
+                                    className: "dc-dataset-search-list ds-u-padding--0",
+                                    children: [
+                                        noResults && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
+                                            variation: "error",
+                                            heading: "No results found."
+                                        }),
+                                        Object.keys(data.data.results).map((key)=>{
+                                            return data.data.results[key];
+                                        }).map((item)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
+                                                className: "ds-u-padding--0",
+                                                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $dc6d3aaf3e07417b$export$2e2bcd8739ae039), {
+                                                    item: item,
+                                                    updateFacets: updateSelectedFacets
+                                                })
+                                            }, item.identifier))
+                                    ]
+                                }),
+                                data.data.total != 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
+                                    id: "test-default",
+                                    currentPage: Number(page),
+                                    totalPages: Math.ceil(Number(data.data.total) / pageSize),
+                                    onPageChange: (evt, page)=>{
+                                        evt.preventDefault();
+                                        window.scroll(0, 0);
+                                        setPage(page);
+                                    },
+                                    renderHref: (page)=>{
+                                        const searchParams = buildSearchParams(false);
+                                        const includeAnd = searchParams ? "&" : "";
+                                        return `/datasets?page=${page}${includeAnd}${searchParams}`;
+                                    }
+                                })
+                            ]
+                        })
                     })
                 ]
             })
@@ -815,12 +824,20 @@ $007dd6bfbe0f2956$var$DatasetSearch.defaultProps = {
     showSort: true,
     sortOptions: [
         {
-            label: "Recently Updated",
-            value: "modified"
+            label: "Newest",
+            value: "newest"
+        },
+        {
+            label: "Oldest",
+            value: "oldest"
         },
         {
-            label: "Title",
-            value: "title"
+            label: "Title A-Z",
+            value: "titleAZ"
+        },
+        {
+            label: "Title Z-A",
+            value: "titleZA"
         }
     ],
     defaultSort: {
@@ -874,6 +891,7 @@ var $68d79598b83f3382$export$2e2bcd8739ae039 = $68d79598b83f3382$var$useMetastor
 
 
 
+
 async function $0e7628cf73c71646$export$55f990b5477765d6(id, rootUrl, options, additionalParams) {
     const { keys: keys , limit: limit , offset: offset , conditions: conditions , sort: sort , groupings: groupings , prepareColumns: prepareColumns , properties: properties , setValues: setValues , setCount: setCount , setColumns: setColumns , setLoading: setLoading , setSchema: setSchema  } = options;
     if (!id) // TODO: Throw error
@@ -1667,34 +1685,63 @@ var $17193a17e26a72da$export$2e2bcd8739ae039 = $17193a17e26a72da$var$DatasetTags
 
 
 
-const $f341c2fd9bc53390$var$DatasetDownloads = ({ downloadURL: downloadURL , type: type  })=>{
+const $f341c2fd9bc53390$var$DatasetDownloads = ({ dataDictionaryURL: dataDictionaryURL , dataDictionaryType: dataDictionaryType , distributions: distributions  })=>{
+    function trimDataDictionaryType() {
+        let splitDataDictionaryType = dataDictionaryType.split("/");
+        let type = splitDataDictionaryType.length > 1 ? splitDataDictionaryType[1] : splitDataDictionaryType[0];
+        return type.toUpperCase();
+    }
+    function getFormatType(dist) {
+        if (dist.data.format) return dist.data.format.toUpperCase();
+        if (dist.data.mediaType) {
+            const mediaType = dist.data.mediaType.split("/");
+            if (mediaType.length && mediaType[1]) return mediaType[1].toUpperCase();
+        }
+        if (dist.data["%Ref:downloadURL"].length && dist.data["%Ref:downloadURL"][0].data) {
+            if (dist.data["%Ref:downloadURL"][0].data.mimeType) {
+                const mimeType = dist.data["%Ref:downloadURL"][0].data.mimeType.split("/");
+                if (mimeType.length && mimeType[1]) return mimeType[1].toUpperCase();
+            }
+        }
+        return "";
+    }
     return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-        className: "ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1",
+        className: "ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1 dc-c-dataset-downloads",
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
                 className: "ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2 ds-u-border ds-u-border-bottom--1",
                 children: "Downloads"
             }),
-            /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                className: "ds-u-margin-bottom--1 ds-u-color--gray",
-                children: "Resource"
-            }),
-            /*#__PURE__*/ (0, $hgUW1$jsxs)("a", {
-                href: downloadURL,
-                className: "ds-u-word-break",
+            (distributions.length || dataDictionaryURL && dataDictionaryType) && /*#__PURE__*/ (0, $hgUW1$jsxs)("ul", {
+                className: "ds-c-list ds-c-list--bare",
                 children: [
-                    "Download this resource (",
-                    type,
-                    ")"
+                    distributions.map((dist)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
+                            className: "ds-u-padding-bottom--1",
+                            children: /*#__PURE__*/ (0, $hgUW1$jsxs)("a", {
+                                href: dist.data.downloadURL,
+                                className: "ds-u-word-break",
+                                children: [
+                                    getFormatType(dist),
+                                    " ",
+                                    "Resource File"
+                                ]
+                            })
+                        }, dist.identifier)),
+                    dataDictionaryURL && dataDictionaryType && /*#__PURE__*/ (0, $hgUW1$jsx)("li", {
+                        children: /*#__PURE__*/ (0, $hgUW1$jsxs)("a", {
+                            href: dataDictionaryURL,
+                            children: [
+                                "Data Dictionary (",
+                                trimDataDictionaryType(),
+                                ")"
+                            ]
+                        })
+                    })
                 ]
             })
         ]
     });
 };
-$f341c2fd9bc53390$var$DatasetDownloads.propTypes = {
-    downloadURL: (0, $hgUW1$proptypes).string.isRequired,
-    type: (0, $hgUW1$proptypes).string.isRequired
-};
 var $f341c2fd9bc53390$export$2e2bcd8739ae039 = $f341c2fd9bc53390$var$DatasetDownloads;
 
 
@@ -1741,6 +1788,7 @@ const $5644ebd2c3dbfd7b$var$DatasetAdditionalInformation = ({ datasetInfo: datas
                                         children: r.label
                                     }),
                                     /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableCell), {
+                                        className: "ds-u-word-break-anywhere",
                                         children: r.value
                                     })
                                 ]
@@ -2027,7 +2075,7 @@ const $766b8e351dd607f5$var$DatasetBody = ({ rootUrl: rootUrl , id: id , dataset
                         /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
                             className: "dc-c-metadata-description",
                             dangerouslySetInnerHTML: {
-                                __html: dataset.description
+                                __html: (0, $hgUW1$dompurify).sanitize(dataset.description)
                             }
                         }),
                         resource.columns && Object.keys(resource.schema).length ? /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
@@ -2098,8 +2146,9 @@ const $766b8e351dd607f5$var$DatasetBody = ({ rootUrl: rootUrl , id: id , dataset
                     className: "ds-l-md-col--3 ds-l-sm-col--12",
                     children: [
                         Object.keys(distribution).length ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $f341c2fd9bc53390$export$2e2bcd8739ae039), {
-                            downloadURL: distribution.data.downloadURL,
-                            type: fileFormat
+                            dataDictionaryURL: dataset.describedBy,
+                            dataDictionaryType: dataset.describedByType,
+                            distributions: dataset.distribution
                         }) : "",
                         dataset.keyword && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $17193a17e26a72da$export$2e2bcd8739ae039), {
                             keywords: dataset.keyword
@@ -4016,6 +4065,7 @@ var $ec3e23baa005dc03$export$2e2bcd8739ae039 = $ec3e23baa005dc03$var$Breadcrumb;
 
 
 
+
 
 
 function $374c4669b044ddf8$var$getStartDate(condition, schema, id) {
@@ -4406,7 +4456,7 @@ const $dd6eb2b30d7ad75d$var$FilteredResourceBody = ({ id: id , dataset: dataset
                 /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
                     className: "ds-u-margin-top--0 dc-c-metadata-description",
                     dangerouslySetInnerHTML: {
-                        __html: distribution.data.description
+                        __html: (0, $hgUW1$dompurify).sanitize(distribution.data.description)
                     }
                 }),
                 resource.columns && Object.keys(resource.schema).length && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3b6ca952e79f0695$export$2e2bcd8739ae039), {