@civicactions/cmsds-open-data-components 3.1.3-alpha.4 → 3.1.3-alpha.dd

package/dist/main.js

@@ -1,7 +1,7 @@
 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, Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, TextField as $hgUW1$TextField, Spinner as $hgUW1$Spinner, Dropdown as $hgUW1$Dropdown, Alert as $hgUW1$Alert, Pagination as $hgUW1$Pagination, Dialog as $hgUW1$Dialog, AddIcon as $hgUW1$AddIcon, RemoveIcon as $hgUW1$RemoveIcon, Choice as $hgUW1$Choice, Tabs as $hgUW1$Tabs, TabPanel as $hgUW1$TabPanel, Tooltip as $hgUW1$Tooltip, Badge as $hgUW1$Badge, Table as $hgUW1$Table, TableBody as $hgUW1$TableBody, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableHead as $hgUW1$TableHead} from "@cmsgov/design-system";
+import {Button as $hgUW1$Button, Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, TextField as $hgUW1$TextField, Spinner as $hgUW1$Spinner, Dropdown as $hgUW1$Dropdown, Alert as $hgUW1$Alert, Pagination as $hgUW1$Pagination, Dialog as $hgUW1$Dialog, AddIcon as $hgUW1$AddIcon, RemoveIcon as $hgUW1$RemoveIcon, Choice as $hgUW1$Choice, Tabs as $hgUW1$Tabs, TabPanel as $hgUW1$TabPanel, Tooltip as $hgUW1$Tooltip, Badge as $hgUW1$Badge, Table as $hgUW1$Table, TableBody as $hgUW1$TableBody, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableHead as $hgUW1$TableHead, TooltipIcon as $hgUW1$TooltipIcon} 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";
@@ -1010,7 +1010,7 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
         ["page-size"]: pageSize !== 10 ? pageSize : undefined,
         ...additionalParams
     };
-    const { data: data, isPending: isPending, error: error } = (0, $hgUW1$useQuery)({
+    const { data: data, isLoading: isLoading, error: error } = (0, $hgUW1$useQuery)({
         queryKey: [
             "datasets",
             params
@@ -1110,7 +1110,7 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
                             }),
                             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                                 className: "ds-l-col--12 ds-l-sm-col--8",
-                                children: isPending ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
+                                children: isLoading ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
                                     className: "ds-u-valign--middle",
                                     "aria-valuetext": "Dataset Search loading",
                                     role: "status"
@@ -1271,24 +1271,24 @@ const $b4aa9c66f2e86959$var$useMetastoreDataset = (datasetId, rootAPIUrl, additi
     const [id, setId] = (0, $hgUW1$useState)(datasetId);
     const [rootUrl, setRootUrl] = (0, $hgUW1$useState)(rootAPIUrl);
     const additionalParamsString = Object.keys(additionalParams).length ? `&${(0, $hgUW1$qs).stringify(additionalParams)}` : "";
-    const { data: data, isPending: isPending, error: error } = (0, $hgUW1$useQuery)({
-        queryKey: [
-            "metastore" + id
-        ],
-        queryFn: ()=>{
-            return fetch(`${rootUrl}/metastore/schemas/dataset/items/${id}?show-reference-ids${additionalParamsString}`).then((res)=>res.json()).then((res)=>{
-                return res;
-            });
-        }
-    });
     (0, $hgUW1$useEffect)(()=>{
-        if (data && data != dataset) setDataset(data);
+        async function fetchData() {
+            return (0, $hgUW1$axios).get(`${rootUrl}/metastore/schemas/dataset/items/${id}?show-reference-ids${additionalParamsString}`).then((res)=>setDataset(res.data)).catch((error)=>setDataset({
+                    title: dataset.title,
+                    distribution: dataset.distribution,
+                    error: error,
+                    description: dataset.description,
+                    identifier: dataset.identifier,
+                    modified: dataset.modified
+                }));
+        }
+        fetchData();
     }, [
-        data
+        id,
+        rootUrl
     ]);
     return {
         dataset: dataset,
-        isPending: isPending,
         setId: setId,
         setRootUrl: setRootUrl
     };
@@ -1301,9 +1301,47 @@ var $b4aa9c66f2e86959$export$2e2bcd8739ae039 = $b4aa9c66f2e86959$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
+    return false;
+    if (typeof setLoading === "function") setLoading(true);
+    return await (0, $hgUW1$axios)({
+        method: "GET",
+        url: `${rootUrl}/datastore/query/${id}`,
+        params: {
+            keys: keys,
+            limit: limit,
+            offset: offset,
+            conditions: conditions,
+            sorts: sort,
+            properties: properties,
+            groupings: groupings,
+            ...additionalParams
+        },
+        //paramsSerializer: {
+        //  serialize: qs.stringify
+        //},
+        paramsSerializer: (params)=>{
+            return (0, $hgUW1$qs).stringify(params);
+        }
+    }).then((res)=>{
+        const { data: data } = res;
+        const propertyKeys = data.schema[id] && data.schema[id].fields ? Object.keys(data.schema[id].fields) : [];
+        setValues(data.results), setCount(data.count);
+        if (propertyKeys.length) setColumns(prepareColumns ? prepareColumns(propertyKeys) : propertyKeys);
+        setSchema(data.schema);
+        if (typeof setLoading === "function") setLoading(false);
+        return data;
+    });
+}
+
+
 const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, additionalParams = {})=>{
     const keys = options.keys ? options.keys : true;
     const { prepareColumns: prepareColumns } = options;
+    const [manual, setManual] = (0, $hgUW1$useState)(options.manual ? options.manual : false);
+    const [requireConditions, setRequireConditions] = (0, $hgUW1$useState)(options.requireConditions ? options.requireConditions : false);
     const [values, setValues] = (0, $hgUW1$useState)([]);
     const [id, setResource] = (0, $hgUW1$useState)(resourceId);
     const [rootUrl, setRootUrl] = (0, $hgUW1$useState)(rootAPIUrl);
@@ -1311,43 +1349,63 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
     const [count, setCount] = (0, $hgUW1$useState)(null);
     const [columns, setColumns] = (0, $hgUW1$useState)([]);
     const [offset, setOffset] = (0, $hgUW1$useState)(options.offset ? options.offset : 0);
+    const [loading, setLoading] = (0, $hgUW1$useState)(false);
     const [conditions, setConditions] = (0, $hgUW1$useState)(options.conditions ? options.conditions : undefined);
     const [sort, setSort] = (0, $hgUW1$useState)(options.sort ? options.sort : undefined);
     const [groupings, setGroupings] = (0, $hgUW1$useState)(options.groupings ? options.groupings : undefined);
     const [schema, setSchema] = (0, $hgUW1$useState)({});
     // const [joins, setJoins] = useState()
     const [properties, setProperties] = (0, $hgUW1$useState)(options.properties ? options.properties : undefined);
-    let params = {
-        keys: keys,
-        limit: limit,
-        offset: offset,
-        conditions: conditions,
-        sorts: sort,
-        properties: properties,
-        groupings: groupings,
-        ...additionalParams
-    };
-    const additionalParamsString = Object.keys(params).length ? `&${(0, $hgUW1$qs).stringify(params)}` : "";
-    const { data: data, isPending: isPending, error: error } = (0, $hgUW1$useQuery)({
-        queryKey: [
-            "datastore" + id + additionalParamsString
-        ],
-        queryFn: ()=>{
-            return fetch(`${rootUrl}/datastore/query/${id}?${additionalParamsString}`).then((res)=>res.json());
-        }
+    const prevLimitRef = (0, $hgUW1$useRef)();
+    const prevOffsetRef = (0, $hgUW1$useRef)();
+    (0, $hgUW1$useEffect)(()=>{
+        prevLimitRef.current = limit;
+        prevOffsetRef.current = offset;
     });
+    const prevLimit = prevLimitRef.current;
+    const prevOffset = prevOffsetRef.current;
+    function fetchData() {
+        let newOffset = prevLimit === limit ? prevOffset !== offset ? offset : 0 : 0;
+        setOffset(newOffset);
+        (0, $0e7628cf73c71646$export$55f990b5477765d6)(id, rootUrl, {
+            keys: keys,
+            limit: limit,
+            offset: newOffset,
+            conditions: conditions,
+            sort: sort,
+            groupings: groupings,
+            prepareColumns: prepareColumns,
+            properties: properties,
+            setValues: setValues,
+            setCount: setCount,
+            setColumns: setColumns,
+            setLoading: setLoading,
+            setSchema: setSchema,
+            setProperties: setProperties
+        }, additionalParams);
+    }
     (0, $hgUW1$useEffect)(()=>{
-        if (data) {
-            const propertyKeys = data.schema[id] && data.schema[id].fields ? Object.keys(data.schema[id].fields) : [];
-            setValues(data.results), setCount(data.count);
-            if (propertyKeys.length) setColumns(prepareColumns ? prepareColumns(propertyKeys) : propertyKeys);
-            setSchema(data.schema);
+        if (!loading && !manual) {
+            if (!requireConditions) fetchData();
+            else if (requireConditions) {
+                if (conditions && conditions.length) fetchData();
+                else {
+                    setCount(null);
+                    setValues([]);
+                }
+            }
         }
     }, [
-        data
+        id,
+        rootUrl,
+        offset,
+        conditions,
+        sort,
+        limit,
+        requireConditions
     ]);
     return {
-        loading: isPending,
+        loading: loading,
         values: values,
         count: count,
         columns: columns,
@@ -1363,7 +1421,10 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
         setLimit: setLimit,
         setOffset: setOffset,
         setConditions: setConditions,
-        setSort: setSort
+        setSort: setSort,
+        setManual: setManual,
+        setRequireConditions: setRequireConditions,
+        fetchData: fetchData
     };
 };
 var $1d3d480a9cfaabe0$export$2e2bcd8739ae039 = $1d3d480a9cfaabe0$var$useDatastore;
@@ -1613,90 +1674,101 @@ const $6da0396069e23175$export$bc27cf7ecf44639d = {
 
 
 
-const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElement: sortElement, setAriaLiveFeedback: setAriaLiveFeedback })=>{
+
+
+const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: header, sortElement: sortElement, setAriaLiveFeedback: setAriaLiveFeedback })=>{
     const [columnResizing, setColumnResizing] = (0, $hgUW1$useState)("");
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)("th", {
+        key: header.id,
+        style: {
+            width: header.getSize()
+        },
+        className: "ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold",
+        children: [
+            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                className: "ds-u-display--flex",
+                children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
+                        style: {
+                            maxWidth: header.getSize() - 16
+                        },
+                        children: header.isPlaceholder ? null : (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext())
+                    }),
+                    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`
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $hgUW1$jsx)("button", {
+                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`,
+                onKeyDown: (e)=>{
+                    const columnSizingObject = table.getState().columnSizing;
+                    switch(e.key){
+                        case "Enter":
+                        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.`);
+                            }
+                            break;
+                        case "Escape":
+                            if (columnResizing) {
+                                setColumnResizing("");
+                                setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`);
+                            }
+                            break;
+                        case "ArrowRight":
+                            e.preventDefault();
+                            e.stopPropagation();
+                            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":
+                            e.preventDefault();
+                            e.stopPropagation();
+                            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;
+                    }
+                },
+                onBlur: ()=>{
+                    setColumnResizing("");
+                }
+            })
+        ]
+    });
+};
+var $64a351d3fd8413c3$export$2e2bcd8739ae039 = $64a351d3fd8413c3$var$HeaderResizeElement;
+
+
+const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElement: sortElement = null, setAriaLiveFeedback: setAriaLiveFeedback })=>{
     return /*#__PURE__*/ (0, $hgUW1$jsx)("thead", {
         className: "dc-thead--truncated dc-thead--resizeable",
         children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
-                children: headerGroup.headers.map((header)=>{
-                    return /*#__PURE__*/ (0, $hgUW1$jsxs)("th", {
-                        key: header.id,
-                        style: {
-                            width: header.getSize()
-                        },
-                        title: header.column.columnDef.header,
-                        className: "ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold dc-c-table-header-cell",
-                        children: [
-                            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
-                                children: [
-                                    /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
-                                        style: {
-                                            maxWidth: header.getSize() - 16
-                                        },
-                                        children: header.isPlaceholder ? null : (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext())
-                                    }),
-                                    /*#__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`
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, $hgUW1$jsx)("button", {
-                                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`,
-                                onKeyDown: (e)=>{
-                                    const columnSizingObject = table.getState().columnSizing;
-                                    switch(e.key){
-                                        case "Enter":
-                                        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.`);
-                                            }
-                                            break;
-                                        case "Escape":
-                                            if (columnResizing) {
-                                                setColumnResizing("");
-                                                setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`);
-                                            }
-                                            break;
-                                        case "ArrowRight":
-                                            e.preventDefault();
-                                            e.stopPropagation();
-                                            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":
-                                            e.preventDefault();
-                                            e.stopPropagation();
-                                            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;
-                                    }
-                                },
-                                onBlur: ()=>{
-                                    setColumnResizing("");
-                                }
-                            })
-                        ]
-                    });
-                })
+                children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
+                        table: table,
+                        header: header,
+                        sortElement: sortElement,
+                        setAriaLiveFeedback: setAriaLiveFeedback
+                    }))
             }, headerGroup.id))
     });
 };
@@ -1717,9 +1789,10 @@ const $23763e27eda0e8d7$var$FixedSizeTHead = ({ table: table, sortElement: sortE
                             width: header.getSize()
                         },
                         title: header.column.columnDef.header,
-                        className: "ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold dc-c-table-header-cell",
+                        className: "ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold",
                         children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                             onClick: header.column.getToggleSortingHandler(),
+                            className: "ds-u-display--flex",
                             children: [
                                 /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
                                     children: header.isPlaceholder ? null : (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext())
@@ -2133,15 +2206,8 @@ var $6380a4a580b24362$export$2e2bcd8739ae039 = $6380a4a580b24362$var$DataTableHe
 
 const $bef7bff2823feea2$var$QueryTitle = ({ conditions: conditions, schema: schema, customColumns: customColumns })=>{
     const { fields: fields } = schema;
-    const prependedMessage = /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
-        children: "Data filters: "
-    });
-    if (!conditions || !conditions.length) return /*#__PURE__*/ (0, $hgUW1$jsxs)("p", {
-        className: "ds-u-margin-y--0",
-        children: [
-            prependedMessage,
-            " none"
-        ]
+    if (!conditions || !conditions.length) return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
+        children: "Add a filter"
     });
     function formatValue(text, property) {
         if (customColumns && customColumns.length > 0) {
@@ -2153,48 +2219,42 @@ const $bef7bff2823feea2$var$QueryTitle = ({ conditions: conditions, schema: sche
             return text;
         } else return text;
     }
-    return /*#__PURE__*/ (0, $hgUW1$jsxs)("span", {
+    return /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
         className: "dc-querybuilder-title",
-        children: [
-            /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
-                className: "ds-u-margin-y--0",
-                children: prependedMessage
-            }),
-            conditions.map((c)=>{
-                const field = fields[c.property];
-                const description = field && field.description ? field.description : c.property;
-                const operator = (0, $7264a673914aa746$export$5f89a5ae87bc48e1).find((op)=>op.value === c.operator);
-                const cleanedText = (0, $7264a673914aa746$export$6b5e57d20078142b)(c.value);
-                const formattedText = formatValue(cleanedText, c.property);
-                return /*#__PURE__*/ (0, $hgUW1$jsxs)("span", {
-                    className: "ds-u-fill--background ds-u-padding--1 ds-u-margin-y--1 ds-u-display--inline-block ds-u-font-weight--semibold",
-                    children: [
-                        /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
-                            className: "ds-u-font-weight--bold",
-                            children: description
-                        }),
-                        " ",
-                        /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
-                            className: "ds-u-font-weight--normal",
-                            children: operator.label.toUpperCase()
-                        }),
-                        " ",
-                        /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
-                            className: "ds-u-color--success",
-                            children: formattedText
-                        })
-                    ]
-                });
-            }).reduce((prev, curr)=>[
-                    prev,
-                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Badge), {
-                        className: "ds-u-margin-x--1",
-                        variation: "info",
-                        children: "AND"
+        children: conditions.map((c)=>{
+            const field = fields[c.property];
+            const description = field && field.description ? field.description : c.property;
+            const operator = (0, $7264a673914aa746$export$5f89a5ae87bc48e1).find((op)=>op.value === c.operator);
+            const cleanedText = (0, $7264a673914aa746$export$6b5e57d20078142b)(c.value);
+            const formattedText = formatValue(cleanedText, c.property);
+            return /*#__PURE__*/ (0, $hgUW1$jsxs)("span", {
+                className: "ds-u-fill--background ds-u-padding--1 ds-u-margin-y--1 ds-u-display--inline-block ds-u-font-weight--semibold",
+                children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
+                        className: "ds-u-font-weight--bold",
+                        children: description
                     }),
-                    curr
-                ])
-        ]
+                    " ",
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
+                        className: "ds-u-font-weight--normal",
+                        children: operator.label.toUpperCase()
+                    }),
+                    " ",
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
+                        className: "ds-u-color--success",
+                        children: formattedText
+                    })
+                ]
+            });
+        }).reduce((prev, curr)=>[
+                prev,
+                /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Badge), {
+                    className: "ds-u-margin-x--1",
+                    variation: "info",
+                    children: "AND"
+                }),
+                curr
+            ])
     });
 };
 var $bef7bff2823feea2$export$2e2bcd8739ae039 = $bef7bff2823feea2$var$QueryTitle;
@@ -2713,8 +2773,9 @@ const $0958733ee130fc44$var$ResourceInformation = ({ resource: resource })=>{
 var $0958733ee130fc44$export$2e2bcd8739ae039 = $0958733ee130fc44$var$ResourceInformation;
 
 
-function $f764661366bd9e1b$export$ee48b7e0e4eb536e(dist) {
-    if (dist && dist.data) {
+
+const $7357cc0f79f9c514$var$Resource = ({ distributions: distributions, resource: resource, title: title })=>{
+    function getFormatType(dist) {
         if (dist.data.format) return dist.data.format.toLowerCase();
         if (dist.data.mediaType) {
             const mediaType = dist.data.mediaType.split("/");
@@ -2726,13 +2787,8 @@ function $f764661366bd9e1b$export$ee48b7e0e4eb536e(dist) {
                 if (mimeType.length && mimeType[1]) return mimeType[1].toLowerCase();
             }
         }
+        return "";
     }
-    return "";
-}
-
-
-
-const $7357cc0f79f9c514$var$Resource = ({ distributions: distributions, resource: resource, title: title })=>{
     const sm = (0, $hgUW1$useMediaQuery)({
         minWidth: 0,
         maxWidth: 767
@@ -2744,10 +2800,10 @@ const $7357cc0f79f9c514$var$Resource = ({ distributions: distributions, resource
                 className: "ds-l-col--12 ds-u-padding-left--0 ds-text-heading--2xl",
                 children: "Resources"
             }),
-            distributions.length ? /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
+            distributions.length && /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
                 className: "ds-c-list ds-c-list--bare dc-c-resource-full-width",
                 children: distributions.map((dist)=>{
-                    const fileFormat = (0, $f764661366bd9e1b$export$ee48b7e0e4eb536e)(dist);
+                    const fileFormat = getFormatType(dist);
                     return /*#__PURE__*/ (0, $hgUW1$jsxs)("li", {
                         className: `ds-u-display--flex ds-u-flex-wrap--wrap ${fileFormat !== "csv" && "ds-u-margin-bottom--2"}`,
                         children: [
@@ -2787,8 +2843,6 @@ const $7357cc0f79f9c514$var$Resource = ({ distributions: distributions, resource
                         ]
                     }, dist.identifier);
                 })
-            }) : /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                className: "ds-u-margin-top--2"
             })
         ]
     });
@@ -2917,11 +2971,105 @@ var $cf6eaefd6b928de3$export$2e2bcd8739ae039 = $cf6eaefd6b928de3$var$DatasetAPI;
 
 
 
-const $6012b86ffcaf3f71$var$DataDictionary = ({ datasetDictionary: datasetDictionary, title: title, pageSize: pageSize = 20 })=>{
+
+
+
+
+
+
+
+
+
+const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns, tableData: tableData, count: count, pageSize: pageSize })=>{
     const [pagination, setPagination] = (0, $hgUW1$useState)({
         pageIndex: 1,
         pageSize: pageSize
     });
+    const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)("");
+    const table = (0, $hgUW1$useReactTable)({
+        data: tableData,
+        columns: tableColumns,
+        columnResizeMode: "onChange",
+        getCoreRowModel: (0, $hgUW1$getCoreRowModel)(),
+        getPaginationRowModel: (0, $hgUW1$getPaginationRowModel)(),
+        onPaginationChange: setPagination,
+        state: {
+            pagination: pagination
+        }
+    });
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                className: "dc-c-datadictionary-table",
+                children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Table), {
+                        className: "dc-c-datatable",
+                        style: {
+                            width: "100%"
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableHead), {
+                                className: "dc-thead--truncated dc-thead--resizeable",
+                                children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableRow), {
+                                        children: headerGroup.headers.map((header)=>{
+                                            return header.id === "titleResizable" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
+                                                table: table,
+                                                header: header,
+                                                setAriaLiveFeedback: setAriaLiveFeedback
+                                            }, header.id + "_resize") : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableCell), {
+                                                key: header.id,
+                                                className: "ds-u-border-y--2 ds-u-border--dark ds-u-border-x--0",
+                                                children: (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext())
+                                            });
+                                        })
+                                    }, "header" + headerGroup.id))
+                            }),
+                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableBody), {
+                                children: table.getRowModel().rows.map((row, index)=>{
+                                    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableRow), {
+                                        children: row.getVisibleCells().map((cell)=>{
+                                            return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableCell), {
+                                                key: cell.id,
+                                                style: {
+                                                    maxWidth: cell.column.getSize()
+                                                },
+                                                children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
+                                            });
+                                        })
+                                    }, index + JSON.stringify(row));
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                        className: "sr-only",
+                        "aria-live": "assertive",
+                        "aria-atomic": "true",
+                        children: ariaLiveFeedback
+                    })
+                ]
+            }),
+            count > pageSize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
+                totalPages: Math.ceil(count / pagination.pageSize),
+                currentPage: pagination.pageIndex + 1,
+                onPageChange: (evt, page)=>{
+                    evt.preventDefault();
+                    setPagination({
+                        pageIndex: page - 1,
+                        pageSize: pageSize
+                    });
+                },
+                renderHref: (page)=>{
+                    return "";
+                }
+            }) : ""
+        ]
+    });
+};
+var $6765a74df807d015$export$2e2bcd8739ae039 = $6765a74df807d015$var$DataDictionaryTable;
+
+
+const $a24829b27758fe6c$var$SitewideDataDictionaryTable = ({ datasetDictionary: datasetDictionary, pageSize: pageSize })=>{
     const columnHelper = (0, $hgUW1$createColumnHelper)();
     const tableColumns = [
         columnHelper.accessor("name", {
@@ -2937,67 +3085,117 @@ const $6012b86ffcaf3f71$var$DataDictionary = ({ datasetDictionary: datasetDictio
             header: "Format"
         })
     ];
-    const table = (0, $hgUW1$useReactTable)({
-        data: datasetDictionary,
-        columns: tableColumns,
-        getCoreRowModel: (0, $hgUW1$getCoreRowModel)(),
-        getPaginationRowModel: (0, $hgUW1$getPaginationRowModel)(),
-        onPaginationChange: setPagination,
-        state: {
-            pagination: pagination
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
+        tableColumns: tableColumns,
+        tableData: datasetDictionary,
+        count: datasetDictionary.length,
+        pageSize: pageSize
+    });
+};
+var $a24829b27758fe6c$export$2e2bcd8739ae039 = $a24829b27758fe6c$var$SitewideDataDictionaryTable;
+
+
+
+
+
+
+
+
+const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datasetDictionary, pageSize: pageSize })=>{
+    const tableData = datasetDictionary.map((item)=>{
+        return {
+            titleResizable: item.title,
+            description: item.description,
+            type: item.type
+        };
+    });
+    const columnHelper = (0, $hgUW1$createColumnHelper)();
+    const tableColumns = [
+        columnHelper.accessor("titleResizable", {
+            header: ()=>/*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                    className: "dc-c-tooltip-width-override",
+                    children: [
+                        "Title",
+                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Tooltip), {
+                            title: "Title represents the column headers of the data file (e.g., Change_Type)",
+                            // @ts-ignore
+                            style: {
+                                border: "none",
+                                background: "none"
+                            },
+                            maxWidth: "400px",
+                            children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TooltipIcon), {})
+                        })
+                    ]
+                }),
+            size: 300
+        }),
+        columnHelper.accessor("description", {
+            header: "Description",
+            minSize: 600
+        }),
+        columnHelper.accessor("type", {
+            header: "Type",
+            size: 150,
+            enableResizing: false
+        })
+    ];
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
+        tableColumns: tableColumns,
+        tableData: tableData,
+        count: datasetDictionary.length,
+        pageSize: pageSize
+    });
+};
+var $a6e312940f7003ef$export$2e2bcd8739ae039 = $a6e312940f7003ef$var$DatasetDictionaryTable;
+
+
+
+const $6012b86ffcaf3f71$var$DataDictionary = ({ datasetDictionaryEndpoint: datasetDictionaryEndpoint, datasetSitewideDictionary: datasetSitewideDictionary, title: title, pageSize: pageSize = 20, additionalParams: additionalParams })=>{
+    const { data: data, isPending: isPending, error: error } = (0, $hgUW1$useQuery)({
+        queryKey: [
+            "dictionary" + datasetDictionaryEndpoint
+        ],
+        queryFn: ()=>{
+            return fetch(`${datasetDictionaryEndpoint}?${(0, $hgUW1$qs).stringify(additionalParams, {
+                arrayFormat: "comma",
+                encode: false
+            })}`).then((res)=>res.json());
         }
     });
+    const datasetDictionary = data && data.data && data.data.fields.length ? data.data.fields : null;
     return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)("h2", {
                 className: "ds-text-heading--2xl ds-u-margin-y--3",
                 children: title
             }),
-            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
-                className: "ds-u-overflow--auto ds-u-border-x--1",
-                children: /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Table), {
-                    className: "dc-c-datatable",
-                    children: [
-                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableHead), {
-                            children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableRow), {
-                                    children: headerGroup.headers.map((header)=>{
-                                        return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableCell), {
-                                            children: (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext())
-                                        });
-                                    })
-                                }))
-                        }),
-                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableBody), {
-                            children: table.getRowModel().rows.map((row, index)=>{
-                                const even = (index + 1) % 2 === 0;
-                                return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableRow), {
-                                    className: `${even ? "dc-c-datatable--even-row" : ""}`,
-                                    children: row.getVisibleCells().map((cell)=>{
-                                        return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableCell), {
-                                            key: cell.id,
-                                            children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
-                                        });
-                                    })
-                                });
-                            })
+            datasetDictionary && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
+                children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                        className: "ds-u-margin-bottom--1 ds-u-display--flex ds-u-justify-content--end",
+                        children: /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Button), {
+                            className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4",
+                            onClick: ()=>window.open(datasetDictionaryEndpoint),
+                            type: "button",
+                            children: [
+                                /*#__PURE__*/ (0, $hgUW1$jsx)("i", {
+                                    className: "fa fa-file-download ds-u-color--primary ds-u-padding-right--1"
+                                }),
+                                " View Dictionary JSON"
+                            ]
                         })
-                    ]
-                })
-            }),
-            datasetDictionary.length > pageSize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
-                totalPages: Math.ceil(datasetDictionary.length / pagination.pageSize),
-                currentPage: pagination.pageIndex + 1,
-                onPageChange: (evt, page)=>{
-                    evt.preventDefault();
-                    setPagination({
-                        pageIndex: page - 1,
+                    }),
+                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $a6e312940f7003ef$export$2e2bcd8739ae039), {
+                        datasetDictionary: datasetDictionary,
                         pageSize: pageSize
-                    });
-                },
-                renderHref: (page)=>{
-                    return "";
-                }
-            }) : ""
+                    })
+                ]
+            }),
+            datasetSitewideDictionary && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $a24829b27758fe6c$export$2e2bcd8739ae039), {
+                datasetDictionary: datasetSitewideDictionary,
+                pageSize: pageSize
+            })
         ]
     });
 };
@@ -3006,18 +3204,20 @@ var $6012b86ffcaf3f71$export$2e2bcd8739ae039 = (0, $61ff88fb3f6ee2c8$export$2e2b
 
 
 
-
-const $a0f13962e513caa1$var$getSiteWideDataDictionary = (rootUrl, dataDictionaryUrl)=>{
+const $a0f13962e513caa1$var$getDataDictionary = (dataDictionaryUrl, additionalParams)=>{
     const { data: data, isPending: isPending, error: error } = (0, $hgUW1$useQuery)({
         queryKey: [
-            "dictionary"
+            "dictionary" + dataDictionaryUrl
         ],
         queryFn: ()=>{
-            return fetch(rootUrl + dataDictionaryUrl).then((res)=>res.json());
+            return fetch(`${dataDictionaryUrl}?${(0, $hgUW1$qs).stringify(additionalParams, {
+                arrayFormat: "comma",
+                encode: false
+            })}`).then((res)=>res.json());
         }
     });
     return {
-        siteWideDataDictionary: data,
+        dataDictionary: data,
         dataDictionaryLoading: isPending
     };
 };
@@ -3029,7 +3229,7 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalPar
     } : {
         conditions: []
     };
-    const { dataset: dataset, isPending: isPending } = (0, $b4aa9c66f2e86959$export$2e2bcd8739ae039)(id, rootUrl, additionalParams);
+    const { dataset: dataset } = (0, $b4aa9c66f2e86959$export$2e2bcd8739ae039)(id, rootUrl, additionalParams);
     const title = dataset.title ? dataset.title : "";
     const metadataMapping = {
         ...(0, $6da0396069e23175$export$bc27cf7ecf44639d),
@@ -3043,17 +3243,25 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalPar
         limit: defaultPageSize,
         manual: true
     }, additionalParams);
-    const { siteWideDataDictionary: siteWideDataDictionary } = dataDictionaryUrl ? $a0f13962e513caa1$var$getSiteWideDataDictionary(rootUrl, dataDictionaryUrl) : {
-        siteWideDataDictionary: null
-    };
+    const siteWideDataDictionary = dataDictionaryUrl ? $a0f13962e513caa1$var$getDataDictionary(rootUrl + dataDictionaryUrl, additionalParams).dataDictionary : null;
     // compare schema fields with siteWideDataDictionary to display commonalities for now
     // until dataset level data dictionaries are implemented
-    const datasetDictionary = siteWideDataDictionary && resource && resource.schema[distribution.identifier] ? siteWideDataDictionary.data.fields.filter((field)=>{
+    const datasetSitewideDictionary = siteWideDataDictionary && resource && resource.schema[distribution.identifier] ? siteWideDataDictionary.data.fields.filter((field)=>{
         return Object.keys(resource.schema[distribution.identifier].fields).indexOf(field.name) !== -1;
     }) : null;
     (0, $hgUW1$useEffect)(()=>{
-        const localFileFormat = (0, $f764661366bd9e1b$export$ee48b7e0e4eb536e)(distribution);
-        if (localFileFormat === "csv") resource.setResource(distribution.identifier);
+        if (distribution.identifier) {
+            let localFileFormat = "";
+            if (distribution.data.format) localFileFormat = distribution.data.format.toUpperCase();
+            else if (distribution.data.mediaType) {
+                const mediaType = distribution.data.mediaType.split("/");
+                if (mediaType.length && mediaType[1]) localFileFormat = mediaType[1].toUpperCase();
+            }
+            if (localFileFormat === "CSV") {
+                resource.setResource(distribution.identifier);
+                resource.setManual(false);
+            }
+        }
     }, [
         distribution
     ]);
@@ -3095,17 +3303,6 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalPar
             })
         ]
     });
-    // The below code manages the selected tab in the Design System tab group manually to ensure we can still use the
-    // Data Table tab as the default since it no longer exists on initial render (By default, Overview will appear as default)
-    const getDefaultTab = ()=>{
-        return (0, $f764661366bd9e1b$export$ee48b7e0e4eb536e)(distribution) === "csv" ? "data-table" : "overview";
-    };
-    const [selectedTab, setSelectedTab] = (0, $hgUW1$useState)(window.location.hash.substring(1) ? window.location.hash.substring(1) : getDefaultTab());
-    (0, $hgUW1$useEffect)(()=>{
-        setSelectedTab(getDefaultTab());
-    }, [
-        distribution
-    ]);
     return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
         children: dataset.error ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $026cb986f9fea2b1$export$2e2bcd8739ae039), {
             content: notFoundContent,
@@ -3153,13 +3350,11 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalPar
                     className: "ds-l-row",
                     children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                         className: "ds-l-md-col--12 dc-dataset",
-                        children: !isPending && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Tabs), {
-                            onChange: (selectedId, prevSelectedId)=>{
-                                setSelectedTab(selectedId);
-                            },
-                            selectedId: selectedTab,
+                        children: distribution && distribution.data && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Tabs), {
+                            onChange: function noRefCheck() {},
+                            defaultSelectedId: window.location.hash.substring(1),
                             children: [
-                                (0, $f764661366bd9e1b$export$ee48b7e0e4eb536e)(distribution) === "csv" && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TabPanel), {
+                                distribution.data.format === "csv" && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TabPanel), {
                                     id: "data-table",
                                     tab: /*#__PURE__*/ (0, $hgUW1$jsxs)("span", {
                                         className: "ds-u-color--primary",
@@ -3198,7 +3393,7 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalPar
                                         metadataMapping: metadataMapping
                                     })
                                 }),
-                                distribution && distribution.data && datasetDictionary && datasetDictionary.length ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TabPanel), {
+                                distribution.data && distribution.data.describedBy && distribution.data.describedByType === "application/vnd.tableschema+json" || datasetSitewideDictionary && datasetSitewideDictionary.length ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TabPanel), {
                                     id: "data-dictionary",
                                     tab: /*#__PURE__*/ (0, $hgUW1$jsxs)("span", {
                                         className: "ds-u-color--primary",
@@ -3211,11 +3406,13 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalPar
                                     }),
                                     className: borderlessTabs ? "ds-u-border--0 ds-u-padding-x--0" : "",
                                     children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6012b86ffcaf3f71$export$2e2bcd8739ae039), {
-                                        datasetDictionary: datasetDictionary,
-                                        title: "Data Dictionary"
+                                        datasetSitewideDictionary: datasetSitewideDictionary,
+                                        datasetDictionaryEndpoint: distribution.data.describedBy,
+                                        title: "Data Dictionary",
+                                        additionalParams: additionalParams
                                     })
                                 }) : null,
-                                distribution && distribution.data && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TabPanel), {
+                                /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TabPanel), {
                                     id: "api",
                                     tab: /*#__PURE__*/ (0, $hgUW1$jsxs)("span", {
                                         className: "ds-u-color--primary",
@@ -5369,7 +5566,10 @@ const $dd6eb2b30d7ad75d$var$FilteredResourceBody = ({ id: id, dataset: dataset,
         manual: true
     }, additionalParams);
     (0, $hgUW1$useEffect)(()=>{
-        if (distribution.identifier) resource.setResource(distribution.identifier);
+        if (distribution.identifier) {
+            resource.setResource(distribution.identifier);
+            resource.setManual(false);
+        }
     }, [
         distribution
     ]);