@civicactions/cmsds-open-data-components 3.1.10-alpha.1 → 3.1.10-alpha.3

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, 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";
@@ -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";
@@ -1307,9 +1307,11 @@ var $b4aa9c66f2e86959$export$2e2bcd8739ae039 = $b4aa9c66f2e86959$var$useMetastor
 const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, additionalParams = {})=>{
     const keys = options.keys ? options.keys : true;
     const { prepareColumns: prepareColumns } = options;
+    const [values, setValues] = (0, $hgUW1$useState)([]);
     const [id, setResource] = (0, $hgUW1$useState)(resourceId);
     const [rootUrl, setRootUrl] = (0, $hgUW1$useState)(rootAPIUrl);
     const [limit, setLimit] = (0, $hgUW1$useState)(options.limit ? options.limit : 20);
+    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 [conditions, setConditions] = (0, $hgUW1$useState)(options.conditions ? options.conditions : undefined);
@@ -1347,6 +1349,7 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
     (0, $hgUW1$useEffect)(()=>{
         if (data) {
             const propertyKeys = data.schema && 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);
             if (data.schema) setSchema(data.schema);
         }
@@ -1355,8 +1358,8 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
     ]);
     return {
         loading: enabled ? isPending : false,
-        values: data ? data.results : undefined,
-        count: data ? data.count : null,
+        values: values,
+        count: count,
         columns: columns,
         limit: limit,
         offset: offset,
@@ -2345,6 +2348,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;
@@ -2500,16 +2523,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"
+                                            }
                                         })
                                     ]
                                 })
@@ -2964,21 +2984,31 @@ 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
         }
     });
     return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
@@ -2991,6 +3021,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",
@@ -2999,11 +3030,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))
@@ -3015,9 +3055,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())
                                             });
                                         })
@@ -3034,15 +3077,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 "";
@@ -3073,7 +3113,6 @@ const $a24829b27758fe6c$var$SitewideDataDictionaryTable = ({ datasetDictionary:
     return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
         tableColumns: tableColumns,
         tableData: datasetDictionary,
-        count: datasetDictionary.length,
         pageSize: pageSize
     });
 };
@@ -3086,7 +3125,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,
@@ -3102,7 +3157,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",
@@ -3125,11 +3180,93 @@ 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)((0, $hgUW1$Dropdown), {
+                                    className: "ds-l-col--12 ds-l-sm-col--6",
+                                    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;
@@ -5398,8 +5535,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);