@xyo-network/react-shared 2.25.69 → 2.25.72

package/dist/esm/components/TableCell/EllipsisTableCell.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableCell, Typography, useTheme } from '@mui/material';
+import { TableCell, Typography } from '@mui/material';
 import { LinkEx } from '@xylabs/react-common';
 import { useEffect, useRef, useState } from 'react';
+import { getActualPaddingX } from '../../lib';
 import { findParent } from './findParent';
 import { getRemainingRowWidth } from './getRemainingRowWidth';
 import { getSmallestParentWidth } from './getSmallestParentWidth';
@@ -18,9 +19,6 @@ const TableCellValue = ({ style, hashCellWidth, value, ...props }) => {
 export const EllipsisTableCell = ({ value, to, href, ...props }) => {
     const [calcCellWidth, setCalcCellWidth] = useState(0);
     const hashDivRef = useRef(null);
-    const theme = useTheme();
-    // We calulate the spacing since we know that table rows use padding.
-    const spacing = parseInt(theme.spacing(4).substring(-2));
     useEffect(() => {
         const currentElement = hashDivRef.current?.parentElement;
         const cell = findParent('td', currentElement);
@@ -28,7 +26,10 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
         const checkWidth = (cell) => {
             const smallestParentWidth = getSmallestParentWidth(cell);
             if (smallestParentWidth && row) {
-                const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing;
+                const remainingWidth = getRemainingRowWidth(row);
+                const actualPaddingX = getActualPaddingX(cell);
+                const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
+                cell.style.width = `${remainderWidth}`;
                 setCalcCellWidth(remainderWidth);
             }
         };
@@ -40,11 +41,13 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
         if (cell) {
             checkWidth(cell);
             window.addEventListener('resize', onResize);
+            row?.addEventListener('resize', onResize);
         }
         return () => {
             window.removeEventListener('resize', onResize);
+            row?.removeEventListener('resize', onResize);
         };
-    }, [hashDivRef, spacing]);
+    }, [hashDivRef]);
     return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, style: {
                 display: 'block',
                 maxWidth: calcCellWidth,

package/dist/esm/components/TableCell/EllipsisTableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
+{"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

@@ -1,2 +1,2 @@
-/** @description This is the width of all the cells (except the one passed) in the row combined */
+/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */
 export declare const getRemainingRowWidth: (row: HTMLElement, forCell?: number) => number;

package/dist/esm/components/TableCell/getRemainingRowWidth.js

@@ -1,12 +1,11 @@
-/** @description This is the width of all the cells (except the one passed) in the row combined */
+/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */
 export const getRemainingRowWidth = (row, forCell = 0) => {
     let width = 0;
     for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
         const item = row?.children.item(i);
         if (item) {
             if (i !== forCell) {
-                const boundingRect = item?.getBoundingClientRect();
-                width += boundingRect?.width ?? 0;
+                width += item?.clientWidth ?? 0;
             }
         }
     }

package/dist/esm/components/TableCell/getRemainingRowWidth.js.map

@@ -1 +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"}
+{"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":"AAAA,mIAAmI;AACnI,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,KAAK,IAAI,IAAI,EAAE,WAAW,IAAI,CAAC,CAAA;aAChC;SACF;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/esm/lib/getActualPaddingX.d.ts

@@ -0,0 +1,13 @@
+export declare const parseMeausureString: (measure?: string, absolute?: number) => number | undefined;
+export declare const parsePadding: (padding: string) => {
+    bottom: string;
+    left: string;
+    right: string;
+    top: string;
+} | {
+    bottom: string;
+    right: string;
+    top: string;
+    left?: undefined;
+} | undefined;
+export declare const getActualPaddingX: (element: HTMLElement) => number;

package/dist/esm/lib/getActualPaddingX.js

@@ -0,0 +1,63 @@
+export const parseMeausureString = (measure, absolute) => {
+    if (measure !== undefined && measure !== null && measure.length > 0) {
+        if (measure.endsWith('px')) {
+            return parseFloat(measure.substring(0, measure.length - 2));
+        }
+        else if (measure.endsWith('%')) {
+            if (absolute !== undefined) {
+                return (parseFloat(measure.substring(0, measure.length - 1)) / 100) * absolute;
+            }
+            throw Error('Error Parsing Measure [missing absolute]');
+        }
+        else if (measure.endsWith('vw')) {
+            return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerWidth;
+        }
+        else if (measure.endsWith('vh')) {
+            return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerHeight;
+        }
+        throw Error(`Error Parsing Measure [${measure}]`);
+    }
+};
+export const parsePadding = (padding) => {
+    const parts = padding.split(' ');
+    switch (parts.length) {
+        case 4: {
+            return {
+                bottom: parts[2],
+                left: parts[3],
+                right: parts[1],
+                top: parts[0],
+            };
+        }
+        case 3: {
+            return {
+                bottom: parts[2],
+                right: parts[1],
+                top: parts[0],
+            };
+        }
+        case 2: {
+            return {
+                bottom: parts[0],
+                left: parts[1],
+                right: parts[1],
+                top: parts[0],
+            };
+        }
+        case 1: {
+            return {
+                bottom: parts[0],
+                left: parts[0],
+                right: parts[0],
+                top: parts[0],
+            };
+        }
+    }
+};
+export const getActualPaddingX = (element) => {
+    const padding = parsePadding(window.getComputedStyle(element, null).getPropertyValue('padding'));
+    const paddingLeft = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue('padding-left') ?? padding?.left, element.clientWidth) ?? 0;
+    const paddingRight = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue('padding-right') ?? padding?.right, element.clientWidth) ?? 0;
+    return paddingLeft + paddingRight;
+};
+//# sourceMappingURL=getActualPaddingX.js.map

package/dist/esm/lib/getActualPaddingX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getActualPaddingX.js","sourceRoot":"","sources":["../../../src/lib/getActualPaddingX.ts"],"names":[],"mappings":"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"}

package/dist/esm/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './archivistPresets';
 export * from './assertDefinedEx';
 export * from './divinerPresets';
+export * from './getActualPaddingX';
 export * from './networkComponents';

package/dist/esm/lib/index.js

@@ -1,5 +1,6 @@
 export * from './archivistPresets';
 export * from './assertDefinedEx';
 export * from './divinerPresets';
+export * from './getActualPaddingX';
 export * from './networkComponents';
 //# sourceMappingURL=index.js.map

package/dist/esm/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA"}

package/package.json

@@ -20,7 +20,7 @@
     "@xylabs/react-common": "^2.14.4",
     "@xylabs/react-flexbox": "^2.14.4",
     "@xylabs/react-shared": "^2.14.4",
-    "@xylabs/sdk-js": "^2.5.7",
+    "@xylabs/sdk-js": "^2.5.9",
     "@xyo-network/api": "^2.20.45",
     "@xyo-network/network": "^2.20.45",
     "axios": "^0.27.2",
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.18.2",
     "@storybook/react": "^6.5.9",
     "@xylabs/pixel": "^1.3.9",
-    "@xylabs/sdk-js": "^2.5.7",
+    "@xylabs/sdk-js": "^2.5.9",
     "@xylabs/tsconfig": "^1.0.13"
   },
   "browser": "dist/esm/index.js",
@@ -88,6 +88,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.69",
+  "version": "2.25.72",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -1,8 +1,9 @@
-import { TableCell, TableCellProps, Typography, TypographyProps, useTheme } from '@mui/material'
+import { TableCell, TableCellProps, Typography, TypographyProps } from '@mui/material'
 import { LinkEx } from '@xylabs/react-common'
 import { useEffect, useRef, useState } from 'react'
 import { To } from 'react-router-dom'
 
+import { getActualPaddingX } from '../../lib'
 import { findParent } from './findParent'
 import { getRemainingRowWidth } from './getRemainingRowWidth'
 import { getSmallestParentWidth } from './getSmallestParentWidth'
@@ -42,11 +43,6 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
   const [calcCellWidth, setCalcCellWidth] = useState<number>(0)
   const hashDivRef = useRef<HTMLDivElement>(null)
 
-  const theme = useTheme()
-
-  // We calulate the spacing since we know that table rows use padding.
-  const spacing = parseInt(theme.spacing(4).substring(-2))
-
   useEffect(() => {
     const currentElement = hashDivRef.current?.parentElement
     const cell = findParent('td', currentElement)
@@ -55,7 +51,10 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
     const checkWidth = (cell: HTMLElement) => {
       const smallestParentWidth = getSmallestParentWidth(cell)
       if (smallestParentWidth && row) {
-        const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing
+        const remainingWidth = getRemainingRowWidth(row)
+        const actualPaddingX = getActualPaddingX(cell)
+        const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX
+        cell.style.width = `${remainderWidth}`
         setCalcCellWidth(remainderWidth)
       }
     }
@@ -69,11 +68,13 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
     if (cell) {
       checkWidth(cell)
       window.addEventListener('resize', onResize)
+      row?.addEventListener('resize', onResize)
     }
     return () => {
       window.removeEventListener('resize', onResize)
+      row?.removeEventListener('resize', onResize)
     }
-  }, [hashDivRef, spacing])
+  }, [hashDivRef])
 
   return (
     <TableCell {...props}>

package/src/components/TableCell/getRemainingRowWidth.ts

@@ -1,12 +1,11 @@
-/** @description This is the width of all the cells (except the one passed) in the row combined */
+/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */
 export const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {
   let width = 0
   for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
     const item = row?.children.item(i)
     if (item) {
       if (i !== forCell) {
-        const boundingRect = item?.getBoundingClientRect()
-        width += boundingRect?.width ?? 0
+        width += item?.clientWidth ?? 0
       }
     }
   }

package/src/lib/getActualPaddingX.ts

@@ -0,0 +1,61 @@
+export const parseMeausureString = (measure?: string, absolute?: number) => {
+  if (measure !== undefined && measure !== null && measure.length > 0) {
+    if (measure.endsWith('px')) {
+      return parseFloat(measure.substring(0, measure.length - 2))
+    } else if (measure.endsWith('%')) {
+      if (absolute !== undefined) {
+        return (parseFloat(measure.substring(0, measure.length - 1)) / 100) * absolute
+      }
+      throw Error('Error Parsing Measure [missing absolute]')
+    } else if (measure.endsWith('vw')) {
+      return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerWidth
+    } else if (measure.endsWith('vh')) {
+      return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerHeight
+    }
+    throw Error(`Error Parsing Measure [${measure}]`)
+  }
+}
+
+export const parsePadding = (padding: string) => {
+  const parts = padding.split(' ')
+  switch (parts.length) {
+    case 4: {
+      return {
+        bottom: parts[2],
+        left: parts[3],
+        right: parts[1],
+        top: parts[0],
+      }
+    }
+    case 3: {
+      return {
+        bottom: parts[2],
+        right: parts[1],
+        top: parts[0],
+      }
+    }
+    case 2: {
+      return {
+        bottom: parts[0],
+        left: parts[1],
+        right: parts[1],
+        top: parts[0],
+      }
+    }
+    case 1: {
+      return {
+        bottom: parts[0],
+        left: parts[0],
+        right: parts[0],
+        top: parts[0],
+      }
+    }
+  }
+}
+
+export const getActualPaddingX = (element: HTMLElement) => {
+  const padding = parsePadding(window.getComputedStyle(element, null).getPropertyValue('padding'))
+  const paddingLeft = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue('padding-left') ?? padding?.left, element.clientWidth) ?? 0
+  const paddingRight = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue('padding-right') ?? padding?.right, element.clientWidth) ?? 0
+  return paddingLeft + paddingRight
+}

package/src/lib/index.ts

@@ -1,4 +1,5 @@
 export * from './archivistPresets'
 export * from './assertDefinedEx'
 export * from './divinerPresets'
+export * from './getActualPaddingX'
 export * from './networkComponents'