@xyo-network/react-shared 2.36.3 → 2.37.1

package/dist/esm/components/TableCell/EllipsisTableCell.d.ts

@@ -1,10 +1,18 @@
 /// <reference types="react" />
 import { TableCellProps } from '@mui/material';
+import { WithChildren } from '@xylabs/react-shared';
 import { To } from 'react-router-dom';
 export interface EllipsisTableCellProps extends TableCellProps {
+    /**
+     * Width of the table cell.
+     *
+     * Note: When using percentages, this value can be different than what you expect
+     * if used on a cell that is not the first cell in the first row.
+     */
+    width?: string | number;
+    href?: string;
+    to?: To;
     value?: string;
-    to?: To | undefined;
-    href?: string | undefined;
 }
-export declare const EllipsisTableCell: React.FC<EllipsisTableCellProps>;
+export declare const EllipsisTableCell: React.FC<WithChildren<EllipsisTableCellProps>>;
 //# sourceMappingURL=EllipsisTableCell.d.ts.map

package/dist/esm/components/TableCell/EllipsisTableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EllipsisTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,eAAe,CAAA;AAGzD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAOrC,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmF9D,CAAA"}
+{"version":3,"file":"EllipsisTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,cAAc,EAAE,MAAM,eAAe,CAAA;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AA8CrC,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAkB5E,CAAA"}

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

@@ -1,61 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableCell } from '@mui/material';
+import { styled, TableCell } from '@mui/material';
 import { LinkEx } from '@xylabs/react-link';
-import { useEffect, useRef, useState } from 'react';
-import { getActualPaddingX } from '../../lib';
-import { findParent } from './findParent';
-import { getRemainingRowWidth } from './getRemainingRowWidth';
-import { getSmallestParentWidth } from './getSmallestParentWidth';
-export const EllipsisTableCell = ({ children, value, to, href, ...props }) => {
-    const [calcCellWidth, setCalcCellWidth] = useState(0);
-    const hashDivRef = useRef(null);
-    useEffect(() => {
-        const currentElement = hashDivRef.current?.parentElement;
-        const cell = findParent('td', currentElement);
-        const row = findParent('tr', currentElement);
-        const checkWidth = (cell) => {
-            const smallestParentWidth = getSmallestParentWidth(cell);
-            if (smallestParentWidth && row) {
-                const remainingWidth = getRemainingRowWidth(row);
-                const actualPaddingX = getActualPaddingX(cell);
-                const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
-                cell.style.width = `${remainderWidth}`;
-                setCalcCellWidth(remainderWidth);
-            }
-        };
-        const onResize = () => {
-            if (cell) {
-                checkWidth(cell);
-            }
-        };
-        if (cell) {
-            checkWidth(cell);
-            window.addEventListener('resize', onResize);
-            row?.addEventListener('resize', onResize);
-        }
-        return () => {
-            window.removeEventListener('resize', onResize);
-            row?.removeEventListener('resize', onResize);
-        };
-    }, [hashDivRef]);
-    return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, children: children ? (_jsx("span", { style: {
-                    display: 'block',
-                    maxWidth: calcCellWidth,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                }, children: children })) : href || to ? (_jsx(LinkEx, { style: {
-                    display: 'block',
-                    maxWidth: calcCellWidth,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                }, to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (_jsx("span", { style: {
-                    display: 'block',
-                    maxWidth: calcCellWidth,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                }, children: value })) }) }));
+/**
+ * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
+ */
+const ComponentName = 'EllipsisTableCell';
+const EllipsisTableCellRoot = styled(TableCell, {
+    name: ComponentName,
+    shouldForwardProp: (prop) => prop !== 'width',
+    slot: 'Root',
+})(({ width = '100%' }) => ({
+    '&': {
+        // because the cell content ends up absolutely positioned, the cell doesn't know the content height.
+        // the pseudo element with a hidden character establishes the proper height of the content and hides it
+        ':before': {
+            content: "'nbsp;'",
+            display: 'block',
+            // take the pseudo element out of the `display: block` flow so it won't push against our actual content
+            float: 'left',
+            visibility: 'hidden',
+        },
+        width,
+    },
+}));
+const EllipsisTableCellInnerWrap = styled('div', {
+    name: ComponentName,
+    slot: 'innerWrap',
+})(() => ({
+    position: 'relative',
+}));
+const EllipsisTableCellContentWrap = styled('span', {
+    name: ComponentName,
+    slot: 'contentWrap',
+})(() => ({
+    left: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    right: 0,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));
+export const EllipsisTableCell = ({ children, href, to, value, ...props }) => {
+    return (_jsx(EllipsisTableCellRoot, { ...props, children: _jsx(EllipsisTableCellInnerWrap, { children: _jsx(EllipsisTableCellContentWrap, { children: children ? (children) : href || to ? (_jsx(LinkEx, { to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (value) }) }) }));
 };
 //# sourceMappingURL=EllipsisTableCell.js.map

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":";AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAI3C;;GAEG;AAEH,MAAM,aAAa,GAAG,mBAAmB,CAAA;AAEzC,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE;IAC9C,IAAI,EAAE,aAAa;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;IAC7C,IAAI,EAAE,MAAM;CACb,CAAC,CAAyB,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAClD,GAAG,EAAE;QACH,oGAAoG;QACpG,uGAAuG;QACvG,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,OAAO;YAChB,uGAAuG;YACvG,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,QAAQ;SACrB;QACD,KAAK;KACN;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/C,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,4BAA4B,GAAG,MAAM,CAAC,MAAM,EAAE;IAClD,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;CACpB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC,CAAA;AAeH,MAAM,CAAC,MAAM,iBAAiB,GAAmD,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3H,OAAO,CACL,KAAC,qBAAqB,OAAK,KAAK,YAC9B,KAAC,0BAA0B,cACzB,KAAC,4BAA4B,cAC1B,QAAQ,CAAC,CAAC,CAAC,CACV,QAAQ,CACT,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAC5D,KAAK,GACC,CACV,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GAC4B,GACJ,GACP,CACzB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/TableCell/EllipsisTableCellDeprecated.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TableCellProps } from '@mui/material';
+import { To } from 'react-router-dom';
+export interface EllipsisTableCellProps extends TableCellProps {
+    value?: string;
+    to?: To | undefined;
+    href?: string | undefined;
+    forCell?: number;
+}
+/** @deprecated - use new EllipsisTableCell */
+export declare const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps>;
+//# sourceMappingURL=EllipsisTableCellDeprecated.d.ts.map

package/dist/esm/components/TableCell/EllipsisTableCellDeprecated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EllipsisTableCellDeprecated.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCellDeprecated.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAY,MAAM,eAAe,CAAA;AAGnE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAOrC,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,8CAA8C;AAC9C,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuFxE,CAAA"}

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableCell, useTheme } from '@mui/material';
+import { LinkEx } from '@xylabs/react-link';
+import { useEffect, useRef, useState } from 'react';
+import { getActualPaddingX } from '../../lib';
+import { findParent } from './findParent';
+import { getRemainingRowWidth } from './getRemainingRowWidth';
+import { getSmallestParentWidth } from './getSmallestParentWidth';
+/** @deprecated - use new EllipsisTableCell */
+export const EllipsisTableCellDeprecated = ({ children, value, to, forCell, href, ...props }) => {
+    const [calcCellWidth, setCalcCellWidth] = useState(0);
+    const hashDivRef = useRef(null);
+    const theme = useTheme();
+    useEffect(() => {
+        const currentElement = hashDivRef.current?.parentElement;
+        const cell = findParent('td', currentElement);
+        const row = findParent('tr', currentElement);
+        const checkWidth = (cell) => {
+            const smallestParentWidth = getSmallestParentWidth(cell);
+            if (smallestParentWidth && row) {
+                const remainingWidth = getRemainingRowWidth(row, forCell);
+                const actualPaddingX = getActualPaddingX(cell);
+                const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
+                cell.style.width = `${remainderWidth}`;
+                setCalcCellWidth(remainderWidth);
+            }
+        };
+        const onResize = () => {
+            if (cell) {
+                checkWidth(cell);
+            }
+        };
+        if (cell) {
+            checkWidth(cell);
+            window.addEventListener('resize', onResize);
+            row?.addEventListener('resize', onResize);
+        }
+        return () => {
+            window.removeEventListener('resize', onResize);
+            row?.removeEventListener('resize', onResize);
+        };
+    }, [forCell, hashDivRef]);
+    return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, children: children ? (_jsx("span", { style: {
+                    display: 'block',
+                    maxWidth: calcCellWidth,
+                    minWidth: theme.spacing(10),
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, children: children })) : href || to ? (_jsx(LinkEx, { style: {
+                    display: 'block',
+                    maxWidth: calcCellWidth,
+                    minWidth: theme.spacing(10),
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (_jsx("span", { style: {
+                    display: 'block',
+                    maxWidth: calcCellWidth,
+                    minWidth: theme.spacing(10),
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, children: value })) }) }));
+};
+//# sourceMappingURL=EllipsisTableCellDeprecated.js.map

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

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

package/package.json

@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@xylabs/pixel": "^1.4.5",
-    "@xylabs/react-appbar": "^2.14.20",
-    "@xylabs/react-button": "^2.14.20",
-    "@xylabs/react-flexbox": "^2.14.20",
-    "@xylabs/react-link": "^2.14.20",
-    "@xylabs/react-shared": "^2.14.20",
+    "@xylabs/react-appbar": "^2.15.0",
+    "@xylabs/react-button": "^2.15.0",
+    "@xylabs/react-flexbox": "^2.15.0",
+    "@xylabs/react-link": "^2.15.0",
+    "@xylabs/react-shared": "^2.15.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -69,5 +69,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.36.3"
+  "version": "2.37.1"
 }

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -1,100 +1,81 @@
-import { TableCell, TableCellProps } from '@mui/material'
+import { styled, TableCell, TableCellProps } from '@mui/material'
 import { LinkEx } from '@xylabs/react-link'
-import { useEffect, useRef, useState } from 'react'
+import { WithChildren } from '@xylabs/react-shared'
 import { To } from 'react-router-dom'
 
-import { getActualPaddingX } from '../../lib'
-import { findParent } from './findParent'
-import { getRemainingRowWidth } from './getRemainingRowWidth'
-import { getSmallestParentWidth } from './getSmallestParentWidth'
+/**
+ * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
+ */
 
-export interface EllipsisTableCellProps extends TableCellProps {
-  value?: string
-  to?: To | undefined
-  href?: string | undefined
-}
-
-export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children, value, to, href, ...props }) => {
-  const [calcCellWidth, setCalcCellWidth] = useState<number>(0)
-  const hashDivRef = useRef<HTMLDivElement>(null)
+const ComponentName = 'EllipsisTableCell'
 
-  useEffect(() => {
-    const currentElement = hashDivRef.current?.parentElement
-    const cell = findParent('td', currentElement)
-    const row = findParent('tr', currentElement)
+const EllipsisTableCellRoot = styled(TableCell, {
+  name: ComponentName,
+  shouldForwardProp: (prop) => prop !== 'width',
+  slot: 'Root',
+})<EllipsisTableCellProps>(({ width = '100%' }) => ({
+  '&': {
+    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.
+    // the pseudo element with a hidden character establishes the proper height of the content and hides it
+    ':before': {
+      content: "'nbsp;'",
+      display: 'block',
+      // take the pseudo element out of the `display: block` flow so it won't push against our actual content
+      float: 'left',
+      visibility: 'hidden',
+    },
+    width,
+  },
+}))
 
-    const checkWidth = (cell: HTMLElement) => {
-      const smallestParentWidth = getSmallestParentWidth(cell)
-      if (smallestParentWidth && row) {
-        const remainingWidth = getRemainingRowWidth(row)
-        const actualPaddingX = getActualPaddingX(cell)
-        const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX
-        cell.style.width = `${remainderWidth}`
-        setCalcCellWidth(remainderWidth)
-      }
-    }
+const EllipsisTableCellInnerWrap = styled('div', {
+  name: ComponentName,
+  slot: 'innerWrap',
+})(() => ({
+  position: 'relative',
+}))
 
-    const onResize = () => {
-      if (cell) {
-        checkWidth(cell)
-      }
-    }
+const EllipsisTableCellContentWrap = styled('span', {
+  name: ComponentName,
+  slot: 'contentWrap',
+})(() => ({
+  left: 0,
+  overflow: 'hidden',
+  position: 'absolute',
+  right: 0,
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}))
 
-    if (cell) {
-      checkWidth(cell)
-      window.addEventListener('resize', onResize)
-      row?.addEventListener('resize', onResize)
-    }
-    return () => {
-      window.removeEventListener('resize', onResize)
-      row?.removeEventListener('resize', onResize)
-    }
-  }, [hashDivRef])
+export interface EllipsisTableCellProps extends TableCellProps {
+  /**
+   * Width of the table cell.
+   *
+   * Note: When using percentages, this value can be different than what you expect
+   * if used on a cell that is not the first cell in the first row.
+   */
+  width?: string | number
+  href?: string
+  to?: To
+  value?: string
+}
 
+export const EllipsisTableCell: React.FC<WithChildren<EllipsisTableCellProps>> = ({ children, href, to, value, ...props }) => {
   return (
-    <TableCell {...props}>
-      <div ref={hashDivRef}>
-        {children ? (
-          <span
-            style={{
-              display: 'block',
-              maxWidth: calcCellWidth,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {children}
-          </span>
-        ) : href || to ? (
-          <LinkEx
-            style={{
-              display: 'block',
-              maxWidth: calcCellWidth,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-            to={to}
-            href={href}
-            target={href ? '_blank' : undefined}
-          >
-            {value}
-          </LinkEx>
-        ) : (
-          <span
-            style={{
-              display: 'block',
-              maxWidth: calcCellWidth,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {value}
-          </span>
-        )}
-      </div>
-    </TableCell>
+    <EllipsisTableCellRoot {...props}>
+      <EllipsisTableCellInnerWrap>
+        <EllipsisTableCellContentWrap>
+          {children ? (
+            children
+          ) : href || to ? (
+            <LinkEx to={to} href={href} target={href ? '_blank' : undefined}>
+              {value}
+            </LinkEx>
+          ) : (
+            value
+          )}
+        </EllipsisTableCellContentWrap>
+      </EllipsisTableCellInnerWrap>
+    </EllipsisTableCellRoot>
   )
 }

package/src/components/TableCell/EllipsisTableCellDeprecated.tsx

@@ -0,0 +1,106 @@
+import { TableCell, TableCellProps, useTheme } from '@mui/material'
+import { LinkEx } from '@xylabs/react-link'
+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'
+
+export interface EllipsisTableCellProps extends TableCellProps {
+  value?: string
+  to?: To | undefined
+  href?: string | undefined
+  forCell?: number //cell index for ellipsized table cell
+}
+
+/** @deprecated - use new EllipsisTableCell */
+export const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps> = ({ children, value, to, forCell, href, ...props }) => {
+  const [calcCellWidth, setCalcCellWidth] = useState<number>(0)
+  const hashDivRef = useRef<HTMLDivElement>(null)
+  const theme = useTheme()
+
+  useEffect(() => {
+    const currentElement = hashDivRef.current?.parentElement
+    const cell = findParent('td', currentElement)
+    const row = findParent('tr', currentElement)
+
+    const checkWidth = (cell: HTMLElement) => {
+      const smallestParentWidth = getSmallestParentWidth(cell)
+      if (smallestParentWidth && row) {
+        const remainingWidth = getRemainingRowWidth(row, forCell)
+        const actualPaddingX = getActualPaddingX(cell)
+        const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX
+        cell.style.width = `${remainderWidth}`
+        setCalcCellWidth(remainderWidth)
+      }
+    }
+
+    const onResize = () => {
+      if (cell) {
+        checkWidth(cell)
+      }
+    }
+
+    if (cell) {
+      checkWidth(cell)
+      window.addEventListener('resize', onResize)
+      row?.addEventListener('resize', onResize)
+    }
+    return () => {
+      window.removeEventListener('resize', onResize)
+      row?.removeEventListener('resize', onResize)
+    }
+  }, [forCell, hashDivRef])
+
+  return (
+    <TableCell {...props}>
+      <div ref={hashDivRef}>
+        {children ? (
+          <span
+            style={{
+              display: 'block',
+              maxWidth: calcCellWidth,
+              minWidth: theme.spacing(10),
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {children}
+          </span>
+        ) : href || to ? (
+          <LinkEx
+            style={{
+              display: 'block',
+              maxWidth: calcCellWidth,
+              minWidth: theme.spacing(10),
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+            to={to}
+            href={href}
+            target={href ? '_blank' : undefined}
+          >
+            {value}
+          </LinkEx>
+        ) : (
+          <span
+            style={{
+              display: 'block',
+              maxWidth: calcCellWidth,
+              minWidth: theme.spacing(10),
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {value}
+          </span>
+        )}
+      </div>
+    </TableCell>
+  )
+}

package/src/components/TableCell/EllipsizeTableCell.stories.tsx

@@ -0,0 +1,99 @@
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
+import { ComponentStory, DecoratorFn, Meta } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { EllipsisTableCell } from './EllipsisTableCell'
+
+const TableDecorator: DecoratorFn = (Story, args) => {
+  return (
+    <BrowserRouter>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Heading1</TableCell>
+            <TableCell>Heading2</TableCell>
+            <TableCell>Heading3</TableCell>
+            <TableCell>Heading4</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <Story {...args} />
+        </TableBody>
+      </Table>
+    </BrowserRouter>
+  )
+}
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  component: EllipsisTableCell,
+  decorators: [TableDecorator],
+  title: 'shared/EllipsisTableCell',
+} as Meta
+
+const Template: ComponentStory<typeof EllipsisTableCell> = (props) => {
+  return (
+    <TableRow>
+      <EllipsisTableCell to="/foo" value="As-Link-e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915" {...props} />
+      <TableCell>d2fa4a7d47dad915501ff6b2f860b7992c347</TableCell>
+      <TableCell>d2fa4a7d47dad915</TableCell>
+      <TableCell>e0f05</TableCell>
+    </TableRow>
+  )
+}
+
+const TemplateWithMultiple: ComponentStory<typeof EllipsisTableCell> = (props) => {
+  return (
+    <TableRow>
+      <EllipsisTableCell width="50%" {...props}>
+        As-children-e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
+      </EllipsisTableCell>
+      <EllipsisTableCell width="50%" {...props}>
+        e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
+      </EllipsisTableCell>
+      <TableCell>d2fa4a7d47dad915</TableCell>
+      <TableCell>e0f05</TableCell>
+    </TableRow>
+  )
+}
+
+const TemplateWithMultipleRows: ComponentStory<typeof EllipsisTableCell> = (props) => {
+  return (
+    <>
+      <TableRow>
+        <EllipsisTableCell
+          width="50%"
+          href="http://foo.com"
+          {...props}
+          value="As-href-e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915"
+        />
+        <EllipsisTableCell width="50%" {...props}>
+          e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
+        </EllipsisTableCell>
+        <TableCell>d2fa4a7d47dad915</TableCell>
+        <TableCell>e0f05</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>d2fa4a7d47dad915</TableCell>
+        <TableCell>e0f05</TableCell>
+        <EllipsisTableCell width="50%" {...props}>
+          e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
+        </EllipsisTableCell>
+        <EllipsisTableCell width="50%" {...props}>
+          e0f01ab62384d8d501ff6b2f860b7992c347a6b8ae07bd5fd2fa4a7d47dad915
+        </EllipsisTableCell>
+      </TableRow>
+    </>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithMultiple = TemplateWithMultiple.bind({})
+WithMultiple.args = {}
+
+const WithMultipleRows = TemplateWithMultipleRows.bind({})
+WithMultipleRows.args = {}
+
+export { Default, WithMultiple, WithMultipleRows }