@xyo-network/react-shared 2.37.6 → 2.37.8

package/dist/cjs/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/cjs/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/cjs/components/Ellipsize.js

@@ -1,27 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ellipsize = void 0;
+exports.EllipsizeBox = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 /**
  * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
  */
 const ComponentName = 'Ellipsize';
 const EllipsizeRoot = (0, material_1.styled)(material_1.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
-        ':before': {
-            content: "'nbsp;'",
-            display: 'block',
+        ':before': Object.assign({ 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',
-        },
+            float: 'left', visibility: 'hidden' }, (beforeLineHeight && { lineHeight: beforeLineHeight })),
     },
 }));
 const EllipsizeInnerWrap = (0, material_1.styled)(material_1.Box, {
@@ -30,7 +28,7 @@ const EllipsizeInnerWrap = (0, material_1.styled)(material_1.Box, {
 })(() => ({
     position: 'relative',
 }));
-const EllipsizeContentWrap = (0, material_1.styled)('span', {
+const EllipsizeContentWrap = (0, material_1.styled)(material_1.Typography, {
     name: ComponentName,
     slot: 'contentWrap',
 })(() => ({
@@ -42,9 +40,20 @@ const EllipsizeContentWrap = (0, material_1.styled)('span', {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 }));
-const Ellipsize = (_a) => {
-    var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(EllipsizeRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(EllipsizeInnerWrap, { children: (0, jsx_runtime_1.jsx)(EllipsizeContentWrap, { children: children }) }) })));
+const useClientHeight = () => {
+    const [contentWrapHeight, setContentWrapHeight] = (0, react_1.useState)();
+    const contentWrapRef = (0, react_1.useCallback)((node) => {
+        if (node !== null) {
+            setContentWrapHeight(node.clientHeight + 'px');
+        }
+    }, []);
+    return { contentWrapHeight, contentWrapRef };
+};
+const EllipsizeBox = (_a) => {
+    var { children, typographyProps } = _a, props = tslib_1.__rest(_a, ["children", "typographyProps"]);
+    // Allow syncing of :before pseudo element height with contentWrapHeight
+    const { contentWrapRef, contentWrapHeight } = useClientHeight();
+    return ((0, jsx_runtime_1.jsx)(EllipsizeRoot, Object.assign({ beforeLineHeight: contentWrapHeight }, props, { children: (0, jsx_runtime_1.jsx)(EllipsizeInnerWrap, { children: (0, jsx_runtime_1.jsx)(EllipsizeContentWrap, Object.assign({ ref: contentWrapRef, component: 'span' }, typographyProps, { children: children })) }) })));
 };
-exports.Ellipsize = Ellipsize;
+exports.EllipsizeBox = EllipsizeBox;
 //# sourceMappingURL=Ellipsize.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Ellipsize.js","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAqD;AAGrD;;GAEG;AAEH,MAAM,aAAa,GAAG,WAAW,CAAA;AAEjC,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,cAAG,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,IAAA,iBAAM,EAAC,cAAG,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,IAAA,iBAAM,EAAC,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;AAEI,MAAM,SAAS,GAAqC,CAAC,EAAsB,EAAE,EAAE;QAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAApB,YAAsB,CAAF;IAC9E,OAAO,CACL,uBAAC,aAAa,oBAAK,KAAK,cACtB,uBAAC,kBAAkB,cACjB,uBAAC,oBAAoB,cAAE,QAAQ,GAAwB,GACpC,IACP,CACjB,CAAA;AACH,CAAC,CAAA;AARY,QAAA,SAAS,aAQrB"}
+{"version":3,"file":"Ellipsize.js","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAkF;AAElF,iCAAiE;AAEjE;;GAEG;AAEH,MAAM,aAAa,GAAG,WAAW,CAAA;AAMjC,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,cAAG,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,kBACP,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,OAAO;YAChB,uGAAuG;YACvG,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,QAAQ,IAEjB,CAAC,gBAAgB,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC,CAC1D;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,kBAAkB,GAAG,IAAA,iBAAM,EAAC,cAAG,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,IAAA,iBAAM,EAAC,qBAAU,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,IAAA,gBAAQ,GAAU,CAAA;IAEpE,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,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;AAWM,MAAM,YAAY,GAA8C,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,eAAe,OAAY,EAAP,KAAK,sBAArC,+BAAuC,CAAF;IAC3G,wEAAwE;IACxE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,eAAe,EAAE,CAAA;IAE/D,OAAO,CACL,uBAAC,aAAa,kBAAC,gBAAgB,EAAE,iBAAiB,IAAM,KAAK,cAC3D,uBAAC,kBAAkB,cACjB,uBAAC,oBAAoB,kBAAC,GAAG,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,IAAM,eAAe,cAC9E,QAAQ,IACY,GACJ,IACP,CACjB,CAAA;AACH,CAAC,CAAA;AAbY,QAAA,YAAY,gBAaxB"}

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

@@ -15,7 +15,7 @@ const EllipsisTableCellRoot = (0, material_1.styled)(material_1.TableCell, {
 }));
 const EllipsisTableCell = (_a) => {
     var { children, href, to, value } = _a, props = tslib_1.__rest(_a, ["children", "href", "to", "value"]);
-    return ((0, jsx_runtime_1.jsx)(EllipsisTableCellRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(Ellipsize_1.Ellipsize, { children: children ? (children) : href || to ? ((0, jsx_runtime_1.jsx)(react_link_1.LinkEx, Object.assign({ to: to, href: href, target: href ? '_blank' : undefined }, { children: value }))) : (value) }) })));
+    return ((0, jsx_runtime_1.jsx)(EllipsisTableCellRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(Ellipsize_1.EllipsizeBox, { children: children ? (children) : href || to ? ((0, jsx_runtime_1.jsx)(react_link_1.LinkEx, Object.assign({ to: to, href: href, target: href ? '_blank' : undefined }, { children: value }))) : (value) }) })));
 };
 exports.EllipsisTableCell = EllipsisTableCell;
 //# sourceMappingURL=EllipsisTableCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAiE;AACjE,mDAA2C;AAI3C,4CAAwC;AAExC,MAAM,qBAAqB,GAAG,IAAA,iBAAM,EAAC,oBAAS,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;AAeI,MAAM,iBAAiB,GAAmD,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,OAAY,EAAP,KAAK,sBAArC,mCAAuC,CAAF;IACrH,OAAO,CACL,uBAAC,qBAAqB,oBAAK,KAAK,cAC9B,uBAAC,qBAAS,cACP,QAAQ,CAAC,CAAC,CAAC,CACV,QAAQ,CACT,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACf,uBAAC,mBAAM,kBAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAC5D,KAAK,IACC,CACV,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACS,IACU,CACzB,CAAA;AACH,CAAC,CAAA;AAhBY,QAAA,iBAAiB,qBAgB7B"}
+{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAiE;AACjE,mDAA2C;AAI3C,4CAA2C;AAE3C,MAAM,qBAAqB,GAAG,IAAA,iBAAM,EAAC,oBAAS,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;AAeI,MAAM,iBAAiB,GAAmD,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,OAAY,EAAP,KAAK,sBAArC,mCAAuC,CAAF;IACrH,OAAO,CACL,uBAAC,qBAAqB,oBAAK,KAAK,cAC9B,uBAAC,wBAAY,cACV,QAAQ,CAAC,CAAC,CAAC,CACV,QAAQ,CACT,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACf,uBAAC,mBAAM,kBAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAC5D,KAAK,IACC,CACV,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACY,IACO,CACzB,CAAA;AACH,CAAC,CAAA;AAhBY,QAAA,iBAAiB,qBAgB7B"}

package/dist/cjs/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/cjs/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/cjs/components/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Ampersand"), exports);
 tslib_1.__exportStar(require("./BasicHero"), exports);
+tslib_1.__exportStar(require("./Ellipsize"), exports);
 tslib_1.__exportStar(require("./ErrorBoundry"), exports);
 tslib_1.__exportStar(require("./ListItemButtonEx"), exports);
 tslib_1.__exportStar(require("./NotFound"), exports);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,sDAA2B;AAC3B,sDAA2B;AAC3B,yDAA8B;AAC9B,6DAAkC;AAClC,qDAA0B;AAC1B,iDAAsB;AACtB,6DAAkC;AAClC,4DAAiC;AACjC,8DAAmC;AACnC,sDAA2B;AAC3B,qDAA0B;AAC1B,sDAA2B;AAC3B,yDAA8B;AAC9B,yDAA8B;AAC9B,gEAAqC;AACrC,qEAA0C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,sDAA2B;AAC3B,sDAA2B;AAC3B,sDAA2B;AAC3B,yDAA8B;AAC9B,6DAAkC;AAClC,qDAA0B;AAC1B,iDAAsB;AACtB,6DAAkC;AAClC,4DAAiC;AACjC,8DAAmC;AACnC,sDAA2B;AAC3B,qDAA0B;AAC1B,sDAA2B;AAC3B,yDAA8B;AAC9B,yDAA8B;AAC9B,gEAAqC;AACrC,qEAA0C"}