@xyo-network/react-property 2.37.6 → 2.37.7

package/dist/esm/components/IdenticonCorner.js

@@ -11,6 +11,6 @@ export const IdenticonCorner = ({ value, ...props }) => {
         setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
     }, []);
     const calculatedHeight = parentHeight ?? 0;
-    return (_jsx(FlexRow, { alignItems: "flex-start", height: "100%", position: "absolute", right: 0, bottom: 0, children: _jsx(FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: _jsx("div", { ref: ref, children: _jsx(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) }));
+    return (_jsx(FlexRow, { alignItems: "flex-start", height: "100%", children: _jsx(FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: _jsx("div", { ref: ref, children: _jsx(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) }));
 };
 //# sourceMappingURL=IdenticonCorner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IdenticonCorner.js","sourceRoot":"","sources":["../../../src/components/IdenticonCorner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMnD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAU,CAAA;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,GAAG,CAAC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,CAAC,CAAA;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,YAAY,IAAI,CAAC,CAAA;IAE1C,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,YAAY,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,YACpF,KAAC,OAAO,IAAC,UAAU,QAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,YACrH,cAAK,GAAG,EAAE,GAAG,YACX,KAAC,SAAS,IAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,gBAAgB,GAAG,GAAG,IAAI,EAAE,KAAM,KAAK,GAAI,GACrH,GACE,GACF,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"IdenticonCorner.js","sourceRoot":"","sources":["../../../src/components/IdenticonCorner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMnD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAU,CAAA;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,GAAG,CAAC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,CAAC,CAAA;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,YAAY,IAAI,CAAC,CAAA;IAE1C,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,YAAY,EAAC,MAAM,EAAC,MAAM,YAC5C,KAAC,OAAO,IAAC,UAAU,QAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,YACrH,cAAK,GAAG,EAAE,GAAG,YACX,KAAC,SAAS,IAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,gBAAgB,GAAG,GAAG,IAAI,EAAE,KAAM,KAAK,GAAI,GACrH,GACE,GACF,CACX,CAAA;AACH,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Property.d.ts","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAwC,aAAa,EAAE,MAAM,SAAS,CAAA;AA6D7E,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAA"}
+{"version":3,"file":"Property.d.ts","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAwC,aAAa,EAAE,MAAM,SAAS,CAAA;AAmE7E,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAA"}

package/dist/esm/components/Property.js

@@ -16,7 +16,7 @@ const PropertyBox = ({ titleProps, title, value, children, size = 'medium', tip,
         medium: 'body1',
         small: 'body2',
     };
-    return (_jsxs(FlexRow, { flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [title !== undefined ? (_jsx(PropertyTitle, { tip: tip, title: required ? `${title}*` : title, size: size, more: _jsx(PropertyActionsMenu, { actions: actions }), ...titleProps })) : null, _jsxs(FlexRow, { paddingX: 1, justifyContent: value === undefined ? 'center' : 'space-between', overflow: "hidden", height: sizeValueHeight[size], children: [children ? (children) : value !== undefined ? (_jsx(PropertyValue, { shortSpace: badge ? sizeValueHeight[size] : 0, value: value, typographyVariant: sizeVariants[size] })) : (_jsx(CircularProgress, { size: 16 })), value !== undefined ? badge ? _jsx(IdenticonCorner, { value: value }) : null : null] })] }));
+    return (_jsxs(FlexRow, { flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [title !== undefined ? (_jsx(PropertyTitle, { tip: tip, title: required ? `${title}*` : title, size: size, more: _jsx(PropertyActionsMenu, { actions: actions }), ...titleProps })) : null, _jsxs(FlexRow, { pl: 1, columnGap: 1, justifyContent: value === undefined ? 'center' : 'space-between', overflow: "hidden", height: sizeValueHeight[size], children: [children ? (children) : value !== undefined ? (_jsx(PropertyValue, { value: value, typographyVariant: sizeVariants[size] })) : (_jsx(CircularProgress, { size: 16 })), value !== undefined ? badge ? _jsx(IdenticonCorner, { value: value }) : null : null] })] }));
 };
 const PropertyPaper = ({ style, variant, elevation = 2, square, ...props }) => {
     return (_jsx(Paper, { style: { minWidth: 0, overflow: 'hidden', ...style }, variant: variant, elevation: elevation, square: square, children: _jsx(PropertyBox, { ...props, paper: false }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"Property.js","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Property.js","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import { TypographyProps } from '@mui/material';
 import { Variant } from '@mui/material/styles/createTypography';
-export interface PropertyValueProps extends TypographyProps<'div'> {
+import { EllipsizeBoxProps } from '@xyo-network/react-shared';
+export interface PropertyValueProps extends EllipsizeBoxProps {
     value?: string | number | boolean | null;
     typographyVariant?: Variant;
-    /** @field The space that is removed from the ... at end (mainly for identicon) */
-    shortSpace?: number;
 }
 export declare const PropertyValue: React.FC<PropertyValueProps>;
 //# sourceMappingURL=Value.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,eAAe,EAAY,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA;AAG/D,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,KAAK,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAA"}
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA;AAC/D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAA"}

package/dist/esm/components/Value.js

@@ -1,36 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography, useTheme } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
-export const PropertyValue = ({ value, shortSpace, typographyVariant = 'body1', ...props }) => {
-    const [parentWidth, setParentWidth] = useState();
-    const theme = useTheme();
-    const ref = useRef(null);
-    const customThemeProps = {
-        clamped: parentWidth && theme ? parentWidth - parseInt(theme.spacing(2), 10) - (shortSpace ?? 0) : undefined,
-        title: value?.toString(),
-    };
-    useEffect(() => {
-        const resizeHandler = () => {
-            const smallestWidth = getSmallestParentWidth(ref.current);
-            setParentWidth(smallestWidth);
-        };
-        const getSmallestParentWidth = (element) => {
-            let current = element?.parentElement;
-            let width = null;
-            while (current) {
-                if (width === null || current.clientWidth < width) {
-                    width = current.clientWidth;
-                }
-                current = current.parentElement;
-            }
-            return width ?? undefined;
-        };
-        window.addEventListener('resize', resizeHandler);
-        setParentWidth(getSmallestParentWidth(ref.current));
-        return () => {
-            window?.removeEventListener('resize', resizeHandler);
-        };
-    }, []);
-    return value !== undefined ? (_jsx(Typography, { minWidth: 0, ref: ref, component: "div", variant: typographyVariant, fontFamily: "monospace", fontWeight: "light", ...customThemeProps, ...props, children: value })) : null;
+import { EllipsizeBox } from '@xyo-network/react-shared';
+export const PropertyValue = ({ value, typographyVariant = 'body1', ...props }) => {
+    return value !== undefined ? (_jsx(EllipsizeBox, { typographyProps: { component: undefined, title: value?.toString(), variant: typographyVariant }, width: "100%", ...props, children: value })) : null;
 };
 //# sourceMappingURL=Value.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AASnD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,iBAAiB,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1H,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAU,CAAA;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAExC,MAAM,gBAAgB,GAAG;QACvB,OAAO,EAAE,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QAC5G,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;KACzB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,MAAM,aAAa,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACzD,cAAc,CAAC,aAAa,CAAC,CAAA;QAC/B,CAAC,CAAA;QAED,MAAM,sBAAsB,GAAG,CAAC,OAA2B,EAAE,EAAE;YAC7D,IAAI,OAAO,GAAG,OAAO,EAAE,aAAa,CAAA;YACpC,IAAI,KAAK,GAAkB,IAAI,CAAA;YAC/B,OAAO,OAAO,EAAE;gBACd,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,CAAC,WAAW,GAAG,KAAK,EAAE;oBACjD,KAAK,GAAG,OAAO,CAAC,WAAW,CAAA;iBAC5B;gBACD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAA;aAChC;YACD,OAAO,KAAK,IAAI,SAAS,CAAA;QAC3B,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAEhD,cAAc,CAAC,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;QAEnD,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,KAAC,UAAU,IACT,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,iBAAiB,EAC1B,UAAU,EAAC,WAAW,EACtB,UAAU,EAAC,OAAO,KACd,gBAAgB,KAChB,KAAK,YAER,KAAK,GACK,CACd,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
+{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAqB,MAAM,2BAA2B,CAAA;AAO3E,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,iBAAiB,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9G,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,KAAC,YAAY,IAAC,eAAe,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAC,MAAM,KAAK,KAAK,YAClI,KAAK,GACO,CAChB,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/package.json

@@ -14,7 +14,7 @@
     "@xylabs/react-flexbox": "^2.15.1",
     "@xylabs/react-identicon": "^2.15.1",
     "@xylabs/react-quick-tip-button": "^2.15.1",
-    "@xyo-network/react-shared": "^2.37.6",
+    "@xyo-network/react-shared": "^2.37.7",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -71,5 +71,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.37.6"
+  "version": "2.37.7"
 }

package/src/components/IdenticonCorner.tsx

@@ -19,7 +19,7 @@ export const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...prop
   const calculatedHeight = parentHeight ?? 0
 
   return (
-    <FlexRow alignItems="flex-start" height="100%" position="absolute" right={0} bottom={0}>
+    <FlexRow alignItems="flex-start" height="100%">
       <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.palette.divider}`}>
         <div ref={ref}>
           <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />

package/src/components/Property.tsx

@@ -43,11 +43,17 @@ const PropertyBox: React.FC<PropertyBoxProps> = ({
           {...titleProps}
         />
       ) : null}
-      <FlexRow paddingX={1} justifyContent={value === undefined ? 'center' : 'space-between'} overflow="hidden" height={sizeValueHeight[size]}>
+      <FlexRow
+        pl={1}
+        columnGap={1}
+        justifyContent={value === undefined ? 'center' : 'space-between'}
+        overflow="hidden"
+        height={sizeValueHeight[size]}
+      >
         {children ? (
           children
         ) : value !== undefined ? (
-          <PropertyValue shortSpace={badge ? sizeValueHeight[size] : 0} value={value} typographyVariant={sizeVariants[size]} />
+          <PropertyValue value={value} typographyVariant={sizeVariants[size]} />
         ) : (
           <CircularProgress size={16} />
         )}

package/src/components/Value.tsx

@@ -1,64 +1,15 @@
-import { Typography, TypographyProps, useTheme } from '@mui/material'
 import { Variant } from '@mui/material/styles/createTypography'
-import { useEffect, useRef, useState } from 'react'
+import { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'
 
-export interface PropertyValueProps extends TypographyProps<'div'> {
+export interface PropertyValueProps extends EllipsizeBoxProps {
   value?: string | number | boolean | null
   typographyVariant?: Variant
-  /** @field The space that is removed from the ... at end (mainly for identicon) */
-  shortSpace?: number
 }
 
-export const PropertyValue: React.FC<PropertyValueProps> = ({ value, shortSpace, typographyVariant = 'body1', ...props }) => {
-  const [parentWidth, setParentWidth] = useState<number>()
-  const theme = useTheme()
-
-  const ref = useRef<HTMLDivElement>(null)
-
-  const customThemeProps = {
-    clamped: parentWidth && theme ? parentWidth - parseInt(theme.spacing(2), 10) - (shortSpace ?? 0) : undefined,
-    title: value?.toString(),
-  }
-
-  useEffect(() => {
-    const resizeHandler = () => {
-      const smallestWidth = getSmallestParentWidth(ref.current)
-      setParentWidth(smallestWidth)
-    }
-
-    const getSmallestParentWidth = (element: HTMLElement | null) => {
-      let current = element?.parentElement
-      let width: number | null = null
-      while (current) {
-        if (width === null || current.clientWidth < width) {
-          width = current.clientWidth
-        }
-        current = current.parentElement
-      }
-      return width ?? undefined
-    }
-
-    window.addEventListener('resize', resizeHandler)
-
-    setParentWidth(getSmallestParentWidth(ref.current))
-
-    return () => {
-      window?.removeEventListener('resize', resizeHandler)
-    }
-  }, [])
-
+export const PropertyValue: React.FC<PropertyValueProps> = ({ value, typographyVariant = 'body1', ...props }) => {
   return value !== undefined ? (
-    <Typography
-      minWidth={0}
-      ref={ref}
-      component="div"
-      variant={typographyVariant}
-      fontFamily="monospace"
-      fontWeight="light"
-      {...customThemeProps}
-      {...props}
-    >
+    <EllipsizeBox typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }} width="100%" {...props}>
       {value}
-    </Typography>
+    </EllipsizeBox>
   ) : null
 }