@civicactions/cmsds-open-data-components 4.0.13-alpha.4 → 4.0.13-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.js CHANGED
@@ -278,7 +278,16 @@ var $11500a65bd7d9cf1$export$2e2bcd8739ae039 = $11500a65bd7d9cf1$var$HeaderConte
278
278
  const $61ff88fb3f6ee2c8$var$queryClient = new (0, $hgUW1$QueryClient)({
279
279
  defaultOptions: {
280
280
  queries: {
281
- refetchOnWindowFocus: false
281
+ // disable refetch when user returns to tab
282
+ refetchOnWindowFocus: false,
283
+ // Keep unused cache for 10 minutes (default is 5)
284
+ // Helps users navigating back/forward see cached data while refetch happens
285
+ gcTime: 600000,
286
+ // Reduce retries for slow connections
287
+ // Default is 3 with exponential backoff (can take 7+ seconds)
288
+ retry: 1,
289
+ // Fixed retry delay instead of exponential
290
+ retryDelay: 1000
282
291
  }
283
292
  }
284
293
  });
@@ -369,9 +378,15 @@ const $10bc3aae21fc1572$var$DatasetListSubmenu = ({ rootUrl: rootUrl, enablePagi
369
378
  })}`);
370
379
  }
371
380
  });
381
+ // Sync totalItems state with API response data
382
+ // Moved to useEffect to prevent state updates during render (which can cause infinite loops)
383
+ (0, $hgUW1$useEffect)(()=>{
384
+ if (data?.data?.total !== undefined && data.data.total !== totalItems) setTotalItems(data.data.total);
385
+ }, [
386
+ data?.data?.total
387
+ ]);
372
388
  let submenuItemsCount = 0;
373
389
  if (data) {
374
- if (data.data.total && totalItems !== data.data.total) setTotalItems(data.data.total);
375
390
  let resultsCount = Object.keys(data.data.results).length;
376
391
  // For the submenu pager, If there are fewer than 4 dataset items, display the dataset item count, otherwise, show "Viewing 4..".
377
392
  submenuItemsCount = resultsCount > defaultPageSize ? defaultPageSize : resultsCount;
@@ -2258,7 +2273,7 @@ function $7264a673914aa746$export$2b9377795161999(type) {
2258
2273
 
2259
2274
 
2260
2275
 
2261
- const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: header, sortElement: sortElement, id: id })=>{
2276
+ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: header, sortElement: sortElement, setAriaLiveFeedback: setAriaLiveFeedback, id: id })=>{
2262
2277
  const [columnResizing, setColumnResizing] = (0, $hgUW1$useState)("");
2263
2278
  // Fix for JSX in Data Dictionary Title header cell
2264
2279
  const ariaLabel = header.id === "titleResizable" ? "Title" : header.column.columnDef.header;
@@ -2299,13 +2314,21 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
2299
2314
  case " ":
2300
2315
  e.preventDefault();
2301
2316
  e.stopPropagation();
2302
- if (columnResizing) // end resizing
2303
- setColumnResizing("");
2304
- else // start resizing
2305
- setColumnResizing(header.column.id);
2317
+ if (columnResizing) {
2318
+ // end resizing
2319
+ setColumnResizing("");
2320
+ setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`);
2321
+ } else {
2322
+ // start resizing
2323
+ setColumnResizing(header.column.id);
2324
+ setAriaLiveFeedback(`${header.column.columnDef.header} grabbed.`);
2325
+ }
2306
2326
  break;
2307
2327
  case "Escape":
2308
- if (columnResizing) setColumnResizing("");
2328
+ if (columnResizing) {
2329
+ setColumnResizing("");
2330
+ setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`);
2331
+ }
2309
2332
  break;
2310
2333
  case "ArrowRight":
2311
2334
  e.preventDefault();
@@ -2313,6 +2336,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
2313
2336
  if (columnResizing) {
2314
2337
  columnSizingObject[header.column.id] = header.getSize() + 10;
2315
2338
  table.setColumnSizing(columnSizingObject);
2339
+ setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
2316
2340
  }
2317
2341
  break;
2318
2342
  case "ArrowLeft":
@@ -2321,6 +2345,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
2321
2345
  if (columnResizing) {
2322
2346
  columnSizingObject[header.column.id] = header.getSize() - 10;
2323
2347
  table.setColumnSizing(columnSizingObject);
2348
+ setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
2324
2349
  }
2325
2350
  break;
2326
2351
  }
@@ -2335,7 +2360,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
2335
2360
  var $64a351d3fd8413c3$export$2e2bcd8739ae039 = $64a351d3fd8413c3$var$HeaderResizeElement;
2336
2361
 
2337
2362
 
2338
- const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElement: sortElement = null })=>{
2363
+ const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElement: sortElement = null, setAriaLiveFeedback: setAriaLiveFeedback })=>{
2339
2364
  return /*#__PURE__*/ (0, $hgUW1$jsx)("thead", {
2340
2365
  className: "dc-thead--truncated dc-thead--resizeable",
2341
2366
  children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
@@ -2343,7 +2368,8 @@ const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElem
2343
2368
  children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
2344
2369
  table: table,
2345
2370
  header: header,
2346
- sortElement: sortElement
2371
+ sortElement: sortElement,
2372
+ setAriaLiveFeedback: setAriaLiveFeedback
2347
2373
  }, header.id + "_dataTableResize"))
2348
2374
  }, headerGroup.id))
2349
2375
  });
@@ -3656,6 +3682,7 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ columns: columns, sortTransform: sort
3656
3682
  const { conditions: conditions } = resource;
3657
3683
  const data = resource.values;
3658
3684
  const [sorting, setSorting] = (0, $hgUW1$useState)([]);
3685
+ const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)("");
3659
3686
  const dataTableWrapperElement = (0, $hgUW1$useRef)(null);
3660
3687
  const columnHelper = (0, $hgUW1$createColumnHelper)();
3661
3688
  const table_columns = columns.map((col)=>{
@@ -3851,48 +3878,57 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ columns: columns, sortTransform: sort
3851
3878
  })
3852
3879
  ]
3853
3880
  }),
3854
- /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
3881
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
3855
3882
  className: "dc-c-datatable-wrapper ds-u-border-x--1 ds-u-border-bottom--1",
3856
3883
  tabIndex: 0,
3857
3884
  ref: dataTableWrapperElement,
3858
- children: /*#__PURE__*/ (0, $hgUW1$jsxs)("table", {
3859
- style: {
3860
- width: canResize ? table.getCenterTotalSize() : "100%",
3861
- minWidth: tableWrapperWidth()
3862
- },
3863
- className: "dc-c-datatable",
3864
- children: [
3865
- canResize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $96d341d082bffec5$export$2e2bcd8739ae039), {
3866
- table: table,
3867
- sortElement: sortElement
3868
- }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $23763e27eda0e8d7$export$2e2bcd8739ae039), {
3869
- table: table,
3870
- sortElement: sortElement
3871
- }),
3872
- loading ? /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {}) : /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {
3873
- children: table.getRowModel().rows.map((row, index)=>{
3874
- const even = (index + 1) % 2 === 0;
3875
- const highlight = highlightRow === row.id;
3876
- return /*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
3877
- className: `${highlight ? "dc-c-datatable--highlight-row" : even && "dc-c-datatable--even-row"}`,
3878
- onClick: ()=>setHighlightRow(row.id),
3879
- children: row.getVisibleCells().map((cell)=>{
3880
- let classList = "dc-truncate ds-u-padding-x--1";
3881
- return /*#__PURE__*/ (0, $hgUW1$jsx)("td", {
3882
- key: cell.id,
3883
- style: {
3884
- maxWidth: cell.column.getSize()
3885
- },
3886
- className: `${classList} ${tablePadding}`,
3887
- title: cell.getValue(),
3888
- children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
3889
- });
3890
- })
3891
- }, row.id);
3885
+ children: [
3886
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("table", {
3887
+ style: {
3888
+ width: canResize ? table.getCenterTotalSize() : "100%",
3889
+ minWidth: tableWrapperWidth()
3890
+ },
3891
+ className: "dc-c-datatable",
3892
+ children: [
3893
+ canResize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $96d341d082bffec5$export$2e2bcd8739ae039), {
3894
+ table: table,
3895
+ sortElement: sortElement,
3896
+ setAriaLiveFeedback: setAriaLiveFeedback
3897
+ }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $23763e27eda0e8d7$export$2e2bcd8739ae039), {
3898
+ table: table,
3899
+ sortElement: sortElement
3900
+ }),
3901
+ loading ? /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {}) : /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {
3902
+ children: table.getRowModel().rows.map((row, index)=>{
3903
+ const even = (index + 1) % 2 === 0;
3904
+ const highlight = highlightRow === row.id;
3905
+ return /*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
3906
+ className: `${highlight ? "dc-c-datatable--highlight-row" : even && "dc-c-datatable--even-row"}`,
3907
+ onClick: ()=>setHighlightRow(row.id),
3908
+ children: row.getVisibleCells().map((cell)=>{
3909
+ let classList = "dc-truncate ds-u-padding-x--1";
3910
+ return /*#__PURE__*/ (0, $hgUW1$jsx)("td", {
3911
+ key: cell.id,
3912
+ style: {
3913
+ maxWidth: cell.column.getSize()
3914
+ },
3915
+ className: `${classList} ${tablePadding}`,
3916
+ title: cell.getValue(),
3917
+ children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
3918
+ });
3919
+ })
3920
+ }, row.id);
3921
+ })
3892
3922
  })
3893
- })
3894
- ]
3895
- })
3923
+ ]
3924
+ }),
3925
+ /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
3926
+ className: "sr-only",
3927
+ "aria-live": "assertive",
3928
+ "aria-atomic": "true",
3929
+ children: ariaLiveFeedback
3930
+ })
3931
+ ]
3896
3932
  }),
3897
3933
  loading && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
3898
3934
  "aria-valuetext": "Dataset loading",
@@ -4565,7 +4601,13 @@ const $e873081a6e8f024e$var$DatasetSearch = (props)=>{
4565
4601
  })}`);
4566
4602
  }
4567
4603
  });
4568
- if (data && data.data.total && totalItems != data.data.total) setTotalItems(data.data.total);
4604
+ // Sync totalItems state with API response data
4605
+ // Moved to useEffect to prevent state updates during render (which can cause infinite loops)
4606
+ (0, $hgUW1$useEffect)(()=>{
4607
+ if (data?.data?.total !== undefined && data.data.total !== totalItems) setTotalItems(data.data.total);
4608
+ }, [
4609
+ data?.data?.total
4610
+ ]);
4569
4611
  const facets = data && data.data.facets ? (0, $eff7d34c30f5a0fc$export$959638e8dca60ce6)(data ? data.data.facets : []) : {
4570
4612
  theme: null,
4571
4613
  keyword: null
@@ -4921,7 +4963,13 @@ const $550bcc185f420ff5$var$DatasetList = ({ rootUrl: rootUrl, enableSort: enabl
4921
4963
  })}`);
4922
4964
  }
4923
4965
  });
4924
- if (data && data.data.total && totalItems != data.data.total) setTotalItems(data.data.total);
4966
+ // Sync totalItems state with API response data
4967
+ // Moved to useEffect to prevent state updates during render (which can cause infinite loops)
4968
+ (0, $hgUW1$useEffect)(()=>{
4969
+ if (data?.data?.total !== undefined && data.data.total !== totalItems) setTotalItems(data.data.total);
4970
+ }, [
4971
+ data?.data?.total
4972
+ ]);
4925
4973
  (0, $hgUW1$useEffect)(()=>{
4926
4974
  // Update browser URL with current search params
4927
4975
  const params = buildSearchParams(true);
@@ -5834,6 +5882,7 @@ var $cf6eaefd6b928de3$export$2e2bcd8739ae039 = $cf6eaefd6b928de3$var$DatasetAPI;
5834
5882
 
5835
5883
  const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns, tableData: tableData, pageSize: pageSize, columnFilters: columnFilters })=>{
5836
5884
  const [sorting, setSorting] = (0, $hgUW1$useState)([]);
5885
+ const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)("");
5837
5886
  const mobile = (0, $hgUW1$useMediaQuery)({
5838
5887
  minWidth: 0,
5839
5888
  maxWidth: 544
@@ -5946,6 +5995,7 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
5946
5995
  return header.id === "titleResizable" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
5947
5996
  table: table,
5948
5997
  header: header,
5998
+ setAriaLiveFeedback: setAriaLiveFeedback,
5949
5999
  sortElement: sortElement,
5950
6000
  id: "dataDictionary_" + header.id
5951
6001
  }, header.id + "_resize") : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$TableCell), {
@@ -5985,6 +6035,12 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
5985
6035
  })
5986
6036
  ]
5987
6037
  }),
6038
+ /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
6039
+ className: "sr-only",
6040
+ "aria-live": "assertive",
6041
+ "aria-atomic": "true",
6042
+ children: ariaLiveFeedback
6043
+ }),
5988
6044
  table.getRowModel().rows.length === 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
5989
6045
  variation: "warn",
5990
6046
  children: "No results found for the current filters"