@xyo-network/react-property 2.64.0-rc.6 → 2.64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (164) hide show
  1. package/dist/browser/components/Action.cjs +19 -0
  2. package/dist/browser/components/Action.cjs.map +1 -0
  3. package/dist/browser/components/Action.d.cts +8 -0
  4. package/dist/browser/components/Action.d.cts.map +1 -0
  5. package/dist/browser/components/Actions.cjs +38 -0
  6. package/dist/{node/components/Actions.mjs.map → browser/components/Actions.cjs.map} +1 -1
  7. package/dist/browser/components/Actions.d.cts +4 -0
  8. package/dist/browser/components/Actions.d.cts.map +1 -0
  9. package/dist/browser/components/ActionsMenu.cjs +57 -0
  10. package/dist/{node/components/ActionsMenu.mjs.map → browser/components/ActionsMenu.cjs.map} +1 -1
  11. package/dist/browser/components/ActionsMenu.d.cts +4 -0
  12. package/dist/browser/components/ActionsMenu.d.cts.map +1 -0
  13. package/dist/browser/components/ActionsProps.cjs +19 -0
  14. package/dist/browser/components/ActionsProps.cjs.map +1 -0
  15. package/dist/browser/components/ActionsProps.d.cts +7 -0
  16. package/dist/browser/components/ActionsProps.d.cts.map +1 -0
  17. package/dist/browser/components/Group.cjs +93 -0
  18. package/dist/browser/components/Group.cjs.map +1 -0
  19. package/dist/browser/components/Group.d.cts +4 -0
  20. package/dist/browser/components/Group.d.cts.map +1 -0
  21. package/dist/browser/components/IdenticonCorner.cjs +41 -0
  22. package/dist/{node/components/IdenticonCorner.mjs.map → browser/components/IdenticonCorner.cjs.map} +1 -1
  23. package/dist/browser/components/IdenticonCorner.d.cts +7 -0
  24. package/dist/browser/components/IdenticonCorner.d.cts.map +1 -0
  25. package/dist/browser/components/Property.cjs +185 -0
  26. package/dist/browser/components/Property.cjs.map +1 -0
  27. package/dist/browser/components/Property.d.cts +4 -0
  28. package/dist/browser/components/Property.d.cts.map +1 -0
  29. package/dist/browser/components/Props.cjs +19 -0
  30. package/dist/browser/components/Props.cjs.map +1 -0
  31. package/dist/browser/components/Props.d.cts +35 -0
  32. package/dist/browser/components/Props.d.cts.map +1 -0
  33. package/dist/browser/components/Title.cjs +69 -0
  34. package/dist/{node/components/Title.mjs.map → browser/components/Title.cjs.map} +1 -1
  35. package/dist/browser/components/Title.d.cts +13 -0
  36. package/dist/browser/components/Title.d.cts.map +1 -0
  37. package/dist/browser/components/Value.cjs +33 -0
  38. package/dist/browser/components/Value.cjs.map +1 -0
  39. package/dist/browser/components/Value.d.cts +9 -0
  40. package/dist/browser/components/Value.d.cts.map +1 -0
  41. package/dist/browser/components/index.cjs +214 -0
  42. package/dist/browser/components/index.cjs.map +1 -0
  43. package/dist/browser/components/index.d.cts +7 -0
  44. package/dist/browser/components/index.d.cts.map +1 -0
  45. package/dist/browser/index.cjs +214 -0
  46. package/dist/browser/index.cjs.map +1 -0
  47. package/dist/browser/index.d.cts +2 -0
  48. package/dist/browser/index.d.cts.map +1 -0
  49. package/dist/docs.json +48117 -0
  50. package/dist/node/components/Action.cjs +19 -0
  51. package/dist/node/components/Action.cjs.map +1 -0
  52. package/dist/node/components/Action.d.cts +8 -0
  53. package/dist/node/components/Action.d.cts.map +1 -0
  54. package/dist/node/components/Action.js +0 -16
  55. package/dist/node/components/Action.js.map +1 -1
  56. package/dist/node/components/Actions.cjs +42 -0
  57. package/dist/node/components/Actions.cjs.map +1 -0
  58. package/dist/node/components/Actions.d.cts +4 -0
  59. package/dist/node/components/Actions.d.cts.map +1 -0
  60. package/dist/node/components/Actions.js +10 -33
  61. package/dist/node/components/Actions.js.map +1 -1
  62. package/dist/node/components/ActionsMenu.cjs +62 -0
  63. package/dist/node/components/ActionsMenu.cjs.map +1 -0
  64. package/dist/node/components/ActionsMenu.d.cts +4 -0
  65. package/dist/node/components/ActionsMenu.d.cts.map +1 -0
  66. package/dist/node/components/ActionsMenu.js +17 -39
  67. package/dist/node/components/ActionsMenu.js.map +1 -1
  68. package/dist/node/components/ActionsProps.cjs +19 -0
  69. package/dist/node/components/ActionsProps.cjs.map +1 -0
  70. package/dist/node/components/ActionsProps.d.cts +7 -0
  71. package/dist/node/components/ActionsProps.d.cts.map +1 -0
  72. package/dist/node/components/ActionsProps.js +0 -16
  73. package/dist/node/components/ActionsProps.js.map +1 -1
  74. package/dist/node/components/Group.cjs +97 -0
  75. package/dist/node/components/Group.cjs.map +1 -0
  76. package/dist/node/components/Group.d.cts +4 -0
  77. package/dist/node/components/Group.d.cts.map +1 -0
  78. package/dist/node/components/Group.js +65 -42
  79. package/dist/node/components/Group.js.map +1 -1
  80. package/dist/node/components/IdenticonCorner.cjs +46 -0
  81. package/dist/node/components/IdenticonCorner.cjs.map +1 -0
  82. package/dist/node/components/IdenticonCorner.d.cts +7 -0
  83. package/dist/node/components/IdenticonCorner.d.cts.map +1 -0
  84. package/dist/node/components/IdenticonCorner.js +16 -38
  85. package/dist/node/components/IdenticonCorner.js.map +1 -1
  86. package/dist/node/components/Property.cjs +191 -0
  87. package/dist/node/components/Property.cjs.map +1 -0
  88. package/dist/node/components/Property.d.cts +4 -0
  89. package/dist/node/components/Property.d.cts.map +1 -0
  90. package/dist/node/components/Property.js +125 -44
  91. package/dist/node/components/Property.js.map +1 -1
  92. package/dist/node/components/Props.cjs +19 -0
  93. package/dist/node/components/Props.cjs.map +1 -0
  94. package/dist/node/components/Props.d.cts +35 -0
  95. package/dist/node/components/Props.d.cts.map +1 -0
  96. package/dist/node/components/Props.js +0 -16
  97. package/dist/node/components/Props.js.map +1 -1
  98. package/dist/node/components/Title.cjs +73 -0
  99. package/dist/node/components/Title.cjs.map +1 -0
  100. package/dist/node/components/Title.d.cts +13 -0
  101. package/dist/node/components/Title.d.cts.map +1 -0
  102. package/dist/node/components/Title.js +15 -38
  103. package/dist/node/components/Title.js.map +1 -1
  104. package/dist/node/components/{Title.stories.js → Value.cjs} +14 -30
  105. package/dist/node/components/{Value.mjs.map → Value.cjs.map} +1 -1
  106. package/dist/node/components/Value.d.cts +9 -0
  107. package/dist/node/components/Value.d.cts.map +1 -0
  108. package/dist/node/components/Value.js +8 -31
  109. package/dist/node/components/Value.js.map +1 -1
  110. package/dist/node/components/index.cjs +223 -0
  111. package/dist/node/components/index.cjs.map +1 -0
  112. package/dist/node/components/index.d.cts +7 -0
  113. package/dist/node/components/index.d.cts.map +1 -0
  114. package/dist/node/components/index.js +190 -30
  115. package/dist/node/components/index.js.map +1 -1
  116. package/dist/node/index.cjs +223 -0
  117. package/dist/node/index.cjs.map +1 -0
  118. package/dist/node/index.d.cts +2 -0
  119. package/dist/node/index.d.cts.map +1 -0
  120. package/dist/node/index.js +190 -20
  121. package/dist/node/index.js.map +1 -1
  122. package/package.json +21 -21
  123. package/dist/browser/components/PropertyBox.stories.js +0 -160
  124. package/dist/browser/components/PropertyBox.stories.js.map +0 -1
  125. package/dist/browser/components/PropertyPaper.stories.js +0 -178
  126. package/dist/browser/components/PropertyPaper.stories.js.map +0 -1
  127. package/dist/browser/components/Title.stories.js +0 -27
  128. package/dist/browser/components/Title.stories.js.map +0 -1
  129. package/dist/browser/components/Value.stories.js +0 -26
  130. package/dist/browser/components/Value.stories.js.map +0 -1
  131. package/dist/node/components/Action.mjs +0 -1
  132. package/dist/node/components/Action.mjs.map +0 -1
  133. package/dist/node/components/Actions.mjs +0 -16
  134. package/dist/node/components/ActionsMenu.mjs +0 -35
  135. package/dist/node/components/ActionsProps.mjs +0 -1
  136. package/dist/node/components/ActionsProps.mjs.map +0 -1
  137. package/dist/node/components/Group.mjs +0 -25
  138. package/dist/node/components/Group.mjs.map +0 -1
  139. package/dist/node/components/IdenticonCorner.mjs +0 -19
  140. package/dist/node/components/Property.mjs +0 -61
  141. package/dist/node/components/Property.mjs.map +0 -1
  142. package/dist/node/components/PropertyBox.stories.js +0 -197
  143. package/dist/node/components/PropertyBox.stories.js.map +0 -1
  144. package/dist/node/components/PropertyBox.stories.mjs +0 -160
  145. package/dist/node/components/PropertyBox.stories.mjs.map +0 -1
  146. package/dist/node/components/PropertyPaper.stories.js +0 -217
  147. package/dist/node/components/PropertyPaper.stories.js.map +0 -1
  148. package/dist/node/components/PropertyPaper.stories.mjs +0 -178
  149. package/dist/node/components/PropertyPaper.stories.mjs.map +0 -1
  150. package/dist/node/components/Props.mjs +0 -1
  151. package/dist/node/components/Props.mjs.map +0 -1
  152. package/dist/node/components/Title.mjs +0 -47
  153. package/dist/node/components/Title.stories.js.map +0 -1
  154. package/dist/node/components/Title.stories.mjs +0 -27
  155. package/dist/node/components/Title.stories.mjs.map +0 -1
  156. package/dist/node/components/Value.mjs +0 -11
  157. package/dist/node/components/Value.stories.js +0 -51
  158. package/dist/node/components/Value.stories.js.map +0 -1
  159. package/dist/node/components/Value.stories.mjs +0 -26
  160. package/dist/node/components/Value.stories.mjs.map +0 -1
  161. package/dist/node/components/index.mjs +0 -7
  162. package/dist/node/components/index.mjs.map +0 -1
  163. package/dist/node/index.mjs +0 -2
  164. package/dist/node/index.mjs.map +0 -1
@@ -0,0 +1,214 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var src_exports = {};
22
+ __export(src_exports, {
23
+ Property: () => Property,
24
+ PropertyGroup: () => PropertyGroup,
25
+ PropertyTitle: () => PropertyTitle,
26
+ PropertyValue: () => PropertyValue
27
+ });
28
+ module.exports = __toCommonJS(src_exports);
29
+
30
+ // src/components/Group.tsx
31
+ var import_material2 = require("@mui/material");
32
+ var import_react_flexbox2 = require("@xylabs/react-flexbox");
33
+ var import_typeof = require("@xyo-network/typeof");
34
+
35
+ // src/components/Title.tsx
36
+ var import_material = require("@mui/material");
37
+ var import_react_flexbox = require("@xylabs/react-flexbox");
38
+ var import_react_quick_tip_button = require("@xylabs/react-quick-tip-button");
39
+ var import_jsx_runtime = require("react/jsx-runtime");
40
+ var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
41
+ const sizeVariants = {
42
+ full: "caption",
43
+ large: "caption",
44
+ medium: "caption",
45
+ small: "caption"
46
+ };
47
+ const sizeTitleHeight = {
48
+ full: void 0,
49
+ large: 32,
50
+ medium: 20,
51
+ small: 16
52
+ };
53
+ const sizeFontSize = {
54
+ full: 16,
55
+ large: 16,
56
+ medium: 14,
57
+ small: 10
58
+ };
59
+ const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
60
+ const theme = (0, import_material.useTheme)();
61
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
62
+ import_react_flexbox.FlexRow,
63
+ {
64
+ 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),
65
+ alignItems: "center",
66
+ height: sizeTitleHeight[size],
67
+ justifyContent: "space-between",
68
+ ...props,
69
+ children: [
70
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { paddingX: 1, paddingY: 0.5, children: [
71
+ /* @__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 }) }) }),
72
+ tip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_quick_tip_button.QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
73
+ ] }),
74
+ more
75
+ ]
76
+ }
77
+ );
78
+ };
79
+
80
+ // src/components/Group.tsx
81
+ var import_jsx_runtime2 = require("react/jsx-runtime");
82
+ var PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
83
+ const theme = (0, import_material2.useTheme)();
84
+ const childrenArray = (0, import_typeof.typeOf)(children) === "array" ? children : void 0;
85
+ 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: [
86
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
87
+ childrenArray ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { children: childrenArray?.map((child, index) => {
88
+ return child ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index) : null;
89
+ }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { overflow: "hidden", children })
90
+ ] }) });
91
+ };
92
+ var PropertyGroupPaper = ({ style, variant, elevation, square, ...props }) => {
93
+ 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 }) });
94
+ };
95
+ var PropertyGroup = (props) => {
96
+ return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupBox, { ...props });
97
+ };
98
+
99
+ // src/components/Property.tsx
100
+ var import_material5 = require("@mui/material");
101
+ var import_react_flexbox5 = require("@xylabs/react-flexbox");
102
+ var import_react4 = require("react");
103
+
104
+ // src/components/ActionsMenu.tsx
105
+ var import_icons_material = require("@mui/icons-material");
106
+ var import_material3 = require("@mui/material");
107
+ var import_react_flexbox3 = require("@xylabs/react-flexbox");
108
+ var import_react = require("react");
109
+ var import_jsx_runtime3 = require("react/jsx-runtime");
110
+ var PropertyActionsMenu = ({ actions, ...props }) => {
111
+ const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
112
+ const open = !!anchorEl;
113
+ const handleClick = (event) => {
114
+ setAnchorEl(event.currentTarget);
115
+ };
116
+ const handleClose = () => {
117
+ setAnchorEl(null);
118
+ };
119
+ return actions && actions?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox3.FlexRow, { ...props, children: [
120
+ /* @__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" }) }),
121
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
122
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
123
+ import_material3.MenuItem,
124
+ {
125
+ onClick: () => {
126
+ action?.onClick?.();
127
+ handleClose();
128
+ },
129
+ children: action.name
130
+ },
131
+ action.name
132
+ );
133
+ }) })
134
+ ] }) : null;
135
+ };
136
+
137
+ // src/components/IdenticonCorner.tsx
138
+ var import_material4 = require("@mui/material");
139
+ var import_react_flexbox4 = require("@xylabs/react-flexbox");
140
+ var import_react_identicon = require("@xylabs/react-identicon");
141
+ var import_react2 = require("react");
142
+ var import_jsx_runtime4 = require("react/jsx-runtime");
143
+ var IdenticonCorner = ({ value, ...props }) => {
144
+ const theme = (0, import_material4.useTheme)();
145
+ const [parentHeight, setParentHeight] = (0, import_react2.useState)();
146
+ const ref = (0, import_react2.useRef)(null);
147
+ (0, import_react2.useEffect)(() => {
148
+ setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
149
+ }, []);
150
+ const calculatedHeight = parentHeight ?? 0;
151
+ 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 }) }) }) });
152
+ };
153
+
154
+ // src/components/Value.tsx
155
+ var import_react_shared = require("@xyo-network/react-shared");
156
+ var import_react3 = require("react");
157
+ var import_jsx_runtime5 = require("react/jsx-runtime");
158
+ var PropertyValue = (0, import_react3.forwardRef)(({ typographyVariant = "body1", value, ...props }, ref) => {
159
+ return value !== void 0 ? /* @__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 }) : null;
160
+ });
161
+ PropertyValue.displayName = "PropertyValue";
162
+
163
+ // src/components/Property.tsx
164
+ var import_jsx_runtime6 = require("react/jsx-runtime");
165
+ var PropertyBox = (0, import_react4.forwardRef)(
166
+ ({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }, ref) => {
167
+ const sizeValueHeight = {
168
+ large: 48,
169
+ medium: 36,
170
+ small: 24
171
+ };
172
+ const sizeVariants = {
173
+ large: "h6",
174
+ medium: "body1",
175
+ small: "body2"
176
+ };
177
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_flexbox5.FlexRow, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
178
+ title !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
179
+ PropertyTitle,
180
+ {
181
+ tip,
182
+ title: required ? `${title}*` : title,
183
+ size,
184
+ more: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyActionsMenu, { actions }),
185
+ ...titleProps
186
+ }
187
+ ) : null,
188
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
189
+ import_react_flexbox5.FlexRow,
190
+ {
191
+ pl: 1,
192
+ columnGap: 1,
193
+ justifyContent: value === void 0 ? "center" : "space-between",
194
+ overflow: "hidden",
195
+ height: sizeValueHeight[size],
196
+ children: [
197
+ children ? children : value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyValue, { value, typographyVariant: sizeVariants[size] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.CircularProgress, { size: 16 }),
198
+ value !== void 0 ? badge ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IdenticonCorner, { value }) : null : null
199
+ ]
200
+ }
201
+ )
202
+ ] });
203
+ }
204
+ );
205
+ PropertyBox.displayName = "PropertyBox";
206
+ var PropertyPaper = (0, import_react4.forwardRef)(({ style, variant, elevation = 2, square, ...props }, ref) => {
207
+ 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 }) });
208
+ });
209
+ PropertyPaper.displayName = "PropertyPaper";
210
+ var Property = (0, import_react4.forwardRef)((props, ref) => {
211
+ return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyBox, { ref, ...props });
212
+ });
213
+ Property.displayName = "Property";
214
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +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'\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'\nimport { PropertyTitle } from './Title'\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 ) : (\n <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>\n )}\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'\nimport { IdenticonCorner } from './IdenticonCorner'\nimport { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props'\nimport { PropertyTitle } from './Title'\nimport { PropertyValue } from './Value'\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 <PropertyTitle\n tip={tip}\n title={required ? `${title}*` : title}\n size={size}\n more={<PropertyActionsMenu actions={actions} />}\n {...titleProps}\n />\n ) : null}\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 ? (\n children\n ) : value !== undefined ? (\n <PropertyValue value={value} typographyVariant={sizeVariants[size]} />\n ) : (\n <CircularProgress size={16} />\n )}\n {value !== undefined ? badge ? <IdenticonCorner value={value} /> : null : 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'\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 type { Variant } from '@mui/material/styles/createTypography'\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 ? (\n <EllipsizeBox typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }} width=\"100%\" ref={ref} {...props}>\n {value}\n </EllipsizeBox>\n ) : null\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"]}
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}