@xyo-network/react-property 2.81.9 → 2.82.0

package/src/components/Property.tsx

@@ -1,13 +1,13 @@
 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 React, { forwardRef } from 'react'
 
-import { PropertyActionsMenu } from './ActionsMenu.js'
-import { IdenticonCorner } from './IdenticonCorner.js'
-import { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props.js'
-import { PropertyTitle } from './Title.js'
-import { PropertyValue } from './Value.js'
+import { PropertyActionsMenu } from './ActionsMenu.tsx'
+import { IdenticonCorner } from './IdenticonCorner.tsx'
+import { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props.ts'
+import { PropertyTitle } from './Title.tsx'
+import { PropertyValue } from './Value.tsx'
 
 const PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(
   ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {
@@ -25,15 +25,17 @@ const PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(
 
     return (
       <FlexRow ref={ref} flexDirection="column" minWidth={0} alignItems="stretch" overflow="hidden" {...props}>
-        {title === undefined ? null : (
-          <PropertyTitle
-            tip={tip}
-            title={required ? `${title}*` : title}
-            size={size}
-            more={<PropertyActionsMenu actions={actions} />}
-            {...titleProps}
-          />
-        )}
+        {title === undefined
+          ? null
+          : (
+              <PropertyTitle
+                tip={tip}
+                title={required ? `${title}*` : title}
+                size={size}
+                more={<PropertyActionsMenu actions={actions} />}
+                {...titleProps}
+              />
+            )}
         <FlexRow
           pl={1}
           columnGap={1}
@@ -41,14 +43,14 @@ const PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(
           overflow="hidden"
           height={sizeValueHeight[size]}
         >
-          {(children ?? value === undefined) ?
-            <CircularProgress size={16} />
-          : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />}
-          {value === undefined ?
-            null
-          : badge ?
-            <IdenticonCorner value={value} />
-          : null}
+          {(children ?? value === undefined)
+            ? <CircularProgress size={16} />
+            : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />}
+          {value === undefined
+            ? null
+            : badge
+              ? <IdenticonCorner value={value} />
+              : null}
         </FlexRow>
       </FlexRow>
     )

package/src/components/PropertyBox.stories.tsx

@@ -2,9 +2,10 @@ import { Replay as ReplayIcon } from '@mui/icons-material'
 import { TextField } from '@mui/material'
 import { Meta, StoryFn } from '@storybook/react'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import React from 'react'
 
-import { Property } from './Property.js'
-import { PropertyProps } from './Props.js'
+import { Property } from './Property.tsx'
+import { PropertyProps } from './Props.ts'
 
 const StorybookEntry = {
   argTypes: {},
@@ -173,5 +174,4 @@ export {
   WithUndefinedData,
 }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/PropertyPaper.stories.tsx

@@ -2,9 +2,10 @@ import { Replay as ReplayIcon } from '@mui/icons-material'
 import { TextField } from '@mui/material'
 import { Meta, StoryFn } from '@storybook/react'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import React from 'react'
 
-import { Property } from './Property.js'
-import { PropertyPaperProps, PropertyProps } from './Props.js'
+import { Property } from './Property.tsx'
+import { PropertyPaperProps, PropertyProps } from './Props.ts'
 
 const StorybookEntry = {
   argTypes: {},
@@ -191,5 +192,4 @@ export {
   WithUndefinedData,
 }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/{Props.tsx → Props.ts}

@@ -3,8 +3,8 @@ import { FlexBoxProps } from '@xylabs/react-flexbox'
 import { SizeProp } from '@xyo-network/react-shared'
 import { ReactNode } from 'react'
 
-import { PropertyAction } from './Action.js'
-import { PropertyTitleProps } from './Title.js'
+import { PropertyAction } from './Action.ts'
+import { PropertyTitleProps } from './Title.tsx'
 
 export interface PropertyBaseProps {
   paper?: boolean

package/src/components/Title.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 
-import { PropertyTitle } from './Title.js'
+import { PropertyTitle } from './Title.tsx'
 
 const StorybookEntry = {
   argTypes: {},
@@ -13,7 +14,7 @@ const StorybookEntry = {
   title: 'property/Title',
 } as Meta<typeof PropertyTitle>
 
-const Template: StoryFn<typeof PropertyTitle> = (args) => <PropertyTitle {...args}></PropertyTitle>
+const Template: StoryFn<typeof PropertyTitle> = args => <PropertyTitle {...args}></PropertyTitle>
 
 const Default = Template.bind({})
 Default.args = {}
@@ -28,5 +29,4 @@ WithDataAndActions.args = { title: 'Sample Title' }
 
 export { Default, WithData, WithDataAndActions }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Title.tsx

@@ -2,7 +2,7 @@ import { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/m
 import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
 import { QuickTipButton } from '@xylabs/react-quick-tip-button'
 import { SizeProp } from '@xyo-network/react-shared'
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 
 export type TitleSizeProp = SizeProp | 'full'
 
@@ -43,9 +43,9 @@ export const PropertyTitle: React.FC<PropertyTitleProps> = ({ elevation = 1, siz
   return (
     <FlexRow
       bgcolor={
-        theme.palette.mode === 'dark' ?
-          lighten(theme.palette.background.paper, 0.05 * elevation)
-        : darken(theme.palette.background.paper, 0.025 * elevation)
+        theme.palette.mode === 'dark'
+          ? lighten(theme.palette.background.paper, 0.05 * elevation)
+          : darken(theme.palette.background.paper, 0.025 * elevation)
       }
       alignItems="center"
       height={sizeTitleHeight[size]}
@@ -58,11 +58,13 @@ export const PropertyTitle: React.FC<PropertyTitleProps> = ({ elevation = 1, siz
             <strong>{title}</strong>
           </small>
         </Typography>
-        {tip ?
-          <QuickTipButton style={{ fontSize: quickTipSize }} color="inherit" title={title ?? ''}>
-            {tip}
-          </QuickTipButton>
-        : null}
+        {tip
+          ? (
+              <QuickTipButton style={{ fontSize: quickTipSize }} color="inherit" title={title ?? ''}>
+                {tip}
+              </QuickTipButton>
+            )
+          : null}
       </FlexRow>
       {more}
     </FlexRow>

package/src/components/Value.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 
-import { PropertyValue } from './Value.js'
+import { PropertyValue } from './Value.tsx'
 
 const StorybookEntry = {
   argTypes: {},
@@ -13,7 +14,7 @@ const StorybookEntry = {
   title: 'property/Value',
 } as Meta<typeof PropertyValue>
 
-const Template: StoryFn<typeof PropertyValue> = (args) => <PropertyValue {...args}></PropertyValue>
+const Template: StoryFn<typeof PropertyValue> = args => <PropertyValue {...args}></PropertyValue>
 
 const Default = Template.bind({})
 Default.args = {}
@@ -26,5 +27,4 @@ WithData.args = {
 
 export { Default, WithData }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Value.tsx

@@ -1,6 +1,7 @@
+// eslint-disable-next-line import/no-internal-modules
 import { Variant } from '@mui/material/styles/createTypography.js'
 import { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 export interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {
   typographyVariant?: Variant
@@ -8,16 +9,18 @@ export interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {
 }
 
 export const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {
-  return value === undefined ? null : (
-      <EllipsizeBox
-        typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}
-        width="100%"
-        ref={ref}
-        {...props}
-      >
-        {value}
-      </EllipsizeBox>
-    )
+  return value === undefined
+    ? null
+    : (
+        <EllipsizeBox
+          typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}
+          width="100%"
+          ref={ref}
+          {...props}
+        >
+          {value}
+        </EllipsizeBox>
+      )
 })
 
 PropertyValue.displayName = 'PropertyValue'

package/src/components/index.ts

@@ -1,6 +1,6 @@
-export * from './Action.js'
-export * from './Group.js'
-export * from './Property.js'
-export * from './Props.js'
-export * from './Title.js'
-export * from './Value.js'
+export * from './Action.ts'
+export * from './Group.tsx'
+export * from './Property.tsx'
+export * from './Props.ts'
+export * from './Title.tsx'
+export * from './Value.tsx'

package/src/index.ts

@@ -1 +1 @@
-export * from './components/index.js'
+export * from './components/index.ts'

package/dist/browser/index.js

@@ -1,200 +0,0 @@
-// src/components/Group.tsx
-import { Paper, useTheme as useTheme2 } from "@mui/material";
-import { FlexCol, FlexGrowRow, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import { typeOf } from "@xyo-network/typeof";
-
-// src/components/Title.tsx
-import { darken, lighten, Typography, useTheme } from "@mui/material";
-import { FlexRow } from "@xylabs/react-flexbox";
-import { QuickTipButton } from "@xylabs/react-quick-tip-button";
-import { jsx, jsxs } from "react/jsx-runtime";
-var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
-  const sizeVariants = {
-    full: "caption",
-    large: "caption",
-    medium: "caption",
-    small: "caption"
-  };
-  const sizeTitleHeight = {
-    full: void 0,
-    large: 32,
-    medium: 20,
-    small: 16
-  };
-  const sizeFontSize = {
-    full: 16,
-    large: 16,
-    medium: 14,
-    small: 10
-  };
-  const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    FlexRow,
-    {
-      bgcolor: theme.palette.mode === "dark" ? lighten(theme.palette.background.paper, 0.05 * elevation) : darken(theme.palette.background.paper, 0.025 * elevation),
-      alignItems: "center",
-      height: sizeTitleHeight[size],
-      justifyContent: "space-between",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(FlexRow, { paddingX: 1, paddingY: 0.5, children: [
-          /* @__PURE__ */ jsx(Typography, { fontWeight: 500, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx("strong", { children: title }) }) }),
-          tip ? /* @__PURE__ */ jsx(QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
-        ] }),
-        more
-      ]
-    }
-  );
-};
-
-// src/components/Group.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
-  const theme = useTheme2();
-  const childrenArray = typeOf(children) === "array" ? children : void 0;
-  return /* @__PURE__ */ jsx2(FlexCol, { alignItems: "stretch", overflow: "hidden", ...props, children: /* @__PURE__ */ jsxs2(FlexRow2, { overflow: "hidden", justifyContent: "stretch", alignItems: "stretch", children: [
-    /* @__PURE__ */ jsx2(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
-    childrenArray ? /* @__PURE__ */ jsx2(FlexGrowRow, { children: childrenArray?.map((child, index) => {
-      return child ? /* @__PURE__ */ jsx2(FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index) : null;
-    }) }) : /* @__PURE__ */ jsx2(FlexGrowRow, { overflow: "hidden", children })
-  ] }) });
-};
-var PropertyGroupPaper = ({ style, variant, elevation, square, ...props }) => {
-  return /* @__PURE__ */ jsx2(Paper, { style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ jsx2(PropertyGroupBox, { ...props, paper: false }) });
-};
-var PropertyGroup = (props) => {
-  return props.paper ? /* @__PURE__ */ jsx2(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ jsx2(PropertyGroupBox, { ...props });
-};
-
-// src/components/Property.tsx
-import { CircularProgress, Paper as Paper2 } from "@mui/material";
-import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
-import { forwardRef as forwardRef2 } from "react";
-
-// src/components/ActionsMenu.tsx
-import { MoreHoriz as MoreHorizIcon } from "@mui/icons-material";
-import { IconButton, Menu, MenuItem } from "@mui/material";
-import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
-import { useState } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var 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 ? /* @__PURE__ */ jsxs3(FlexRow3, { ...props, children: [
-    /* @__PURE__ */ jsx3(IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ jsx3(MoreHorizIcon, { fontSize: "inherit" }) }),
-    /* @__PURE__ */ jsx3(Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
-      return /* @__PURE__ */ jsx3(
-        MenuItem,
-        {
-          onClick: () => {
-            action?.onClick?.();
-            handleClose();
-          },
-          children: action.name
-        },
-        action.name
-      );
-    }) })
-  ] }) : null;
-};
-
-// src/components/IdenticonCorner.tsx
-import { useTheme as useTheme3 } from "@mui/material";
-import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
-import { Identicon } from "@xylabs/react-identicon";
-import { useEffect, useRef, useState as useState2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var IdenticonCorner = ({ value, ...props }) => {
-  const theme = useTheme3();
-  const [parentHeight, setParentHeight] = useState2();
-  const ref = useRef(null);
-  useEffect(() => {
-    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
-  }, []);
-  const calculatedHeight = parentHeight ?? 0;
-  return /* @__PURE__ */ jsx4(FlexRow4, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ jsx4(FlexRow4, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: /* @__PURE__ */ jsx4("div", { ref, children: /* @__PURE__ */ jsx4(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
-};
-
-// src/components/Value.tsx
-import { EllipsizeBox } from "@xyo-network/react-shared";
-import { forwardRef } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PropertyValue = forwardRef(({ typographyVariant = "body1", value, ...props }, ref) => {
-  return value === void 0 ? null : /* @__PURE__ */ jsx5(
-    EllipsizeBox,
-    {
-      typographyProps: { component: void 0, title: value?.toString(), variant: typographyVariant },
-      width: "100%",
-      ref,
-      ...props,
-      children: value
-    }
-  );
-});
-PropertyValue.displayName = "PropertyValue";
-
-// src/components/Property.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var PropertyBox = forwardRef2(
-  ({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }, ref) => {
-    const sizeValueHeight = {
-      large: 48,
-      medium: 36,
-      small: 24
-    };
-    const sizeVariants = {
-      large: "h6",
-      medium: "body1",
-      small: "body2"
-    };
-    return /* @__PURE__ */ jsxs4(FlexRow5, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
-      title === void 0 ? null : /* @__PURE__ */ jsx6(
-        PropertyTitle,
-        {
-          tip,
-          title: required ? `${title}*` : title,
-          size,
-          more: /* @__PURE__ */ jsx6(PropertyActionsMenu, { actions }),
-          ...titleProps
-        }
-      ),
-      /* @__PURE__ */ jsxs4(
-        FlexRow5,
-        {
-          pl: 1,
-          columnGap: 1,
-          justifyContent: value === void 0 ? "center" : "space-between",
-          overflow: "hidden",
-          height: sizeValueHeight[size],
-          children: [
-            children ?? value === void 0 ? /* @__PURE__ */ jsx6(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx6(PropertyValue, { value, typographyVariant: sizeVariants[size] }),
-            value === void 0 ? null : badge ? /* @__PURE__ */ jsx6(IdenticonCorner, { value }) : null
-          ]
-        }
-      )
-    ] });
-  }
-);
-PropertyBox.displayName = "PropertyBox";
-var PropertyPaper = forwardRef2(({ style, variant, elevation = 2, square, ...props }, ref) => {
-  return /* @__PURE__ */ jsx6(Paper2, { ref, style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ jsx6(PropertyBox, { ...props, paper: false }) });
-});
-PropertyPaper.displayName = "PropertyPaper";
-var Property = forwardRef2((props, ref) => {
-  return props.paper ? /* @__PURE__ */ jsx6(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ jsx6(PropertyBox, { ref, ...props });
-});
-Property.displayName = "Property";
-export {
-  Property,
-  PropertyGroup,
-  PropertyTitle,
-  PropertyValue
-};
-//# sourceMappingURL=index.js.map

package/dist/browser/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Group.tsx","../../src/components/Title.tsx","../../src/components/Property.tsx","../../src/components/ActionsMenu.tsx","../../src/components/IdenticonCorner.tsx","../../src/components/Value.tsx"],"sourcesContent":["import { Paper, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport { ReactElement } from 'react'\n\nimport { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props.js'\nimport { PropertyTitle } from './Title.js'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {\n  const theme = useTheme()\n  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined\n  return (\n    <FlexCol alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n      <FlexRow overflow=\"hidden\" justifyContent=\"stretch\" alignItems=\"stretch\">\n        <PropertyTitle alignItems=\"flex-start\" size=\"full\" title={title} tip={tip} {...titleProps} />\n        {childrenArray ?\n          <FlexGrowRow>\n            {childrenArray?.map((child, index) => {\n              return child ?\n                  <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>\n                    {child}\n                  </FlexGrowRow>\n                : null\n            })}\n          </FlexGrowRow>\n        : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {\n  return (\n    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\n      <PropertyGroupBox {...props} paper={false} />\n    </Paper>\n  )\n}\n\nexport const PropertyGroup: React.FC<PropertyGroupProps> = (props) => {\n  return props.paper ? <PropertyGroupPaper {...props} /> : <PropertyGroupBox {...props} />\n}\n","import { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { ReactNode } from 'react'\n\nexport type TitleSizeProp = SizeProp | 'full'\n\nexport interface PropertyTitleProps extends FlexBoxProps {\n  elevation?: number\n  more?: ReactNode\n  size?: TitleSizeProp\n  tip?: ReactNode\n  title?: string\n}\n\nexport const PropertyTitle: React.FC<PropertyTitleProps> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {\n  const sizeVariants: Record<TitleSizeProp, TypographyVariant> = {\n    full: 'caption',\n    large: 'caption',\n    medium: 'caption',\n    small: 'caption',\n  }\n\n  const sizeTitleHeight: Record<TitleSizeProp, number | undefined> = {\n    full: undefined,\n    large: 32,\n    medium: 20,\n    small: 16,\n  }\n\n  const sizeFontSize: Record<TitleSizeProp, number> = {\n    full: 16,\n    large: 16,\n    medium: 14,\n    small: 10,\n  }\n\n  const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16\n\n  const theme = useTheme()\n\n  return (\n    <FlexRow\n      bgcolor={\n        theme.palette.mode === 'dark' ?\n          lighten(theme.palette.background.paper, 0.05 * elevation)\n        : darken(theme.palette.background.paper, 0.025 * elevation)\n      }\n      alignItems=\"center\"\n      height={sizeTitleHeight[size]}\n      justifyContent=\"space-between\"\n      {...props}\n    >\n      <FlexRow paddingX={1} paddingY={0.5}>\n        <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>\n          <small>\n            <strong>{title}</strong>\n          </small>\n        </Typography>\n        {tip ?\n          <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n            {tip}\n          </QuickTipButton>\n        : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import { CircularProgress, Paper, TypographyVariant } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu.js'\nimport { IdenticonCorner } from './IdenticonCorner.js'\nimport { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props.js'\nimport { PropertyTitle } from './Title.js'\nimport { PropertyValue } from './Value.js'\n\nconst PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(\n  ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {\n    const sizeValueHeight: Record<SizeProp, number> = {\n      large: 48,\n      medium: 36,\n      small: 24,\n    }\n\n    const sizeVariants: Record<SizeProp, TypographyVariant> = {\n      large: 'h6',\n      medium: 'body1',\n      small: 'body2',\n    }\n\n    return (\n      <FlexRow ref={ref} flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n        {title === undefined ? null : (\n          <PropertyTitle\n            tip={tip}\n            title={required ? `${title}*` : title}\n            size={size}\n            more={<PropertyActionsMenu actions={actions} />}\n            {...titleProps}\n          />\n        )}\n        <FlexRow\n          pl={1}\n          columnGap={1}\n          justifyContent={value === undefined ? 'center' : 'space-between'}\n          overflow=\"hidden\"\n          height={sizeValueHeight[size]}\n        >\n          {(children ?? value === undefined) ?\n            <CircularProgress size={16} />\n          : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />}\n          {value === undefined ?\n            null\n          : badge ?\n            <IdenticonCorner value={value} />\n          : null}\n        </FlexRow>\n      </FlexRow>\n    )\n  },\n)\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({ style, variant, elevation = 2, square, ...props }, ref) => {\n  return (\n    <Paper ref={ref} style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n})\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property = forwardRef<HTMLDivElement, PropertyProps>((props, ref) => {\n  return props.paper ? <PropertyPaper ref={ref} {...props} /> : <PropertyBox ref={ref} {...props} />\n})\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport { IconButton, Menu, MenuItem } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { useState } from 'react'\n\nimport { PropertyActionsProps } from './ActionsProps.js'\n\nexport const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = !!anchorEl\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return actions && actions?.length > 0 ?\n      <FlexRow {...props}>\n        <IconButton size=\"small\" color=\"inherit\" onClick={handleClick}>\n          <MoreHorizIcon fontSize=\"inherit\" />\n        </IconButton>\n        <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n          {actions?.map((action) => {\n            return (\n              <MenuItem\n                key={action.name}\n                onClick={() => {\n                  action?.onClick?.()\n                  handleClose()\n                }}\n              >\n                {action.name}\n              </MenuItem>\n            )\n          })}\n        </Menu>\n      </FlexRow>\n    : null\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEffect, useRef, useState } from 'react'\n\nexport interface IdenticonCornerProps extends FlexBoxProps {\n  value?: string | number | boolean | null\n}\n\nexport const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {\n  const theme = useTheme()\n  const [parentHeight, setParentHeight] = useState<number>()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)\n  }, [])\n\n  const calculatedHeight = parentHeight ?? 0\n\n  return (\n    <FlexRow alignItems=\"flex-start\" height=\"100%\">\n      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.palette.divider}`}>\n        <div ref={ref}>\n          <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />\n        </div>\n      </FlexRow>\n    </FlexRow>\n  )\n}\n","import { Variant } from '@mui/material/styles/createTypography.js'\nimport { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {\n  typographyVariant?: Variant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {\n  return value === undefined ? null : (\n      <EllipsizeBox\n        typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}\n        width=\"100%\"\n        ref={ref}\n        {...props}\n      >\n        {value}\n      </EllipsizeBox>\n    )\n})\n\nPropertyValue.displayName = 'PropertyValue'\n"],"mappings":"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","names":["useTheme","FlexRow","jsx","jsxs","useTheme","FlexRow","Paper","FlexRow","forwardRef","FlexRow","jsx","jsxs","useTheme","FlexRow","useState","jsx","jsx","jsx","jsxs","forwardRef","FlexRow","Paper"]}