@xyo-network/react-shared 2.25.67 → 2.25.70

package/dist/cjs/components/PageCard.d.ts

@@ -0,0 +1,8 @@
+import { CardHeaderProps, CardProps, SvgIconProps } from '@mui/material';
+import { ReactNode } from 'react';
+export interface PageCardProps extends CardProps {
+    icon?: (props?: SvgIconProps) => ReactNode;
+    onRefresh?: () => void;
+    subheader?: CardHeaderProps['subheader'];
+}
+export declare const PageCard: React.FC<PageCardProps>;

package/dist/cjs/components/PageCard.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageCard = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Refresh_1 = tslib_1.__importDefault(require("@mui/icons-material/Refresh"));
+const material_1 = require("@mui/material");
+const TypographyEx_1 = require("./TypographyEx");
+const PageCard = (_a) => {
+    var { subheader, title, icon, onRefresh, children, style } = _a, props = tslib_1.__rest(_a, ["subheader", "title", "icon", "onRefresh", "children", "style"]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Card, Object.assign({ style: Object.assign({ position: 'relative' }, style) }, props, { children: [icon === null || icon === void 0 ? void 0 : icon({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } }), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsx)(TypographyEx_1.TypographyEx, Object.assign({ variant: "h4", gradient: "text" }, { children: title })), subheader: subheader, action: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: onRefresh ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh() }, { children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) }))) : null }) }), children] })));
+};
+exports.PageCard = PageCard;
+//# sourceMappingURL=PageCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageCard.js","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":";;;;;AAAA,kFAAqD;AACrD,4CAAsG;AAGtG,iDAA6C;AAQtC,MAAM,QAAQ,GAA4B,CAAC,EAAgE,EAAE,EAAE;QAApE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAY,EAAP,KAAK,sBAA9D,gEAAgE,CAAF;IAC9G,OAAO,CACL,wBAAC,eAAI,kBAAC,KAAK,kBAAI,QAAQ,EAAE,UAAU,IAAK,KAAK,KAAQ,KAAK,eACvD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,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,uBAAC,qBAAU,IACT,KAAK,EACH,uBAAC,2BAAY,kBAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,gBACvC,KAAK,IACO,EAEjB,SAAS,EAAE,SAAS,EACpB,MAAM,EACJ,2DACG,SAAS,CAAC,CAAC,CAAC,CACX,uBAAC,qBAAU,kBAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,gBACtC,uBAAC,iBAAW,KAAG,IACJ,CACd,CAAC,CAAC,CAAC,IAAI,GACP,GAEL,EACD,QAAQ,KACJ,CACR,CAAA;AACH,CAAC,CAAA;AAxBY,QAAA,QAAQ,YAwBpB"}

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

@@ -4,6 +4,7 @@ export * from './ErrorBoundry';
 export * from './FullWidthCard';
 export * from './JsonRouteWrapper';
 export * from './ListItemButtonEx';
+export * from './PageCard';
 export * from './Pipe';
 export * from './ScrollTableOnSm';
 export * from './SectionSpacingRow';

package/dist/cjs/components/index.js

@@ -7,6 +7,7 @@ tslib_1.__exportStar(require("./ErrorBoundry"), exports);
 tslib_1.__exportStar(require("./FullWidthCard"), exports);
 tslib_1.__exportStar(require("./JsonRouteWrapper"), exports);
 tslib_1.__exportStar(require("./ListItemButtonEx"), exports);
+tslib_1.__exportStar(require("./PageCard"), exports);
 tslib_1.__exportStar(require("./Pipe"), exports);
 tslib_1.__exportStar(require("./ScrollTableOnSm"), exports);
 tslib_1.__exportStar(require("./SectionSpacingRow"), 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,0DAA+B;AAC/B,6DAAkC;AAClC,6DAAkC;AAClC,iDAAsB;AACtB,4DAAiC;AACjC,8DAAmC;AACnC,uDAA4B;AAC5B,sDAA2B;AAC3B,yDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,sDAA2B;AAC3B,sDAA2B;AAC3B,yDAA8B;AAC9B,0DAA+B;AAC/B,6DAAkC;AAClC,6DAAkC;AAClC,qDAA0B;AAC1B,iDAAsB;AACtB,4DAAiC;AACjC,8DAAmC;AACnC,uDAA4B;AAC5B,sDAA2B;AAC3B,yDAA8B"}

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

@@ -0,0 +1,8 @@
+import { CardHeaderProps, CardProps, SvgIconProps } from '@mui/material';
+import { ReactNode } from 'react';
+export interface PageCardProps extends CardProps {
+    icon?: (props?: SvgIconProps) => ReactNode;
+    onRefresh?: () => void;
+    subheader?: CardHeaderProps['subheader'];
+}
+export declare const PageCard: React.FC<PageCardProps>;

package/dist/esm/components/PageCard.js

@@ -0,0 +1,8 @@
+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 { 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] }));
+};
+//# sourceMappingURL=PageCard.js.map

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

@@ -0,0 +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"}

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

@@ -19,8 +19,6 @@ 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,7 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
         const checkWidth = (cell) => {
             const smallestParentWidth = getSmallestParentWidth(cell);
             if (smallestParentWidth && row) {
-                const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing;
+                const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - parseInt(theme.spacing(4).substring(0, -2)) * 4;
                 setCalcCellWidth(remainderWidth);
             }
         };
@@ -44,7 +42,7 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
         return () => {
             window.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":";AAAA,OAAO,EAAE,SAAS,EAAkB,UAAU,EAAmB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChG,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAOjE,MAAM,cAAc,GAAkC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClG,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAC,OAAO,EACf,UAAU,EAAC,WAAW,EACtB,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,aAAa;YACvB,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;YACxB,UAAU,EAAE,QAAQ;YACpB,GAAG,KAAK;SACT,KACG,KAAK,YAER,KAAK,GACK,CACd,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnG,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAC7D,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE/C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,qEAAqE;IACrE,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAExD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,EAAE,aAAa,CAAA;QACxD,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,cAAc,CAAC,CAAA;QAC7C,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,EAAE,cAAc,CAAC,CAAA;QAE5C,MAAM,UAAU,GAAG,CAAC,IAAiB,EAAE,EAAE;YACvC,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAA;YACxD,IAAI,mBAAmB,IAAI,GAAG,EAAE;gBAC9B,MAAM,cAAc,GAAG,mBAAmB,GAAG,oBAAoB,CAAC,GAAG,CAAC,GAAG,OAAO,CAAA;gBAChF,gBAAgB,CAAC,cAAc,CAAC,CAAA;aACjC;QACH,CAAC,CAAA;QAED,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,IAAI,EAAE;gBACR,UAAU,CAAC,IAAI,CAAC,CAAA;aACjB;QACH,CAAC,CAAA;QAED,IAAI,IAAI,EAAE;YACR,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;SAC5C;QACD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAChD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAA;IAEzB,OAAO,CACL,KAAC,SAAS,OAAK,KAAK,YAClB,cACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;gBACL,OAAO,EAAE,OAAO;gBAChB,QAAQ,EAAE,aAAa;gBACvB,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,UAAU;gBACxB,UAAU,EAAE,QAAQ;aACrB,YAEA,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACZ,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAC7D,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,GACvD,CACV,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CAC/D,GACG,GACI,CACb,CAAA;AACH,CAAC,CAAA"}
+{"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,4 +1,4 @@
-/** @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++) {

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,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"}

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

@@ -4,6 +4,7 @@ export * from './ErrorBoundry';
 export * from './FullWidthCard';
 export * from './JsonRouteWrapper';
 export * from './ListItemButtonEx';
+export * from './PageCard';
 export * from './Pipe';
 export * from './ScrollTableOnSm';
 export * from './SectionSpacingRow';

package/dist/esm/components/index.js

@@ -4,6 +4,7 @@ export * from './ErrorBoundry';
 export * from './FullWidthCard';
 export * from './JsonRouteWrapper';
 export * from './ListItemButtonEx';
+export * from './PageCard';
 export * from './Pipe';
 export * from './ScrollTableOnSm';
 export * from './SectionSpacingRow';

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,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA"}
+{"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,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,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.67",
+  "version": "2.25.70",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/PageCard.stories.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable import/no-internal-modules */
+import { CardContent, Typography } from '@mui/material'
+import { ComponentStory, Meta } from '@storybook/react'
+import { useState } from 'react'
+
+import { PageCard } from './PageCard'
+
+const StorybookEntry: Meta = {
+  argTypes: {
+    onRefresh: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  component: PageCard,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/PageCard',
+}
+
+const Template: ComponentStory<typeof PageCard> = (props) => {
+  const [refreshedValue, setRefreshedValue] = useState<number>(Math.random)
+  return (
+    <PageCard title="Page Card" subheader="subheader" onRefresh={() => setRefreshedValue(Math.random())} {...props}>
+      <CardContent>
+        <Typography variant="body1">Page Card Content</Typography>
+        <Typography variant="body1">Refreshed Value: {refreshedValue?.toString()}</Typography>
+      </CardContent>
+    </PageCard>
+  )
+}
+
+const TemplateWithNoOnRefresh: ComponentStory<typeof PageCard> = (props) => {
+  return (
+    <PageCard title="Page Card" subheader="subheader" {...props}>
+      <CardContent>
+        <Typography variant="body1">Page Card Content</Typography>
+      </CardContent>
+    </PageCard>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+Default.parameters = {
+  actions: { argTypesRegex: '' },
+}
+
+const WithNoOnRefresh = TemplateWithNoOnRefresh.bind({})
+WithNoOnRefresh.args = {}
+WithNoOnRefresh.parameters = {
+  actions: { argTypesRegex: '' },
+}
+
+export { Default, WithNoOnRefresh }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/PageCard.tsx

@@ -0,0 +1,37 @@
+import RefreshIcon from '@mui/icons-material/Refresh'
+import { Card, CardHeader, CardHeaderProps, CardProps, IconButton, SvgIconProps } from '@mui/material'
+import { ReactNode } from 'react'
+
+import { TypographyEx } from './TypographyEx'
+
+export interface PageCardProps extends CardProps {
+  icon?: (props?: SvgIconProps) => ReactNode
+  onRefresh?: () => void
+  subheader?: CardHeaderProps['subheader']
+}
+
+export const PageCard: React.FC<PageCardProps> = ({ subheader, title, icon, onRefresh, children, style, ...props }) => {
+  return (
+    <Card style={{ position: 'relative', ...style }} {...props}>
+      {icon?.({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } })}
+      <CardHeader
+        title={
+          <TypographyEx variant="h4" gradient="text">
+            {title}
+          </TypographyEx>
+        }
+        subheader={subheader}
+        action={
+          <>
+            {onRefresh ? (
+              <IconButton onClick={() => onRefresh?.()}>
+                <RefreshIcon />
+              </IconButton>
+            ) : null}
+          </>
+        }
+      />
+      {children}
+    </Card>
+  )
+}

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -41,12 +41,8 @@ export interface EllipsisTableCellProps extends TableCellProps {
 export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to, href, ...props }) => {
   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,7 @@ 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 remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - parseInt(theme.spacing(4).substring(0, -2)) * 4
         setCalcCellWidth(remainderWidth)
       }
     }
@@ -73,7 +69,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
     return () => {
       window.removeEventListener('resize', onResize)
     }
-  }, [hashDivRef, spacing])
+  }, [hashDivRef])
 
   return (
     <TableCell {...props}>

package/src/components/TableCell/getRemainingRowWidth.ts

@@ -1,4 +1,4 @@
-/** @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++) {

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './ErrorBoundry'
 export * from './FullWidthCard'
 export * from './JsonRouteWrapper'
 export * from './ListItemButtonEx'
+export * from './PageCard'
 export * from './Pipe'
 export * from './ScrollTableOnSm'
 export * from './SectionSpacingRow'