@civicactions/cmsds-open-data-components 3.2.0-alpha.2 → 3.2.0

package/dist/main.js

@@ -1,6 +1,6 @@
 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 $hgUW1$react, {useState as $hgUW1$useState, useRef as $hgUW1$useRef, useEffect as $hgUW1$useEffect, useMemo as $hgUW1$useMemo} 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, 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";
@@ -12,7 +12,7 @@ import {useQuery as $hgUW1$useQuery, QueryClient as $hgUW1$QueryClient, QueryCli
 import {useMediaQuery as $hgUW1$useMediaQuery} from "react-responsive";
 import $hgUW1$dompurify from "dompurify";
 import $hgUW1$lodashtruncate from "lodash.truncate";
-import {createColumnHelper as $hgUW1$createColumnHelper, useReactTable as $hgUW1$useReactTable, getCoreRowModel as $hgUW1$getCoreRowModel, getSortedRowModel as $hgUW1$getSortedRowModel, flexRender as $hgUW1$flexRender, getPaginationRowModel as $hgUW1$getPaginationRowModel} from "@tanstack/react-table";
+import {createColumnHelper as $hgUW1$createColumnHelper, useReactTable as $hgUW1$useReactTable, getCoreRowModel as $hgUW1$getCoreRowModel, getSortedRowModel as $hgUW1$getSortedRowModel, flexRender as $hgUW1$flexRender, getFilteredRowModel as $hgUW1$getFilteredRowModel, getPaginationRowModel as $hgUW1$getPaginationRowModel} from "@tanstack/react-table";
 import $hgUW1$reactdatepicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import {usePopper as $hgUW1$usePopper} from "react-popper";
@@ -1632,6 +1632,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
                         style: {
                             maxWidth: header.getSize() - 16
                         },
+                        title: header.column.columnDef.header,
                         children: header.isPlaceholder ? null : (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext())
                     }),
                     sortElement && /*#__PURE__*/ (0, $hgUW1$jsx)("button", {
@@ -2324,7 +2325,7 @@ const $6369abf590ca298f$var$QueryRow = ({ id: id, condition: condition, index: i
                     /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
                         variation: "ghost",
                         size: "small",
-                        className: "ds-u-margin-top--3 ds-u-padding-right--0",
+                        className: "ds-u-margin-top--6 ds-u-padding-right--0",
                         "aria-label": "Delete filter",
                         onClick: ()=>remove(index),
                         children: /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
@@ -2339,6 +2340,26 @@ const $6369abf590ca298f$var$QueryRow = ({ id: id, condition: condition, index: i
 var $6369abf590ca298f$export$2e2bcd8739ae039 = $6369abf590ca298f$var$QueryRow;
 
 
+
+
+
+
+const $2eec38d4d0dbf714$var$ClearFiltersButton = ({ disabled: disabled = false, clearFiltersFn: clearFiltersFn })=>{
+    const small = (0, $hgUW1$useMediaQuery)({
+        minWidth: 0,
+        maxWidth: 544
+    });
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
+        disabled: disabled,
+        className: "ds-u-float--right ds-l-md-col--6 ds-l-col--5",
+        variation: small ? "ghost" : undefined,
+        onClick: ()=>clearFiltersFn(),
+        children: small ? "Clear all" : "Clear all filters"
+    });
+};
+var $2eec38d4d0dbf714$export$2e2bcd8739ae039 = $2eec38d4d0dbf714$var$ClearFiltersButton;
+
+
 function $ee4ad47aa483e5b5$var$updateQueryForDatastore(condition) {
     let cond = condition;
     delete cond.key;
@@ -2494,16 +2515,13 @@ const $ee4ad47aa483e5b5$var$QueryBuilder = (props)=>{
                                             variation: "solid",
                                             children: "Apply filters"
                                         }),
-                                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
+                                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2eec38d4d0dbf714$export$2e2bcd8739ae039), {
                                             disabled: queryConditions.length === 0,
-                                            className: "ds-u-float--right ds-l-md-col--6 ds-l-col--5",
-                                            variation: small ? "ghost" : undefined,
-                                            onClick: ()=>{
+                                            clearFiltersFn: ()=>{
                                                 setQueryConditions([]);
                                                 setTitleConditions([]);
                                                 setConditionsCleared(true);
-                                            },
-                                            children: small ? "Clear all" : "Clear all filters"
+                                            }
                                         })
                                     ]
                                 })
@@ -2792,7 +2810,7 @@ const $7357cc0f79f9c514$var$Resource = ({ distributions: distributions, resource
                                         order: sm ? "1" : "0",
                                         width: sm ? "100%" : "auto"
                                     },
-                                    "aria-label": "Download " + title + " " + fileFormat,
+                                    "aria-label": `Download ${dist.data.title || title} ${fileFormat}`,
                                     className: "ds-c-button",
                                     children: [
                                         /*#__PURE__*/ (0, $hgUW1$jsx)("i", {
@@ -2958,25 +2976,99 @@ var $cf6eaefd6b928de3$export$2e2bcd8739ae039 = $cf6eaefd6b928de3$var$DatasetAPI;
 
 
 
-const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns, tableData: tableData, count: count, pageSize: pageSize })=>{
-    const [pagination, setPagination] = (0, $hgUW1$useState)({
-        pageIndex: 1,
-        pageSize: pageSize
-    });
+
+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
+    });
+    const sortElement = (isSorted)=>{
+        if (isSorted === "asc") return "dc-c-sort--asc";
+        if (isSorted === "desc") return "dc-c-sort--desc";
+        return "dc-c-sort--default";
+    };
     const table = (0, $hgUW1$useReactTable)({
         data: tableData,
         columns: tableColumns,
         columnResizeMode: "onChange",
         getCoreRowModel: (0, $hgUW1$getCoreRowModel)(),
+        getFilteredRowModel: (0, $hgUW1$getFilteredRowModel)(),
         getPaginationRowModel: (0, $hgUW1$getPaginationRowModel)(),
-        onPaginationChange: setPagination,
+        getSortedRowModel: (0, $hgUW1$getSortedRowModel)(),
+        onSortingChange: setSorting,
         state: {
-            pagination: pagination
+            sorting: sorting,
+            columnFilters: columnFilters
         }
     });
+    const sortOptions = [
+        {
+            value: "default",
+            label: "No Sort"
+        },
+        {
+            value: "titleasc",
+            label: "Title A-Z"
+        },
+        {
+            value: "titledesc",
+            label: "Title Z-A"
+        },
+        {
+            value: "typeasc",
+            label: "Type A-Z"
+        },
+        {
+            value: "typedesc",
+            label: "Type Z-A"
+        }
+    ];
+    const sortStatesLookup = {
+        default: [],
+        titleasc: [
+            {
+                id: "titleResizable",
+                desc: false
+            }
+        ],
+        titledesc: [
+            {
+                id: "titleResizable",
+                desc: true
+            }
+        ],
+        typeasc: [
+            {
+                id: "type",
+                desc: false
+            }
+        ],
+        typedesc: [
+            {
+                id: "type",
+                desc: true
+            }
+        ]
+    };
     return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
         children: [
+            mobile && /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                className: "ds-u-margin-bottom--3 ds-l-col--12 ds-l-sm-col--6",
+                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
+                    labelClassName: "ds-u-margin-top--1 ds-u-sm-margin-top--0",
+                    options: sortOptions,
+                    label: "Sort",
+                    value: Object.keys(sortStatesLookup).find((key)=>{
+                        return JSON.stringify(sortStatesLookup[key]) == JSON.stringify(sorting);
+                    }),
+                    name: "dc-data-dictionary-type",
+                    onChange: (e)=>{
+                        setSorting(sortStatesLookup[e.target.value]);
+                    }
+                })
+            }),
             /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                 className: "dc-c-datadictionary-table",
                 children: [
@@ -2985,6 +3077,7 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
                         style: {
                             width: "100%"
                         },
+                        stackable: true,
                         children: [
                             /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableHead), {
                                 className: "dc-thead--truncated dc-thead--resizeable",
@@ -2993,11 +3086,20 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
                                             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), {
+                                                setAriaLiveFeedback: setAriaLiveFeedback,
+                                                sortElement: sortElement
+                                            }, 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",
-                                                children: (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext())
+                                                className: `ds-u-border-y--2 ds-u-border--dark ds-u-border-x--0`,
+                                                id: "dataDictionary_" + header.id,
+                                                children: [
+                                                    (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext()),
+                                                    header.id === "type" && /*#__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`
+                                                    })
+                                                ]
                                             });
                                         })
                                     }, "header" + headerGroup.id))
@@ -3009,9 +3111,12 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
                                             return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableCell), {
                                                 key: cell.id,
                                                 style: {
-                                                    maxWidth: cell.column.getSize()
+                                                    maxWidth: mobile ? "100%" : cell.column.getSize(),
+                                                    whiteSpace: cell.column.id === "description" ? "pre-wrap" : "normal"
                                                 },
                                                 className: `${cell.column.id === "titleResizable" ? "ds-u-word-break" : ""}`,
+                                                headers: "dataDictionary_" + cell.column.id,
+                                                stackedTitle: cell.column.id === "titleResizable" ? "Title" : cell.column.columnDef.header,
                                                 children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
                                             });
                                         })
@@ -3028,15 +3133,12 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
                     })
                 ]
             }),
-            count > pageSize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
-                totalPages: Math.ceil(count / pagination.pageSize),
-                currentPage: pagination.pageIndex + 1,
+            table.getRowCount() > pageSize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
+                totalPages: table.getPageCount(),
+                currentPage: table.getState().pagination.pageIndex + 1,
                 onPageChange: (evt, page)=>{
                     evt.preventDefault();
-                    setPagination({
-                        pageIndex: page - 1,
-                        pageSize: pageSize
-                    });
+                    table.setPageIndex(page - 1);
                 },
                 renderHref: (page)=>{
                     return "";
@@ -3067,7 +3169,6 @@ const $a24829b27758fe6c$var$SitewideDataDictionaryTable = ({ datasetDictionary:
     return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
         tableColumns: tableColumns,
         tableData: datasetDictionary,
-        count: datasetDictionary.length,
         pageSize: pageSize
     });
 };
@@ -3080,7 +3181,23 @@ var $a24829b27758fe6c$export$2e2bcd8739ae039 = $a24829b27758fe6c$var$SitewideDat
 
 
 
+
 const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datasetDictionary, pageSize: pageSize })=>{
+    const [titleFilter, setTitleFilter] = (0, $hgUW1$useState)("");
+    const [typeFilter, setTypeFilter] = (0, $hgUW1$useState)("all");
+    const columnFilters = (0, $hgUW1$useMemo)(()=>[
+            {
+                id: "titleResizable",
+                value: titleFilter
+            },
+            {
+                id: "type",
+                value: typeFilter === "all" ? "" : typeFilter
+            }
+        ], [
+        titleFilter,
+        typeFilter
+    ]);
     const tableData = datasetDictionary.map((item)=>{
         return {
             titleResizable: item.title,
@@ -3096,7 +3213,7 @@ const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datas
                     children: [
                         "Title",
                         /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Tooltip), {
-                            title: "Title represents the column headers of the data file (e.g., Change_Type)",
+                            title: "Title represents the column headers of the data file",
                             // @ts-ignore
                             style: {
                                 border: "none",
@@ -3119,11 +3236,95 @@ const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datas
             enableResizing: false
         })
     ];
-    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
-        tableColumns: tableColumns,
-        tableData: tableData,
-        count: datasetDictionary.length,
-        pageSize: pageSize
+    const typeOptions = [
+        {
+            value: "all",
+            label: "All Types"
+        },
+        {
+            value: "string",
+            label: "String"
+        },
+        {
+            value: "date",
+            label: "Date"
+        },
+        {
+            value: "datetime",
+            label: "Datetime"
+        },
+        {
+            value: "year",
+            label: "Year"
+        },
+        {
+            value: "integer",
+            label: "Integer"
+        },
+        {
+            value: "number",
+            label: "Number"
+        },
+        {
+            value: "boolean",
+            label: "Boolean"
+        }
+    ];
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                className: "dc-query-builder ds-u-margin-bottom--3",
+                children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                    className: "ds-c-accordion ds-c-accordion--bordered",
+                    children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$AccordionItem), {
+                        heading: "Data Dictionary Filters",
+                        defaultOpen: true,
+                        children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                            className: "ds-u-display--flex ds-u-flex-wrap--wrap",
+                            children: [
+                                /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TextField), {
+                                    className: "ds-l-col--12 ds-l-sm-col--6",
+                                    labelClassName: "ds-u-margin-top--1 ds-u-sm-margin-top--0",
+                                    label: "Title",
+                                    value: titleFilter,
+                                    name: "dc-data-dictionary-title",
+                                    onChange: (e)=>setTitleFilter(e.target.value)
+                                }),
+                                /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                                    className: "ds-l-col--12 ds-l-sm-col--6",
+                                    children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
+                                        labelClassName: "ds-u-margin-top--1 ds-u-sm-margin-top--0",
+                                        options: typeOptions,
+                                        label: "Type",
+                                        value: typeFilter,
+                                        name: "dc-data-dictionary-type",
+                                        onChange: (e)=>setTypeFilter(e.target.value)
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                                    className: "ds-u-float--right ds-u-padding-y--2 ds-l-col--12 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end",
+                                    children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                                        className: "ds-u-display--flex ds-u-justify-content--end ds-l-col--12 ds-l-md-col--6 ds-u-padding-x--0",
+                                        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2eec38d4d0dbf714$export$2e2bcd8739ae039), {
+                                            clearFiltersFn: ()=>{
+                                                setTitleFilter("");
+                                                setTypeFilter("all");
+                                            }
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
+                tableColumns: tableColumns,
+                tableData: tableData,
+                pageSize: pageSize,
+                columnFilters: columnFilters
+            })
+        ]
     });
 };
 var $a6e312940f7003ef$export$2e2bcd8739ae039 = $a6e312940f7003ef$var$DatasetDictionaryTable;
@@ -5349,8 +5550,6 @@ function $3b6ca952e79f0695$var$updateQueryForDatastore(condition) {
 const $3b6ca952e79f0695$var$QueryBuilder = ({ resource: resource, id: id, includeSearchParams: includeSearchParams, customColumns: customColumns })=>{
     const { conditions: conditions, schema: schema, setConditions: setConditions } = resource;
     const fields = Object.keys(schema[id].fields);
-    const hasConditions = conditions.length > 0;
-    const [queryCount, setQueryCount] = (0, $hgUW1$useState)(0);
     const [queryConditions, setQueryConditions] = (0, $hgUW1$useState)([]);
     const [titleConditions, setTitleConditions] = (0, $hgUW1$useState)([]); // Add use effect to load conditions on first load if needed
     const [conditionsChanged, setConditionsChanged] = (0, $hgUW1$useState)(false);