@etsoo/materialui 1.5.78 → 1.5.80

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.
Files changed (7) hide show
  1. package/lib/cjs/DataGridEx.js +14 -12
  2. package/lib/cjs/ResponsibleContainer.js +4 -4
  3. package/lib/mjs/DataGridEx.js +14 -12
  4. package/lib/mjs/ResponsibleContainer.js +4 -4
  5. package/package.json +1 -1
  6. package/src/DataGridEx.tsx +15 -12
  7. package/src/ResponsibleContainer.tsx +4 -4
package/lib/cjs/DataGridEx.js CHANGED
@@ -44,19 +44,21 @@ const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
44
44
  }
45
45
  });
46
46
  };
47
- const rowItems = (div, callback) => {
47
+ const rowItem = (div, callback) => {
48
48
  const row = div.dataset["row"];
49
49
  if (div.parentElement == null || row == null)
50
50
  return;
51
- doRowItems(div.parentElement, parseFloat(row), callback);
51
+ doRowItem(div.parentElement, parseFloat(row), callback);
52
52
  };
53
- const doRowItems = (parent, rowIndex, callback) => {
54
- if (parent == null || rowIndex == null)
53
+ const doRowItem = (parent, rowIndex, callback) => {
54
+ if (parent == null || parent.parentElement == null || rowIndex == null)
55
55
  return;
56
- parent
57
- ?.querySelectorAll(`div[role="row"][aria-rowindex="${rowIndex}"]`)
58
- .forEach((rowItem) => {
59
- callback(rowItem);
56
+ // New react-window version uses an extra div outside the rendered row
57
+ // <div role="row" aria-rowindex="1">...</div>
58
+ parent.parentElement
59
+ ?.querySelectorAll(`div[role="row"] > div[data-row="${rowIndex}"]`)
60
+ .forEach((row) => {
61
+ callback(row);
60
62
  });
61
63
  };
62
64
  /**
@@ -211,22 +213,22 @@ function DataGridEx(props) {
211
213
  if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current)
212
214
  return;
213
215
  if (selectedRowIndex.current != -1) {
214
- doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
216
+ doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
215
217
  preDiv.classList.remove("DataGridEx-Selected");
216
218
  });
217
219
  }
218
- rowItems(div, (currentDiv) => {
220
+ rowItem(div, (currentDiv) => {
219
221
  currentDiv.classList.add("DataGridEx-Selected");
220
222
  });
221
223
  selectedRowIndex.current = rowIndex;
222
224
  };
223
225
  const handleMouseOver = (event) => {
224
- rowItems(event.currentTarget, (div) => {
226
+ rowItem(event.currentTarget, (div) => {
225
227
  div.classList.add("DataGridEx-Hover");
226
228
  });
227
229
  };
228
230
  const handleMouseOut = (event) => {
229
- rowItems(event.currentTarget, (div) => {
231
+ rowItem(event.currentTarget, (div) => {
230
232
  div.classList.remove("DataGridEx-Hover");
231
233
  });
232
234
  };
package/lib/cjs/ResponsibleContainer.js CHANGED
@@ -38,15 +38,15 @@ function ResponsibleContainer(props) {
38
38
  // Refs
39
39
  const refs = react_1.default.useRef({});
40
40
  const state = refs.current;
41
+ // Screen size detection
42
+ const showDataGrid = (0, useMediaQuery_1.default)("(min-width:600px)");
41
43
  const mRefs = (0, react_2.useCombinedRefs)(mRef, (ref) => {
42
44
  if (ref == null)
43
45
  return;
44
46
  state.ref = ref;
45
- if (ref.element && elementReady)
46
- elementReady(ref.element, true);
47
+ if (ref.element)
48
+ elementReady?.(ref.element, showDataGrid);
47
49
  });
48
- // Screen size detection
49
- const showDataGrid = (0, useMediaQuery_1.default)("(min-width:600px)");
50
50
  // Update mounted state
51
51
  react_1.default.useEffect(() => {
52
52
  return () => {
package/lib/mjs/DataGridEx.js CHANGED
@@ -37,19 +37,21 @@ const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
37
37
  }
38
38
  });
39
39
  };
40
- const rowItems = (div, callback) => {
40
+ const rowItem = (div, callback) => {
41
41
  const row = div.dataset["row"];
42
42
  if (div.parentElement == null || row == null)
43
43
  return;
44
- doRowItems(div.parentElement, parseFloat(row), callback);
44
+ doRowItem(div.parentElement, parseFloat(row), callback);
45
45
  };
46
- const doRowItems = (parent, rowIndex, callback) => {
47
- if (parent == null || rowIndex == null)
46
+ const doRowItem = (parent, rowIndex, callback) => {
47
+ if (parent == null || parent.parentElement == null || rowIndex == null)
48
48
  return;
49
- parent
50
- ?.querySelectorAll(`div[role="row"][aria-rowindex="${rowIndex}"]`)
51
- .forEach((rowItem) => {
52
- callback(rowItem);
49
+ // New react-window version uses an extra div outside the rendered row
50
+ // <div role="row" aria-rowindex="1">...</div>
51
+ parent.parentElement
52
+ ?.querySelectorAll(`div[role="row"] > div[data-row="${rowIndex}"]`)
53
+ .forEach((row) => {
54
+ callback(row);
53
55
  });
54
56
  };
55
57
  /**
@@ -204,22 +206,22 @@ export function DataGridEx(props) {
204
206
  if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current)
205
207
  return;
206
208
  if (selectedRowIndex.current != -1) {
207
- doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
209
+ doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
208
210
  preDiv.classList.remove("DataGridEx-Selected");
209
211
  });
210
212
  }
211
- rowItems(div, (currentDiv) => {
213
+ rowItem(div, (currentDiv) => {
212
214
  currentDiv.classList.add("DataGridEx-Selected");
213
215
  });
214
216
  selectedRowIndex.current = rowIndex;
215
217
  };
216
218
  const handleMouseOver = (event) => {
217
- rowItems(event.currentTarget, (div) => {
219
+ rowItem(event.currentTarget, (div) => {
218
220
  div.classList.add("DataGridEx-Hover");
219
221
  });
220
222
  };
221
223
  const handleMouseOut = (event) => {
222
- rowItems(event.currentTarget, (div) => {
224
+ rowItem(event.currentTarget, (div) => {
223
225
  div.classList.remove("DataGridEx-Hover");
224
226
  });
225
227
  };
package/lib/mjs/ResponsibleContainer.js CHANGED
@@ -32,15 +32,15 @@ export function ResponsibleContainer(props) {
32
32
  // Refs
33
33
  const refs = React.useRef({});
34
34
  const state = refs.current;
35
+ // Screen size detection
36
+ const showDataGrid = useMediaQuery("(min-width:600px)");
35
37
  const mRefs = useCombinedRefs(mRef, (ref) => {
36
38
  if (ref == null)
37
39
  return;
38
40
  state.ref = ref;
39
- if (ref.element && elementReady)
40
- elementReady(ref.element, true);
41
+ if (ref.element)
42
+ elementReady?.(ref.element, showDataGrid);
41
43
  });
42
- // Screen size detection
43
- const showDataGrid = useMediaQuery("(min-width:600px)");
44
44
  // Update mounted state
45
45
  React.useEffect(() => {
46
46
  return () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.78",
3
+ "version": "1.5.80",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
package/src/DataGridEx.tsx CHANGED
@@ -188,28 +188,31 @@ const createGridStyle = (
188
188
  });
189
189
  };
190
190
 
191
- const rowItems = (
191
+ const rowItem = (
192
192
  div: HTMLDivElement,
193
193
  callback: (div: HTMLDivElement) => void
194
194
  ) => {
195
195
  const row = div.dataset["row"];
196
196
  if (div.parentElement == null || row == null) return;
197
- doRowItems(div.parentElement, parseFloat(row), callback);
197
+ doRowItem(div.parentElement, parseFloat(row), callback);
198
198
  };
199
199
 
200
- const doRowItems = (
200
+ const doRowItem = (
201
201
  parent: HTMLElement,
202
202
  rowIndex: number,
203
203
  callback: (div: HTMLDivElement) => void
204
204
  ) => {
205
- if (parent == null || rowIndex == null) return;
205
+ if (parent == null || parent.parentElement == null || rowIndex == null)
206
+ return;
206
207
 
207
- parent
208
+ // New react-window version uses an extra div outside the rendered row
209
+ // <div role="row" aria-rowindex="1">...</div>
210
+ parent.parentElement
208
211
  ?.querySelectorAll<HTMLDivElement>(
209
- `div[role="row"][aria-rowindex="${rowIndex}"]`
212
+ `div[role="row"] > div[data-row="${rowIndex}"]`
210
213
  )
211
- .forEach((rowItem) => {
212
- callback(rowItem);
214
+ .forEach((row) => {
215
+ callback(row);
213
216
  });
214
217
  };
215
218
 
@@ -507,12 +510,12 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
507
510
  if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current) return;
508
511
 
509
512
  if (selectedRowIndex.current != -1) {
510
- doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
513
+ doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
511
514
  preDiv.classList.remove("DataGridEx-Selected");
512
515
  });
513
516
  }
514
517
 
515
- rowItems(div, (currentDiv) => {
518
+ rowItem(div, (currentDiv) => {
516
519
  currentDiv.classList.add("DataGridEx-Selected");
517
520
  });
518
521
 
@@ -520,13 +523,13 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
520
523
  };
521
524
 
522
525
  const handleMouseOver = (event: React.MouseEvent<HTMLDivElement>) => {
523
- rowItems(event.currentTarget, (div) => {
526
+ rowItem(event.currentTarget, (div) => {
524
527
  div.classList.add("DataGridEx-Hover");
525
528
  });
526
529
  };
527
530
 
528
531
  const handleMouseOut = (event: React.MouseEvent<HTMLDivElement>) => {
529
- rowItems(event.currentTarget, (div) => {
532
+ rowItem(event.currentTarget, (div) => {
530
533
  div.classList.remove("DataGridEx-Hover");
531
534
  });
532
535
  };
package/src/ResponsibleContainer.tsx CHANGED
@@ -208,16 +208,16 @@ export function ResponsibleContainer<T extends object, F>(
208
208
  const refs = React.useRef<LocalRefs<T>>({});
209
209
  const state = refs.current;
210
210
 
211
+ // Screen size detection
212
+ const showDataGrid = useMediaQuery("(min-width:600px)");
213
+
211
214
  const mRefs = useCombinedRefs(mRef, (ref: GridMethodRef<T>) => {
212
215
  if (ref == null) return;
213
216
  state.ref = ref;
214
217
 
215
- if (ref.element && elementReady) elementReady(ref.element, true);
218
+ if (ref.element) elementReady?.(ref.element, showDataGrid);
216
219
  });
217
220
 
218
- // Screen size detection
219
- const showDataGrid = useMediaQuery("(min-width:600px)");
220
-
221
221
  // Update mounted state
222
222
  React.useEffect(() => {
223
223
  return () => {