@xyo-network/react-property 2.46.7 → 2.46.9

package/dist/esm/components/Property.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircularProgress, Paper } from '@mui/material';
 import { FlexRow } from '@xylabs/react-flexbox';
+import { forwardRef } from 'react';
 import { PropertyActionsMenu } from './ActionsMenu';
 import { IdenticonCorner } from './IdenticonCorner';
 import { PropertyTitle } from './Title';
 import { PropertyValue } from './Value';
-const PropertyBox = ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }) => {
+const PropertyBox = forwardRef(({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {
     const sizeValueHeight = {
         large: 48,
         medium: 36,
@@ -16,12 +17,15 @@ 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, { 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 }) }));
-};
-export const Property = (props) => {
-    return props.paper ? _jsx(PropertyPaper, { ...props }) : _jsx(PropertyBox, { ...props });
-};
+    return (_jsxs(FlexRow, { ref: ref, 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] })] }));
+});
+PropertyBox.displayName = 'PropertyBox';
+const PropertyPaper = forwardRef(({ style, variant, elevation = 2, square, ...props }, ref) => {
+    return (_jsx(Paper, { ref: ref, style: { minWidth: 0, overflow: 'hidden', ...style }, variant: variant, elevation: elevation, square: square, children: _jsx(PropertyBox, { ...props, paper: false }) }));
+});
+PropertyPaper.displayName = 'PropertyPaper';
+export const Property = forwardRef((props, ref) => {
+    return props.paper ? _jsx(PropertyPaper, { ref: ref, ...props }) : _jsx(PropertyBox, { ref: ref, ...props });
+});
+Property.displayName = 'Property';
 //# sourceMappingURL=Property.js.map

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.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { EllipsizeBox } from '@xyo-network/react-shared';
-export const PropertyValue = ({ typographyVariant = 'body1', value, ...props }) => {
-    return value !== undefined ? (_jsx(EllipsizeBox, { typographyProps: { component: undefined, title: value?.toString(), variant: typographyVariant }, width: "100%", ...props, children: value })) : null;
-};
+import { forwardRef } from 'react';
+export const PropertyValue = forwardRef(({ typographyVariant = 'body1', value, ...props }, ref) => {
+    return value !== undefined ? (_jsx(EllipsizeBox, { typographyProps: { component: undefined, title: value?.toString(), variant: typographyVariant }, width: "100%", ref: ref, ...props, children: value })) : null;
+});
+PropertyValue.displayName = 'PropertyValue';
 //# 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":";AACA,OAAO,EAAE,YAAY,EAAqB,MAAM,2BAA2B,CAAA;AAO3E,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,iBAAiB,GAAG,OAAO,EAAE,KAAK,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"}
+{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAqB,MAAM,2BAA2B,CAAA;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAOlC,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAAqC,CAAC,EAAE,iBAAiB,GAAG,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpI,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,EAAC,GAAG,EAAE,GAAG,KAAM,KAAK,YAC5I,KAAK,GACO,CAChB,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}

package/dist/types/components/Property.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { PropertyProps } from './Props';
-export declare const Property: React.FC<PropertyProps>;
+import { PropertyBoxProps, PropertyPaperProps } from './Props';
+export declare const Property: import("react").ForwardRefExoticComponent<(PropertyBoxProps | Omit<PropertyPaperProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Property.d.ts.map

package/dist/types/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;AAmE7E,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":";AAOA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAiB,MAAM,SAAS,CAAA;AA4D7E,eAAO,MAAM,QAAQ,iJAEnB,CAAA"}

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { Variant } from '@mui/material/styles/createTypography';
 import { EllipsizeBoxProps } from '@xyo-network/react-shared';
-export interface PropertyValueProps extends EllipsizeBoxProps {
+export interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {
     typographyVariant?: Variant;
     value?: string | number | boolean | null;
 }
-export declare const PropertyValue: React.FC<PropertyValueProps>;
+export declare const PropertyValue: import("react").ForwardRefExoticComponent<PropertyValueProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Value.d.ts.map

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

@@ -1 +1 @@
-{"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,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,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;AAG3E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,aAAa,+GAMxB,CAAA"}

package/package.json

@@ -14,7 +14,7 @@
     "@xylabs/react-flexbox": "^2.16.11",
     "@xylabs/react-identicon": "^2.16.11",
     "@xylabs/react-quick-tip-button": "^2.16.11",
-    "@xyo-network/react-shared": "^2.46.7"
+    "@xyo-network/react-shared": "^2.46.9"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5",
@@ -29,9 +29,9 @@
     "@storybook/react": "^6.5.16",
     "@xylabs/ts-scripts-yarn3": "^2.16.1",
     "@xylabs/tsconfig-react": "^2.16.1",
-    "@xyo-network/payload-wrapper": "^2.53.2",
-    "@xyo-network/react-storybook": "^2.46.7",
-    "@xyo-network/typeof": "^2.53.2",
+    "@xyo-network/payload-wrapper": "^2.53.3",
+    "@xyo-network/react-storybook": "^2.46.9",
+    "@xyo-network/typeof": "^2.53.3",
     "require-from-string": "^2.0.2",
     "typescript": "^4.9.5"
   },
@@ -78,5 +78,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.46.7"
+  "version": "2.46.9"
 }

package/src/components/Property.tsx

@@ -1,6 +1,7 @@
 import { CircularProgress, Paper, TypographyVariant } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 import { SizeProp } from '@xyo-network/react-shared'
+import { forwardRef } from 'react'
 
 import { PropertyActionsMenu } from './ActionsMenu'
 import { IdenticonCorner } from './IdenticonCorner'
@@ -8,69 +9,63 @@ import { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props'
 import { PropertyTitle } from './Title'
 import { PropertyValue } from './Value'
 
-const PropertyBox: React.FC<PropertyBoxProps> = ({
-  titleProps,
-  title,
-  value,
-  children,
-  size = 'medium',
-  tip,
-  actions,
-  required,
-  badge = false,
-  ...props
-}) => {
-  const sizeValueHeight: Record<SizeProp, number> = {
-    large: 48,
-    medium: 36,
-    small: 24,
-  }
+const PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(
+  ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {
+    const sizeValueHeight: Record<SizeProp, number> = {
+      large: 48,
+      medium: 36,
+      small: 24,
+    }
 
-  const sizeVariants: Record<SizeProp, TypographyVariant> = {
-    large: 'h6',
-    medium: 'body1',
-    small: 'body2',
-  }
+    const sizeVariants: Record<SizeProp, TypographyVariant> = {
+      large: 'h6',
+      medium: 'body1',
+      small: 'body2',
+    }
 
-  return (
-    <FlexRow flexDirection="column" minWidth={0} alignItems="stretch" overflow="hidden" {...props}>
-      {title !== undefined ? (
-        <PropertyTitle
-          tip={tip}
-          title={required ? `${title}*` : title}
-          size={size}
-          more={<PropertyActionsMenu actions={actions} />}
-          {...titleProps}
-        />
-      ) : null}
-      <FlexRow
-        pl={1}
-        columnGap={1}
-        justifyContent={value === undefined ? 'center' : 'space-between'}
-        overflow="hidden"
-        height={sizeValueHeight[size]}
-      >
-        {children ? (
-          children
-        ) : value !== undefined ? (
-          <PropertyValue value={value} typographyVariant={sizeVariants[size]} />
-        ) : (
-          <CircularProgress size={16} />
-        )}
-        {value !== undefined ? badge ? <IdenticonCorner value={value} /> : null : null}
+    return (
+      <FlexRow ref={ref} flexDirection="column" minWidth={0} alignItems="stretch" overflow="hidden" {...props}>
+        {title !== undefined ? (
+          <PropertyTitle
+            tip={tip}
+            title={required ? `${title}*` : title}
+            size={size}
+            more={<PropertyActionsMenu actions={actions} />}
+            {...titleProps}
+          />
+        ) : null}
+        <FlexRow
+          pl={1}
+          columnGap={1}
+          justifyContent={value === undefined ? 'center' : 'space-between'}
+          overflow="hidden"
+          height={sizeValueHeight[size]}
+        >
+          {children ? (
+            children
+          ) : value !== undefined ? (
+            <PropertyValue value={value} typographyVariant={sizeVariants[size]} />
+          ) : (
+            <CircularProgress size={16} />
+          )}
+          {value !== undefined ? badge ? <IdenticonCorner value={value} /> : null : null}
+        </FlexRow>
       </FlexRow>
-    </FlexRow>
-  )
-}
+    )
+  },
+)
+PropertyBox.displayName = 'PropertyBox'
 
-const PropertyPaper: React.FC<PropertyPaperProps> = ({ style, variant, elevation = 2, square, ...props }) => {
+const PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({ style, variant, elevation = 2, square, ...props }, ref) => {
   return (
-    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>
+    <Paper ref={ref} style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>
       <PropertyBox {...props} paper={false} />
     </Paper>
   )
-}
+})
+PropertyPaper.displayName = 'PropertyPaper'
 
-export const Property: React.FC<PropertyProps> = (props) => {
-  return props.paper ? <PropertyPaper {...props} /> : <PropertyBox {...props} />
-}
+export const Property = forwardRef<HTMLDivElement, PropertyProps>((props, ref) => {
+  return props.paper ? <PropertyPaper ref={ref} {...props} /> : <PropertyBox ref={ref} {...props} />
+})
+Property.displayName = 'Property'

package/src/components/Value.tsx

@@ -1,15 +1,18 @@
 import { Variant } from '@mui/material/styles/createTypography'
 import { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'
+import { forwardRef } from 'react'
 
-export interface PropertyValueProps extends EllipsizeBoxProps {
+export interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {
   typographyVariant?: Variant
   value?: string | number | boolean | null
 }
 
-export const PropertyValue: React.FC<PropertyValueProps> = ({ typographyVariant = 'body1', value, ...props }) => {
+export const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {
   return value !== undefined ? (
-    <EllipsizeBox typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }} width="100%" {...props}>
+    <EllipsizeBox typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }} width="100%" ref={ref} {...props}>
       {value}
     </EllipsizeBox>
   ) : null
-}
+})
+
+PropertyValue.displayName = 'PropertyValue'