@xyo-network/react-shared 2.25.28 → 2.25.31

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 (19) hide show
  1. package/dist/cjs/components/TableCell/EllipsisTableCell.js +13 -16
  2. package/dist/cjs/components/TableCell/EllipsisTableCell.js.map +1 -1
  3. package/dist/cjs/components/TableCell/getRemainingRowWidth.d.ts +1 -0
  4. package/dist/cjs/components/TableCell/getRemainingRowWidth.js +4 -9
  5. package/dist/cjs/components/TableCell/getRemainingRowWidth.js.map +1 -1
  6. package/dist/cjs/components/TableCell/getSmallestParentWidth.js +1 -1
  7. package/dist/cjs/components/TableCell/getSmallestParentWidth.js.map +1 -1
  8. package/dist/docs.json +23 -15
  9. package/dist/esm/components/TableCell/EllipsisTableCell.js +19 -16
  10. package/dist/esm/components/TableCell/EllipsisTableCell.js.map +1 -1
  11. package/dist/esm/components/TableCell/getRemainingRowWidth.d.ts +1 -0
  12. package/dist/esm/components/TableCell/getRemainingRowWidth.js +4 -8
  13. package/dist/esm/components/TableCell/getRemainingRowWidth.js.map +1 -1
  14. package/dist/esm/components/TableCell/getSmallestParentWidth.js +1 -1
  15. package/dist/esm/components/TableCell/getSmallestParentWidth.js.map +1 -1
  16. package/package.json +7 -7
  17. package/src/components/TableCell/EllipsisTableCell.tsx +35 -27
  18. package/src/components/TableCell/getRemainingRowWidth.ts +4 -11
  19. package/src/components/TableCell/getSmallestParentWidth.ts +1 -1
package/dist/cjs/components/TableCell/EllipsisTableCell.js CHANGED
@@ -9,16 +9,13 @@ const react_1 = require("react");
9
9
  const findParent_1 = require("./findParent");
10
10
  const getRemainingRowWidth_1 = require("./getRemainingRowWidth");
11
11
  const getSmallestParentWidth_1 = require("./getSmallestParentWidth");
12
- const TableCellValue = ({ value, hashCellWidth }) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", fontFamily: "monospace", style: {
13
- display: 'block',
14
- overflow: 'hidden',
15
- textOverflow: 'ellipsis',
16
- whiteSpace: 'nowrap',
17
- width: hashCellWidth,
18
- } }, { children: value })));
12
+ const TableCellValue = (_a) => {
13
+ var { style, hashCellWidth, value } = _a, props = tslib_1.__rest(_a, ["style", "hashCellWidth", "value"]);
14
+ return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", fontFamily: "monospace", style: Object.assign({ display: 'block', maxWidth: hashCellWidth, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, style) }, props, { children: value })));
15
+ };
19
16
  const EllipsisTableCell = (_a) => {
20
17
  var { value, to, href } = _a, props = tslib_1.__rest(_a, ["value", "to", "href"]);
21
- const [hashCellWidth, setHashCellWidth] = (0, react_1.useState)();
18
+ const [hashCellWidth, setHashCellWidth] = (0, react_1.useState)(0);
22
19
  const hashDivRef = (0, react_1.useRef)(null);
23
20
  const theme = (0, material_1.useTheme)();
24
21
  const spacing = parseInt(theme.spacing(2).substring(-2));
@@ -31,12 +28,7 @@ const EllipsisTableCell = (_a) => {
31
28
  const smallestParentWidth = (0, getSmallestParentWidth_1.getSmallestParentWidth)(cell);
32
29
  if (smallestParentWidth && row) {
33
30
  const remainderWidth = smallestParentWidth - (0, getRemainingRowWidth_1.getRemainingRowWidth)(row) - spacing;
34
- if (cell.clientWidth > remainderWidth) {
35
- setHashCellWidth(remainderWidth);
36
- }
37
- else if (hashCellWidth === undefined) {
38
- setHashCellWidth(cell.clientWidth);
39
- }
31
+ setHashCellWidth(remainderWidth);
40
32
  }
41
33
  };
42
34
  const onResize = () => {
@@ -51,9 +43,14 @@ const EllipsisTableCell = (_a) => {
51
43
  return () => {
52
44
  window.removeEventListener('resize', onResize);
53
45
  };
54
- // eslint-disable-next-line react-hooks/exhaustive-deps
55
46
  }, [hashDivRef, spacing]);
56
- return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: hashDivRef }, { children: href || to ? ((0, jsx_runtime_1.jsx)(sdk_react_1.LinkEx, Object.assign({ to: to, href: href, target: href ? '_blank' : undefined }, { children: (0, jsx_runtime_1.jsx)(TableCellValue, { hashCellWidth: hashCellWidth, value: value }) }))) : ((0, jsx_runtime_1.jsx)(TableCellValue, { hashCellWidth: hashCellWidth, value: value })) })) })));
47
+ return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: hashDivRef, style: {
48
+ display: 'block',
49
+ maxWidth: hashCellWidth,
50
+ overflow: 'hidden',
51
+ textOverflow: 'ellipsis',
52
+ whiteSpace: 'nowrap',
53
+ } }, { children: href || to ? ((0, jsx_runtime_1.jsx)(sdk_react_1.LinkEx, Object.assign({ to: to, href: href, target: href ? '_blank' : undefined }, { children: (0, jsx_runtime_1.jsx)(TableCellValue, { value: value, hashCellWidth: hashCellWidth }) }))) : ((0, jsx_runtime_1.jsx)(TableCellValue, { value: value, hashCellWidth: hashCellWidth })) })) })));
57
54
  };
58
55
  exports.EllipsisTableCell = EllipsisTableCell;
59
56
  //# sourceMappingURL=EllipsisTableCell.js.map
package/dist/cjs/components/TableCell/EllipsisTableCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
package/dist/cjs/components/TableCell/getRemainingRowWidth.d.ts CHANGED
@@ -1 +1,2 @@
1
+ /** @description This is the width of all the cells (except the one passed) in the row combined */
1
2
  export declare const getRemainingRowWidth: (row: HTMLElement, forCell?: number) => number;
package/dist/cjs/components/TableCell/getRemainingRowWidth.js CHANGED
@@ -1,25 +1,20 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.getRemainingRowWidth = void 0;
4
- const getPadding = (item) => {
5
- var _a, _b, _c, _d;
6
- const computedStyles = window.getComputedStyle(item, null);
7
- return (parseInt((_b = (_a = computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.getPropertyValue('padding-left')) === null || _a === void 0 ? void 0 : _a.replaceAll('px', '')) !== null && _b !== void 0 ? _b : 0) + parseInt((_d = (_c = computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.getPropertyValue('padding-right')) === null || _c === void 0 ? void 0 : _c.replaceAll('px', '')) !== null && _d !== void 0 ? _d : 0));
8
- };
4
+ /** @description This is the width of all the cells (except the one passed) in the row combined */
9
5
  const getRemainingRowWidth = (row, forCell = 0) => {
10
6
  var _a, _b;
11
7
  let width = 0;
12
- let padding = 0;
13
8
  for (let i = 0; i < ((_a = row === null || row === void 0 ? void 0 : row.childElementCount) !== null && _a !== void 0 ? _a : 0); i++) {
14
9
  const item = row === null || row === void 0 ? void 0 : row.children.item(i);
15
10
  if (item) {
16
11
  if (i !== forCell) {
17
- width += (_b = item === null || item === void 0 ? void 0 : item.clientWidth) !== null && _b !== void 0 ? _b : 0;
12
+ const boundingRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
13
+ width += (_b = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.width) !== null && _b !== void 0 ? _b : 0;
18
14
  }
19
- padding += getPadding(item);
20
15
  }
21
16
  }
22
- return width + padding;
17
+ return width;
23
18
  };
24
19
  exports.getRemainingRowWidth = getRemainingRowWidth;
25
20
  //# sourceMappingURL=getRemainingRowWidth.js.map
package/dist/cjs/components/TableCell/getRemainingRowWidth.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,CAAC,IAAa,EAAE,EAAE;;IACnC,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAC1D,OAAO,CACL,QAAQ,CAAC,MAAA,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,gBAAgB,CAAC,cAAc,CAAC,0CAAE,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,mCAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAA,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,gBAAgB,CAAC,eAAe,CAAC,0CAAE,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,mCAAI,CAAC,CAAC,CAC/K,CAAA;AACH,CAAC,CAAA;AAEM,MAAM,oBAAoB,GAAG,CAAC,GAAgB,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE;;IACpE,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,IAAI,OAAO,GAAG,CAAC,CAAA;IACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,iBAAiB,mCAAI,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAClC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,KAAK,OAAO,EAAE;gBACjB,KAAK,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,mCAAI,CAAC,CAAA;aAChC;YACD,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,CAAA;SAC5B;KACF;IAED,OAAO,KAAK,GAAG,OAAO,CAAA;AACxB,CAAC,CAAA;AAdY,QAAA,oBAAoB,wBAchC"}
1
+ {"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":";;;AAAA,kGAAkG;AAC3F,MAAM,oBAAoB,GAAG,CAAC,GAAgB,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE;;IACpE,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,iBAAiB,mCAAI,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAClC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,KAAK,OAAO,EAAE;gBACjB,MAAM,YAAY,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB,EAAE,CAAA;gBAClD,KAAK,IAAI,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,mCAAI,CAAC,CAAA;aAClC;SACF;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAbY,QAAA,oBAAoB,wBAahC"}
package/dist/cjs/components/TableCell/getSmallestParentWidth.js CHANGED
@@ -4,7 +4,7 @@ exports.getSmallestParentWidth = void 0;
4
4
  const getSmallestParentWidth = (element, maxDepth = 4) => {
5
5
  var _a, _b, _c;
6
6
  let currentElement = element === null || element === void 0 ? void 0 : element.parentElement;
7
- let width = (_a = currentElement === null || currentElement === void 0 ? void 0 : currentElement.clientWidth) !== null && _a !== void 0 ? _a : 1024;
7
+ let width = (_a = currentElement === null || currentElement === void 0 ? void 0 : currentElement.clientWidth) !== null && _a !== void 0 ? _a : screen.width;
8
8
  let maxDepthCounter = maxDepth;
9
9
  while (currentElement && maxDepthCounter > 0) {
10
10
  if (width > ((_b = currentElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b['width'])) {
package/dist/cjs/components/TableCell/getSmallestParentWidth.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":";;;AAAO,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;;IAC3E,IAAI,cAAc,GAAuB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,mCAAI,IAAI,CAAA;IAC/C,IAAI,eAAe,GAAG,QAAQ,CAAA;IAC9B,OAAO,cAAc,IAAI,eAAe,GAAG,CAAC,EAAE;QAC5C,IAAI,KAAK,IAAG,MAAA,cAAc,CAAC,qBAAqB,EAAE,0CAAG,OAAO,CAAC,CAAA,EAAE;YAC7D,KAAK,GAAG,MAAA,cAAc,CAAC,qBAAqB,EAAE,0CAAG,OAAO,CAAC,CAAA;SAC1D;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC7C,eAAe,EAAE,CAAA;KAClB;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAZY,QAAA,sBAAsB,0BAYlC"}
1
+ {"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":";;;AAAO,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;;IAC3E,IAAI,cAAc,GAAuB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,mCAAI,MAAM,CAAC,KAAK,CAAA;IACvD,IAAI,eAAe,GAAG,QAAQ,CAAA;IAC9B,OAAO,cAAc,IAAI,eAAe,GAAG,CAAC,EAAE;QAC5C,IAAI,KAAK,IAAG,MAAA,cAAc,CAAC,qBAAqB,EAAE,0CAAG,OAAO,CAAC,CAAA,EAAE;YAC7D,KAAK,GAAG,MAAA,cAAc,CAAC,qBAAqB,EAAE,0CAAG,OAAO,CAAC,CAAA;SAC1D;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC7C,eAAe,EAAE,CAAA;KAClB;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAZY,QAAA,sBAAsB,0BAYlC"}
package/dist/docs.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "id": 10336,
18
18
  "name": "DarkMode",
19
19
  "kind": 16,
20
- "kindString": "Enumeration member",
20
+ "kindString": "Enumeration Member",
21
21
  "flags": {},
22
22
  "sources": [
23
23
  {
@@ -26,13 +26,17 @@
26
26
  "character": 2
27
27
  }
28
28
  ],
29
+ "type": {
30
+ "type": "literal",
31
+ "value": "darkmode"
32
+ },
29
33
  "defaultValue": "\"darkmode\""
30
34
  },
31
35
  {
32
36
  "id": 10337,
33
37
  "name": "Developer",
34
38
  "kind": 16,
35
- "kindString": "Enumeration member",
39
+ "kindString": "Enumeration Member",
36
40
  "flags": {},
37
41
  "sources": [
38
42
  {
@@ -41,12 +45,16 @@
41
45
  "character": 2
42
46
  }
43
47
  ],
48
+ "type": {
49
+ "type": "literal",
50
+ "value": "developer"
51
+ },
44
52
  "defaultValue": "\"developer\""
45
53
  }
46
54
  ],
47
55
  "groups": [
48
56
  {
49
- "title": "Enumeration members",
57
+ "title": "Enumeration Members",
50
58
  "kind": 16,
51
59
  "children": [
52
60
  10336,
@@ -5920,7 +5928,7 @@
5920
5928
  "sources": [
5921
5929
  {
5922
5930
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
5923
- "line": 34,
5931
+ "line": 38,
5924
5932
  "character": 2
5925
5933
  }
5926
5934
  ],
@@ -12667,7 +12675,7 @@
12667
12675
  "sources": [
12668
12676
  {
12669
12677
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
12670
- "line": 33,
12678
+ "line": 37,
12671
12679
  "character": 2
12672
12680
  }
12673
12681
  ],
@@ -12833,7 +12841,7 @@
12833
12841
  "sources": [
12834
12842
  {
12835
12843
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
12836
- "line": 32,
12844
+ "line": 36,
12837
12845
  "character": 2
12838
12846
  }
12839
12847
  ],
@@ -141877,7 +141885,7 @@
141877
141885
  "sources": [
141878
141886
  {
141879
141887
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
141880
- "line": 34,
141888
+ "line": 38,
141881
141889
  "character": 2
141882
141890
  }
141883
141891
  ],
@@ -148427,7 +148435,7 @@
148427
148435
  "sources": [
148428
148436
  {
148429
148437
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
148430
- "line": 33,
148438
+ "line": 37,
148431
148439
  "character": 2
148432
148440
  }
148433
148441
  ],
@@ -148584,7 +148592,7 @@
148584
148592
  "sources": [
148585
148593
  {
148586
148594
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
148587
- "line": 32,
148595
+ "line": 36,
148588
148596
  "character": 2
148589
148597
  }
148590
148598
  ],
@@ -148979,7 +148987,7 @@
148979
148987
  "sources": [
148980
148988
  {
148981
148989
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
148982
- "line": 31,
148990
+ "line": 35,
148983
148991
  "character": 17
148984
148992
  }
148985
148993
  ],
@@ -211037,7 +211045,7 @@
211037
211045
  "sources": [
211038
211046
  {
211039
211047
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
211040
- "line": 34,
211048
+ "line": 38,
211041
211049
  "character": 2
211042
211050
  }
211043
211051
  ],
@@ -217804,7 +217812,7 @@
217804
217812
  "sources": [
217805
217813
  {
217806
217814
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
217807
- "line": 33,
217815
+ "line": 37,
217808
217816
  "character": 2
217809
217817
  }
217810
217818
  ],
@@ -217970,7 +217978,7 @@
217970
217978
  "sources": [
217971
217979
  {
217972
217980
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
217973
- "line": 32,
217981
+ "line": 36,
217974
217982
  "character": 2
217975
217983
  }
217976
217984
  ],
@@ -391356,7 +391364,7 @@
391356
391364
  "sources": [
391357
391365
  {
391358
391366
  "fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
391359
- "line": 37,
391367
+ "line": 41,
391360
391368
  "character": 13
391361
391369
  }
391362
391370
  ],
@@ -393412,7 +393420,7 @@
393412
393420
  ]
393413
393421
  },
393414
393422
  {
393415
- "title": "Type aliases",
393423
+ "title": "Type Aliases",
393416
393424
  "kind": 4194304,
393417
393425
  "children": [
393418
393426
  7713,
package/dist/esm/components/TableCell/EllipsisTableCell.js CHANGED
@@ -5,15 +5,18 @@ import { useEffect, useRef, useState } from 'react';
5
5
  import { findParent } from './findParent';
6
6
  import { getRemainingRowWidth } from './getRemainingRowWidth';
7
7
  import { getSmallestParentWidth } from './getSmallestParentWidth';
8
- const TableCellValue = ({ value, hashCellWidth }) => (_jsx(Typography, { variant: "body2", fontFamily: "monospace", style: {
9
- display: 'block',
10
- overflow: 'hidden',
11
- textOverflow: 'ellipsis',
12
- whiteSpace: 'nowrap',
13
- width: hashCellWidth,
14
- }, children: value }));
8
+ const TableCellValue = ({ style, hashCellWidth, value, ...props }) => {
9
+ return (_jsx(Typography, { variant: "body2", fontFamily: "monospace", style: {
10
+ display: 'block',
11
+ maxWidth: hashCellWidth,
12
+ overflow: 'hidden',
13
+ textOverflow: 'ellipsis',
14
+ whiteSpace: 'nowrap',
15
+ ...style,
16
+ }, ...props, children: value }));
17
+ };
15
18
  export const EllipsisTableCell = ({ value, to, href, ...props }) => {
16
- const [hashCellWidth, setHashCellWidth] = useState();
19
+ const [hashCellWidth, setHashCellWidth] = useState(0);
17
20
  const hashDivRef = useRef(null);
18
21
  const theme = useTheme();
19
22
  const spacing = parseInt(theme.spacing(2).substring(-2));
@@ -25,12 +28,7 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
25
28
  const smallestParentWidth = getSmallestParentWidth(cell);
26
29
  if (smallestParentWidth && row) {
27
30
  const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing;
28
- if (cell.clientWidth > remainderWidth) {
29
- setHashCellWidth(remainderWidth);
30
- }
31
- else if (hashCellWidth === undefined) {
32
- setHashCellWidth(cell.clientWidth);
33
- }
31
+ setHashCellWidth(remainderWidth);
34
32
  }
35
33
  };
36
34
  const onResize = () => {
@@ -45,8 +43,13 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
45
43
  return () => {
46
44
  window.removeEventListener('resize', onResize);
47
45
  };
48
- // eslint-disable-next-line react-hooks/exhaustive-deps
49
46
  }, [hashDivRef, spacing]);
50
- return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, children: href || to ? (_jsx(LinkEx, { to: to, href: href, target: href ? '_blank' : undefined, children: _jsx(TableCellValue, { hashCellWidth: hashCellWidth, value: value }) })) : (_jsx(TableCellValue, { hashCellWidth: hashCellWidth, value: value })) }) }));
47
+ return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, style: {
48
+ display: 'block',
49
+ maxWidth: hashCellWidth,
50
+ overflow: 'hidden',
51
+ textOverflow: 'ellipsis',
52
+ whiteSpace: 'nowrap',
53
+ }, children: href || to ? (_jsx(LinkEx, { to: to, href: href, target: href ? '_blank' : undefined, children: _jsx(TableCellValue, { value: value, hashCellWidth: hashCellWidth }) })) : (_jsx(TableCellValue, { value: value, hashCellWidth: hashCellWidth })) }) }));
51
54
  };
52
55
  //# sourceMappingURL=EllipsisTableCell.js.map
package/dist/esm/components/TableCell/EllipsisTableCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
package/dist/esm/components/TableCell/getRemainingRowWidth.d.ts CHANGED
@@ -1 +1,2 @@
1
+ /** @description This is the width of all the cells (except the one passed) in the row combined */
1
2
  export declare const getRemainingRowWidth: (row: HTMLElement, forCell?: number) => number;
package/dist/esm/components/TableCell/getRemainingRowWidth.js CHANGED
@@ -1,19 +1,15 @@
1
- const getPadding = (item) => {
2
- const computedStyles = window.getComputedStyle(item, null);
3
- return (parseInt(computedStyles?.getPropertyValue('padding-left')?.replaceAll('px', '') ?? 0) + parseInt(computedStyles?.getPropertyValue('padding-right')?.replaceAll('px', '') ?? 0));
4
- };
1
+ /** @description This is the width of all the cells (except the one passed) in the row combined */
5
2
  export const getRemainingRowWidth = (row, forCell = 0) => {
6
3
  let width = 0;
7
- let padding = 0;
8
4
  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
9
5
  const item = row?.children.item(i);
10
6
  if (item) {
11
7
  if (i !== forCell) {
12
- width += item?.clientWidth ?? 0;
8
+ const boundingRect = item?.getBoundingClientRect();
9
+ width += boundingRect?.width ?? 0;
13
10
  }
14
- padding += getPadding(item);
15
11
  }
16
12
  }
17
- return width + padding;
13
+ return width;
18
14
  };
19
15
  //# sourceMappingURL=getRemainingRowWidth.js.map
package/dist/esm/components/TableCell/getRemainingRowWidth.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG,CAAC,IAAa,EAAE,EAAE;IACnC,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAC1D,OAAO,CACL,QAAQ,CAAC,cAAc,EAAE,gBAAgB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,cAAc,EAAE,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAC/K,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAgB,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE;IACpE,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,IAAI,OAAO,GAAG,CAAC,CAAA;IACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,iBAAiB,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAClC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,KAAK,OAAO,EAAE;gBACjB,KAAK,IAAI,IAAI,EAAE,WAAW,IAAI,CAAC,CAAA;aAChC;YACD,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,CAAA;SAC5B;KACF;IAED,OAAO,KAAK,GAAG,OAAO,CAAA;AACxB,CAAC,CAAA"}
1
+ {"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAgB,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE;IACpE,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,iBAAiB,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAClC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,KAAK,OAAO,EAAE;gBACjB,MAAM,YAAY,GAAG,IAAI,EAAE,qBAAqB,EAAE,CAAA;gBAClD,KAAK,IAAI,YAAY,EAAE,KAAK,IAAI,CAAC,CAAA;aAClC;SACF;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
package/dist/esm/components/TableCell/getSmallestParentWidth.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export const getSmallestParentWidth = (element, maxDepth = 4) => {
2
2
  let currentElement = element?.parentElement;
3
- let width = currentElement?.clientWidth ?? 1024;
3
+ let width = currentElement?.clientWidth ?? screen.width;
4
4
  let maxDepthCounter = maxDepth;
5
5
  while (currentElement && maxDepthCounter > 0) {
6
6
  if (width > currentElement.getBoundingClientRect()?.['width']) {
package/dist/esm/components/TableCell/getSmallestParentWidth.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;IAC3E,IAAI,cAAc,GAAuB,OAAO,EAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,cAAc,EAAE,WAAW,IAAI,IAAI,CAAA;IAC/C,IAAI,eAAe,GAAG,QAAQ,CAAA;IAC9B,OAAO,cAAc,IAAI,eAAe,GAAG,CAAC,EAAE;QAC5C,IAAI,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE;YAC7D,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,CAAA;SAC1D;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC7C,eAAe,EAAE,CAAA;KAClB;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
1
+ {"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;IAC3E,IAAI,cAAc,GAAuB,OAAO,EAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,cAAc,EAAE,WAAW,IAAI,MAAM,CAAC,KAAK,CAAA;IACvD,IAAI,eAAe,GAAG,QAAQ,CAAA;IAC9B,OAAO,cAAc,IAAI,eAAe,GAAG,CAAC,EAAE;QAC5C,IAAI,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE;YAC7D,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,CAAA;SAC1D;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC7C,eAAe,EAAE,CAAA;KAClB;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
package/package.json CHANGED
@@ -12,9 +12,9 @@
12
12
  "dependencies": {
13
13
  "@emotion/react": "^11.9.0",
14
14
  "@emotion/styled": "^11.8.1",
15
- "@mui/icons-material": "^5.8.0",
16
- "@mui/lab": "^5.0.0-alpha.83",
17
- "@mui/material": "^5.8.1",
15
+ "@mui/icons-material": "^5.8.2",
16
+ "@mui/lab": "^5.0.0-alpha.84",
17
+ "@mui/material": "^5.8.2",
18
18
  "@mui/styles": "^5.8.0",
19
19
  "@xylabs/pixel": "^1.3.7",
20
20
  "@xylabs/sdk-js": "^2.5.5",
@@ -22,17 +22,17 @@
22
22
  "@xyo-network/api": "^2.20.38",
23
23
  "@xyo-network/core": "^2.20.38",
24
24
  "@xyo-network/network": "^2.20.38",
25
- "@xyo-network/react-theme": "^2.25.28",
25
+ "@xyo-network/react-theme": "^2.25.31",
26
26
  "lodash": "^4.17.21",
27
27
  "luxon": "^2.4.0",
28
28
  "react": "^18.1.0",
29
29
  "react-dom": "^18.1.0",
30
30
  "react-helmet": "^6.1.0",
31
- "react-icons": "^4.3.1",
31
+ "react-icons": "^4.4.0",
32
32
  "react-json-view": "^1.21.3",
33
33
  "react-router-dom": "^6.3.0",
34
34
  "tslib": "^2.4.0",
35
- "typedoc": "^0.22.15"
35
+ "typedoc": "^0.22.16"
36
36
  },
37
37
  "description": "Common React library for all XYO projects that use React",
38
38
  "devDependencies": {
@@ -113,6 +113,6 @@
113
113
  },
114
114
  "sideEffects": false,
115
115
  "types": "dist/esm/index.d.ts",
116
- "version": "2.25.28",
116
+ "version": "2.25.31",
117
117
  "packageManager": "yarn@3.1.1"
118
118
  }
package/src/components/TableCell/EllipsisTableCell.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { TableCell, TableCellProps, Typography, useTheme } from '@mui/material'
1
+ import { TableCell, TableCellProps, Typography, TypographyProps, useTheme } from '@mui/material'
2
2
  import { LinkEx } from '@xylabs/sdk-react'
3
3
  import { useEffect, useRef, useState } from 'react'
4
4
  import { To } from 'react-router-dom'
@@ -7,26 +7,30 @@ import { findParent } from './findParent'
7
7
  import { getRemainingRowWidth } from './getRemainingRowWidth'
8
8
  import { getSmallestParentWidth } from './getSmallestParentWidth'
9
9
 
10
- interface TableCellValueProps {
10
+ interface TableCellValueProps extends TypographyProps {
11
11
  value: string | undefined
12
12
  hashCellWidth: number | undefined
13
13
  }
14
14
 
15
- const TableCellValue: React.FC<TableCellValueProps> = ({ value, hashCellWidth }) => (
16
- <Typography
17
- variant="body2"
18
- fontFamily="monospace"
19
- style={{
20
- display: 'block',
21
- overflow: 'hidden',
22
- textOverflow: 'ellipsis',
23
- whiteSpace: 'nowrap',
24
- width: hashCellWidth,
25
- }}
26
- >
27
- {value}
28
- </Typography>
29
- )
15
+ const TableCellValue: React.FC<TableCellValueProps> = ({ style, hashCellWidth, value, ...props }) => {
16
+ return (
17
+ <Typography
18
+ variant="body2"
19
+ fontFamily="monospace"
20
+ style={{
21
+ display: 'block',
22
+ maxWidth: hashCellWidth,
23
+ overflow: 'hidden',
24
+ textOverflow: 'ellipsis',
25
+ whiteSpace: 'nowrap',
26
+ ...style,
27
+ }}
28
+ {...props}
29
+ >
30
+ {value}
31
+ </Typography>
32
+ )
33
+ }
30
34
 
31
35
  export interface EllipsisTableCellProps extends TableCellProps {
32
36
  value?: string
@@ -35,7 +39,7 @@ export interface EllipsisTableCellProps extends TableCellProps {
35
39
  }
36
40
 
37
41
  export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to, href, ...props }) => {
38
- const [hashCellWidth, setHashCellWidth] = useState<number>()
42
+ const [hashCellWidth, setHashCellWidth] = useState<number>(0)
39
43
  const hashDivRef = useRef<HTMLDivElement>(null)
40
44
 
41
45
  const theme = useTheme()
@@ -50,11 +54,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
50
54
  const smallestParentWidth = getSmallestParentWidth(cell)
51
55
  if (smallestParentWidth && row) {
52
56
  const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing
53
- if (cell.clientWidth > remainderWidth) {
54
- setHashCellWidth(remainderWidth)
55
- } else if (hashCellWidth === undefined) {
56
- setHashCellWidth(cell.clientWidth)
57
- }
57
+ setHashCellWidth(remainderWidth)
58
58
  }
59
59
  }
60
60
 
@@ -71,18 +71,26 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
71
71
  return () => {
72
72
  window.removeEventListener('resize', onResize)
73
73
  }
74
- // eslint-disable-next-line react-hooks/exhaustive-deps
75
74
  }, [hashDivRef, spacing])
76
75
 
77
76
  return (
78
77
  <TableCell {...props}>
79
- <div ref={hashDivRef}>
78
+ <div
79
+ ref={hashDivRef}
80
+ style={{
81
+ display: 'block',
82
+ maxWidth: hashCellWidth,
83
+ overflow: 'hidden',
84
+ textOverflow: 'ellipsis',
85
+ whiteSpace: 'nowrap',
86
+ }}
87
+ >
80
88
  {href || to ? (
81
89
  <LinkEx to={to} href={href} target={href ? '_blank' : undefined}>
82
- <TableCellValue hashCellWidth={hashCellWidth} value={value} />
90
+ <TableCellValue value={value} hashCellWidth={hashCellWidth} />
83
91
  </LinkEx>
84
92
  ) : (
85
- <TableCellValue hashCellWidth={hashCellWidth} value={value} />
93
+ <TableCellValue value={value} hashCellWidth={hashCellWidth} />
86
94
  )}
87
95
  </div>
88
96
  </TableCell>
package/src/components/TableCell/getRemainingRowWidth.ts CHANGED
@@ -1,22 +1,15 @@
1
- const getPadding = (item: Element) => {
2
- const computedStyles = window.getComputedStyle(item, null)
3
- return (
4
- parseInt(computedStyles?.getPropertyValue('padding-left')?.replaceAll('px', '') ?? 0) + parseInt(computedStyles?.getPropertyValue('padding-right')?.replaceAll('px', '') ?? 0)
5
- )
6
- }
7
-
1
+ /** @description This is the width of all the cells (except the one passed) in the row combined */
8
2
  export const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {
9
3
  let width = 0
10
- let padding = 0
11
4
  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
12
5
  const item = row?.children.item(i)
13
6
  if (item) {
14
7
  if (i !== forCell) {
15
- width += item?.clientWidth ?? 0
8
+ const boundingRect = item?.getBoundingClientRect()
9
+ width += boundingRect?.width ?? 0
16
10
  }
17
- padding += getPadding(item)
18
11
  }
19
12
  }
20
13
 
21
- return width + padding
14
+ return width
22
15
  }
package/src/components/TableCell/getSmallestParentWidth.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {
2
2
  let currentElement: HTMLElement | null = element?.parentElement
3
- let width = currentElement?.clientWidth ?? 1024
3
+ let width = currentElement?.clientWidth ?? screen.width
4
4
  let maxDepthCounter = maxDepth
5
5
  while (currentElement && maxDepthCounter > 0) {
6
6
  if (width > currentElement.getBoundingClientRect()?.['width']) {