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

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";
@@ -1641,6 +1641,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", {
@@ -2985,11 +2986,7 @@ var $cf6eaefd6b928de3$export$2e2bcd8739ae039 = $cf6eaefd6b928de3$var$DatasetAPI;
 
 
 
-const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns, tableData: tableData, count: count, pageSize: pageSize, columnFilters: columnFilters })=>{
-    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)({
@@ -3008,17 +3005,80 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
         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",
+                children: /*#__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: 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: [
@@ -3055,7 +3115,7 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
                                     }, "header" + headerGroup.id))
                             }),
                             /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableBody), {
-                                children: table.getFilteredRowModel().rows.map((row, index)=>{
+                                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), {
@@ -3085,13 +3145,10 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
             }),
             table.getRowCount() > pageSize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
                 totalPages: table.getPageCount(),
-                currentPage: pagination.pageIndex + 1,
+                currentPage: table.getState().pagination.pageIndex + 1,
                 onPageChange: (evt, page)=>{
                     evt.preventDefault();
-                    setPagination({
-                        pageIndex: page - 1,
-                        pageSize: pageSize
-                    });
+                    table.setPageIndex(page - 1);
                 },
                 renderHref: (page)=>{
                     return "";
@@ -3122,7 +3179,6 @@ const $a24829b27758fe6c$var$SitewideDataDictionaryTable = ({ datasetDictionary:
     return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
         tableColumns: tableColumns,
         tableData: datasetDictionary,
-        count: datasetDictionary.length,
         pageSize: pageSize
     });
 };
@@ -3139,7 +3195,19 @@ 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, setColumnFilters] = (0, $hgUW1$useState)([]);
+    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,
@@ -3212,18 +3280,6 @@ const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datas
             label: "Boolean"
         }
     ];
-    const setFilters = ()=>{
-        setColumnFilters([
-            {
-                id: "titleResizable",
-                value: titleFilter
-            },
-            {
-                id: "type",
-                value: typeFilter === "all" ? "" : typeFilter
-            }
-        ]);
-    };
     return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
         children: [
             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
@@ -3255,22 +3311,14 @@ const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datas
                                 }),
                                 /*#__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$jsxs)("div", {
+                                    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, $hgUW1$Button), {
-                                                onClick: setFilters,
-                                                className: "ds-l-col--5 ds-u-margin-right--0 ds-u-sm-margin-right--1",
-                                                children: "Apply filters"
-                                            }),
-                                            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2eec38d4d0dbf714$export$2e2bcd8739ae039), {
-                                                clearFiltersFn: ()=>{
-                                                    setTitleFilter("");
-                                                    setTypeFilter("all");
-                                                    setColumnFilters([]);
-                                                }
-                                            })
-                                        ]
+                                        children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $2eec38d4d0dbf714$export$2e2bcd8739ae039), {
+                                            clearFiltersFn: ()=>{
+                                                setTitleFilter("");
+                                                setTypeFilter("all");
+                                            }
+                                        })
                                     })
                                 })
                             ]
@@ -3281,7 +3329,6 @@ const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datas
             /*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
                 tableColumns: tableColumns,
                 tableData: tableData,
-                count: datasetDictionary.length,
                 pageSize: pageSize,
                 columnFilters: columnFilters
             })