@xyo-network/react-shared 2.37.6 → 2.37.8

package/dist/esm/components/Ellipsize.d.ts

@@ -1,5 +1,12 @@
-/// <reference types="react" />
-import { BoxProps } from '@mui/material';
+import { BoxProps, TypographyProps } from '@mui/material';
 import { WithChildren } from '@xylabs/react-shared';
-export declare const Ellipsize: React.FC<WithChildren<BoxProps>>;
+import React, { ElementType } from 'react';
+interface TypographyWithComponentProps<Comp extends ElementType = ElementType> extends TypographyProps {
+    component?: Comp;
+}
+export interface EllipsizeBoxProps extends BoxProps {
+    typographyProps?: TypographyWithComponentProps;
+}
+export declare const EllipsizeBox: React.FC<WithChildren<EllipsizeBoxProps>>;
+export {};
 //# sourceMappingURL=Ellipsize.d.ts.map

package/dist/esm/components/Ellipsize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsize.d.ts","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAO,QAAQ,EAAU,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AA6CnD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAQtD,CAAA"}
+{"version":3,"file":"Ellipsize.d.ts","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAsB,eAAe,EAAE,MAAM,eAAe,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAyB,MAAM,OAAO,CAAA;AAiEjE,UAAU,4BAA4B,CAAC,IAAI,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,eAAe;IACpG,SAAS,CAAC,EAAE,IAAI,CAAA;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,eAAe,CAAC,EAAE,4BAA4B,CAAA;CAC/C;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAalE,CAAA"}

package/dist/esm/components/Ellipsize.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, styled } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
+import { useCallback, useState } from 'react';
 /**
  * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
  */
 const ComponentName = 'Ellipsize';
 const EllipsizeRoot = styled(Box, {
     name: ComponentName,
+    shouldForwardProp: (prop) => prop !== 'beforeLineHeight',
     slot: 'Root',
-})(() => ({
+})(({ beforeLineHeight }) => ({
     '&': {
         // 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
@@ -17,6 +19,8 @@ const EllipsizeRoot = styled(Box, {
             // take the pseudo element out of the `display: block` flow so it won't push against our actual content
             float: 'left',
             visibility: 'hidden',
+            // since we are `display: block`, lineHeight is the height
+            ...(beforeLineHeight && { lineHeight: beforeLineHeight }),
         },
     },
 }));
@@ -26,7 +30,7 @@ const EllipsizeInnerWrap = styled(Box, {
 })(() => ({
     position: 'relative',
 }));
-const EllipsizeContentWrap = styled('span', {
+const EllipsizeContentWrap = styled(Typography, {
     name: ComponentName,
     slot: 'contentWrap',
 })(() => ({
@@ -38,7 +42,18 @@ const EllipsizeContentWrap = styled('span', {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 }));
-export const Ellipsize = ({ children, ...props }) => {
-    return (_jsx(EllipsizeRoot, { ...props, children: _jsx(EllipsizeInnerWrap, { children: _jsx(EllipsizeContentWrap, { children: children }) }) }));
+const useClientHeight = () => {
+    const [contentWrapHeight, setContentWrapHeight] = useState();
+    const contentWrapRef = useCallback((node) => {
+        if (node !== null) {
+            setContentWrapHeight(node.clientHeight + 'px');
+        }
+    }, []);
+    return { contentWrapHeight, contentWrapRef };
+};
+export const EllipsizeBox = ({ children, typographyProps, ...props }) => {
+    // Allow syncing of :before pseudo element height with contentWrapHeight
+    const { contentWrapRef, contentWrapHeight } = useClientHeight();
+    return (_jsx(EllipsizeRoot, { beforeLineHeight: contentWrapHeight, ...props, children: _jsx(EllipsizeInnerWrap, { children: _jsx(EllipsizeContentWrap, { ref: contentWrapRef, component: 'span', ...typographyProps, children: children }) }) }));
 };
 //# sourceMappingURL=Ellipsize.js.map

package/dist/esm/components/Ellipsize.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsize.js","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAY,MAAM,EAAE,MAAM,eAAe,CAAA;AAGrD;;GAEG;AAEH,MAAM,aAAa,GAAG,WAAW,CAAA;AAEjC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,EAAE;IAChC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,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;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,EAAE;IACrC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE;IAC1C,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;CACpB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,WAAW;IACvB,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,SAAS,GAAqC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpF,OAAO,CACL,KAAC,aAAa,OAAK,KAAK,YACtB,KAAC,kBAAkB,cACjB,KAAC,oBAAoB,cAAE,QAAQ,GAAwB,GACpC,GACP,CACjB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Ellipsize.js","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAY,MAAM,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAElF,OAAc,EAAe,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEjE;;GAEG;AAEH,MAAM,aAAa,GAAG,WAAW,CAAA;AAMjC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,EAAE;IAChC,IAAI,EAAE,aAAa;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,kBAAkB;IACxD,IAAI,EAAE,MAAM;CACb,CAAC,CAAqB,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC;IAChD,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;YACpB,0DAA0D;YAC1D,GAAG,CAAC,gBAAgB,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC;SAC1D;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,EAAE;IACrC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,EAAE;IAC9C,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;CACpB,CAAC,CAA+B,GAAG,EAAE,CAAC,CAAC;IACtC,UAAU,EAAE,WAAW;IACvB,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,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,EAAU,CAAA;IAEpE,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,IAAiB,EAAE,EAAE;QACvD,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,oBAAoB,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,CAAA;SAC/C;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA;AAC9C,CAAC,CAAA;AAWD,MAAM,CAAC,MAAM,YAAY,GAA8C,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjH,wEAAwE;IACxE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,eAAe,EAAE,CAAA;IAE/D,OAAO,CACL,KAAC,aAAa,IAAC,gBAAgB,EAAE,iBAAiB,KAAM,KAAK,YAC3D,KAAC,kBAAkB,cACjB,KAAC,oBAAoB,IAAC,GAAG,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,KAAM,eAAe,YAC9E,QAAQ,GACY,GACJ,GACP,CACjB,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled, TableCell } from '@mui/material';
 import { LinkEx } from '@xylabs/react-link';
-import { Ellipsize } from '../Ellipsize';
+import { EllipsizeBox } from '../Ellipsize';
 const EllipsisTableCellRoot = styled(TableCell, {
     name: 'EllipsisTableCell',
     shouldForwardProp: (prop) => prop !== 'width',
@@ -10,6 +10,6 @@ const EllipsisTableCellRoot = styled(TableCell, {
     width,
 }));
 export const EllipsisTableCell = ({ children, href, to, value, ...props }) => {
-    return (_jsx(EllipsisTableCellRoot, { ...props, children: _jsx(Ellipsize, { children: children ? (children) : href || to ? (_jsx(LinkEx, { to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (value) }) }));
+    return (_jsx(EllipsisTableCellRoot, { ...props, children: _jsx(EllipsizeBox, { 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":";AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAI3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE;IAC9C,IAAI,EAAE,mBAAmB;IACzB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;IAC7C,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1B,KAAK;CACN,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,SAAS,cACP,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,GACS,GACU,CACzB,CAAA;AACH,CAAC,CAAA"}
+{"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,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAE3C,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE;IAC9C,IAAI,EAAE,mBAAmB;IACzB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;IAC7C,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1B,KAAK;CACN,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,YAAY,cACV,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,GACY,GACO,CACzB,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,5 +1,6 @@
 export * from './Ampersand';
 export * from './BasicHero';
+export * from './Ellipsize';
 export * from './ErrorBoundry';
 export * from './ListItemButtonEx';
 export * from './NotFound';

package/dist/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA"}

package/dist/esm/components/index.js

@@ -1,5 +1,6 @@
 export * from './Ampersand';
 export * from './BasicHero';
+export * from './Ellipsize';
 export * from './ErrorBoundry';
 export * from './ListItemButtonEx';
 export * from './NotFound';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA"}

package/package.json

@@ -69,5 +69,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.37.6"
+  "version": "2.37.8"
 }

package/src/components/Ellipsize.tsx

@@ -1,5 +1,6 @@
-import { Box, BoxProps, styled } from '@mui/material'
+import { Box, BoxProps, styled, Typography, TypographyProps } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
+import React, { ElementType, useCallback, useState } from 'react'
 
 /**
  * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
@@ -7,10 +8,15 @@ import { WithChildren } from '@xylabs/react-shared'
 
 const ComponentName = 'Ellipsize'
 
+interface EllipsizeRootProps {
+  beforeLineHeight?: string | number
+}
+
 const EllipsizeRoot = styled(Box, {
   name: ComponentName,
+  shouldForwardProp: (prop) => prop !== 'beforeLineHeight',
   slot: 'Root',
-})(() => ({
+})<EllipsizeRootProps>(({ beforeLineHeight }) => ({
   '&': {
     // 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
@@ -20,6 +26,8 @@ const EllipsizeRoot = styled(Box, {
       // take the pseudo element out of the `display: block` flow so it won't push against our actual content
       float: 'left',
       visibility: 'hidden',
+      // since we are `display: block`, lineHeight is the height
+      ...(beforeLineHeight && { lineHeight: beforeLineHeight }),
     },
   },
 }))
@@ -31,10 +39,10 @@ const EllipsizeInnerWrap = styled(Box, {
   position: 'relative',
 }))
 
-const EllipsizeContentWrap = styled('span', {
+const EllipsizeContentWrap = styled(Typography, {
   name: ComponentName,
   slot: 'contentWrap',
-})(() => ({
+})<TypographyWithComponentProps>(() => ({
   fontFamily: 'monospace',
   left: 0,
   overflow: 'hidden',
@@ -44,11 +52,37 @@ const EllipsizeContentWrap = styled('span', {
   whiteSpace: 'nowrap',
 }))
 
-export const Ellipsize: React.FC<WithChildren<BoxProps>> = ({ children, ...props }) => {
+const useClientHeight = () => {
+  const [contentWrapHeight, setContentWrapHeight] = useState<string>()
+
+  const contentWrapRef = useCallback((node: HTMLElement) => {
+    if (node !== null) {
+      setContentWrapHeight(node.clientHeight + 'px')
+    }
+  }, [])
+
+  return { contentWrapHeight, contentWrapRef }
+}
+
+// See - https://mui.com/material-ui/guides/composition/#with-typescript
+interface TypographyWithComponentProps<Comp extends ElementType = ElementType> extends TypographyProps {
+  component?: Comp
+}
+
+export interface EllipsizeBoxProps extends BoxProps {
+  typographyProps?: TypographyWithComponentProps
+}
+
+export const EllipsizeBox: React.FC<WithChildren<EllipsizeBoxProps>> = ({ children, typographyProps, ...props }) => {
+  // Allow syncing of :before pseudo element height with contentWrapHeight
+  const { contentWrapRef, contentWrapHeight } = useClientHeight()
+
   return (
-    <EllipsizeRoot {...props}>
+    <EllipsizeRoot beforeLineHeight={contentWrapHeight} {...props}>
       <EllipsizeInnerWrap>
-        <EllipsizeContentWrap>{children}</EllipsizeContentWrap>
+        <EllipsizeContentWrap ref={contentWrapRef} component={'span'} {...typographyProps}>
+          {children}
+        </EllipsizeContentWrap>
       </EllipsizeInnerWrap>
     </EllipsizeRoot>
   )

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -3,7 +3,7 @@ import { LinkEx } from '@xylabs/react-link'
 import { WithChildren } from '@xylabs/react-shared'
 import { To } from 'react-router-dom'
 
-import { Ellipsize } from '../Ellipsize'
+import { EllipsizeBox } from '../Ellipsize'
 
 const EllipsisTableCellRoot = styled(TableCell, {
   name: 'EllipsisTableCell',
@@ -29,7 +29,7 @@ export interface EllipsisTableCellProps extends TableCellProps {
 export const EllipsisTableCell: React.FC<WithChildren<EllipsisTableCellProps>> = ({ children, href, to, value, ...props }) => {
   return (
     <EllipsisTableCellRoot {...props}>
-      <Ellipsize>
+      <EllipsizeBox>
         {children ? (
           children
         ) : href || to ? (
@@ -39,7 +39,7 @@ export const EllipsisTableCell: React.FC<WithChildren<EllipsisTableCellProps>> =
         ) : (
           value
         )}
-      </Ellipsize>
+      </EllipsizeBox>
     </EllipsisTableCellRoot>
   )
 }

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Ampersand'
 export * from './BasicHero'
+export * from './Ellipsize'
 export * from './ErrorBoundry'
 export * from './ListItemButtonEx'
 export * from './NotFound'