@xyo-network/react-property 2.81.9 → 2.82.0

package/dist/browser/index.cjs

@@ -1,8 +1,11 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -31,13 +42,14 @@ module.exports = __toCommonJS(src_exports);
 var import_material2 = require("@mui/material");
 var import_react_flexbox2 = require("@xylabs/react-flexbox");
 var import_typeof = require("@xyo-network/typeof");
+var import_react2 = __toESM(require("react"), 1);
 
 // src/components/Title.tsx
 var import_material = require("@mui/material");
 var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_quick_tip_button = require("@xylabs/react-quick-tip-button");
-var import_jsx_runtime = require("react/jsx-runtime");
-var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
+var import_react = __toESM(require("react"), 1);
+var PropertyTitle = /* @__PURE__ */ __name(({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
   const sizeVariants = {
     full: "caption",
     large: "caption",
@@ -58,166 +70,234 @@ var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...prop
   };
   const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
   const theme = (0, import_material.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_react_flexbox.FlexRow,
-    {
-      bgcolor: theme.palette.mode === "dark" ? (0, import_material.lighten)(theme.palette.background.paper, 0.05 * elevation) : (0, import_material.darken)(theme.palette.background.paper, 0.025 * elevation),
-      alignItems: "center",
-      height: sizeTitleHeight[size],
-      justifyContent: "space-between",
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { paddingX: 1, paddingY: 0.5, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { fontWeight: 500, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: title }) }) }),
-          tip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_quick_tip_button.QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
-        ] }),
-        more
-      ]
-    }
-  );
-};
+  return /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexRow, {
+    bgcolor: theme.palette.mode === "dark" ? (0, import_material.lighten)(theme.palette.background.paper, 0.05 * elevation) : (0, import_material.darken)(theme.palette.background.paper, 0.025 * elevation),
+    alignItems: "center",
+    height: sizeTitleHeight[size],
+    justifyContent: "space-between",
+    ...props
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexRow, {
+    paddingX: 1,
+    paddingY: 0.5
+  }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, {
+    fontWeight: 500,
+    noWrap: true,
+    variant: sizeVariants[size],
+    fontSize: sizeFontSize[size]
+  }, /* @__PURE__ */ import_react.default.createElement("small", null, /* @__PURE__ */ import_react.default.createElement("strong", null, title))), tip ? /* @__PURE__ */ import_react.default.createElement(import_react_quick_tip_button.QuickTipButton, {
+    style: {
+      fontSize: quickTipSize
+    },
+    color: "inherit",
+    title: title ?? ""
+  }, tip) : null), more);
+}, "PropertyTitle");
 
 // src/components/Group.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
+var PropertyGroupBox = /* @__PURE__ */ __name(({ titleProps, children, title, tip, ...props }) => {
   const theme = (0, import_material2.useTheme)();
   const childrenArray = (0, import_typeof.typeOf)(children) === "array" ? children : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexCol, { alignItems: "stretch", overflow: "hidden", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox2.FlexRow, { overflow: "hidden", justifyContent: "stretch", alignItems: "stretch", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
-    childrenArray ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { children: childrenArray?.map((child, index) => {
-      return child ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index) : null;
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { overflow: "hidden", children })
-  ] }) });
-};
-var PropertyGroupPaper = ({ style, variant, elevation, square, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Paper, { style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupBox, { ...props, paper: false }) });
-};
-var PropertyGroup = (props) => {
-  return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupBox, { ...props });
-};
+  return /* @__PURE__ */ import_react2.default.createElement(import_react_flexbox2.FlexCol, {
+    alignItems: "stretch",
+    overflow: "hidden",
+    ...props
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_flexbox2.FlexRow, {
+    overflow: "hidden",
+    justifyContent: "stretch",
+    alignItems: "stretch"
+  }, /* @__PURE__ */ import_react2.default.createElement(PropertyTitle, {
+    alignItems: "flex-start",
+    size: "full",
+    title,
+    tip,
+    ...titleProps
+  }), childrenArray ? /* @__PURE__ */ import_react2.default.createElement(import_react_flexbox2.FlexGrowRow, null, childrenArray?.map((child, index) => {
+    return child ? /* @__PURE__ */ import_react2.default.createElement(import_react_flexbox2.FlexGrowRow, {
+      key: index,
+      borderLeft: 1,
+      borderColor: theme.palette.divider
+    }, child) : null;
+  })) : /* @__PURE__ */ import_react2.default.createElement(import_react_flexbox2.FlexGrowRow, {
+    overflow: "hidden"
+  }, children)));
+}, "PropertyGroupBox");
+var PropertyGroupPaper = /* @__PURE__ */ __name(({ style, variant, elevation, square, ...props }) => {
+  return /* @__PURE__ */ import_react2.default.createElement(import_material2.Paper, {
+    style: {
+      minWidth: 0,
+      overflow: "hidden",
+      ...style
+    },
+    variant,
+    elevation,
+    square
+  }, /* @__PURE__ */ import_react2.default.createElement(PropertyGroupBox, {
+    ...props,
+    paper: false
+  }));
+}, "PropertyGroupPaper");
+var PropertyGroup = /* @__PURE__ */ __name((props) => {
+  return props.paper ? /* @__PURE__ */ import_react2.default.createElement(PropertyGroupPaper, props) : /* @__PURE__ */ import_react2.default.createElement(PropertyGroupBox, props);
+}, "PropertyGroup");
 
 // src/components/Property.tsx
 var import_material5 = require("@mui/material");
 var import_react_flexbox5 = require("@xylabs/react-flexbox");
-var import_react4 = require("react");
+var import_react6 = __toESM(require("react"), 1);
 
 // src/components/ActionsMenu.tsx
 var import_icons_material = require("@mui/icons-material");
 var import_material3 = require("@mui/material");
 var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var PropertyActionsMenu = ({ actions, ...props }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
+var import_react3 = __toESM(require("react"), 1);
+var PropertyActionsMenu = /* @__PURE__ */ __name(({ actions, ...props }) => {
+  const [anchorEl, setAnchorEl] = (0, import_react3.useState)(null);
   const open = !!anchorEl;
-  const handleClick = (event) => {
+  const handleClick = /* @__PURE__ */ __name((event) => {
     setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
+  }, "handleClick");
+  const handleClose = /* @__PURE__ */ __name(() => {
     setAnchorEl(null);
-  };
-  return actions && actions?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox3.FlexRow, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material.MoreHoriz, { fontSize: "inherit" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_material3.MenuItem,
-        {
-          onClick: () => {
-            action?.onClick?.();
-            handleClose();
-          },
-          children: action.name
-        },
-        action.name
-      );
-    }) })
-  ] }) : null;
-};
+  }, "handleClose");
+  return actions && actions?.length > 0 ? /* @__PURE__ */ import_react3.default.createElement(import_react_flexbox3.FlexRow, props, /* @__PURE__ */ import_react3.default.createElement(import_material3.IconButton, {
+    size: "small",
+    color: "inherit",
+    onClick: handleClick
+  }, /* @__PURE__ */ import_react3.default.createElement(import_icons_material.MoreHoriz, {
+    fontSize: "inherit"
+  })), /* @__PURE__ */ import_react3.default.createElement(import_material3.Menu, {
+    anchorEl,
+    open,
+    onClose: handleClose
+  }, actions?.map((action) => {
+    return /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, {
+      key: action.name,
+      onClick: /* @__PURE__ */ __name(() => {
+        action?.onClick?.();
+        handleClose();
+      }, "onClick")
+    }, action.name);
+  }))) : null;
+}, "PropertyActionsMenu");
 
 // src/components/IdenticonCorner.tsx
 var import_material4 = require("@mui/material");
 var import_react_flexbox4 = require("@xylabs/react-flexbox");
 var import_react_identicon = require("@xylabs/react-identicon");
-var import_react2 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var IdenticonCorner = ({ value, ...props }) => {
+var import_react4 = __toESM(require("react"), 1);
+var IdenticonCorner = /* @__PURE__ */ __name(({ value, ...props }) => {
   const theme = (0, import_material4.useTheme)();
-  const [parentHeight, setParentHeight] = (0, import_react2.useState)();
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const [parentHeight, setParentHeight] = (0, import_react4.useState)();
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
   }, []);
   const calculatedHeight = parentHeight ?? 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox4.FlexRow, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox4.FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_identicon.Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
-};
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox4.FlexRow, {
+    alignItems: "flex-start",
+    height: "100%"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox4.FlexRow, {
+    background: true,
+    height: calculatedHeight,
+    width: calculatedHeight,
+    borderLeft: `1px solid ${theme.palette.divider}`
+  }, /* @__PURE__ */ import_react4.default.createElement("div", {
+    ref
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_identicon.Identicon, {
+    size: calculatedHeight * 0.6,
+    value: `${value}`,
+    sx: {
+      padding: `${calculatedHeight * 0.2}px`
+    },
+    ...props
+  }))));
+}, "IdenticonCorner");
 
 // src/components/Value.tsx
 var import_react_shared = require("@xyo-network/react-shared");
-var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var PropertyValue = (0, import_react3.forwardRef)(({ typographyVariant = "body1", value, ...props }, ref) => {
-  return value === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_react_shared.EllipsizeBox,
-    {
-      typographyProps: { component: void 0, title: value?.toString(), variant: typographyVariant },
-      width: "100%",
-      ref,
-      ...props,
-      children: value
-    }
-  );
+var import_react5 = __toESM(require("react"), 1);
+var PropertyValue = /* @__PURE__ */ (0, import_react5.forwardRef)(({ typographyVariant = "body1", value, ...props }, ref) => {
+  return value === void 0 ? null : /* @__PURE__ */ import_react5.default.createElement(import_react_shared.EllipsizeBox, {
+    typographyProps: {
+      component: void 0,
+      title: value?.toString(),
+      variant: typographyVariant
+    },
+    width: "100%",
+    ref,
+    ...props
+  }, value);
 });
 PropertyValue.displayName = "PropertyValue";
 
 // src/components/Property.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var PropertyBox = (0, import_react4.forwardRef)(
-  ({ 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__ */ (0, import_jsx_runtime6.jsxs)(import_react_flexbox5.FlexRow, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
-      title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        PropertyTitle,
-        {
-          tip,
-          title: required ? `${title}*` : title,
-          size,
-          more: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyActionsMenu, { actions }),
-          ...titleProps
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        import_react_flexbox5.FlexRow,
-        {
-          pl: 1,
-          columnGap: 1,
-          justifyContent: value === void 0 ? "center" : "space-between",
-          overflow: "hidden",
-          height: sizeValueHeight[size],
-          children: [
-            children ?? value === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.CircularProgress, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyValue, { value, typographyVariant: sizeVariants[size] }),
-            value === void 0 ? null : badge ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IdenticonCorner, { value }) : null
-          ]
-        }
-      )
-    ] });
-  }
-);
+var PropertyBox = /* @__PURE__ */ (0, import_react6.forwardRef)(({ 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__ */ import_react6.default.createElement(import_react_flexbox5.FlexRow, {
+    ref,
+    flexDirection: "column",
+    minWidth: 0,
+    alignItems: "stretch",
+    overflow: "hidden",
+    ...props
+  }, title === void 0 ? null : /* @__PURE__ */ import_react6.default.createElement(PropertyTitle, {
+    tip,
+    title: required ? `${title}*` : title,
+    size,
+    more: /* @__PURE__ */ import_react6.default.createElement(PropertyActionsMenu, {
+      actions
+    }),
+    ...titleProps
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_flexbox5.FlexRow, {
+    pl: 1,
+    columnGap: 1,
+    justifyContent: value === void 0 ? "center" : "space-between",
+    overflow: "hidden",
+    height: sizeValueHeight[size]
+  }, children ?? value === void 0 ? /* @__PURE__ */ import_react6.default.createElement(import_material5.CircularProgress, {
+    size: 16
+  }) : /* @__PURE__ */ import_react6.default.createElement(PropertyValue, {
+    value,
+    typographyVariant: sizeVariants[size]
+  }), value === void 0 ? null : badge ? /* @__PURE__ */ import_react6.default.createElement(IdenticonCorner, {
+    value
+  }) : null));
+});
 PropertyBox.displayName = "PropertyBox";
-var PropertyPaper = (0, import_react4.forwardRef)(({ style, variant, elevation = 2, square, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.Paper, { ref, style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyBox, { ...props, paper: false }) });
+var PropertyPaper = /* @__PURE__ */ (0, import_react6.forwardRef)(({ style, variant, elevation = 2, square, ...props }, ref) => {
+  return /* @__PURE__ */ import_react6.default.createElement(import_material5.Paper, {
+    ref,
+    style: {
+      minWidth: 0,
+      overflow: "hidden",
+      ...style
+    },
+    variant,
+    elevation,
+    square
+  }, /* @__PURE__ */ import_react6.default.createElement(PropertyBox, {
+    ...props,
+    paper: false
+  }));
 });
 PropertyPaper.displayName = "PropertyPaper";
-var Property = (0, import_react4.forwardRef)((props, ref) => {
-  return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyBox, { ref, ...props });
+var Property = /* @__PURE__ */ (0, import_react6.forwardRef)((props, ref) => {
+  return props.paper ? /* @__PURE__ */ import_react6.default.createElement(PropertyPaper, {
+    ref,
+    ...props
+  }) : /* @__PURE__ */ import_react6.default.createElement(PropertyBox, {
+    ref,
+    ...props
+  });
 });
 Property.displayName = "Property";
 //# sourceMappingURL=index.cjs.map

package/dist/browser/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../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":["export * from './components/index.js'\n","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":["import_material","import_react_flexbox","import_jsx_runtime","import_material","import_react_flexbox","import_react","import_material","import_react_flexbox","import_jsx_runtime","MoreHorizIcon","import_material","import_react_flexbox","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/index.ts","../../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":["export * from './components/index.ts'\n","import { Paper, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport React, { ReactElement } from 'react'\n\nimport { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\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          ? (\n              <FlexGrowRow>\n                {childrenArray?.map((child, index) => {\n                  return child\n                    ? (\n                        <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>\n                          {child}\n                        </FlexGrowRow>\n                      )\n                    : null\n                })}\n              </FlexGrowRow>\n            )\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 React, { 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          ? (\n              <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n                {tip}\n              </QuickTipButton>\n            )\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 React, { forwardRef } from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu.tsx'\nimport { IdenticonCorner } from './IdenticonCorner.tsx'\nimport { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\nimport { PropertyValue } from './Value.tsx'\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\n          ? null\n          : (\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 React, { useState } from 'react'\n\nimport { PropertyActionsProps } from './ActionsProps.ts'\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    ? (\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      )\n    : null\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport React, { 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","// eslint-disable-next-line import/no-internal-modules\nimport { Variant } from '@mui/material/styles/createTypography.js'\nimport { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport React, { 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\n    ? null\n    : (\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":["import_material","import_react_flexbox","import_react","PropertyTitle","elevation","size","tip","more","title","props","sizeVariants","full","large","medium","small","sizeTitleHeight","undefined","sizeFontSize","quickTipSize","theme","useTheme","React","FlexRow","bgcolor","palette","mode","lighten","background","paper","darken","alignItems","height","justifyContent","paddingX","paddingY","Typography","fontWeight","noWrap","variant","fontSize","strong","QuickTipButton","style","color","PropertyGroupBox","titleProps","children","title","tip","props","theme","useTheme","childrenArray","typeOf","undefined","React","FlexCol","alignItems","overflow","FlexRow","justifyContent","PropertyTitle","size","FlexGrowRow","map","child","index","key","borderLeft","borderColor","palette","divider","PropertyGroupPaper","style","variant","elevation","square","Paper","minWidth","paper","PropertyGroup","import_material","import_react_flexbox","import_react","import_material","import_react_flexbox","import_react","PropertyActionsMenu","actions","props","anchorEl","setAnchorEl","useState","open","handleClick","event","currentTarget","handleClose","length","React","FlexRow","IconButton","size","color","onClick","MoreHorizIcon","fontSize","Menu","onClose","map","action","MenuItem","key","name","import_material","import_react_flexbox","import_react","IdenticonCorner","value","props","theme","useTheme","parentHeight","setParentHeight","useState","ref","useRef","useEffect","current","parentElement","clientHeight","calculatedHeight","React","FlexRow","alignItems","height","background","width","borderLeft","palette","divider","div","Identicon","size","sx","padding","import_react","PropertyValue","forwardRef","typographyVariant","value","props","ref","undefined","React","EllipsizeBox","typographyProps","component","title","toString","variant","width","displayName","PropertyBox","forwardRef","titleProps","title","value","children","size","tip","actions","required","badge","props","ref","sizeValueHeight","large","medium","small","sizeVariants","React","FlexRow","flexDirection","minWidth","alignItems","overflow","undefined","PropertyTitle","more","PropertyActionsMenu","pl","columnGap","justifyContent","height","CircularProgress","PropertyValue","typographyVariant","IdenticonCorner","displayName","PropertyPaper","style","variant","elevation","square","Paper","paper","Property"]}

package/dist/browser/index.d.cts

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

package/dist/browser/index.d.mts

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

package/dist/browser/index.d.ts

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