@xyo-network/react-property 2.64.8 → 2.64.10

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 (90) hide show
  1. package/dist/docs.json +12159 -5655
  2. package/package.json +11 -11
  3. package/dist/browser/components/Action.cjs +0 -19
  4. package/dist/browser/components/Action.cjs.map +0 -1
  5. package/dist/browser/components/Action.js +0 -1
  6. package/dist/browser/components/Action.js.map +0 -1
  7. package/dist/browser/components/Actions.cjs +0 -38
  8. package/dist/browser/components/Actions.cjs.map +0 -1
  9. package/dist/browser/components/Actions.js +0 -17
  10. package/dist/browser/components/Actions.js.map +0 -1
  11. package/dist/browser/components/ActionsMenu.cjs +0 -57
  12. package/dist/browser/components/ActionsMenu.cjs.map +0 -1
  13. package/dist/browser/components/ActionsMenu.js +0 -36
  14. package/dist/browser/components/ActionsMenu.js.map +0 -1
  15. package/dist/browser/components/ActionsProps.cjs +0 -19
  16. package/dist/browser/components/ActionsProps.cjs.map +0 -1
  17. package/dist/browser/components/ActionsProps.js +0 -1
  18. package/dist/browser/components/ActionsProps.js.map +0 -1
  19. package/dist/browser/components/Group.cjs +0 -93
  20. package/dist/browser/components/Group.cjs.map +0 -1
  21. package/dist/browser/components/Group.js +0 -72
  22. package/dist/browser/components/Group.js.map +0 -1
  23. package/dist/browser/components/IdenticonCorner.cjs +0 -41
  24. package/dist/browser/components/IdenticonCorner.cjs.map +0 -1
  25. package/dist/browser/components/IdenticonCorner.js +0 -20
  26. package/dist/browser/components/IdenticonCorner.js.map +0 -1
  27. package/dist/browser/components/Property.cjs +0 -185
  28. package/dist/browser/components/Property.cjs.map +0 -1
  29. package/dist/browser/components/Property.js +0 -164
  30. package/dist/browser/components/Property.js.map +0 -1
  31. package/dist/browser/components/Props.cjs +0 -19
  32. package/dist/browser/components/Props.cjs.map +0 -1
  33. package/dist/browser/components/Props.js +0 -1
  34. package/dist/browser/components/Props.js.map +0 -1
  35. package/dist/browser/components/Title.cjs +0 -69
  36. package/dist/browser/components/Title.cjs.map +0 -1
  37. package/dist/browser/components/Title.js +0 -48
  38. package/dist/browser/components/Title.js.map +0 -1
  39. package/dist/browser/components/Value.cjs +0 -33
  40. package/dist/browser/components/Value.cjs.map +0 -1
  41. package/dist/browser/components/Value.js +0 -12
  42. package/dist/browser/components/Value.js.map +0 -1
  43. package/dist/browser/components/index.cjs +0 -214
  44. package/dist/browser/components/index.cjs.map +0 -1
  45. package/dist/browser/components/index.js +0 -191
  46. package/dist/browser/components/index.js.map +0 -1
  47. package/dist/node/components/Action.cjs +0 -19
  48. package/dist/node/components/Action.cjs.map +0 -1
  49. package/dist/node/components/Action.js +0 -1
  50. package/dist/node/components/Action.js.map +0 -1
  51. package/dist/node/components/Actions.cjs +0 -42
  52. package/dist/node/components/Actions.cjs.map +0 -1
  53. package/dist/node/components/Actions.js +0 -17
  54. package/dist/node/components/Actions.js.map +0 -1
  55. package/dist/node/components/ActionsMenu.cjs +0 -62
  56. package/dist/node/components/ActionsMenu.cjs.map +0 -1
  57. package/dist/node/components/ActionsMenu.js +0 -37
  58. package/dist/node/components/ActionsMenu.js.map +0 -1
  59. package/dist/node/components/ActionsProps.cjs +0 -19
  60. package/dist/node/components/ActionsProps.cjs.map +0 -1
  61. package/dist/node/components/ActionsProps.js +0 -1
  62. package/dist/node/components/ActionsProps.js.map +0 -1
  63. package/dist/node/components/Group.cjs +0 -97
  64. package/dist/node/components/Group.cjs.map +0 -1
  65. package/dist/node/components/Group.js +0 -72
  66. package/dist/node/components/Group.js.map +0 -1
  67. package/dist/node/components/IdenticonCorner.cjs +0 -46
  68. package/dist/node/components/IdenticonCorner.cjs.map +0 -1
  69. package/dist/node/components/IdenticonCorner.js +0 -21
  70. package/dist/node/components/IdenticonCorner.js.map +0 -1
  71. package/dist/node/components/Property.cjs +0 -191
  72. package/dist/node/components/Property.cjs.map +0 -1
  73. package/dist/node/components/Property.js +0 -166
  74. package/dist/node/components/Property.js.map +0 -1
  75. package/dist/node/components/Props.cjs +0 -19
  76. package/dist/node/components/Props.cjs.map +0 -1
  77. package/dist/node/components/Props.js +0 -1
  78. package/dist/node/components/Props.js.map +0 -1
  79. package/dist/node/components/Title.cjs +0 -73
  80. package/dist/node/components/Title.cjs.map +0 -1
  81. package/dist/node/components/Title.js +0 -48
  82. package/dist/node/components/Title.js.map +0 -1
  83. package/dist/node/components/Value.cjs +0 -37
  84. package/dist/node/components/Value.cjs.map +0 -1
  85. package/dist/node/components/Value.js +0 -12
  86. package/dist/node/components/Value.js.map +0 -1
  87. package/dist/node/components/index.cjs +0 -223
  88. package/dist/node/components/index.cjs.map +0 -1
  89. package/dist/node/components/index.js +0 -193
  90. package/dist/node/components/index.js.map +0 -1
@@ -1,185 +0,0 @@
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/components/Property.tsx
21
- var Property_exports = {};
22
- __export(Property_exports, {
23
- Property: () => Property
24
- });
25
- module.exports = __toCommonJS(Property_exports);
26
- var import_material4 = require("@mui/material");
27
- var import_react_flexbox4 = require("@xylabs/react-flexbox");
28
- var import_react4 = require("react");
29
-
30
- // src/components/ActionsMenu.tsx
31
- var import_icons_material = require("@mui/icons-material");
32
- var import_material = require("@mui/material");
33
- var import_react_flexbox = require("@xylabs/react-flexbox");
34
- var import_react = require("react");
35
- var import_jsx_runtime = require("react/jsx-runtime");
36
- var PropertyActionsMenu = ({ actions, ...props }) => {
37
- const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
38
- const open = !!anchorEl;
39
- const handleClick = (event) => {
40
- setAnchorEl(event.currentTarget);
41
- };
42
- const handleClose = () => {
43
- setAnchorEl(null);
44
- };
45
- return actions && actions?.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { ...props, children: [
46
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.MoreHoriz, { fontSize: "inherit" }) }),
47
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
48
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
49
- import_material.MenuItem,
50
- {
51
- onClick: () => {
52
- action?.onClick?.();
53
- handleClose();
54
- },
55
- children: action.name
56
- },
57
- action.name
58
- );
59
- }) })
60
- ] }) : null;
61
- };
62
-
63
- // src/components/IdenticonCorner.tsx
64
- var import_material2 = require("@mui/material");
65
- var import_react_flexbox2 = require("@xylabs/react-flexbox");
66
- var import_react_identicon = require("@xylabs/react-identicon");
67
- var import_react2 = require("react");
68
- var import_jsx_runtime2 = require("react/jsx-runtime");
69
- var IdenticonCorner = ({ value, ...props }) => {
70
- const theme = (0, import_material2.useTheme)();
71
- const [parentHeight, setParentHeight] = (0, import_react2.useState)();
72
- const ref = (0, import_react2.useRef)(null);
73
- (0, import_react2.useEffect)(() => {
74
- setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
75
- }, []);
76
- const calculatedHeight = parentHeight ?? 0;
77
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexRow, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox2.FlexRow, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_identicon.Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
78
- };
79
-
80
- // src/components/Title.tsx
81
- var import_material3 = require("@mui/material");
82
- var import_react_flexbox3 = require("@xylabs/react-flexbox");
83
- var import_react_quick_tip_button = require("@xylabs/react-quick-tip-button");
84
- var import_jsx_runtime3 = require("react/jsx-runtime");
85
- var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
86
- const sizeVariants = {
87
- full: "caption",
88
- large: "caption",
89
- medium: "caption",
90
- small: "caption"
91
- };
92
- const sizeTitleHeight = {
93
- full: void 0,
94
- large: 32,
95
- medium: 20,
96
- small: 16
97
- };
98
- const sizeFontSize = {
99
- full: 16,
100
- large: 16,
101
- medium: 14,
102
- small: 10
103
- };
104
- const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
105
- const theme = (0, import_material3.useTheme)();
106
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
107
- import_react_flexbox3.FlexRow,
108
- {
109
- bgcolor: theme.palette.mode === "dark" ? (0, import_material3.lighten)(theme.palette.background.paper, 0.05 * elevation) : (0, import_material3.darken)(theme.palette.background.paper, 0.025 * elevation),
110
- alignItems: "center",
111
- height: sizeTitleHeight[size],
112
- justifyContent: "space-between",
113
- ...props,
114
- children: [
115
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox3.FlexRow, { paddingX: 1, paddingY: 0.5, children: [
116
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { fontWeight: 500, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: title }) }) }),
117
- tip ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_quick_tip_button.QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
118
- ] }),
119
- more
120
- ]
121
- }
122
- );
123
- };
124
-
125
- // src/components/Value.tsx
126
- var import_react_shared = require("@xyo-network/react-shared");
127
- var import_react3 = require("react");
128
- var import_jsx_runtime4 = require("react/jsx-runtime");
129
- var PropertyValue = (0, import_react3.forwardRef)(({ typographyVariant = "body1", value, ...props }, ref) => {
130
- return value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_shared.EllipsizeBox, { typographyProps: { component: void 0, title: value?.toString(), variant: typographyVariant }, width: "100%", ref, ...props, children: value }) : null;
131
- });
132
- PropertyValue.displayName = "PropertyValue";
133
-
134
- // src/components/Property.tsx
135
- var import_jsx_runtime5 = require("react/jsx-runtime");
136
- var PropertyBox = (0, import_react4.forwardRef)(
137
- ({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }, ref) => {
138
- const sizeValueHeight = {
139
- large: 48,
140
- medium: 36,
141
- small: 24
142
- };
143
- const sizeVariants = {
144
- large: "h6",
145
- medium: "body1",
146
- small: "body2"
147
- };
148
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox4.FlexRow, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
149
- title !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
150
- PropertyTitle,
151
- {
152
- tip,
153
- title: required ? `${title}*` : title,
154
- size,
155
- more: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PropertyActionsMenu, { actions }),
156
- ...titleProps
157
- }
158
- ) : null,
159
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
160
- import_react_flexbox4.FlexRow,
161
- {
162
- pl: 1,
163
- columnGap: 1,
164
- justifyContent: value === void 0 ? "center" : "space-between",
165
- overflow: "hidden",
166
- height: sizeValueHeight[size],
167
- children: [
168
- children ? children : value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PropertyValue, { value, typographyVariant: sizeVariants[size] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.CircularProgress, { size: 16 }),
169
- value !== void 0 ? badge ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IdenticonCorner, { value }) : null : null
170
- ]
171
- }
172
- )
173
- ] });
174
- }
175
- );
176
- PropertyBox.displayName = "PropertyBox";
177
- var PropertyPaper = (0, import_react4.forwardRef)(({ style, variant, elevation = 2, square, ...props }, ref) => {
178
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Paper, { ref, style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PropertyBox, { ...props, paper: false }) });
179
- });
180
- PropertyPaper.displayName = "PropertyPaper";
181
- var Property = (0, import_react4.forwardRef)((props, ref) => {
182
- return props.paper ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PropertyBox, { ref, ...props });
183
- });
184
- Property.displayName = "Property";
185
- //# sourceMappingURL=Property.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Property.tsx","../../../src/components/ActionsMenu.tsx","../../../src/components/IdenticonCorner.tsx","../../../src/components/Title.tsx","../../../src/components/Value.tsx"],"sourcesContent":["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 { 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 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_react","MoreHorizIcon","import_material","import_react_flexbox","import_react","import_jsx_runtime","import_material","import_react_flexbox","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}
@@ -1,164 +0,0 @@
1
- // src/components/Property.tsx
2
- import { CircularProgress, Paper } from "@mui/material";
3
- import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
4
- import { forwardRef as forwardRef2 } from "react";
5
-
6
- // src/components/ActionsMenu.tsx
7
- import { MoreHoriz as MoreHorizIcon } from "@mui/icons-material";
8
- import { IconButton, Menu, MenuItem } from "@mui/material";
9
- import { FlexRow } from "@xylabs/react-flexbox";
10
- import { useState } from "react";
11
- import { jsx, jsxs } from "react/jsx-runtime";
12
- var PropertyActionsMenu = ({ actions, ...props }) => {
13
- const [anchorEl, setAnchorEl] = useState(null);
14
- const open = !!anchorEl;
15
- const handleClick = (event) => {
16
- setAnchorEl(event.currentTarget);
17
- };
18
- const handleClose = () => {
19
- setAnchorEl(null);
20
- };
21
- return actions && actions?.length > 0 ? /* @__PURE__ */ jsxs(FlexRow, { ...props, children: [
22
- /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: handleClick, children: /* @__PURE__ */ jsx(MoreHorizIcon, { fontSize: "inherit" }) }),
23
- /* @__PURE__ */ jsx(Menu, { anchorEl, open, onClose: handleClose, children: actions?.map((action) => {
24
- return /* @__PURE__ */ jsx(
25
- MenuItem,
26
- {
27
- onClick: () => {
28
- action?.onClick?.();
29
- handleClose();
30
- },
31
- children: action.name
32
- },
33
- action.name
34
- );
35
- }) })
36
- ] }) : null;
37
- };
38
-
39
- // src/components/IdenticonCorner.tsx
40
- import { useTheme } from "@mui/material";
41
- import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
42
- import { Identicon } from "@xylabs/react-identicon";
43
- import { useEffect, useRef, useState as useState2 } from "react";
44
- import { jsx as jsx2 } from "react/jsx-runtime";
45
- var IdenticonCorner = ({ value, ...props }) => {
46
- const theme = useTheme();
47
- const [parentHeight, setParentHeight] = useState2();
48
- const ref = useRef(null);
49
- useEffect(() => {
50
- setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight);
51
- }, []);
52
- const calculatedHeight = parentHeight ?? 0;
53
- return /* @__PURE__ */ jsx2(FlexRow2, { alignItems: "flex-start", height: "100%", children: /* @__PURE__ */ jsx2(FlexRow2, { background: true, height: calculatedHeight, width: calculatedHeight, borderLeft: `1px solid ${theme.palette.divider}`, children: /* @__PURE__ */ jsx2("div", { ref, children: /* @__PURE__ */ jsx2(Identicon, { size: calculatedHeight * 0.6, value: `${value}`, sx: { padding: `${calculatedHeight * 0.2}px` }, ...props }) }) }) });
54
- };
55
-
56
- // src/components/Title.tsx
57
- import { darken, lighten, Typography, useTheme as useTheme2 } from "@mui/material";
58
- import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
59
- import { QuickTipButton } from "@xylabs/react-quick-tip-button";
60
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
61
- var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
62
- const sizeVariants = {
63
- full: "caption",
64
- large: "caption",
65
- medium: "caption",
66
- small: "caption"
67
- };
68
- const sizeTitleHeight = {
69
- full: void 0,
70
- large: 32,
71
- medium: 20,
72
- small: 16
73
- };
74
- const sizeFontSize = {
75
- full: 16,
76
- large: 16,
77
- medium: 14,
78
- small: 10
79
- };
80
- const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
81
- const theme = useTheme2();
82
- return /* @__PURE__ */ jsxs2(
83
- FlexRow3,
84
- {
85
- bgcolor: theme.palette.mode === "dark" ? lighten(theme.palette.background.paper, 0.05 * elevation) : darken(theme.palette.background.paper, 0.025 * elevation),
86
- alignItems: "center",
87
- height: sizeTitleHeight[size],
88
- justifyContent: "space-between",
89
- ...props,
90
- children: [
91
- /* @__PURE__ */ jsxs2(FlexRow3, { paddingX: 1, paddingY: 0.5, children: [
92
- /* @__PURE__ */ jsx3(Typography, { fontWeight: 500, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: /* @__PURE__ */ jsx3("small", { children: /* @__PURE__ */ jsx3("strong", { children: title }) }) }),
93
- tip ? /* @__PURE__ */ jsx3(QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
94
- ] }),
95
- more
96
- ]
97
- }
98
- );
99
- };
100
-
101
- // src/components/Value.tsx
102
- import { EllipsizeBox } from "@xyo-network/react-shared";
103
- import { forwardRef } from "react";
104
- import { jsx as jsx4 } from "react/jsx-runtime";
105
- var PropertyValue = forwardRef(({ typographyVariant = "body1", value, ...props }, ref) => {
106
- return value !== void 0 ? /* @__PURE__ */ jsx4(EllipsizeBox, { typographyProps: { component: void 0, title: value?.toString(), variant: typographyVariant }, width: "100%", ref, ...props, children: value }) : null;
107
- });
108
- PropertyValue.displayName = "PropertyValue";
109
-
110
- // src/components/Property.tsx
111
- import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
112
- var PropertyBox = forwardRef2(
113
- ({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }, ref) => {
114
- const sizeValueHeight = {
115
- large: 48,
116
- medium: 36,
117
- small: 24
118
- };
119
- const sizeVariants = {
120
- large: "h6",
121
- medium: "body1",
122
- small: "body2"
123
- };
124
- return /* @__PURE__ */ jsxs3(FlexRow4, { ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden", ...props, children: [
125
- title !== void 0 ? /* @__PURE__ */ jsx5(
126
- PropertyTitle,
127
- {
128
- tip,
129
- title: required ? `${title}*` : title,
130
- size,
131
- more: /* @__PURE__ */ jsx5(PropertyActionsMenu, { actions }),
132
- ...titleProps
133
- }
134
- ) : null,
135
- /* @__PURE__ */ jsxs3(
136
- FlexRow4,
137
- {
138
- pl: 1,
139
- columnGap: 1,
140
- justifyContent: value === void 0 ? "center" : "space-between",
141
- overflow: "hidden",
142
- height: sizeValueHeight[size],
143
- children: [
144
- children ? children : value !== void 0 ? /* @__PURE__ */ jsx5(PropertyValue, { value, typographyVariant: sizeVariants[size] }) : /* @__PURE__ */ jsx5(CircularProgress, { size: 16 }),
145
- value !== void 0 ? badge ? /* @__PURE__ */ jsx5(IdenticonCorner, { value }) : null : null
146
- ]
147
- }
148
- )
149
- ] });
150
- }
151
- );
152
- PropertyBox.displayName = "PropertyBox";
153
- var PropertyPaper = forwardRef2(({ style, variant, elevation = 2, square, ...props }, ref) => {
154
- return /* @__PURE__ */ jsx5(Paper, { ref, style: { minWidth: 0, overflow: "hidden", ...style }, variant, elevation, square, children: /* @__PURE__ */ jsx5(PropertyBox, { ...props, paper: false }) });
155
- });
156
- PropertyPaper.displayName = "PropertyPaper";
157
- var Property = forwardRef2((props, ref) => {
158
- return props.paper ? /* @__PURE__ */ jsx5(PropertyPaper, { ref, ...props }) : /* @__PURE__ */ jsx5(PropertyBox, { ref, ...props });
159
- });
160
- Property.displayName = "Property";
161
- export {
162
- Property
163
- };
164
- //# sourceMappingURL=Property.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Property.tsx","../../../src/components/ActionsMenu.tsx","../../../src/components/IdenticonCorner.tsx","../../../src/components/Title.tsx","../../../src/components/Value.tsx"],"sourcesContent":["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 { 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 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":["FlexRow","forwardRef","FlexRow","useState","jsx","useTheme","FlexRow","jsx","jsxs","jsx","jsx","jsxs","forwardRef","FlexRow"]}
@@ -1,19 +0,0 @@
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 __copyProps = (to, from, except, desc) => {
7
- if (from && typeof from === "object" || typeof from === "function") {
8
- for (let key of __getOwnPropNames(from))
9
- if (!__hasOwnProp.call(to, key) && key !== except)
10
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
- }
12
- return to;
13
- };
14
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
-
16
- // src/components/Props.tsx
17
- var Props_exports = {};
18
- module.exports = __toCommonJS(Props_exports);
19
- //# sourceMappingURL=Props.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Props.tsx"],"sourcesContent":["import { PaperProps } from '@mui/material'\nimport { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport { ReactNode } from 'react'\n\nimport { PropertyAction } from './Action'\nimport { PropertyTitleProps } from './Title'\n\nexport interface PropertyBaseProps {\n paper?: boolean\n tip?: ReactNode\n title?: string\n titleProps?: PropertyTitleProps\n}\n\nexport type PropertyFieldBaseProps = PropertyBaseProps & {\n actions?: PropertyAction[]\n badge?: boolean\n required?: boolean\n size?: SizeProp\n value?: string | number | boolean | null\n}\n\nexport type PropertyBoxProps = PropertyFieldBaseProps &\n FlexBoxProps & {\n paper?: false\n }\n\nexport type PropertyPaperProps = PropertyFieldBaseProps &\n PaperProps & {\n paper: true\n }\n\nexport type PropertyProps = PropertyBoxProps | PropertyPaperProps\n\nexport type PropertyGroupBaseProps = PropertyBaseProps\n\nexport type PropertyGroupBoxProps = PropertyGroupBaseProps &\n FlexBoxProps & {\n paper?: false\n }\n\nexport type PropertyGroupPaperProps = PropertyGroupBaseProps &\n PaperProps & {\n paper: true\n }\n\nexport type PropertyGroupProps = PropertyGroupBoxProps | PropertyGroupPaperProps\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
@@ -1 +0,0 @@
1
- //# sourceMappingURL=Props.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,69 +0,0 @@
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/components/Title.tsx
21
- var Title_exports = {};
22
- __export(Title_exports, {
23
- PropertyTitle: () => PropertyTitle
24
- });
25
- module.exports = __toCommonJS(Title_exports);
26
- var import_material = require("@mui/material");
27
- var import_react_flexbox = require("@xylabs/react-flexbox");
28
- var import_react_quick_tip_button = require("@xylabs/react-quick-tip-button");
29
- var import_jsx_runtime = require("react/jsx-runtime");
30
- var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
31
- const sizeVariants = {
32
- full: "caption",
33
- large: "caption",
34
- medium: "caption",
35
- small: "caption"
36
- };
37
- const sizeTitleHeight = {
38
- full: void 0,
39
- large: 32,
40
- medium: 20,
41
- small: 16
42
- };
43
- const sizeFontSize = {
44
- full: 16,
45
- large: 16,
46
- medium: 14,
47
- small: 10
48
- };
49
- const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
50
- const theme = (0, import_material.useTheme)();
51
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
52
- import_react_flexbox.FlexRow,
53
- {
54
- 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),
55
- alignItems: "center",
56
- height: sizeTitleHeight[size],
57
- justifyContent: "space-between",
58
- ...props,
59
- children: [
60
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { paddingX: 1, paddingY: 0.5, children: [
61
- /* @__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 }) }) }),
62
- tip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_quick_tip_button.QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
63
- ] }),
64
- more
65
- ]
66
- }
67
- );
68
- };
69
- //# sourceMappingURL=Title.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Title.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyE;AACzE,2BAAsC;AACtC,oCAA+B;AAoDzB;AAtCC,IAAM,gBAA8C,CAAC,EAAE,YAAY,GAAG,OAAO,UAAU,KAAK,MAAM,OAAO,GAAG,MAAM,MAAM;AAC7H,QAAM,eAAyD;AAAA,IAC7D,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,kBAA6D;AAAA,IACjE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAA8C;AAAA,IAClD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAAe,aAAa,IAAI,IAAI,KAAK,aAAa,IAAI,IAAI;AAEpE,QAAM,YAAQ,0BAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SACE,MAAM,QAAQ,SAAS,aACnB,yBAAQ,MAAM,QAAQ,WAAW,OAAO,OAAO,SAAS,QACxD,wBAAO,MAAM,QAAQ,WAAW,OAAO,QAAQ,SAAS;AAAA,MAE9D,YAAW;AAAA,MACX,QAAQ,gBAAgB,IAAI;AAAA,MAC5B,gBAAe;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,qDAAC,gCAAQ,UAAU,GAAG,UAAU,KAC9B;AAAA,sDAAC,8BAAW,YAAY,KAAK,QAAM,MAAC,SAAS,aAAa,IAAI,GAAG,UAAU,aAAa,IAAI,GAC1F,sDAAC,WACC,sDAAC,YAAQ,iBAAM,GACjB,GACF;AAAA,UACC,MACC,4CAAC,gDAAe,OAAO,EAAE,UAAU,aAAa,GAAG,OAAM,WAAU,OAAO,SAAS,IAChF,eACH,IACE;AAAA,WACN;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
@@ -1,48 +0,0 @@
1
- // src/components/Title.tsx
2
- import { darken, lighten, Typography, useTheme } from "@mui/material";
3
- import { FlexRow } from "@xylabs/react-flexbox";
4
- import { QuickTipButton } from "@xylabs/react-quick-tip-button";
5
- import { jsx, jsxs } from "react/jsx-runtime";
6
- var PropertyTitle = ({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
7
- const sizeVariants = {
8
- full: "caption",
9
- large: "caption",
10
- medium: "caption",
11
- small: "caption"
12
- };
13
- const sizeTitleHeight = {
14
- full: void 0,
15
- large: 32,
16
- medium: 20,
17
- small: 16
18
- };
19
- const sizeFontSize = {
20
- full: 16,
21
- large: 16,
22
- medium: 14,
23
- small: 10
24
- };
25
- const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16;
26
- const theme = useTheme();
27
- return /* @__PURE__ */ jsxs(
28
- FlexRow,
29
- {
30
- bgcolor: theme.palette.mode === "dark" ? lighten(theme.palette.background.paper, 0.05 * elevation) : darken(theme.palette.background.paper, 0.025 * elevation),
31
- alignItems: "center",
32
- height: sizeTitleHeight[size],
33
- justifyContent: "space-between",
34
- ...props,
35
- children: [
36
- /* @__PURE__ */ jsxs(FlexRow, { paddingX: 1, paddingY: 0.5, children: [
37
- /* @__PURE__ */ jsx(Typography, { fontWeight: 500, noWrap: true, variant: sizeVariants[size], fontSize: sizeFontSize[size], children: /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx("strong", { children: title }) }) }),
38
- tip ? /* @__PURE__ */ jsx(QuickTipButton, { style: { fontSize: quickTipSize }, color: "inherit", title: title ?? "", children: tip }) : null
39
- ] }),
40
- more
41
- ]
42
- }
43
- );
44
- };
45
- export {
46
- PropertyTitle
47
- };
48
- //# sourceMappingURL=Title.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Title.tsx"],"sourcesContent":["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"],"mappings":";AAAA,SAAS,QAAQ,SAAS,YAA+B,gBAAgB;AACzE,SAAuB,eAAe;AACtC,SAAS,sBAAsB;AAoDzB,SAGM,KAHN;AAtCC,IAAM,gBAA8C,CAAC,EAAE,YAAY,GAAG,OAAO,UAAU,KAAK,MAAM,OAAO,GAAG,MAAM,MAAM;AAC7H,QAAM,eAAyD;AAAA,IAC7D,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,kBAA6D;AAAA,IACjE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAA8C;AAAA,IAClD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,eAAe,aAAa,IAAI,IAAI,KAAK,aAAa,IAAI,IAAI;AAEpE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SACE,MAAM,QAAQ,SAAS,SACnB,QAAQ,MAAM,QAAQ,WAAW,OAAO,OAAO,SAAS,IACxD,OAAO,MAAM,QAAQ,WAAW,OAAO,QAAQ,SAAS;AAAA,MAE9D,YAAW;AAAA,MACX,QAAQ,gBAAgB,IAAI;AAAA,MAC5B,gBAAe;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,6BAAC,WAAQ,UAAU,GAAG,UAAU,KAC9B;AAAA,8BAAC,cAAW,YAAY,KAAK,QAAM,MAAC,SAAS,aAAa,IAAI,GAAG,UAAU,aAAa,IAAI,GAC1F,8BAAC,WACC,8BAAC,YAAQ,iBAAM,GACjB,GACF;AAAA,UACC,MACC,oBAAC,kBAAe,OAAO,EAAE,UAAU,aAAa,GAAG,OAAM,WAAU,OAAO,SAAS,IAChF,eACH,IACE;AAAA,WACN;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
@@ -1,33 +0,0 @@
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/components/Value.tsx
21
- var Value_exports = {};
22
- __export(Value_exports, {
23
- PropertyValue: () => PropertyValue
24
- });
25
- module.exports = __toCommonJS(Value_exports);
26
- var import_react_shared = require("@xyo-network/react-shared");
27
- var import_react = require("react");
28
- var import_jsx_runtime = require("react/jsx-runtime");
29
- var PropertyValue = (0, import_react.forwardRef)(({ typographyVariant = "body1", value, ...props }, ref) => {
30
- return value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_shared.EllipsizeBox, { typographyProps: { component: void 0, title: value?.toString(), variant: typographyVariant }, width: "100%", ref, ...props, children: value }) : null;
31
- });
32
- PropertyValue.displayName = "PropertyValue";
33
- //# sourceMappingURL=Value.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Value.tsx"],"sourcesContent":["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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAAgD;AAChD,mBAA2B;AASvB;AAFG,IAAM,oBAAgB,yBAA+C,CAAC,EAAE,oBAAoB,SAAS,OAAO,GAAG,MAAM,GAAG,QAAQ;AACrI,SAAO,UAAU,SACf,4CAAC,oCAAa,iBAAiB,EAAE,WAAW,QAAW,OAAO,OAAO,SAAS,GAAG,SAAS,kBAAkB,GAAG,OAAM,QAAO,KAAW,GAAG,OACvI,iBACH,IACE;AACN,CAAC;AAED,cAAc,cAAc;","names":[]}
@@ -1,12 +0,0 @@
1
- // src/components/Value.tsx
2
- import { EllipsizeBox } from "@xyo-network/react-shared";
3
- import { forwardRef } from "react";
4
- import { jsx } from "react/jsx-runtime";
5
- var PropertyValue = forwardRef(({ typographyVariant = "body1", value, ...props }, ref) => {
6
- return value !== void 0 ? /* @__PURE__ */ jsx(EllipsizeBox, { typographyProps: { component: void 0, title: value?.toString(), variant: typographyVariant }, width: "100%", ref, ...props, children: value }) : null;
7
- });
8
- PropertyValue.displayName = "PropertyValue";
9
- export {
10
- PropertyValue
11
- };
12
- //# sourceMappingURL=Value.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Value.tsx"],"sourcesContent":["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":";AACA,SAAS,oBAAuC;AAChD,SAAS,kBAAkB;AASvB;AAFG,IAAM,gBAAgB,WAA+C,CAAC,EAAE,oBAAoB,SAAS,OAAO,GAAG,MAAM,GAAG,QAAQ;AACrI,SAAO,UAAU,SACf,oBAAC,gBAAa,iBAAiB,EAAE,WAAW,QAAW,OAAO,OAAO,SAAS,GAAG,SAAS,kBAAkB,GAAG,OAAM,QAAO,KAAW,GAAG,OACvI,iBACH,IACE;AACN,CAAC;AAED,cAAc,cAAc;","names":[]}