@civicactions/cmsds-open-data-components 4.0.12-alpha.5 → 4.0.13-alpha.1

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
@@ -2258,7 +2258,7 @@ function $7264a673914aa746$export$2b9377795161999(type) {
2258
2258
 
2259
2259
 
2260
2260
 
2261
- const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: header, sortElement: sortElement, id: id })=>{
2261
+ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: header, sortElement: sortElement, setAriaLiveFeedback: setAriaLiveFeedback, id: id })=>{
2262
2262
  const [columnResizing, setColumnResizing] = (0, $hgUW1$useState)('');
2263
2263
  // Fix for JSX in Data Dictionary Title header cell
2264
2264
  const ariaLabel = header.id === "titleResizable" ? "Title" : header.column.columnDef.header;
@@ -2299,13 +2299,21 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
2299
2299
  case ' ':
2300
2300
  e.preventDefault();
2301
2301
  e.stopPropagation();
2302
- if (columnResizing) // end resizing
2303
- setColumnResizing('');
2304
- else // start resizing
2305
- setColumnResizing(header.column.id);
2302
+ if (columnResizing) {
2303
+ // end resizing
2304
+ setColumnResizing('');
2305
+ setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`);
2306
+ } else {
2307
+ // start resizing
2308
+ setColumnResizing(header.column.id);
2309
+ setAriaLiveFeedback(`${header.column.columnDef.header} grabbed.`);
2310
+ }
2306
2311
  break;
2307
2312
  case 'Escape':
2308
- if (columnResizing) setColumnResizing('');
2313
+ if (columnResizing) {
2314
+ setColumnResizing('');
2315
+ setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`);
2316
+ }
2309
2317
  break;
2310
2318
  case 'ArrowRight':
2311
2319
  e.preventDefault();
@@ -2313,6 +2321,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
2313
2321
  if (columnResizing) {
2314
2322
  columnSizingObject[header.column.id] = header.getSize() + 10;
2315
2323
  table.setColumnSizing(columnSizingObject);
2324
+ setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
2316
2325
  }
2317
2326
  break;
2318
2327
  case 'ArrowLeft':
@@ -2321,6 +2330,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
2321
2330
  if (columnResizing) {
2322
2331
  columnSizingObject[header.column.id] = header.getSize() - 10;
2323
2332
  table.setColumnSizing(columnSizingObject);
2333
+ setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
2324
2334
  }
2325
2335
  break;
2326
2336
  }
@@ -2335,7 +2345,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
2335
2345
  var $64a351d3fd8413c3$export$2e2bcd8739ae039 = $64a351d3fd8413c3$var$HeaderResizeElement;
2336
2346
 
2337
2347
 
2338
- const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElement: sortElement = null })=>{
2348
+ const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElement: sortElement = null, setAriaLiveFeedback: setAriaLiveFeedback })=>{
2339
2349
  return /*#__PURE__*/ (0, $hgUW1$jsx)("thead", {
2340
2350
  className: "dc-thead--truncated dc-thead--resizeable",
2341
2351
  children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
@@ -2343,7 +2353,8 @@ const $96d341d082bffec5$var$TruncatedResizeableTHead = ({ table: table, sortElem
2343
2353
  children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
2344
2354
  table: table,
2345
2355
  header: header,
2346
- sortElement: sortElement
2356
+ sortElement: sortElement,
2357
+ setAriaLiveFeedback: setAriaLiveFeedback
2347
2358
  }, header.id + "_dataTableResize"))
2348
2359
  }, headerGroup.id))
2349
2360
  });
@@ -2946,9 +2957,26 @@ const $eadd6431fddf4b6c$var$FilterItem = ({ id: id, condition: condition, index:
2946
2957
  const [property, setProperty] = (0, $hgUW1$useState)(condition.property);
2947
2958
  const [value, setValue] = (0, $hgUW1$useState)(condition.value);
2948
2959
  const [startDate, setStartDate] = (0, $hgUW1$react).useState($eadd6431fddf4b6c$var$getStartDate(condition, schema, id));
2960
+ const [previousType, setPreviousType] = (0, $hgUW1$useState)(schema[id].fields[property]?.mysql_type);
2949
2961
  const xl = (0, $hgUW1$useMediaQuery)({
2950
2962
  minWidth: 1280
2951
2963
  });
2964
+ // Reset value when mysql_type changes from date to another type
2965
+ (0, $hgUW1$useEffect)(()=>{
2966
+ const currentType = schema[id].fields[property]?.mysql_type;
2967
+ if (previousType === 'date' && currentType !== 'date') {
2968
+ setValue('');
2969
+ update(index, 'value', '');
2970
+ }
2971
+ setPreviousType(currentType);
2972
+ }, [
2973
+ schema,
2974
+ id,
2975
+ property,
2976
+ previousType,
2977
+ index,
2978
+ update
2979
+ ]);
2952
2980
  (0, $hgUW1$useEffect)(()=>{
2953
2981
  if (property !== condition.property) {
2954
2982
  if (property) update(index, 'property', property);
@@ -3656,6 +3684,7 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ columns: columns, sortTransform: sort
3656
3684
  const { conditions: conditions } = resource;
3657
3685
  const data = resource.values;
3658
3686
  const [sorting, setSorting] = (0, $hgUW1$useState)([]);
3687
+ const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)('');
3659
3688
  const dataTableWrapperElement = (0, $hgUW1$useRef)(null);
3660
3689
  const columnHelper = (0, $hgUW1$createColumnHelper)();
3661
3690
  const table_columns = columns.map((col)=>{
@@ -3851,48 +3880,57 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ columns: columns, sortTransform: sort
3851
3880
  })
3852
3881
  ]
3853
3882
  }),
3854
- /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
3883
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
3855
3884
  className: "dc-c-datatable-wrapper ds-u-border-x--1 ds-u-border-bottom--1",
3856
3885
  tabIndex: 0,
3857
3886
  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);
3887
+ children: [
3888
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("table", {
3889
+ style: {
3890
+ width: canResize ? table.getCenterTotalSize() : "100%",
3891
+ minWidth: tableWrapperWidth()
3892
+ },
3893
+ className: "dc-c-datatable",
3894
+ children: [
3895
+ canResize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $96d341d082bffec5$export$2e2bcd8739ae039), {
3896
+ table: table,
3897
+ sortElement: sortElement,
3898
+ setAriaLiveFeedback: setAriaLiveFeedback
3899
+ }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $23763e27eda0e8d7$export$2e2bcd8739ae039), {
3900
+ table: table,
3901
+ sortElement: sortElement
3902
+ }),
3903
+ loading ? /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {}) : /*#__PURE__*/ (0, $hgUW1$jsx)("tbody", {
3904
+ children: table.getRowModel().rows.map((row, index)=>{
3905
+ const even = (index + 1) % 2 === 0;
3906
+ const highlight = highlightRow === row.id;
3907
+ return /*#__PURE__*/ (0, $hgUW1$jsx)("tr", {
3908
+ className: `${highlight ? "dc-c-datatable--highlight-row" : even && "dc-c-datatable--even-row"}`,
3909
+ onClick: ()=>setHighlightRow(row.id),
3910
+ children: row.getVisibleCells().map((cell)=>{
3911
+ let classList = "dc-truncate ds-u-padding-x--1";
3912
+ return /*#__PURE__*/ (0, $hgUW1$jsx)("td", {
3913
+ key: cell.id,
3914
+ style: {
3915
+ maxWidth: cell.column.getSize()
3916
+ },
3917
+ className: `${classList} ${tablePadding}`,
3918
+ title: cell.getValue(),
3919
+ children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
3920
+ });
3921
+ })
3922
+ }, row.id);
3923
+ })
3892
3924
  })
3893
- })
3894
- ]
3895
- })
3925
+ ]
3926
+ }),
3927
+ /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
3928
+ className: "sr-only",
3929
+ "aria-live": "assertive",
3930
+ "aria-atomic": "true",
3931
+ children: ariaLiveFeedback
3932
+ })
3933
+ ]
3896
3934
  }),
3897
3935
  loading && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
3898
3936
  "aria-valuetext": "Dataset loading",
@@ -5834,6 +5872,7 @@ var $cf6eaefd6b928de3$export$2e2bcd8739ae039 = $cf6eaefd6b928de3$var$DatasetAPI;
5834
5872
 
5835
5873
  const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns, tableData: tableData, pageSize: pageSize, columnFilters: columnFilters })=>{
5836
5874
  const [sorting, setSorting] = (0, $hgUW1$useState)([]);
5875
+ const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)('');
5837
5876
  const mobile = (0, $hgUW1$useMediaQuery)({
5838
5877
  minWidth: 0,
5839
5878
  maxWidth: 544
@@ -5946,6 +5985,7 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
5946
5985
  return header.id === "titleResizable" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
5947
5986
  table: table,
5948
5987
  header: header,
5988
+ setAriaLiveFeedback: setAriaLiveFeedback,
5949
5989
  sortElement: sortElement,
5950
5990
  id: 'dataDictionary_' + header.id
5951
5991
  }, header.id + "_resize") : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$TableCell), {
@@ -5985,6 +6025,12 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
5985
6025
  })
5986
6026
  ]
5987
6027
  }),
6028
+ /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
6029
+ className: "sr-only",
6030
+ "aria-live": "assertive",
6031
+ "aria-atomic": "true",
6032
+ children: ariaLiveFeedback
6033
+ }),
5988
6034
  table.getRowModel().rows.length === 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
5989
6035
  variation: "warn",
5990
6036
  children: "No results found for the current filters"