@xyo-network/react-shared 2.25.73 → 2.25.76

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

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_common_1 = require("@xylabs/react-common");
 const react_1 = require("react");
+const lib_1 = require("../../lib");
 const findParent_1 = require("./findParent");
 const getRemainingRowWidth_1 = require("./getRemainingRowWidth");
 const getSmallestParentWidth_1 = require("./getSmallestParentWidth");
@@ -17,9 +18,6 @@ const EllipsisTableCell = (_a) => {
     var { value, to, href } = _a, props = tslib_1.__rest(_a, ["value", "to", "href"]);
     const [calcCellWidth, setCalcCellWidth] = (0, react_1.useState)(0);
     const hashDivRef = (0, react_1.useRef)(null);
-    const theme = (0, material_1.useTheme)();
-    // We calulate the spacing since we know that table rows use padding.
-    const spacing = parseInt(theme.spacing(4).substring(-2));
     (0, react_1.useEffect)(() => {
         var _a;
         const currentElement = (_a = hashDivRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -28,7 +26,10 @@ const EllipsisTableCell = (_a) => {
         const checkWidth = (cell) => {
             const smallestParentWidth = (0, getSmallestParentWidth_1.getSmallestParentWidth)(cell);
             if (smallestParentWidth && row) {
-                const remainderWidth = smallestParentWidth - (0, getRemainingRowWidth_1.getRemainingRowWidth)(row) - spacing;
+                const remainingWidth = (0, getRemainingRowWidth_1.getRemainingRowWidth)(row);
+                const actualPaddingX = (0, lib_1.getActualPaddingX)(cell);
+                const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
+                cell.style.width = `${remainderWidth}`;
                 setCalcCellWidth(remainderWidth);
             }
         };
@@ -40,18 +41,26 @@ const EllipsisTableCell = (_a) => {
         if (cell) {
             checkWidth(cell);
             window.addEventListener('resize', onResize);
+            row === null || row === void 0 ? void 0 : row.addEventListener('resize', onResize);
         }
         return () => {
             window.removeEventListener('resize', onResize);
+            row === null || row === void 0 ? void 0 : row.removeEventListener('resize', onResize);
         };
-    }, [hashDivRef, spacing]);
-    return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: hashDivRef, style: {
-                display: 'block',
-                maxWidth: calcCellWidth,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-            } }, { children: href || to ? ((0, jsx_runtime_1.jsx)(react_common_1.LinkEx, Object.assign({ to: to, href: href, target: href ? '_blank' : undefined }, { children: (0, jsx_runtime_1.jsx)(TableCellValue, { value: value, hashCellWidth: calcCellWidth }) }))) : ((0, jsx_runtime_1.jsx)(TableCellValue, { value: value, hashCellWidth: calcCellWidth })) })) })));
+    }, [hashDivRef]);
+    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)(react_common_1.LinkEx, Object.assign({ style: {
+                    display: 'block',
+                    maxWidth: calcCellWidth,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, to: to, href: href, target: href ? '_blank' : undefined }, { children: value }))) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: {
+                    display: 'block',
+                    maxWidth: calcCellWidth,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                } }, { children: 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":"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"}
+{"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

@@ -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/cjs/components/TableCell/getRemainingRowWidth.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRemainingRowWidth = void 0;
-/** @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 */
 const getRemainingRowWidth = (row, forCell = 0) => {
     var _a, _b;
     let width = 0;
@@ -9,8 +9,7 @@ const getRemainingRowWidth = (row, forCell = 0) => {
         const item = row === null || row === void 0 ? void 0 : row.children.item(i);
         if (item) {
             if (i !== forCell) {
-                const boundingRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
-                width += (_b = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.width) !== null && _b !== void 0 ? _b : 0;
+                width += (_b = item === null || item === void 0 ? void 0 : item.clientWidth) !== null && _b !== void 0 ? _b : 0;
             }
         }
     }

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

@@ -1 +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"}
+{"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":";;;AAAA,mIAAmI;AAC5H,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,KAAK,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,mCAAI,CAAC,CAAA;aAChC;SACF;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAZY,QAAA,oBAAoB,wBAYhC"}

package/dist/cjs/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/cjs/lib/getActualPaddingX.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getActualPaddingX = exports.parsePadding = exports.parseMeausureString = void 0;
+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}]`);
+    }
+};
+exports.parseMeausureString = parseMeausureString;
+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],
+            };
+        }
+    }
+};
+exports.parsePadding = parsePadding;
+const getActualPaddingX = (element) => {
+    var _a, _b, _c, _d;
+    const padding = (0, exports.parsePadding)(window.getComputedStyle(element, null).getPropertyValue('padding'));
+    const paddingLeft = (_b = (0, exports.parseMeausureString)((_a = window.getComputedStyle(element, null).getPropertyValue('padding-left')) !== null && _a !== void 0 ? _a : padding === null || padding === void 0 ? void 0 : padding.left, element.clientWidth)) !== null && _b !== void 0 ? _b : 0;
+    const paddingRight = (_d = (0, exports.parseMeausureString)((_c = window.getComputedStyle(element, null).getPropertyValue('padding-right')) !== null && _c !== void 0 ? _c : padding === null || padding === void 0 ? void 0 : padding.right, element.clientWidth)) !== null && _d !== void 0 ? _d : 0;
+    return paddingLeft + paddingRight;
+};
+exports.getActualPaddingX = getActualPaddingX;
+//# sourceMappingURL=getActualPaddingX.js.map

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

@@ -4,5 +4,6 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./archivistPresets"), exports);
 tslib_1.__exportStar(require("./assertDefinedEx"), exports);
 tslib_1.__exportStar(require("./divinerPresets"), exports);
+tslib_1.__exportStar(require("./getActualPaddingX"), exports);
 tslib_1.__exportStar(require("./networkComponents"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":";;;AAAA,6DAAkC;AAClC,4DAAiC;AACjC,2DAAgC;AAChC,8DAAmC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":";;;AAAA,6DAAkC;AAClC,4DAAiC;AACjC,2DAAgC;AAChC,8DAAmC;AACnC,8DAAmC"}

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

@@ -1,6 +1,15 @@
-/// <reference types="react" />
 import { CardProps } from '@mui/material';
+import { CSSProperties } from 'react';
 export interface CardExProps extends CardProps {
     gradient?: 'border' | 'background';
+    display?: CSSProperties['display'];
+    flexDirection?: CSSProperties['flexDirection'];
+    flexGrow?: CSSProperties['flexGrow'];
+    alignItems?: CSSProperties['alignItems'];
+    alignContent?: CSSProperties['alignContent'];
+    alignSelf?: CSSProperties['alignSelf'];
+    justifyItems?: CSSProperties['justifyItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+    justifySelf?: CSSProperties['justifySelf'];
 }
 export declare const CardEx: React.FC<CardExProps>;

package/dist/esm/components/CardEx.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '@mui/material';
 import { useGradientStyles } from '../hooks';
-export const CardEx = ({ style, gradient, ...props }) => {
+export const CardEx = ({ display, flexDirection = 'column', flexGrow, alignItems = 'stretch', alignContent, alignSelf, justifyItems = 'flex-start', justifyContent = 'flex-start', justifySelf, style, gradient, ...props }) => {
     const { styles } = useGradientStyles();
     const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {};
-    return _jsx(Card, { style: { ...gradientStyle, ...style }, ...props });
+    return (_jsx(Card, { style: { ...gradientStyle, alignContent, alignItems, alignSelf, display, flexDirection, flexGrow, justifyContent, justifyItems, justifySelf, ...style }, ...props }));
 };
 //# sourceMappingURL=CardEx.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardEx.js","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAA;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAM5C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7E,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAChH,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAA;AACnE,CAAC,CAAA"}
+{"version":3,"file":"CardEx.js","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAA;AAG/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAe5C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,EACP,aAAa,GAAG,QAAQ,EACxB,QAAQ,EACR,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,SAAS,EACT,YAAY,GAAG,YAAY,EAC3B,cAAc,GAAG,YAAY,EAC7B,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAChH,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,GAAG,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAC7K,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/PageCard.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from '@mui/icons-material/Refresh';
-import { Card, CardHeader, IconButton } from '@mui/material';
+import { CardHeader, IconButton } from '@mui/material';
+import { CardEx } from './CardEx';
 import { TypographyEx } from './TypographyEx';
 export const PageCard = ({ subheader, title, icon, onRefresh, children, style, ...props }) => {
-    return (_jsxs(Card, { style: { position: 'relative', ...style }, ...props, children: [icon?.({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } }), _jsx(CardHeader, { title: _jsx(TypographyEx, { variant: "h4", gradient: "text", children: title }), subheader: subheader, action: _jsx(_Fragment, { children: onRefresh ? (_jsx(IconButton, { onClick: () => onRefresh?.(), children: _jsx(RefreshIcon, {}) })) : null }) }), children] }));
+    return (_jsxs(CardEx, { style: { position: 'relative', ...style }, ...props, children: [icon?.({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } }), _jsx(CardHeader, { title: _jsx(TypographyEx, { variant: "h4", gradient: "text", children: title }), subheader: subheader, action: _jsx(_Fragment, { children: onRefresh ? (_jsx(IconButton, { onClick: () => onRefresh?.(), children: _jsx(RefreshIcon, {}) })) : null }) }), children] }));
 };
 //# sourceMappingURL=PageCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageCard.js","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,UAAU,EAA8B,UAAU,EAAgB,MAAM,eAAe,CAAA;AAGtG,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQ7C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpH,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aACvD,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,EACzG,KAAC,UAAU,IACT,KAAK,EACH,KAAC,YAAY,IAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,YACvC,KAAK,GACO,EAEjB,SAAS,EAAE,SAAS,EACpB,MAAM,EACJ,4BACG,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,YACtC,KAAC,WAAW,KAAG,GACJ,CACd,CAAC,CAAC,CAAC,IAAI,GACP,GAEL,EACD,QAAQ,IACJ,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"PageCard.js","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,UAAU,EAA8B,UAAU,EAAgB,MAAM,eAAe,CAAA;AAGhG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQ7C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpH,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aACzD,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,EACzG,KAAC,UAAU,IACT,KAAK,EACH,KAAC,YAAY,IAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,YACvC,KAAK,GACO,EAEjB,SAAS,EAAE,SAAS,EACpB,MAAM,EACJ,4BACG,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,YACtC,KAAC,WAAW,KAAG,GACJ,CACd,CAAC,CAAC,CAAC,IAAI,GACP,GAEL,EACD,QAAQ,IACF,CACV,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,22 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableCell, Typography } from '@mui/material';
+import { TableCell } 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';
-const TableCellValue = ({ style, hashCellWidth, value, ...props }) => {
-    return (_jsx(Typography, { variant: "body2", fontFamily: "monospace", style: {
-            display: 'block',
-            maxWidth: hashCellWidth,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            ...style,
-        }, ...props, children: value }));
-};
-export const EllipsisTableCell = ({ value, to, href, ...props }) => {
+export const EllipsisTableCell = ({ children, value, to, href, ...props }) => {
     const [calcCellWidth, setCalcCellWidth] = useState(0);
     const hashDivRef = useRef(null);
     useEffect(() => {
@@ -48,7 +38,13 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
             row?.removeEventListener('resize', onResize);
         };
     }, [hashDivRef]);
-    return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, children: href || to ? (_jsx(LinkEx, { style: {
+    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',

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/package.json

@@ -13,7 +13,7 @@
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.4",
+    "@mui/material": "^5.8.5",
     "@mui/styles": "^5.8.4",
     "@xylabs/pixel": "^1.3.9",
     "@xylabs/react-button": "^2.14.4",
@@ -37,7 +37,7 @@
     "@storybook/react": "^6.5.9",
     "@xylabs/pixel": "^1.3.9",
     "@xylabs/sdk-js": "^2.5.9",
-    "@xylabs/tsconfig": "^1.0.13"
+    "@xylabs/tsconfig": "^1.0.14"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -88,6 +88,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.73",
+  "version": "2.25.76",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/CardEx.tsx

@@ -1,13 +1,38 @@
 import { Card, CardProps } from '@mui/material'
+import { CSSProperties } from 'react'
 
 import { useGradientStyles } from '../hooks'
 
 export interface CardExProps extends CardProps {
   gradient?: 'border' | 'background'
+  display?: CSSProperties['display']
+  flexDirection?: CSSProperties['flexDirection']
+  flexGrow?: CSSProperties['flexGrow']
+  alignItems?: CSSProperties['alignItems']
+  alignContent?: CSSProperties['alignContent']
+  alignSelf?: CSSProperties['alignSelf']
+  justifyItems?: CSSProperties['justifyItems']
+  justifyContent?: CSSProperties['justifyContent']
+  justifySelf?: CSSProperties['justifySelf']
 }
 
-export const CardEx: React.FC<CardExProps> = ({ style, gradient, ...props }) => {
+export const CardEx: React.FC<CardExProps> = ({
+  display,
+  flexDirection = 'column',
+  flexGrow,
+  alignItems = 'stretch',
+  alignContent,
+  alignSelf,
+  justifyItems = 'flex-start',
+  justifyContent = 'flex-start',
+  justifySelf,
+  style,
+  gradient,
+  ...props
+}) => {
   const { styles } = useGradientStyles()
   const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}
-  return <Card style={{ ...gradientStyle, ...style }} {...props} />
+  return (
+    <Card style={{ ...gradientStyle, alignContent, alignItems, alignSelf, display, flexDirection, flexGrow, justifyContent, justifyItems, justifySelf, ...style }} {...props} />
+  )
 }

package/src/components/PageCard.tsx

@@ -1,7 +1,8 @@
 import RefreshIcon from '@mui/icons-material/Refresh'
-import { Card, CardHeader, CardHeaderProps, CardProps, IconButton, SvgIconProps } from '@mui/material'
+import { CardHeader, CardHeaderProps, CardProps, IconButton, SvgIconProps } from '@mui/material'
 import { ReactNode } from 'react'
 
+import { CardEx } from './CardEx'
 import { TypographyEx } from './TypographyEx'
 
 export interface PageCardProps extends CardProps {
@@ -12,7 +13,7 @@ export interface PageCardProps extends CardProps {
 
 export const PageCard: React.FC<PageCardProps> = ({ subheader, title, icon, onRefresh, children, style, ...props }) => {
   return (
-    <Card style={{ position: 'relative', ...style }} {...props}>
+    <CardEx style={{ position: 'relative', ...style }} {...props}>
       {icon?.({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } })}
       <CardHeader
         title={
@@ -32,6 +33,6 @@ export const PageCard: React.FC<PageCardProps> = ({ subheader, title, icon, onRe
         }
       />
       {children}
-    </Card>
+    </CardEx>
   )
 }

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -1,4 +1,4 @@
-import { TableCell, TableCellProps, Typography, TypographyProps } from '@mui/material'
+import { TableCell, TableCellProps } from '@mui/material'
 import { LinkEx } from '@xylabs/react-common'
 import { useEffect, useRef, useState } from 'react'
 import { To } from 'react-router-dom'
@@ -8,38 +8,13 @@ import { findParent } from './findParent'
 import { getRemainingRowWidth } from './getRemainingRowWidth'
 import { getSmallestParentWidth } from './getSmallestParentWidth'
 
-interface TableCellValueProps extends TypographyProps {
-  value: string | undefined
-  hashCellWidth: number | undefined
-}
-
-const TableCellValue: React.FC<TableCellValueProps> = ({ style, hashCellWidth, value, ...props }) => {
-  return (
-    <Typography
-      variant="body2"
-      fontFamily="monospace"
-      style={{
-        display: 'block',
-        maxWidth: hashCellWidth,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        ...style,
-      }}
-      {...props}
-    >
-      {value}
-    </Typography>
-  )
-}
-
 export interface EllipsisTableCellProps extends TableCellProps {
   value?: string
   to?: To | undefined
   href?: string | undefined
 }
 
-export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to, href, ...props }) => {
+export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children, value, to, href, ...props }) => {
   const [calcCellWidth, setCalcCellWidth] = useState<number>(0)
   const hashDivRef = useRef<HTMLDivElement>(null)
 
@@ -79,7 +54,19 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
   return (
     <TableCell {...props}>
       <div ref={hashDivRef}>
-        {href || to ? (
+        {children ? (
+          <span
+            style={{
+              display: 'block',
+              maxWidth: calcCellWidth,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {children}
+          </span>
+        ) : href || to ? (
           <LinkEx
             style={{
               display: 'block',