@xyo-network/react-shared 2.25.26 → 2.25.29

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

@@ -0,0 +1,16 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+export interface ErrorBoundaryState {
+    error?: Error;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | boolean | import("react").ReactFragment | JSX.Element | null | undefined;
+}

package/dist/esm/components/ErrorBoundry.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { FlexCol } from '@xylabs/sdk-react';
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: undefined };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(`${error}: ${errorInfo}`);
+    }
+    render() {
+        if (this.state.error) {
+            return (this.props.fallback ?? (_jsxs(FlexCol, { children: [_jsx(Typography, { variant: "h1", children: "Something went wrong." }), _jsxs(Typography, { variant: "body1", children: ["[", this.state.error?.message, "]"] })] })));
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundry.js","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAA;AAWvD,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAClD,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,SAAS,EAAE,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACpB,OAAO,CACL,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACrB,MAAC,OAAO,eACN,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,sCAAmC,EAC3D,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,kBAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,SAAe,IAC9D,CACX,CACF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF"}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ErrorPage: () => JSX.Element;

package/dist/esm/components/ErrorPage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonEx } from '@xylabs/sdk-react';
+import { FlexPage } from './FlexPage';
+export const ErrorPage = () => (_jsxs(FlexPage, { title: "Oops! Something went wrong", children: [_jsx("h1", { children: "Oops! Something went wrong!" }), _jsx(ButtonEx, { href: "/", variant: "contained", children: "Homepage" })] }));
+//# sourceMappingURL=ErrorPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage.js","sourceRoot":"","sources":["../../../src/components/ErrorPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,MAAC,QAAQ,IAAC,KAAK,EAAC,4BAA4B,aAC1C,uDAAoC,EACpC,KAAC,QAAQ,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAC,WAAW,yBAE3B,IACF,CACZ,CAAA"}

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

@@ -0,0 +1,8 @@
+import { ContainerProps } from '@mui/material';
+import { FlexBoxProps } from '@xylabs/sdk-react';
+import { ReactNode } from 'react';
+export interface FlexPageProps extends FlexBoxProps {
+    container?: ContainerProps['maxWidth'];
+    breadcrumbs?: ReactNode;
+}
+export declare const FlexPage: React.FC<FlexPageProps>;

package/dist/esm/components/FlexPage.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Container } from '@mui/material';
+import { FlexGrowCol, useAsyncEffect, useUserEvents } from '@xylabs/sdk-react';
+import { Helmet } from 'react-helmet';
+import { useLocation } from 'react-router-dom';
+export const FlexPage = ({ title, container = 'xl', breadcrumbs, children, ...props }) => {
+    const userEvents = useUserEvents();
+    const { pathname } = useLocation();
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+        await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname });
+    }, [pathname, title, userEvents]);
+    const Body = (props) => (_jsxs(FlexGrowCol, { gap: 2, paddingY: 2, justifyContent: "flex-start", alignItems: "stretch", ...props, children: [breadcrumbs, children] }));
+    return (_jsxs(FlexGrowCol, { alignItems: "stretch", justifyContent: "flex-start", minHeight: 0, overflow: "visible scroll", children: [_jsx(Helmet, { title: title }), container ? (_jsx(Container, { style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container, children: _jsx(Body, { ...props }) })) : (_jsx(Body, { ...props }))] }));
+};
+//# sourceMappingURL=FlexPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlexPage.js","sourceRoot":"","sources":["../../../src/components/FlexPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACzD,OAAO,EAAgB,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAE5F,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAM9C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAElC,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,MAAM,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,cAAc,EAAE,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC3F,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAA;IAED,MAAM,IAAI,GAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9C,MAAC,WAAW,IAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACzF,WAAW,EACX,QAAQ,IACG,CACf,CAAA;IAED,OAAO,CACL,MAAC,WAAW,IAAC,UAAU,EAAC,SAAS,EAAC,cAAc,EAAC,YAAY,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,gBAAgB,aACnG,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EACvB,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,SAAS,YACnJ,KAAC,IAAI,OAAK,KAAK,GAAI,GACT,CACb,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,KAAK,GAAI,CACpB,IACW,CACf,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-declare const NotFound: () => JSX.Element;
+import { FlexBoxProps } from '@xylabs/sdk-react';
+declare const NotFound: React.FC<FlexBoxProps>;
 export { NotFound };

package/dist/esm/components/NotFound/NotFound.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { FlexGrowCol } from '@xylabs/sdk-react';
-const NotFound = () => {
-    return (_jsx(_Fragment, { children: _jsxs(FlexGrowCol, { children: [_jsx(Typography, { variant: "h2", children: "Sorry!" }), _jsx(Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })] }) }));
+const NotFound = (props) => {
+    return (_jsxs(FlexGrowCol, { ...props, children: [_jsx(Typography, { variant: "h2", children: "Sorry!" }), _jsx(Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })] }));
 };
 export { NotFound };
 //# sourceMappingURL=NotFound.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotFound.js","sourceRoot":"","sources":["../../../../src/components/NotFound/NotFound.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,4BACE,MAAC,WAAW,eACV,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,uBAAoB,EAC5C,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,OAAO,YACpC,0BAA0B,GAChB,IACD,GACb,CACJ,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"NotFound.js","sourceRoot":"","sources":["../../../../src/components/NotFound/NotFound.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE7D,MAAM,QAAQ,GAA2B,CAAC,KAAK,EAAE,EAAE;IACjD,OAAO,CACL,MAAC,WAAW,OAAK,KAAK,aACpB,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,uBAAoB,EAC5C,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAC,OAAO,YACpC,0BAA0B,GAChB,IACD,CACf,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/esm/components/NotFound/NotFoundPage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexPageProps } from '../FlexPage';
+export declare const NotFoundPage: React.FC<FlexPageProps>;

package/dist/esm/components/NotFound/NotFoundPage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FlexPage } from '../FlexPage';
+import { NotFound } from './NotFound';
+export const NotFoundPage = ({ title, ...props }) => (_jsx(FlexPage, { title: title ?? 'Sorry! Page Not Found', ...props, children: _jsx(NotFound, {}) }));
+//# sourceMappingURL=NotFoundPage.js.map

package/dist/esm/components/NotFound/NotFoundPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFoundPage.js","sourceRoot":"","sources":["../../../../src/components/NotFound/NotFoundPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,aAAa,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,YAAY,GAA4B,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5E,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,uBAAuB,KAAM,KAAK,YAC1D,KAAC,QAAQ,KAAG,GACH,CACZ,CAAA"}

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

@@ -1 +1,2 @@
 export * from './NotFound';
+export * from './NotFoundPage';

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

@@ -1,2 +1,3 @@
 export * from './NotFound';
+export * from './NotFoundPage';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/NotFound/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/NotFound/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

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

@@ -5,15 +5,18 @@ import { useEffect, useRef, useState } from 'react';
 import { findParent } from './findParent';
 import { getRemainingRowWidth } from './getRemainingRowWidth';
 import { getSmallestParentWidth } from './getSmallestParentWidth';
-const TableCellValue = ({ value, hashCellWidth }) => (_jsx(Typography, { variant: "body2", fontFamily: "monospace", style: {
-        display: 'block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        width: hashCellWidth,
-    }, children: value }));
+const TableCellValue = ({ value, hashCellWidth }) => {
+    console.log(`hashCellWidth: ${hashCellWidth}`);
+    return (_jsx(Typography, { variant: "body2", fontFamily: "monospace", style: {
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: hashCellWidth,
+        }, children: value }));
+};
 export const EllipsisTableCell = ({ value, to, href, ...props }) => {
-    const [hashCellWidth, setHashCellWidth] = useState();
+    const [hashCellWidth, setHashCellWidth] = useState(0);
     const hashDivRef = useRef(null);
     const theme = useTheme();
     const spacing = parseInt(theme.spacing(2).substring(-2));
@@ -25,12 +28,7 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
             const smallestParentWidth = getSmallestParentWidth(cell);
             if (smallestParentWidth && row) {
                 const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing;
-                if (cell.clientWidth > remainderWidth) {
-                    setHashCellWidth(remainderWidth);
-                }
-                else if (hashCellWidth === undefined) {
-                    setHashCellWidth(cell.clientWidth);
-                }
+                setHashCellWidth(remainderWidth);
             }
         };
         const onResize = () => {
@@ -45,7 +43,6 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
         return () => {
             window.removeEventListener('resize', onResize);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hashDivRef, spacing]);
     return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, children: href || to ? (_jsx(LinkEx, { to: to, href: href, target: href ? '_blank' : undefined, children: _jsx(TableCellValue, { hashCellWidth: hashCellWidth, value: value }) })) : (_jsx(TableCellValue, { hashCellWidth: hashCellWidth, value: value })) }) }));
 };

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/dist/esm/components/TableCell/getRemainingRowWidth.d.ts

@@ -1 +1,2 @@
+/** @description This is the width of all the cells (except the one passed) in the row combined */
 export declare const getRemainingRowWidth: (row: HTMLElement, forCell?: number) => number;

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

@@ -1,19 +1,16 @@
-const getPadding = (item) => {
-    const computedStyles = window.getComputedStyle(item, null);
-    return (parseInt(computedStyles?.getPropertyValue('padding-left')?.replaceAll('px', '') ?? 0) + parseInt(computedStyles?.getPropertyValue('padding-right')?.replaceAll('px', '') ?? 0));
-};
+/** @description This is the width of all the cells (except the one passed) in the row combined */
 export const getRemainingRowWidth = (row, forCell = 0) => {
     let width = 0;
-    let padding = 0;
     for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
         const item = row?.children.item(i);
         if (item) {
             if (i !== forCell) {
-                width += item?.clientWidth ?? 0;
+                const boundingRect = item?.getBoundingClientRect();
+                console.log(`getRemainingRowWidth:rect: ${boundingRect?.width}`);
+                width += boundingRect?.width ?? 0;
             }
-            padding += getPadding(item);
         }
     }
-    return width + padding;
+    return width;
 };
 //# sourceMappingURL=getRemainingRowWidth.js.map

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,MAAM,UAAU,GAAG,CAAC,IAAa,EAAE,EAAE;IACnC,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAC1D,OAAO,CACL,QAAQ,CAAC,cAAc,EAAE,gBAAgB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,cAAc,EAAE,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAC/K,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAgB,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE;IACpE,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,IAAI,OAAO,GAAG,CAAC,CAAA;IACf,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,KAAK,IAAI,IAAI,EAAE,WAAW,IAAI,CAAC,CAAA;aAChC;YACD,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,CAAA;SAC5B;KACF;IAED,OAAO,KAAK,GAAG,OAAO,CAAA;AACxB,CAAC,CAAA"}
+{"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,OAAO,CAAC,GAAG,CAAC,8BAA8B,YAAY,EAAE,KAAK,EAAE,CAAC,CAAA;gBAChE,KAAK,IAAI,YAAY,EAAE,KAAK,IAAI,CAAC,CAAA;aAClC;SACF;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

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

@@ -1,6 +1,6 @@
 export const getSmallestParentWidth = (element, maxDepth = 4) => {
     let currentElement = element?.parentElement;
-    let width = currentElement?.clientWidth ?? 1024;
+    let width = currentElement?.clientWidth ?? screen.width;
     let maxDepthCounter = maxDepth;
     while (currentElement && maxDepthCounter > 0) {
         if (width > currentElement.getBoundingClientRect()?.['width']) {

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

@@ -1 +1 @@
-{"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;IAC3E,IAAI,cAAc,GAAuB,OAAO,EAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,cAAc,EAAE,WAAW,IAAI,IAAI,CAAA;IAC/C,IAAI,eAAe,GAAG,QAAQ,CAAA;IAC9B,OAAO,cAAc,IAAI,eAAe,GAAG,CAAC,EAAE;QAC5C,IAAI,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE;YAC7D,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,CAAA;SAC1D;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC7C,eAAe,EAAE,CAAA;KAClB;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
+{"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;IAC3E,IAAI,cAAc,GAAuB,OAAO,EAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,cAAc,EAAE,WAAW,IAAI,MAAM,CAAC,KAAK,CAAA;IACvD,IAAI,eAAe,GAAG,QAAQ,CAAA;IAC9B,OAAO,cAAc,IAAI,eAAe,GAAG,CAAC,EAAE;QAC5C,IAAI,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE;YAC7D,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,CAAA;SAC1D;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC7C,eAAe,EAAE,CAAA;KAClB;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

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

@@ -1,6 +1,9 @@
 export * from './Ampersand';
 export * from './BasicHero';
 export * from './DarkModeIconButton';
+export * from './ErrorBoundry';
+export * from './ErrorPage';
+export * from './FlexPage';
 export * from './Footer';
 export * from './FullWidthCard';
 export * from './GradientText';

package/dist/esm/components/index.js

@@ -1,6 +1,9 @@
 export * from './Ampersand';
 export * from './BasicHero';
 export * from './DarkModeIconButton';
+export * from './ErrorBoundry';
+export * from './ErrorPage';
+export * from './FlexPage';
 export * from './Footer';
 export * from './FullWidthCard';
 export * from './GradientText';

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,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,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,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,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,iBAAiB,CAAA"}

package/dist/esm/contexts/AppSettings/Storage.js

@@ -2,7 +2,7 @@ import { appSettingDefault } from './appSettingDefault';
 import { AppSettingSlug } from './Slug';
 import { AppSettingsStorageBase } from './StorageBase';
 export class AppSettingsStorage extends AppSettingsStorageBase {
-    constructor(prefix = 'XyoAppSettings', defaults) {
+    constructor(prefix = 'AppSettings', defaults) {
         super(prefix, { ...appSettingDefault(), ...defaults });
     }
     get darkMode() {

package/dist/esm/contexts/AppSettings/Storage.js.map

@@ -1 +1 @@
-{"version":3,"file":"Storage.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Storage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAEtD,MAAM,OAAO,kBAAmB,SAAQ,sBAAsB;IAC5D,YAAY,MAAM,GAAG,gBAAgB,EAAE,QAAkC;QACvE,KAAK,CAAC,MAAM,EAAE,EAAE,GAAG,iBAAiB,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAA;IACxD,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;IAClD,CAAC;IAED,IAAI,aAAa,CAAC,KAAc;QAC9B,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAClD,CAAC;CACF"}
+{"version":3,"file":"Storage.js","sourceRoot":"","sources":["../../../../src/contexts/AppSettings/Storage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAEtD,MAAM,OAAO,kBAAmB,SAAQ,sBAAsB;IAC5D,YAAY,MAAM,GAAG,aAAa,EAAE,QAAkC;QACpE,KAAK,CAAC,MAAM,EAAE,EAAE,GAAG,iBAAiB,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAA;IACxD,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IACjD,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;IAClD,CAAC;IAED,IAAI,aAAa,CAAC,KAAc;QAC9B,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAClD,CAAC;CACF"}

package/package.json

@@ -22,11 +22,12 @@
     "@xyo-network/api": "^2.20.38",
     "@xyo-network/core": "^2.20.38",
     "@xyo-network/network": "^2.20.38",
-    "@xyo-network/react-theme": "^2.25.26",
+    "@xyo-network/react-theme": "^2.25.29",
     "lodash": "^4.17.21",
     "luxon": "^2.4.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.3.0",
@@ -44,6 +45,7 @@
     "@storybook/react": "^6.5.6",
     "@storybook/theming": "^6.5.6",
     "@types/lodash": "^4.14.182",
+    "@types/react-helmet": "^6.1.5",
     "@xylabs/pixel": "^1.3.7",
     "@xylabs/sdk-js": "^2.5.5",
     "@xylabs/sdk-react": "^2.12.10",
@@ -111,6 +113,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.26",
+  "version": "2.25.29",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/ErrorBoundry.tsx

@@ -0,0 +1,42 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/sdk-react'
+import { Component, ErrorInfo, ReactNode } from 'react'
+
+export interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+export interface ErrorBoundaryState {
+  error?: Error
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { error: undefined }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error(`${error}: ${errorInfo}`)
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        this.props.fallback ?? (
+          <FlexCol>
+            <Typography variant="h1">Something went wrong.</Typography>
+            <Typography variant="body1">[{this.state.error?.message}]</Typography>
+          </FlexCol>
+        )
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/components/ErrorPage.tsx

@@ -0,0 +1,12 @@
+import { ButtonEx } from '@xylabs/sdk-react'
+
+import { FlexPage } from './FlexPage'
+
+export const ErrorPage = () => (
+  <FlexPage title="Oops! Something went wrong">
+    <h1>Oops! Something went wrong!</h1>
+    <ButtonEx href="/" variant="contained">
+      Homepage
+    </ButtonEx>
+  </FlexPage>
+)

package/src/components/FlexPage.tsx

@@ -0,0 +1,42 @@
+import { Container, ContainerProps } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol, useAsyncEffect, useUserEvents } from '@xylabs/sdk-react'
+import { ReactNode } from 'react'
+import { Helmet } from 'react-helmet'
+import { useLocation } from 'react-router-dom'
+export interface FlexPageProps extends FlexBoxProps {
+  container?: ContainerProps['maxWidth']
+  breadcrumbs?: ReactNode
+}
+
+export const FlexPage: React.FC<FlexPageProps> = ({ title, container = 'xl', breadcrumbs, children, ...props }) => {
+  const userEvents = useUserEvents()
+  const { pathname } = useLocation()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })
+    },
+    [pathname, title, userEvents]
+  )
+
+  const Body: React.FC<FlexBoxProps> = (props) => (
+    <FlexGrowCol gap={2} paddingY={2} justifyContent="flex-start" alignItems="stretch" {...props}>
+      {breadcrumbs}
+      {children}
+    </FlexGrowCol>
+  )
+
+  return (
+    <FlexGrowCol alignItems="stretch" justifyContent="flex-start" minHeight={0} overflow="visible scroll">
+      <Helmet title={title} />
+      {container ? (
+        <Container style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }} maxWidth={container}>
+          <Body {...props} />
+        </Container>
+      ) : (
+        <Body {...props} />
+      )}
+    </FlexGrowCol>
+  )
+}

package/src/components/NotFound/NotFound.tsx

@@ -1,16 +1,14 @@
 import { Typography } from '@mui/material'
-import { FlexGrowCol } from '@xylabs/sdk-react'
+import { FlexBoxProps, FlexGrowCol } from '@xylabs/sdk-react'
 
-const NotFound = () => {
+const NotFound: React.FC<FlexBoxProps> = (props) => {
   return (
-    <>
-      <FlexGrowCol>
-        <Typography variant="h2">Sorry!</Typography>
-        <Typography marginY={3} variant="body2">
-          {"Can't find anything here"}
-        </Typography>
-      </FlexGrowCol>
-    </>
+    <FlexGrowCol {...props}>
+      <Typography variant="h2">Sorry!</Typography>
+      <Typography marginY={3} variant="body2">
+        {"Can't find anything here"}
+      </Typography>
+    </FlexGrowCol>
   )
 }
 

package/src/components/NotFound/NotFoundPage.tsx

@@ -0,0 +1,8 @@
+import { FlexPage, FlexPageProps } from '../FlexPage'
+import { NotFound } from './NotFound'
+
+export const NotFoundPage: React.FC<FlexPageProps> = ({ title, ...props }) => (
+  <FlexPage title={title ?? 'Sorry! Page Not Found'} {...props}>
+    <NotFound />
+  </FlexPage>
+)

package/src/components/NotFound/index.ts

@@ -1 +1,2 @@
 export * from './NotFound'
+export * from './NotFoundPage'

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -12,21 +12,24 @@ interface TableCellValueProps {
   hashCellWidth: number | undefined
 }
 
-const TableCellValue: React.FC<TableCellValueProps> = ({ value, hashCellWidth }) => (
-  <Typography
-    variant="body2"
-    fontFamily="monospace"
-    style={{
-      display: 'block',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      width: hashCellWidth,
-    }}
-  >
-    {value}
-  </Typography>
-)
+const TableCellValue: React.FC<TableCellValueProps> = ({ value, hashCellWidth }) => {
+  console.log(`hashCellWidth: ${hashCellWidth}`)
+  return (
+    <Typography
+      variant="body2"
+      fontFamily="monospace"
+      style={{
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        width: hashCellWidth,
+      }}
+    >
+      {value}
+    </Typography>
+  )
+}
 
 export interface EllipsisTableCellProps extends TableCellProps {
   value?: string
@@ -35,7 +38,7 @@ export interface EllipsisTableCellProps extends TableCellProps {
 }
 
 export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to, href, ...props }) => {
-  const [hashCellWidth, setHashCellWidth] = useState<number>()
+  const [hashCellWidth, setHashCellWidth] = useState<number>(0)
   const hashDivRef = useRef<HTMLDivElement>(null)
 
   const theme = useTheme()
@@ -50,11 +53,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
       const smallestParentWidth = getSmallestParentWidth(cell)
       if (smallestParentWidth && row) {
         const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing
-        if (cell.clientWidth > remainderWidth) {
-          setHashCellWidth(remainderWidth)
-        } else if (hashCellWidth === undefined) {
-          setHashCellWidth(cell.clientWidth)
-        }
+        setHashCellWidth(remainderWidth)
       }
     }
 
@@ -71,7 +70,6 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
     return () => {
       window.removeEventListener('resize', onResize)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hashDivRef, spacing])
 
   return (

package/src/components/TableCell/getRemainingRowWidth.ts

@@ -1,22 +1,16 @@
-const getPadding = (item: Element) => {
-  const computedStyles = window.getComputedStyle(item, null)
-  return (
-    parseInt(computedStyles?.getPropertyValue('padding-left')?.replaceAll('px', '') ?? 0) + parseInt(computedStyles?.getPropertyValue('padding-right')?.replaceAll('px', '') ?? 0)
-  )
-}
-
+/** @description This is the width of all the cells (except the one passed) in the row combined */
 export const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {
   let width = 0
-  let padding = 0
   for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
     const item = row?.children.item(i)
     if (item) {
       if (i !== forCell) {
-        width += item?.clientWidth ?? 0
+        const boundingRect = item?.getBoundingClientRect()
+        console.log(`getRemainingRowWidth:rect: ${boundingRect?.width}`)
+        width += boundingRect?.width ?? 0
       }
-      padding += getPadding(item)
     }
   }
 
-  return width + padding
+  return width
 }

package/src/components/TableCell/getSmallestParentWidth.ts

@@ -1,6 +1,6 @@
 export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {
   let currentElement: HTMLElement | null = element?.parentElement
-  let width = currentElement?.clientWidth ?? 1024
+  let width = currentElement?.clientWidth ?? screen.width
   let maxDepthCounter = maxDepth
   while (currentElement && maxDepthCounter > 0) {
     if (width > currentElement.getBoundingClientRect()?.['width']) {

package/src/components/index.ts

@@ -1,6 +1,9 @@
 export * from './Ampersand'
 export * from './BasicHero'
 export * from './DarkModeIconButton'
+export * from './ErrorBoundry'
+export * from './ErrorPage'
+export * from './FlexPage'
 export * from './Footer'
 export * from './FullWidthCard'
 export * from './GradientText'

package/src/contexts/AppSettings/Storage.ts

@@ -3,7 +3,7 @@ import { AppSettingSlug } from './Slug'
 import { AppSettingsStorageBase } from './StorageBase'
 
 export class AppSettingsStorage extends AppSettingsStorageBase {
-  constructor(prefix = 'XyoAppSettings', defaults?: Record<string, unknown>) {
+  constructor(prefix = 'AppSettings', defaults?: Record<string, unknown>) {
     super(prefix, { ...appSettingDefault(), ...defaults })
   }