@xyo-network/react-property 2.62.3 → 2.63.1

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 (129) hide show
  1. package/dist/cjs/components/Action.js +3 -0
  2. package/dist/cjs/components/Action.js.map +1 -0
  3. package/dist/cjs/components/Actions.js +20 -0
  4. package/dist/cjs/components/Actions.js.map +1 -0
  5. package/dist/cjs/components/ActionsMenu.js +29 -0
  6. package/dist/cjs/components/ActionsMenu.js.map +1 -0
  7. package/dist/cjs/components/ActionsProps.js +3 -0
  8. package/dist/cjs/components/ActionsProps.js.map +1 -0
  9. package/dist/cjs/components/Group.js +26 -0
  10. package/dist/cjs/components/Group.js.map +1 -0
  11. package/dist/cjs/components/IdenticonCorner.js +23 -0
  12. package/dist/cjs/components/IdenticonCorner.js.map +1 -0
  13. package/dist/cjs/components/Property.js +37 -0
  14. package/dist/cjs/components/Property.js.map +1 -0
  15. package/dist/cjs/components/Props.js +3 -0
  16. package/dist/cjs/components/Props.js.map +1 -0
  17. package/dist/cjs/components/Title.js +36 -0
  18. package/dist/cjs/components/Title.js.map +1 -0
  19. package/dist/cjs/components/Value.js +13 -0
  20. package/dist/cjs/components/Value.js.map +1 -0
  21. package/dist/cjs/components/index.js +10 -0
  22. package/dist/cjs/components/index.js.map +1 -0
  23. package/dist/cjs/index.js +5 -0
  24. package/dist/cjs/index.js.map +1 -0
  25. package/dist/docs.json +51 -51
  26. package/dist/esm/components/Action.js +2 -0
  27. package/dist/esm/components/Action.js.map +1 -0
  28. package/dist/esm/components/Actions.js +13 -0
  29. package/dist/esm/components/Actions.js.map +1 -0
  30. package/dist/esm/components/ActionsMenu.js +22 -0
  31. package/dist/esm/components/ActionsMenu.js.map +1 -0
  32. package/dist/esm/components/ActionsProps.js +2 -0
  33. package/dist/esm/components/ActionsProps.js.map +1 -0
  34. package/dist/esm/components/Group.js +19 -0
  35. package/dist/esm/components/Group.js.map +1 -0
  36. package/dist/esm/components/IdenticonCorner.js +16 -0
  37. package/dist/esm/components/IdenticonCorner.js.map +1 -0
  38. package/dist/esm/components/Property.js +31 -0
  39. package/dist/esm/components/Property.js.map +1 -0
  40. package/dist/esm/components/Props.js +2 -0
  41. package/dist/esm/components/Props.js.map +1 -0
  42. package/dist/esm/components/Title.js +30 -0
  43. package/dist/esm/components/Title.js.map +1 -0
  44. package/dist/esm/components/Value.js +8 -0
  45. package/dist/esm/components/Value.js.map +1 -0
  46. package/dist/{components/index.d.mts → esm/components/index.js} +1 -1
  47. package/dist/esm/components/index.js.map +1 -0
  48. package/dist/esm/index.js +2 -0
  49. package/dist/esm/index.js.map +1 -0
  50. package/dist/types/components/Action.d.ts.map +1 -0
  51. package/dist/types/components/Actions.d.ts.map +1 -0
  52. package/dist/types/components/ActionsMenu.d.ts.map +1 -0
  53. package/dist/types/components/ActionsProps.d.ts.map +1 -0
  54. package/dist/types/components/Group.d.ts.map +1 -0
  55. package/dist/types/components/IdenticonCorner.d.ts.map +1 -0
  56. package/dist/types/components/Property.d.ts.map +1 -0
  57. package/dist/types/components/Props.d.ts.map +1 -0
  58. package/dist/types/components/Title.d.ts.map +1 -0
  59. package/dist/{components → types/components}/Value.d.ts +1 -1
  60. package/dist/types/components/Value.d.ts.map +1 -0
  61. package/dist/types/components/index.d.ts.map +1 -0
  62. package/dist/{index.d.ts.map → types/index.d.ts.map} +1 -1
  63. package/package.json +23 -31
  64. package/src/components/Value.tsx +1 -1
  65. package/dist/components/Action.d.mts +0 -8
  66. package/dist/components/Action.d.mts.map +0 -1
  67. package/dist/components/Action.d.ts.map +0 -1
  68. package/dist/components/Actions.d.mts +0 -4
  69. package/dist/components/Actions.d.mts.map +0 -1
  70. package/dist/components/Actions.d.ts.map +0 -1
  71. package/dist/components/ActionsMenu.d.mts +0 -4
  72. package/dist/components/ActionsMenu.d.mts.map +0 -1
  73. package/dist/components/ActionsMenu.d.ts.map +0 -1
  74. package/dist/components/ActionsProps.d.mts +0 -7
  75. package/dist/components/ActionsProps.d.mts.map +0 -1
  76. package/dist/components/ActionsProps.d.ts.map +0 -1
  77. package/dist/components/Group.d.mts +0 -4
  78. package/dist/components/Group.d.mts.map +0 -1
  79. package/dist/components/Group.d.ts.map +0 -1
  80. package/dist/components/IdenticonCorner.d.mts +0 -7
  81. package/dist/components/IdenticonCorner.d.mts.map +0 -1
  82. package/dist/components/IdenticonCorner.d.ts.map +0 -1
  83. package/dist/components/Property.d.mts +0 -4
  84. package/dist/components/Property.d.mts.map +0 -1
  85. package/dist/components/Property.d.ts.map +0 -1
  86. package/dist/components/PropertyBox.stories.d.mts +0 -19
  87. package/dist/components/PropertyBox.stories.d.mts.map +0 -1
  88. package/dist/components/PropertyBox.stories.d.ts +0 -19
  89. package/dist/components/PropertyBox.stories.d.ts.map +0 -1
  90. package/dist/components/PropertyPaper.stories.d.mts +0 -22
  91. package/dist/components/PropertyPaper.stories.d.mts.map +0 -1
  92. package/dist/components/PropertyPaper.stories.d.ts +0 -22
  93. package/dist/components/PropertyPaper.stories.d.ts.map +0 -1
  94. package/dist/components/Props.d.mts +0 -35
  95. package/dist/components/Props.d.mts.map +0 -1
  96. package/dist/components/Props.d.ts.map +0 -1
  97. package/dist/components/Title.d.mts +0 -13
  98. package/dist/components/Title.d.mts.map +0 -1
  99. package/dist/components/Title.d.ts.map +0 -1
  100. package/dist/components/Title.stories.d.mts +0 -7
  101. package/dist/components/Title.stories.d.mts.map +0 -1
  102. package/dist/components/Title.stories.d.ts +0 -7
  103. package/dist/components/Title.stories.d.ts.map +0 -1
  104. package/dist/components/Value.d.mts +0 -9
  105. package/dist/components/Value.d.mts.map +0 -1
  106. package/dist/components/Value.d.ts.map +0 -1
  107. package/dist/components/Value.stories.d.mts +0 -7
  108. package/dist/components/Value.stories.d.mts.map +0 -1
  109. package/dist/components/Value.stories.d.ts +0 -7
  110. package/dist/components/Value.stories.d.ts.map +0 -1
  111. package/dist/components/index.d.mts.map +0 -1
  112. package/dist/components/index.d.ts.map +0 -1
  113. package/dist/index.d.mts +0 -2
  114. package/dist/index.d.mts.map +0 -1
  115. package/dist/index.js +0 -235
  116. package/dist/index.js.map +0 -1
  117. package/dist/index.mjs +0 -195
  118. package/dist/index.mjs.map +0 -1
  119. /package/dist/{components → types/components}/Action.d.ts +0 -0
  120. /package/dist/{components → types/components}/Actions.d.ts +0 -0
  121. /package/dist/{components → types/components}/ActionsMenu.d.ts +0 -0
  122. /package/dist/{components → types/components}/ActionsProps.d.ts +0 -0
  123. /package/dist/{components → types/components}/Group.d.ts +0 -0
  124. /package/dist/{components → types/components}/IdenticonCorner.d.ts +0 -0
  125. /package/dist/{components → types/components}/Property.d.ts +0 -0
  126. /package/dist/{components → types/components}/Props.d.ts +0 -0
  127. /package/dist/{components → types/components}/Title.d.ts +0 -0
  128. /package/dist/{components → types/components}/index.d.ts +0 -0
  129. /package/dist/{index.d.ts → types/index.d.ts} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../src/components/Value.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA;AACpE,OAAO,EAAgB,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAG3E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,aAAa,+GAMxB,CAAA"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- declare const StorybookEntry: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Value").PropertyValueProps & import("react").RefAttributes<HTMLDivElement>>;
3
- declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Value").PropertyValueProps & import("react").RefAttributes<HTMLDivElement>>;
4
- declare const WithData: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Value").PropertyValueProps & import("react").RefAttributes<HTMLDivElement>>;
5
- export { Default, WithData };
6
- export default StorybookEntry;
7
- //# sourceMappingURL=Value.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Value.stories.d.ts","sourceRoot":"","sources":["../../src/components/Value.stories.tsx"],"names":[],"mappings":";AAMA,QAAA,MAAM,cAAc,yLASW,CAAA;AAI/B,QAAA,MAAM,OAAO,qLAAoB,CAAA;AAGjC,QAAA,MAAM,QAAQ,qLAAoB,CAAA;AAIlC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAA;AAG5B,eAAe,cAAc,CAAA"}
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- declare const StorybookEntry: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Value").PropertyValueProps & import("react").RefAttributes<HTMLDivElement>>;
3
- declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Value").PropertyValueProps & import("react").RefAttributes<HTMLDivElement>>;
4
- declare const WithData: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Value").PropertyValueProps & import("react").RefAttributes<HTMLDivElement>>;
5
- export { Default, WithData };
6
- export default StorybookEntry;
7
- //# sourceMappingURL=Value.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Value.stories.d.ts","sourceRoot":"","sources":["../../src/components/Value.stories.tsx"],"names":[],"mappings":";AAMA,QAAA,MAAM,cAAc,yLASW,CAAA;AAI/B,QAAA,MAAM,OAAO,qLAAoB,CAAA;AAGjC,QAAA,MAAM,QAAQ,qLAAoB,CAAA;AAIlC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAA;AAG5B,eAAe,cAAc,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
package/dist/index.d.mts DELETED
@@ -1,2 +0,0 @@
1
- export * from './components';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
package/dist/index.js DELETED
@@ -1,235 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/index.ts
31
- var src_exports = {};
32
- __export(src_exports, {
33
- Property: () => Property,
34
- PropertyGroup: () => PropertyGroup,
35
- PropertyTitle: () => PropertyTitle,
36
- PropertyValue: () => PropertyValue
37
- });
38
- module.exports = __toCommonJS(src_exports);
39
-
40
- // src/components/Group.tsx
41
- var import_material2 = require("@mui/material");
42
- var import_react_flexbox2 = require("@xylabs/react-flexbox");
43
-
44
- // ../../../../node_modules/@xyo-network/typeof/dist/index.mjs
45
- var typeOf = (item) => {
46
- return Array.isArray(item) ? "array" : typeof item;
47
- };
48
-
49
- // src/components/Title.tsx
50
- var import_material = require("@mui/material");
51
- var import_react_flexbox = require("@xylabs/react-flexbox");
52
- var import_react_quick_tip_button = require("@xylabs/react-quick-tip-button");
53
- var import_jsx_runtime = require("react/jsx-runtime");
54
- var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
55
- const sizeVariants = {
56
- full: "caption",
57
- large: "caption",
58
- medium: "caption",
59
- small: "caption"
60
- };
61
- const sizeTitleHeight = {
62
- full: void 0,
63
- large: 32,
64
- medium: 20,
65
- small: 16
66
- };
67
- const sizeFontSize = {
68
- full: 16,
69
- large: 16,
70
- medium: 14,
71
- small: 10
72
- };
73
- const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
74
- const theme = (0, import_material.useTheme)();
75
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
76
- import_react_flexbox.FlexRow,
77
- {
78
- 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),
79
- alignItems: "center",
80
- height: sizeTitleHeight[size],
81
- justifyContent: "space-between",
82
- ...props,
83
- children: [
84
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { paddingX: 1, paddingY: 0.5, children: [
85
- /* @__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 }) }) }),
86
- tip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_quick_tip_button.QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
87
- ] }),
88
- more
89
- ]
90
- }
91
- );
92
- };
93
-
94
- // src/components/Group.tsx
95
- var import_jsx_runtime2 = require("react/jsx-runtime");
96
- var PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
97
- const theme = (0, import_material2.useTheme)();
98
- const childrenArray = typeOf(children) === "array" ? children : void 0;
99
- 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: [
100
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
101
- childrenArray ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { children: childrenArray?.map((child, index) => {
102
- return child ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index) : null;
103
- }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexGrowRow, { overflow: "hidden", children })
104
- ] }) });
105
- };
106
- var PropertyGroupPaper = ({ style, variant, elevation, square, ...props }) => {
107
- 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 }) });
108
- };
109
- var PropertyGroup = (props) => {
110
- return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PropertyGroupBox, { ...props });
111
- };
112
-
113
- // src/components/Property.tsx
114
- var import_material5 = require("@mui/material");
115
- var import_react_flexbox5 = require("@xylabs/react-flexbox");
116
- var import_react4 = require("react");
117
-
118
- // src/components/ActionsMenu.tsx
119
- var import_MoreHoriz = __toESM(require("@mui/icons-material/MoreHoriz"));
120
- var import_material3 = require("@mui/material");
121
- var import_react_flexbox3 = require("@xylabs/react-flexbox");
122
- var import_react = require("react");
123
- var import_jsx_runtime3 = require("react/jsx-runtime");
124
- var PropertyActionsMenu = ({ actions, ...props }) => {
125
- const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
126
- const open = !!anchorEl;
127
- const handleClick = (event) => {
128
- setAnchorEl(event.currentTarget);
129
- };
130
- const handleClose = () => {
131
- setAnchorEl(null);
132
- };
133
- return actions && actions?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox3.FlexRow, { ...props, children: [
134
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_MoreHoriz.default, { fontSize: "inherit" }) }),
135
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
136
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
137
- import_material3.MenuItem,
138
- {
139
- onClick: () => {
140
- action?.onClick?.();
141
- handleClose();
142
- },
143
- children: action.name
144
- },
145
- action.name
146
- );
147
- }) })
148
- ] }) : null;
149
- };
150
-
151
- // src/components/IdenticonCorner.tsx
152
- var import_material4 = require("@mui/material");
153
- var import_react_flexbox4 = require("@xylabs/react-flexbox");
154
- var import_react_identicon = require("@xylabs/react-identicon");
155
- var import_react2 = require("react");
156
- var import_jsx_runtime4 = require("react/jsx-runtime");
157
- var IdenticonCorner = ({ value, ...props }) => {
158
- const theme = (0, import_material4.useTheme)();
159
- const [parentHeight, setParentHeight] = (0, import_react2.useState)();
160
- const ref = (0, import_react2.useRef)(null);
161
- (0, import_react2.useEffect)(() => {
162
- setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
163
- }, []);
164
- const calculatedHeight = parentHeight ?? 0;
165
- 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 }) }) }) });
166
- };
167
-
168
- // src/components/Value.tsx
169
- var import_react_shared = require("@xyo-network/react-shared");
170
- var import_react3 = require("react");
171
- var import_jsx_runtime5 = require("react/jsx-runtime");
172
- var PropertyValue = (0, import_react3.forwardRef)(({ typographyVariant = "body1", value, ...props }, ref) => {
173
- 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;
174
- });
175
- PropertyValue.displayName = "PropertyValue";
176
-
177
- // src/components/Property.tsx
178
- var import_jsx_runtime6 = require("react/jsx-runtime");
179
- var PropertyBox = (0, import_react4.forwardRef)(
180
- ({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }, ref) => {
181
- const sizeValueHeight = {
182
- large: 48,
183
- medium: 36,
184
- small: 24
185
- };
186
- const sizeVariants = {
187
- large: "h6",
188
- medium: "body1",
189
- small: "body2"
190
- };
191
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_flexbox5.FlexRow, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
192
- title !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
193
- PropertyTitle,
194
- {
195
- tip,
196
- title: required ? `${title}*` : title,
197
- size,
198
- more: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyActionsMenu, { actions }),
199
- ...titleProps
200
- }
201
- ) : null,
202
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
203
- import_react_flexbox5.FlexRow,
204
- {
205
- pl: 1,
206
- columnGap: 1,
207
- justifyContent: value === void 0 ? "center" : "space-between",
208
- overflow: "hidden",
209
- height: sizeValueHeight[size],
210
- children: [
211
- 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 }),
212
- value !== void 0 ? badge ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IdenticonCorner, { value }) : null : null
213
- ]
214
- }
215
- )
216
- ] });
217
- }
218
- );
219
- PropertyBox.displayName = "PropertyBox";
220
- var PropertyPaper = (0, import_react4.forwardRef)(({ style, variant, elevation = 2, square, ...props }, ref) => {
221
- 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 }) });
222
- });
223
- PropertyPaper.displayName = "PropertyPaper";
224
- var Property = (0, import_react4.forwardRef)((props, ref) => {
225
- return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PropertyBox, { ref, ...props });
226
- });
227
- Property.displayName = "Property";
228
- // Annotate the CommonJS export names for ESM import in node:
229
- 0 && (module.exports = {
230
- Property,
231
- PropertyGroup,
232
- PropertyTitle,
233
- PropertyValue
234
- });
235
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/Group.tsx","../../../../../node_modules/@xyo-network/typeof/src/typeOf.ts","../../../../../node_modules/@xyo-network/typeof/src/ifDefined.ts","../../../../../node_modules/@xyo-network/typeof/src/ifTypeOf.ts","../../../../../node_modules/@xyo-network/typeof/src/validateType.ts","../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 { TypeOfTypes } from './TypeOfTypes'\n\nexport const typeOf = <T>(item: T): TypeOfTypes => {\n return Array.isArray(item) ? 'array' : typeof item\n}\n","import { typeOf } from './typeOf'\n\nexport const ifDefined = <T>(value: T, func: (value: T) => void) => {\n switch (typeOf(value)) {\n case 'undefined':\n case 'null':\n break\n default:\n func(value)\n return value\n }\n}\n","import { typeOf } from './typeOf'\nimport { TypeOfTypes } from './TypeOfTypes'\n\nexport const ifTypeOf = <T, R>(typeName: TypeOfTypes, value: unknown, trueFunc: (value: T) => R, isFunc?: (value: T) => boolean) => {\n switch (typeOf(value)) {\n case typeName:\n return !isFunc || isFunc(value as T) ? trueFunc(value as T) : undefined\n }\n}\n","import { typeOf } from './typeOf'\nimport { TypeOfTypes } from './TypeOfTypes'\n\nexport const validateType = <T>(typeName: TypeOfTypes, value: T, optional = false): [T | undefined, Error[]] => {\n switch (typeOf(value)) {\n case typeName:\n return [value, []]\n default: {\n if (optional && typeOf(value) === 'undefined') {\n return [value, []]\n }\n return [undefined, [Error(`value type is not '${typeName}:${typeof value}'`)]]\n }\n }\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 MoreHorizIcon from '@mui/icons-material/MoreHoriz'\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"]}
package/dist/index.mjs DELETED
@@ -1,195 +0,0 @@
1
- // src/components/Group.tsx
2
- import { Paper, useTheme as useTheme2 } from "@mui/material";
3
- import { FlexCol, FlexGrowRow, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
4
-
5
- // ../../../../node_modules/@xyo-network/typeof/dist/index.mjs
6
- var typeOf = (item) => {
7
- return Array.isArray(item) ? "array" : typeof item;
8
- };
9
-
10
- // src/components/Title.tsx
11
- import { darken, lighten, Typography, useTheme } from "@mui/material";
12
- import { FlexRow } from "@xylabs/react-flexbox";
13
- import { QuickTipButton } from "@xylabs/react-quick-tip-button";
14
- import { jsx, jsxs } from "react/jsx-runtime";
15
- var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
16
- const sizeVariants = {
17
- full: "caption",
18
- large: "caption",
19
- medium: "caption",
20
- small: "caption"
21
- };
22
- const sizeTitleHeight = {
23
- full: void 0,
24
- large: 32,
25
- medium: 20,
26
- small: 16
27
- };
28
- const sizeFontSize = {
29
- full: 16,
30
- large: 16,
31
- medium: 14,
32
- small: 10
33
- };
34
- const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
35
- const theme = useTheme();
36
- return /* @__PURE__ */ jsxs(
37
- FlexRow,
38
- {
39
- bgcolor: theme.palette.mode === "dark" ? lighten(theme.palette.background.paper, 0.05 * elevation) : darken(theme.palette.background.paper, 0.025 * elevation),
40
- alignItems: "center",
41
- height: sizeTitleHeight[size],
42
- justifyContent: "space-between",
43
- ...props,
44
- children: [
45
- /* @__PURE__ */ jsxs(FlexRow, { paddingX: 1, paddingY: 0.5, children: [
46
- /* @__PURE__ */ jsx(Typography, { fontWeight: 500, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx("strong", { children: title }) }) }),
47
- tip ? /* @__PURE__ */ jsx(QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
48
- ] }),
49
- more
50
- ]
51
- }
52
- );
53
- };
54
-
55
- // src/components/Group.tsx
56
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
57
- var PropertyGroupBox = ({ titleProps, children, title, tip, ...props }) => {
58
- const theme = useTheme2();
59
- const childrenArray = typeOf(children) === "array" ? children : void 0;
60
- return /* @__PURE__ */ jsx2(FlexCol, { alignItems: "stretch", overflow: "hidden", ...props, children: /* @__PURE__ */ jsxs2(FlexRow2, { overflow: "hidden", justifyContent: "stretch", alignItems: "stretch", children: [
61
- /* @__PURE__ */ jsx2(PropertyTitle, { alignItems: "flex-start", size: "full", title, tip, ...titleProps }),
62
- childrenArray ? /* @__PURE__ */ jsx2(FlexGrowRow, { children: childrenArray?.map((child, index) => {
63
- return child ? /* @__PURE__ */ jsx2(FlexGrowRow, { borderLeft: 1, borderColor: theme.palette.divider, children: child }, index) : null;
64
- }) }) : /* @__PURE__ */ jsx2(FlexGrowRow, { overflow: "hidden", children })
65
- ] }) });
66
- };
67
- var PropertyGroupPaper = ({ style, variant, elevation, square, ...props }) => {
68
- return /* @__PURE__ */ jsx2(Paper, { style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ jsx2(PropertyGroupBox, { ...props, paper: false }) });
69
- };
70
- var PropertyGroup = (props) => {
71
- return props.paper ? /* @__PURE__ */ jsx2(PropertyGroupPaper, { ...props }) : /* @__PURE__ */ jsx2(PropertyGroupBox, { ...props });
72
- };
73
-
74
- // src/components/Property.tsx
75
- import { CircularProgress, Paper as Paper2 } from "@mui/material";
76
- import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
77
- import { forwardRef as forwardRef2 } from "react";
78
-
79
- // src/components/ActionsMenu.tsx
80
- import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
81
- import { IconButton, Menu, MenuItem } from "@mui/material";
82
- import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
83
- import { useState } from "react";
84
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
85
- var PropertyActionsMenu = ({ actions, ...props }) => {
86
- const [anchorEl, setAnchorEl] = useState(null);
87
- const open = !!anchorEl;
88
- const handleClick = (event) => {
89
- setAnchorEl(event.currentTarget);
90
- };
91
- const handleClose = () => {
92
- setAnchorEl(null);
93
- };
94
- return actions && actions?.length > 0 ? /* @__PURE__ */ jsxs3(FlexRow3, { ...props, children: [
95
- /* @__PURE__ */ jsx3(IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ jsx3(MoreHorizIcon, { fontSize: "inherit" }) }),
96
- /* @__PURE__ */ jsx3(Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
97
- return /* @__PURE__ */ jsx3(
98
- MenuItem,
99
- {
100
- onClick: () => {
101
- action?.onClick?.();
102
- handleClose();
103
- },
104
- children: action.name
105
- },
106
- action.name
107
- );
108
- }) })
109
- ] }) : null;
110
- };
111
-
112
- // src/components/IdenticonCorner.tsx
113
- import { useTheme as useTheme3 } from "@mui/material";
114
- import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
115
- import { Identicon } from "@xylabs/react-identicon";
116
- import { useEffect, useRef, useState as useState2 } from "react";
117
- import { jsx as jsx4 } from "react/jsx-runtime";
118
- var IdenticonCorner = ({ value, ...props }) => {
119
- const theme = useTheme3();
120
- const [parentHeight, setParentHeight] = useState2();
121
- const ref = useRef(null);
122
- useEffect(() => {
123
- setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
124
- }, []);
125
- const calculatedHeight = parentHeight ?? 0;
126
- 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 }) }) }) });
127
- };
128
-
129
- // src/components/Value.tsx
130
- import { EllipsizeBox } from "@xyo-network/react-shared";
131
- import { forwardRef } from "react";
132
- import { jsx as jsx5 } from "react/jsx-runtime";
133
- var PropertyValue = forwardRef(({ typographyVariant = "body1", value, ...props }, ref) => {
134
- return value !== void 0 ? /* @__PURE__ */ jsx5(EllipsizeBox, { typographyProps: { component: void 0, title: value?.toString(), variant: typographyVariant }, width: "100%", ref, ...props, children: value }) : null;
135
- });
136
- PropertyValue.displayName = "PropertyValue";
137
-
138
- // src/components/Property.tsx
139
- import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
140
- var PropertyBox = forwardRef2(
141
- ({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }, ref) => {
142
- const sizeValueHeight = {
143
- large: 48,
144
- medium: 36,
145
- small: 24
146
- };
147
- const sizeVariants = {
148
- large: "h6",
149
- medium: "body1",
150
- small: "body2"
151
- };
152
- return /* @__PURE__ */ jsxs4(FlexRow5, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
153
- title !== void 0 ? /* @__PURE__ */ jsx6(
154
- PropertyTitle,
155
- {
156
- tip,
157
- title: required ? `${title}*` : title,
158
- size,
159
- more: /* @__PURE__ */ jsx6(PropertyActionsMenu, { actions }),
160
- ...titleProps
161
- }
162
- ) : null,
163
- /* @__PURE__ */ jsxs4(
164
- FlexRow5,
165
- {
166
- pl: 1,
167
- columnGap: 1,
168
- justifyContent: value === void 0 ? "center" : "space-between",
169
- overflow: "hidden",
170
- height: sizeValueHeight[size],
171
- children: [
172
- children ? children : value !== void 0 ? /* @__PURE__ */ jsx6(PropertyValue, { value, typographyVariant: sizeVariants[size] }) : /* @__PURE__ */ jsx6(CircularProgress, { size: 16 }),
173
- value !== void 0 ? badge ? /* @__PURE__ */ jsx6(IdenticonCorner, { value }) : null : null
174
- ]
175
- }
176
- )
177
- ] });
178
- }
179
- );
180
- PropertyBox.displayName = "PropertyBox";
181
- var PropertyPaper = forwardRef2(({ style, variant, elevation = 2, square, ...props }, ref) => {
182
- return /* @__PURE__ */ jsx6(Paper2, { ref, style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ jsx6(PropertyBox, { ...props, paper: false }) });
183
- });
184
- PropertyPaper.displayName = "PropertyPaper";
185
- var Property = forwardRef2((props, ref) => {
186
- return props.paper ? /* @__PURE__ */ jsx6(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ jsx6(PropertyBox, { ref, ...props });
187
- });
188
- Property.displayName = "Property";
189
- export {
190
- Property,
191
- PropertyGroup,
192
- PropertyTitle,
193
- PropertyValue
194
- };
195
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/Group.tsx","../../../../../node_modules/@xyo-network/typeof/src/typeOf.ts","../../../../../node_modules/@xyo-network/typeof/src/ifDefined.ts","../../../../../node_modules/@xyo-network/typeof/src/ifTypeOf.ts","../../../../../node_modules/@xyo-network/typeof/src/validateType.ts","../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'\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 { TypeOfTypes } from './TypeOfTypes'\n\nexport const typeOf = <T>(item: T): TypeOfTypes => {\n return Array.isArray(item) ? 'array' : typeof item\n}\n","import { typeOf } from './typeOf'\n\nexport const ifDefined = <T>(value: T, func: (value: T) => void) => {\n switch (typeOf(value)) {\n case 'undefined':\n case 'null':\n break\n default:\n func(value)\n return value\n }\n}\n","import { typeOf } from './typeOf'\nimport { TypeOfTypes } from './TypeOfTypes'\n\nexport const ifTypeOf = <T, R>(typeName: TypeOfTypes, value: unknown, trueFunc: (value: T) => R, isFunc?: (value: T) => boolean) => {\n switch (typeOf(value)) {\n case typeName:\n return !isFunc || isFunc(value as T) ? trueFunc(value as T) : undefined\n }\n}\n","import { typeOf } from './typeOf'\nimport { TypeOfTypes } from './TypeOfTypes'\n\nexport const validateType = <T>(typeName: TypeOfTypes, value: T, optional = false): [T | undefined, Error[]] => {\n switch (typeOf(value)) {\n case typeName:\n return [value, []]\n default: {\n if (optional && typeOf(value) === 'undefined') {\n return [value, []]\n }\n return [undefined, [Error(`value type is not '${typeName}:${typeof value}'`)]]\n }\n }\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 MoreHorizIcon from '@mui/icons-material/MoreHoriz'\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":["useTheme","FlexRow","jsx","jsxs","useTheme","FlexRow","Paper","FlexRow","forwardRef","FlexRow","jsx","jsxs","useTheme","FlexRow","useState","jsx","jsx","jsx","jsxs","forwardRef","FlexRow","Paper"]}
File without changes