@xyo-network/react-property 2.23.7

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/sdk-react';
+export interface IdenticonCornerProps extends FlexBoxProps {
+    value?: string | number | boolean | null;
+}
+export declare const IdenticonCorner: React.FC<IdenticonCornerProps>;

package/dist/esm/components/IdenticonCorner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@mui/material';
+import { FlexRow, Identicon } from '@xylabs/sdk-react';
+import { useEffect, useRef, useState } from 'react';
+export const IdenticonCorner = ({ value, ...props }) => {
+    const theme = useTheme();
+    const [parentHeight, setParentHeight] = useState();
+    const ref = useRef(null);
+    useEffect(() => {
+        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, borderTop: `1px solid ${theme.palette.divider}`, 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

@@ -0,0 +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,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACpE,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,SAAS,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,YACtK,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

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

package/dist/esm/components/Property.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress, useTheme } from '@mui/material';
+import { FlexCol, FlexRow } from '@xylabs/sdk-react';
+import { IdenticonCorner } from './IdenticonCorner';
+import { PropertyActionsMenu } from './PropertyActionsMenu';
+import { PropertyTitle } from './Title';
+import { PropertyValue } from './Value';
+export const Property = ({ title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }) => {
+    const theme = useTheme();
+    const sizeTitleHeight = {
+        large: 36,
+        medium: 20,
+        small: 14,
+    };
+    const sizeValueHeight = {
+        large: 64,
+        medium: 36,
+        small: 26,
+    };
+    const sizeVariants = {
+        large: 'h6',
+        medium: 'body1',
+        small: 'body1',
+    };
+    return (_jsxs(FlexCol, { minWidth: 0, alignItems: "stretch", border: 1, borderColor: required && value === undefined ? theme.palette.error.main : theme.palette.divider, borderRadius: 1, overflow: "hidden", ...props, children: [title !== undefined ? (_jsx(PropertyTitle, { tip: tip, title: title, size: size, bgcolor: theme.palette.secondary.main, color: theme.palette.getContrastText(theme.palette.secondary.main), height: sizeTitleHeight[size], more: _jsx(PropertyActionsMenu, { actions: actions }) })) : null, _jsxs(FlexRow, { justifyContent: value === undefined ? 'center' : 'space-between', overflow: "hidden", height: sizeValueHeight[size], 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] })] }));
+};
+//# sourceMappingURL=Property.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Property.js","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAqB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChJ,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAA6B;QAChD,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV,CAAA;IAED,MAAM,eAAe,GAA6B;QAChD,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV,CAAA;IAED,MAAM,YAAY,GAAwC;QACxD,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,OAAO;KACf,CAAA;IAED,OAAO,CACL,MAAC,OAAO,IACN,QAAQ,EAAE,CAAC,EACX,UAAU,EAAC,SAAS,EACpB,MAAM,EAAE,CAAC,EACT,WAAW,EAAE,QAAQ,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAC/F,YAAY,EAAE,CAAC,EACf,QAAQ,EAAC,QAAQ,KACb,KAAK,aAER,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,KAAC,aAAa,IACZ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EACrC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAClE,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,EAC7B,IAAI,EAAE,KAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO,GAAI,GAC/C,CACH,CAAC,CAAC,CAAC,IAAI,EACR,MAAC,OAAO,IAAC,cAAc,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,EAAE,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,aACvH,QAAQ,EACR,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,KAAC,aAAa,IAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,YAAY,CAAC,IAAI,CAAC,GAAI,CACtH,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,CAC/B,EACA,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IACtE,IACF,CACX,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface PropertyAction {
+    disabled?: boolean;
+    name: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+}

package/dist/esm/components/PropertyAction.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PropertyAction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyAction.js","sourceRoot":"","sources":["../../../src/components/PropertyAction.ts"],"names":[],"mappings":""}

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

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

package/dist/esm/components/PropertyActions.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton, Stack } from '@mui/material';
+import { ButtonEx, FlexRow } from '@xylabs/sdk-react';
+export const PropertyActions = ({ buttons = false, actions, ...props }) => {
+    if (actions) {
+        return (actions?.length ?? 0) > 0 ? (_jsx(FlexRow, { ...props, children: _jsx(Stack, { direction: "row", spacing: 1, children: actions.map((action, index) => {
+                    return action.icon ? (_jsx(IconButton, { size: "small", color: "inherit", onClick: action.onClick, children: action.icon }, index)) : buttons ? (_jsx(ButtonEx, { paddingY: 0, color: "primary", size: "small", disabled: action.disabled, onClick: action.onClick, variant: "contained", children: action.name }, index)) : null;
+                }) }) })) : null;
+    }
+    return null;
+};
+//# sourceMappingURL=PropertyActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyActions.js","sourceRoot":"","sources":["../../../src/components/PropertyActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAIrD,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,OAAO,OAAK,KAAK,YAChB,KAAC,KAAK,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,CAAC,YAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CACnB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAa,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YACzE,MAAM,CAAC,IAAI,IADgB,KAAK,CAEtB,CACd,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ,KAAC,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,SAAS,EAAa,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,YACpI,MAAM,CAAC,IAAI,IAD8B,KAAK,CAEtC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;gBACV,CAAC,CAAC,GACI,GACA,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;KACT;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

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

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

package/dist/esm/components/PropertyActionsMenu.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { IconButton, Menu, MenuItem } from '@mui/material';
+import { FlexRow } from '@xylabs/sdk-react';
+import { useState } from 'react';
+export const PropertyActionsMenu = ({ actions, ...props }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = !!anchorEl;
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return actions && actions?.length > 0 ? (_jsxs(FlexRow, { ...props, children: [_jsx(IconButton, { size: "small", color: "inherit", onClick: handleClick, children: _jsx(MoreHorizIcon, { fontSize: "inherit" }) }), _jsx(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose, children: actions?.map((action) => {
+                    return (_jsx(MenuItem, { onClick: () => {
+                            action?.onClick?.();
+                            handleClose();
+                        }, children: action.name }, action.name));
+                }) })] })) : null;
+};
+//# sourceMappingURL=PropertyActionsMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyActionsMenu.js","sourceRoot":"","sources":["../../../src/components/PropertyActionsMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIhC,MAAM,CAAC,MAAM,mBAAmB,GAAmC,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAClE,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAA;IAEvB,MAAM,WAAW,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC3D,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;IAClC,CAAC,CAAA;IACD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,WAAW,CAAC,IAAI,CAAC,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,OAAO,IAAI,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtC,MAAC,OAAO,OAAK,KAAK,aAChB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,YAC3D,KAAC,aAAa,IAAC,QAAQ,EAAC,SAAS,GAAG,GACzB,EACb,KAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,YACvD,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACvB,OAAO,CACL,KAAC,QAAQ,IAEP,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,EAAE,OAAO,EAAE,EAAE,CAAA;4BACnB,WAAW,EAAE,CAAA;wBACf,CAAC,YAEA,MAAM,CAAC,IAAI,IANP,MAAM,CAAC,IAAI,CAOP,CACZ,CAAA;gBACH,CAAC,CAAC,GACG,IACC,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

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

@@ -0,0 +1,6 @@
+import { FlexBoxProps } from '@xylabs/sdk-react';
+import { PropertyAction } from './PropertyAction';
+export interface PropertyActionsProps extends FlexBoxProps {
+    buttons?: boolean;
+    actions?: PropertyAction[];
+}

package/dist/esm/components/PropertyActionsProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PropertyActionsProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyActionsProps.js","sourceRoot":"","sources":["../../../src/components/PropertyActionsProps.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,13 @@
+import { FlexBoxProps } from '@xylabs/sdk-react';
+import { ReactNode } from 'react';
+import { PropertyAction } from './PropertyAction';
+import { SizeProp } from './SizeProp';
+export interface PropertyProps extends FlexBoxProps {
+    actions?: PropertyAction[];
+    required?: boolean;
+    tip?: ReactNode;
+    title?: string;
+    value?: string | number | boolean | null;
+    badge?: boolean;
+    size?: SizeProp;
+}

package/dist/esm/components/PropertyProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PropertyProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyProps.js","sourceRoot":"","sources":["../../../src/components/PropertyProps.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+export declare type SizeProp = 'small' | 'medium' | 'large';

package/dist/esm/components/SizeProp.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SizeProp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SizeProp.js","sourceRoot":"","sources":["../../../src/components/SizeProp.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,10 @@
+import { FlexBoxProps } from '@xylabs/sdk-react';
+import { ReactNode } from 'react';
+import { SizeProp } from './SizeProp';
+export interface PropertyTitleProps extends FlexBoxProps {
+    tip?: ReactNode;
+    more?: ReactNode;
+    title?: string;
+    size?: SizeProp;
+}
+export declare const PropertyTitle: React.FC<PropertyTitleProps>;

package/dist/esm/components/Title.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography, useTheme } from '@mui/material';
+import { FlexRow, QuickTipButton } from '@xylabs/sdk-react';
+export const PropertyTitle = ({ size = 'medium', tip, more, title, ...props }) => {
+    const sizeVariants = {
+        large: 'h6',
+        medium: 'caption',
+        small: 'caption',
+    };
+    const theme = useTheme();
+    return (_jsxs(FlexRow, { justifyContent: "space-between", ...props, children: [_jsxs(FlexRow, { paddingX: 1, children: [_jsx(Typography, { noWrap: true, variant: sizeVariants[size], children: title }), tip ? (_jsx(QuickTipButton, { style: { fontSize: theme.typography[sizeVariants[size]].fontSize }, color: "inherit", title: title ?? '', children: tip })) : null] }), more] }));
+};
+//# sourceMappingURL=Title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../../src/components/Title.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqB,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvE,OAAO,EAAgB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAYzE,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7G,MAAM,YAAY,GAAwC;QACxD,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;KACjB,CAAA;IAED,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,CACL,MAAC,OAAO,IAAC,cAAc,EAAC,eAAe,KAAK,KAAK,aAC/C,MAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,aAClB,KAAC,UAAU,IAAC,MAAM,QAAC,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,YAC3C,KAAK,GACK,EACZ,GAAG,CAAC,CAAC,CAAC,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,IAAI,EAAE,YACnH,GAAG,GACW,CAClB,CAAC,CAAC,CAAC,IAAI,IACA,EACT,IAAI,IACG,CACX,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TypographyProps } from '@mui/material';
+import { Variant } from '@mui/material/styles/createTypography';
+export interface PropertyValueProps extends TypographyProps<'div'> {
+    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>;

package/dist/esm/components/Value.js

@@ -0,0 +1,36 @@
+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 = 'caption', ...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, marginX: 1, ref: ref, component: "div", variant: typographyVariant, fontFamily: "monospace", fontWeight: "light", ...customThemeProps, ...props, children: value })) : null;
+};
+//# sourceMappingURL=Value.js.map

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

@@ -0,0 +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,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5H,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,IAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAC,WAAW,EAAC,UAAU,EAAC,OAAO,KAAK,gBAAgB,KAAM,KAAK,YACjK,KAAK,GACK,CACd,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

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

@@ -0,0 +1,6 @@
+export * from './Property';
+export * from './PropertyAction';
+export * from './PropertyProps';
+export * from './SizeProp';
+export * from './usePropertyHeroProps';
+export * from './Value';

package/dist/esm/components/index.js

@@ -0,0 +1,7 @@
+export * from './Property';
+export * from './PropertyAction';
+export * from './PropertyProps';
+export * from './SizeProp';
+export * from './usePropertyHeroProps';
+export * from './Value';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,SAAS,CAAA"}

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

@@ -0,0 +1,6 @@
+declare const usePropertyHeroProps: (props: Record<any, any>) => {
+    isHero: any;
+    paddingFactor: any;
+    showBadge: any;
+};
+export { usePropertyHeroProps };

package/dist/esm/components/usePropertyHeroProps.js

@@ -0,0 +1,12 @@
+// Any is ok since we are destructuring props of any shape
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const usePropertyHeroProps = (props) => {
+    const { isHero, paddingFactor, showBadge } = props;
+    return {
+        isHero,
+        paddingFactor,
+        showBadge,
+    };
+};
+export { usePropertyHeroProps };
+//# sourceMappingURL=usePropertyHeroProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePropertyHeroProps.js","sourceRoot":"","sources":["../../../src/components/usePropertyHeroProps.tsx"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,8DAA8D;AAC9D,MAAM,oBAAoB,GAAG,CAAC,KAAuB,EAAE,EAAE;IACvD,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAClD,OAAO;QACL,MAAM;QACN,aAAa;QACb,SAAS;KACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/package.json

@@ -0,0 +1,135 @@
+{
+  "name": "@xyo-network/react-property",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/lab": "^5.0.0-alpha.83",
+    "@mui/material": "^5.8.1",
+    "@xylabs/pixel": "^1.3.7",
+    "@xylabs/sdk-js": "^2.5.5",
+    "@xylabs/sdk-react": "^2.12.7",
+    "@xyo-network/api": "^2.20.33",
+    "@xyo-network/core": "^2.20.33",
+    "@xyo-network/network": "^2.20.33",
+    "@xyo-network/panel": "^2.20.33",
+    "@xyo-network/systeminfo-witness": "^2.20.33",
+    "@xyo-network/utils": "^2.20.33",
+    "lodash": "^4.17.21",
+    "luxon": "^2.4.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
+    "react-json-view": "^1.21.3",
+    "react-router-dom": "^6.3.0",
+    "rollbar": "^2.25.0",
+    "typedoc": "^0.22.15"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "devDependencies": {
+    "@babel/core": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@storybook/addon-actions": "^6.5.4",
+    "@storybook/addon-docs": "^6.5.4",
+    "@storybook/addon-essentials": "^6.5.4",
+    "@storybook/addon-interactions": "^6.5.4",
+    "@storybook/addon-links": "^6.5.4",
+    "@storybook/addons": "^6.5.4",
+    "@storybook/api": "^6.5.4",
+    "@storybook/builder-webpack5": "^6.5.4",
+    "@storybook/components": "^6.5.4",
+    "@storybook/core-events": "^6.5.4",
+    "@storybook/manager-webpack5": "^6.5.4",
+    "@storybook/react": "^6.5.4",
+    "@storybook/testing-library": "^0.0.11",
+    "@storybook/theming": "^6.5.4",
+    "@types/lodash": "^4.14.182",
+    "@types/luxon": "^2.3.2",
+    "@xylabs/eslint-config-react": "^2.1.5",
+    "@xylabs/pixel": "^1.3.7",
+    "@xylabs/rollup-config": "^1.1.17",
+    "@xylabs/sdk-js": "^2.5.5",
+    "@xylabs/sdk-react": "^2.12.7",
+    "@xylabs/ts-scripts": "^1.0.66",
+    "@xylabs/tsconfig": "^1.0.13",
+    "assert": "^2.0.0",
+    "axios": "^0.27.2",
+    "storybook-dark-mode": "^1.1.0",
+    "typescript": "^4.6.4"
+  },
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "peerDependencies": {
+    "axios": ">0.26",
+    "typedoc": "^0.22.13"
+  },
+  "peerDependenciesMeta": {
+    "typedoc": {
+      "optional": true
+    }
+  },
+  "resolutions": {
+    "@storybook/react/webpack": "^5",
+    "bn.js": "^5.2.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "webpack": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "deploy": "yarn deploy3",
+    "lint-pkg": "npmPkgJsonLint .",
+    "build": "yarn clean && tsc -p tsconfig.build.cjs.json && tsc -p tsconfig.build.esm.json && yarn gen:docs",
+    "gen:docs": "typedoc ./src/index.ts --json ./dist/docs.json --tsconfig ./tsconfig.json",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/esm/index.d.ts",
+  "version": "2.23.7",
+  "packageManager": "yarn@3.1.1"
+}

package/src/components/IdenticonCorner.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from '@mui/material'
+import { FlexBoxProps, FlexRow, Identicon } from '@xylabs/sdk-react'
+import { useEffect, useRef, useState } from 'react'
+
+export interface IdenticonCornerProps extends FlexBoxProps {
+  value?: string | number | boolean | null
+}
+
+export const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {
+  const theme = useTheme()
+  const [parentHeight, setParentHeight] = useState<number>()
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)
+  }, [])
+
+  const calculatedHeight = parentHeight ?? 0
+
+  return (
+    <FlexRow alignItems="flex-start" height="100%" position="absolute" right={0} bottom={0}>
+      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderTop={`1px solid ${theme.palette.divider}`} borderLeft={`1px solid ${theme.palette.divider}`}>
+        <div ref={ref}>
+          <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />
+        </div>
+      </FlexRow>
+    </FlexRow>
+  )
+}