@xyo-network/react-property 7.4.1 → 7.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/components/PropertyBox.stories.d.ts +14 -14
- package/dist/browser/components/PropertyBox.stories.d.ts.map +1 -1
- package/dist/browser/components/PropertyPaper.stories.d.ts +16 -16
- package/dist/browser/components/PropertyPaper.stories.d.ts.map +1 -1
- package/dist/browser/components/Title.stories.d.ts +3 -3
- package/dist/browser/components/Title.stories.d.ts.map +1 -1
- package/dist/browser/components/Value.stories.d.ts +2 -2
- package/dist/browser/components/Value.stories.d.ts.map +1 -1
- package/dist/browser/index.mjs +187 -201
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +23 -23
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import type { Meta } from '@storybook/react-vite';
|
|
2
2
|
import { Property } from './Property.tsx';
|
|
3
3
|
declare const StorybookEntry: Meta<typeof Property>;
|
|
4
|
-
declare const Default: import("
|
|
5
|
-
declare const WithUndefinedData: import("
|
|
6
|
-
declare const WithData: import("
|
|
7
|
-
declare const WithDataSmall: import("
|
|
8
|
-
declare const WithDataCompare: import("
|
|
9
|
-
declare const WithDataAndBadgeSmall: import("
|
|
10
|
-
declare const WithDataAndBadgeMedium: import("
|
|
11
|
-
declare const WithDataAndBadgeLarge: import("
|
|
12
|
-
declare const WithTip: import("
|
|
13
|
-
declare const WithTipAndBadge: import("
|
|
14
|
-
declare const WithActions: import("
|
|
15
|
-
declare const LargeWithValue: import("
|
|
16
|
-
declare const LargeWithValueAndActions: import("
|
|
17
|
-
declare const SmallWithValueAndActions: import("
|
|
4
|
+
declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
5
|
+
declare const WithUndefinedData: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
6
|
+
declare const WithData: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
7
|
+
declare const WithDataSmall: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
8
|
+
declare const WithDataCompare: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
9
|
+
declare const WithDataAndBadgeSmall: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
10
|
+
declare const WithDataAndBadgeMedium: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
11
|
+
declare const WithDataAndBadgeLarge: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
12
|
+
declare const WithTip: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
13
|
+
declare const WithTipAndBadge: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
14
|
+
declare const WithActions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
15
|
+
declare const LargeWithValue: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
16
|
+
declare const LargeWithValueAndActions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
17
|
+
declare const SmallWithValueAndActions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
18
18
|
export { Default, LargeWithValue, LargeWithValueAndActions, SmallWithValueAndActions, WithActions, WithData, WithDataAndBadgeLarge, WithDataAndBadgeMedium, WithDataAndBadgeSmall, WithDataCompare, WithDataSmall, WithTip, WithTipAndBadge, WithUndefinedData, };
|
|
19
19
|
export default StorybookEntry;
|
|
20
20
|
//# sourceMappingURL=PropertyBox.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PropertyBox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PropertyBox.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAI1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGzC,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAA;AAiC1B,QAAA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"PropertyBox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PropertyBox.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAI1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGzC,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAA;AAiC1B,QAAA,MAAM,OAAO,mIAAoB,CAAA;AAMjC,QAAA,MAAM,iBAAiB,mIAAoB,CAAA;AAG3C,QAAA,MAAM,QAAQ,mIAAoB,CAAA;AAMlC,QAAA,MAAM,aAAa,mIAAoB,CAAA;AAOvC,QAAA,MAAM,eAAe,mIAA+B,CAAA;AAOpD,QAAA,MAAM,qBAAqB,mIAAoB,CAAA;AAS/C,QAAA,MAAM,sBAAsB,mIAAoB,CAAA;AAShD,QAAA,MAAM,qBAAqB,mIAAoB,CAAA;AAS/C,QAAA,MAAM,OAAO,mIAAoB,CAAA;AAOjC,QAAA,MAAM,eAAe,mIAAoB,CAAA;AAQzC,QAAA,MAAM,WAAW,mIAAoB,CAAA;AAQrC,QAAA,MAAM,cAAc,mIAAoB,CAAA;AASxC,QAAA,MAAM,wBAAwB,mIAAoB,CAAA;AAUlD,QAAA,MAAM,wBAAwB,mIAAoB,CAAA;AAUlD,OAAO,EACL,OAAO,EACP,cAAc,EACd,wBAAwB,EACxB,wBAAwB,EACxB,WAAW,EACX,QAAQ,EACR,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,eAAe,EACf,aAAa,EACb,OAAO,EACP,eAAe,EACf,iBAAiB,GAClB,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import type { Meta } from '@storybook/react-vite';
|
|
2
2
|
import { Property } from './Property.tsx';
|
|
3
3
|
declare const StorybookEntry: Meta<typeof Property>;
|
|
4
|
-
declare const Default: import("
|
|
5
|
-
declare const WithUndefinedData: import("
|
|
6
|
-
declare const WithData: import("
|
|
7
|
-
declare const WithDataSmall: import("
|
|
8
|
-
declare const WithDataCompare: import("
|
|
9
|
-
declare const WithDataCompareOutlined: import("
|
|
10
|
-
declare const WithDataCompareElevation: import("
|
|
11
|
-
declare const WithDataAndBadgeSmall: import("
|
|
12
|
-
declare const WithDataAndBadgeMedium: import("
|
|
13
|
-
declare const WithDataAndBadgeLarge: import("
|
|
14
|
-
declare const WithTip: import("
|
|
15
|
-
declare const WithTipAndBadge: import("
|
|
16
|
-
declare const WithActions: import("
|
|
17
|
-
declare const LargeWithValue: import("
|
|
18
|
-
declare const LargeWithValueAndActions: import("
|
|
19
|
-
declare const SmallWithValueAndActions: import("
|
|
4
|
+
declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
5
|
+
declare const WithUndefinedData: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
6
|
+
declare const WithData: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
7
|
+
declare const WithDataSmall: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
8
|
+
declare const WithDataCompare: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
9
|
+
declare const WithDataCompareOutlined: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
10
|
+
declare const WithDataCompareElevation: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
11
|
+
declare const WithDataAndBadgeSmall: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
12
|
+
declare const WithDataAndBadgeMedium: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
13
|
+
declare const WithDataAndBadgeLarge: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
14
|
+
declare const WithTip: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
15
|
+
declare const WithTipAndBadge: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
16
|
+
declare const WithActions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
17
|
+
declare const LargeWithValue: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
18
|
+
declare const LargeWithValueAndActions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
19
|
+
declare const SmallWithValueAndActions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react-vite").Args>;
|
|
20
20
|
export { Default, LargeWithValue, LargeWithValueAndActions, SmallWithValueAndActions, WithActions, WithData, WithDataAndBadgeLarge, WithDataAndBadgeMedium, WithDataAndBadgeSmall, WithDataCompare, WithDataCompareElevation, WithDataCompareOutlined, WithDataSmall, WithTip, WithTipAndBadge, WithUndefinedData, };
|
|
21
21
|
export default StorybookEntry;
|
|
22
22
|
//# sourceMappingURL=PropertyPaper.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PropertyPaper.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PropertyPaper.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAI1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGzC,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAA;AAiC1B,QAAA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"PropertyPaper.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PropertyPaper.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAI1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGzC,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAA;AAiC1B,QAAA,MAAM,OAAO,mIAAoB,CAAA;AAMjC,QAAA,MAAM,iBAAiB,mIAAoB,CAAA;AAG3C,QAAA,MAAM,QAAQ,mIAAoB,CAAA;AAMlC,QAAA,MAAM,aAAa,mIAAoB,CAAA;AAOvC,QAAA,MAAM,eAAe,mIAA+B,CAAA;AAOpD,QAAA,MAAM,uBAAuB,mIAA+B,CAAA;AAQ5D,QAAA,MAAM,wBAAwB,mIAA+B,CAAA;AAQ7D,QAAA,MAAM,qBAAqB,mIAAoB,CAAA;AAS/C,QAAA,MAAM,sBAAsB,mIAAoB,CAAA;AAShD,QAAA,MAAM,qBAAqB,mIAAoB,CAAA;AAS/C,QAAA,MAAM,OAAO,mIAAoB,CAAA;AAOjC,QAAA,MAAM,eAAe,mIAAoB,CAAA;AAQzC,QAAA,MAAM,WAAW,mIAAoB,CAAA;AAQrC,QAAA,MAAM,cAAc,mIAAoB,CAAA;AASxC,QAAA,MAAM,wBAAwB,mIAAoB,CAAA;AAUlD,QAAA,MAAM,wBAAwB,mIAAoB,CAAA;AAUlD,OAAO,EACL,OAAO,EACP,cAAc,EACd,wBAAwB,EACxB,wBAAwB,EACxB,WAAW,EACX,QAAQ,EACR,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,eAAe,EACf,wBAAwB,EACxB,uBAAuB,EACvB,aAAa,EACb,OAAO,EACP,eAAe,EACf,iBAAiB,GAClB,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { Meta } from '@storybook/react-vite';
|
|
2
2
|
import { PropertyTitle } from './Title.tsx';
|
|
3
3
|
declare const StorybookEntry: Meta<typeof PropertyTitle>;
|
|
4
|
-
declare const Default: import("
|
|
5
|
-
declare const WithData: import("
|
|
6
|
-
declare const WithDataAndActions: import("
|
|
4
|
+
declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Title.tsx").PropertyTitleProps>;
|
|
5
|
+
declare const WithData: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Title.tsx").PropertyTitleProps>;
|
|
6
|
+
declare const WithDataAndActions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Title.tsx").PropertyTitleProps>;
|
|
7
7
|
export { Default, WithData, WithDataAndActions, };
|
|
8
8
|
export default StorybookEntry;
|
|
9
9
|
//# sourceMappingURL=Title.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Title.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,aAAa,CAAC,CAAA;AAI/B,QAAA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Title.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Title.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,aAAa,CAAC,CAAA;AAI/B,QAAA,MAAM,OAAO,uIAAoB,CAAA;AAGjC,QAAA,MAAM,QAAQ,uIAAoB,CAAA;AAIlC,QAAA,MAAM,kBAAkB,uIAAoB,CAAA;AAI5C,OAAO,EACL,OAAO,EAAE,QAAQ,EAAE,kBAAkB,GACtC,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { Meta } from '@storybook/react-vite';
|
|
2
2
|
import { PropertyValue } from './Value.tsx';
|
|
3
3
|
declare const StorybookEntry: Meta<typeof PropertyValue>;
|
|
4
|
-
declare const Default: import("
|
|
5
|
-
declare const WithData: import("
|
|
4
|
+
declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Value.tsx").PropertyValueProps>;
|
|
5
|
+
declare const WithData: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Value.tsx").PropertyValueProps>;
|
|
6
6
|
export { Default, WithData };
|
|
7
7
|
export default StorybookEntry;
|
|
8
8
|
//# sourceMappingURL=Value.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Value.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Value.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,aAAa,CAAC,CAAA;AAI/B,QAAA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Value.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Value.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,QAAA,MAAM,cAAc,EAKf,IAAI,CAAC,OAAO,aAAa,CAAC,CAAA;AAI/B,QAAA,MAAM,OAAO,uIAAoB,CAAA;AAGjC,QAAA,MAAM,QAAQ,uIAAoB,CAAA;AAIlC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAA;AAE5B,eAAe,cAAc,CAAA"}
|
package/dist/browser/index.mjs
CHANGED
|
@@ -1,30 +1,19 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
|
|
1
4
|
// src/components/Group.tsx
|
|
2
5
|
import { Paper, useTheme as useTheme2 } from "@mui/material";
|
|
3
|
-
import {
|
|
4
|
-
FlexCol,
|
|
5
|
-
FlexGrowRow,
|
|
6
|
-
FlexRow as FlexRow2
|
|
7
|
-
} from "@xylabs/react-flexbox";
|
|
6
|
+
import { FlexCol, FlexGrowRow, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
|
|
8
7
|
import { typeOf } from "@xyo-network/typeof";
|
|
8
|
+
import React2 from "react";
|
|
9
9
|
|
|
10
10
|
// src/components/Title.tsx
|
|
11
|
-
import {
|
|
12
|
-
Typography,
|
|
13
|
-
useColorScheme,
|
|
14
|
-
useTheme
|
|
15
|
-
} from "@mui/material";
|
|
11
|
+
import { Typography, useColorScheme, useTheme } from "@mui/material";
|
|
16
12
|
import { FlexRow } from "@xylabs/react-flexbox";
|
|
17
13
|
import { QuickTipButton } from "@xylabs/react-quick-tip-button";
|
|
18
14
|
import { darkenCss, useIsDark } from "@xylabs/react-theme";
|
|
19
|
-
import
|
|
20
|
-
var PropertyTitle = ({
|
|
21
|
-
elevation = 1,
|
|
22
|
-
size = "medium",
|
|
23
|
-
tip,
|
|
24
|
-
more,
|
|
25
|
-
title,
|
|
26
|
-
...props
|
|
27
|
-
}) => {
|
|
15
|
+
import React from "react";
|
|
16
|
+
var PropertyTitle = /* @__PURE__ */ __name(({ elevation = 1, size = "medium", tip, more, title, ...props }) => {
|
|
28
17
|
const sizeVariants = {
|
|
29
18
|
full: "caption",
|
|
30
19
|
large: "caption",
|
|
@@ -47,164 +36,167 @@ var PropertyTitle = ({
|
|
|
47
36
|
const theme = useTheme();
|
|
48
37
|
const {} = useColorScheme();
|
|
49
38
|
const isDark = useIsDark();
|
|
50
|
-
return /* @__PURE__ */
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
39
|
+
return /* @__PURE__ */ React.createElement(FlexRow, {
|
|
40
|
+
bgcolor: isDark ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation) : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation),
|
|
41
|
+
alignItems: "center",
|
|
42
|
+
height: sizeTitleHeight[size],
|
|
43
|
+
justifyContent: "space-between",
|
|
44
|
+
...props
|
|
45
|
+
}, /* @__PURE__ */ React.createElement(FlexRow, {
|
|
46
|
+
paddingX: 1,
|
|
47
|
+
paddingY: 0.5
|
|
48
|
+
}, /* @__PURE__ */ React.createElement(Typography, {
|
|
49
|
+
fontWeight: 500,
|
|
50
|
+
noWrap: true,
|
|
51
|
+
variant: sizeVariants[size],
|
|
52
|
+
fontSize: sizeFontSize[size]
|
|
53
|
+
}, /* @__PURE__ */ React.createElement("small", null, /* @__PURE__ */ React.createElement("strong", null, title))), tip ? /* @__PURE__ */ React.createElement(QuickTipButton, {
|
|
54
|
+
style: {
|
|
55
|
+
fontSize: quickTipSize
|
|
56
|
+
},
|
|
57
|
+
color: "inherit",
|
|
58
|
+
title: title ?? ""
|
|
59
|
+
}, tip) : null), more);
|
|
60
|
+
}, "PropertyTitle");
|
|
68
61
|
|
|
69
62
|
// src/components/Group.tsx
|
|
70
|
-
|
|
71
|
-
var PropertyGroupBox = ({
|
|
72
|
-
titleProps,
|
|
73
|
-
children,
|
|
74
|
-
title,
|
|
75
|
-
tip,
|
|
76
|
-
...props
|
|
77
|
-
}) => {
|
|
63
|
+
var PropertyGroupBox = /* @__PURE__ */ __name(({ titleProps, children, title, tip, ...props }) => {
|
|
78
64
|
const theme = useTheme2();
|
|
79
65
|
const childrenArray = typeOf(children) === "array" ? children : void 0;
|
|
80
|
-
return /* @__PURE__ */
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
66
|
+
return /* @__PURE__ */ React2.createElement(FlexCol, {
|
|
67
|
+
alignItems: "stretch",
|
|
68
|
+
overflow: "hidden",
|
|
69
|
+
...props
|
|
70
|
+
}, /* @__PURE__ */ React2.createElement(FlexRow2, {
|
|
71
|
+
overflow: "hidden",
|
|
72
|
+
justifyContent: "stretch",
|
|
73
|
+
alignItems: "stretch"
|
|
74
|
+
}, /* @__PURE__ */ React2.createElement(PropertyTitle, {
|
|
75
|
+
alignItems: "flex-start",
|
|
76
|
+
size: "full",
|
|
77
|
+
title,
|
|
78
|
+
tip,
|
|
79
|
+
...titleProps
|
|
80
|
+
}), childrenArray ? /* @__PURE__ */ React2.createElement(FlexGrowRow, null, childrenArray?.map((child, index) => {
|
|
81
|
+
return child ? /* @__PURE__ */ React2.createElement(FlexGrowRow, {
|
|
82
|
+
key: index,
|
|
83
|
+
borderLeft: 1,
|
|
84
|
+
borderColor: theme.vars.palette.divider
|
|
85
|
+
}, child) : null;
|
|
86
|
+
})) : /* @__PURE__ */ React2.createElement(FlexGrowRow, {
|
|
87
|
+
overflow: "hidden"
|
|
88
|
+
}, children)));
|
|
89
|
+
}, "PropertyGroupBox");
|
|
90
|
+
var PropertyGroupPaper = /* @__PURE__ */ __name(({ style, variant, elevation, square, ...props }) => {
|
|
91
|
+
return /* @__PURE__ */ React2.createElement(Paper, {
|
|
92
|
+
style: {
|
|
93
|
+
minWidth: 0,
|
|
94
|
+
overflow: "hidden",
|
|
95
|
+
...style
|
|
96
|
+
},
|
|
97
|
+
variant,
|
|
98
|
+
elevation,
|
|
99
|
+
square
|
|
100
|
+
}, /* @__PURE__ */ React2.createElement(PropertyGroupBox, {
|
|
101
|
+
...props,
|
|
102
|
+
paper: false
|
|
103
|
+
}));
|
|
104
|
+
}, "PropertyGroupPaper");
|
|
105
|
+
var PropertyGroup = /* @__PURE__ */ __name((props) => {
|
|
106
|
+
return props.paper ? /* @__PURE__ */ React2.createElement(PropertyGroupPaper, props) : /* @__PURE__ */ React2.createElement(PropertyGroupBox, props);
|
|
107
|
+
}, "PropertyGroup");
|
|
112
108
|
|
|
113
109
|
// src/components/Property.tsx
|
|
114
110
|
import { CircularProgress, Paper as Paper2 } from "@mui/material";
|
|
115
111
|
import { FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
|
|
112
|
+
import React6 from "react";
|
|
116
113
|
|
|
117
114
|
// src/components/ActionsMenu.tsx
|
|
118
115
|
import { MoreHoriz as MoreHorizIcon } from "@mui/icons-material";
|
|
119
|
-
import {
|
|
120
|
-
IconButton,
|
|
121
|
-
Menu,
|
|
122
|
-
MenuItem
|
|
123
|
-
} from "@mui/material";
|
|
116
|
+
import { IconButton, Menu, MenuItem } from "@mui/material";
|
|
124
117
|
import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
|
|
125
|
-
import { useState } from "react";
|
|
126
|
-
|
|
127
|
-
var PropertyActionsMenu = ({ actions, ...props }) => {
|
|
118
|
+
import React3, { useState } from "react";
|
|
119
|
+
var PropertyActionsMenu = /* @__PURE__ */ __name(({ actions, ...props }) => {
|
|
128
120
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
129
121
|
const open = !!anchorEl;
|
|
130
|
-
const handleClick = (event) => {
|
|
122
|
+
const handleClick = /* @__PURE__ */ __name((event) => {
|
|
131
123
|
setAnchorEl(event.currentTarget);
|
|
132
|
-
};
|
|
133
|
-
const handleClose = () => {
|
|
124
|
+
}, "handleClick");
|
|
125
|
+
const handleClose = /* @__PURE__ */ __name(() => {
|
|
134
126
|
setAnchorEl(null);
|
|
135
|
-
};
|
|
136
|
-
return actions && actions?.length > 0 ? /* @__PURE__ */
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
)
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
}
|
|
127
|
+
}, "handleClose");
|
|
128
|
+
return actions && actions?.length > 0 ? /* @__PURE__ */ React3.createElement(FlexRow3, props, /* @__PURE__ */ React3.createElement(IconButton, {
|
|
129
|
+
size: "small",
|
|
130
|
+
color: "inherit",
|
|
131
|
+
onClick: handleClick
|
|
132
|
+
}, /* @__PURE__ */ React3.createElement(MoreHorizIcon, {
|
|
133
|
+
fontSize: "inherit"
|
|
134
|
+
})), /* @__PURE__ */ React3.createElement(Menu, {
|
|
135
|
+
anchorEl,
|
|
136
|
+
open,
|
|
137
|
+
onClose: handleClose
|
|
138
|
+
}, actions?.map((action) => {
|
|
139
|
+
return /* @__PURE__ */ React3.createElement(MenuItem, {
|
|
140
|
+
key: action.name,
|
|
141
|
+
onClick: /* @__PURE__ */ __name(() => {
|
|
142
|
+
action?.onClick?.();
|
|
143
|
+
handleClose();
|
|
144
|
+
}, "onClick")
|
|
145
|
+
}, action.name);
|
|
146
|
+
}))) : null;
|
|
147
|
+
}, "PropertyActionsMenu");
|
|
153
148
|
|
|
154
149
|
// src/components/IdenticonCorner.tsx
|
|
155
150
|
import { useTheme as useTheme3 } from "@mui/material";
|
|
156
151
|
import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
|
|
157
152
|
import { Identicon } from "@xylabs/react-identicon";
|
|
158
|
-
import { useMemo, useRef } from "react";
|
|
159
|
-
|
|
160
|
-
var IdenticonCorner = ({ value, ...props }) => {
|
|
153
|
+
import React4, { useMemo, useRef } from "react";
|
|
154
|
+
var IdenticonCorner = /* @__PURE__ */ __name(({ value, ...props }) => {
|
|
161
155
|
const theme = useTheme3();
|
|
162
156
|
const ref = useRef(null);
|
|
163
|
-
const parentHeight = useMemo(() => ref.current?.parentElement?.parentElement?.clientHeight, [
|
|
157
|
+
const parentHeight = useMemo(() => ref.current?.parentElement?.parentElement?.clientHeight, [
|
|
158
|
+
ref.current
|
|
159
|
+
]);
|
|
164
160
|
const calculatedHeight = parentHeight ?? 0;
|
|
165
|
-
return /* @__PURE__ */
|
|
166
|
-
|
|
161
|
+
return /* @__PURE__ */ React4.createElement(FlexRow4, {
|
|
162
|
+
alignItems: "flex-start",
|
|
163
|
+
height: "100%"
|
|
164
|
+
}, /* @__PURE__ */ React4.createElement(FlexRow4, {
|
|
165
|
+
background: true,
|
|
166
|
+
height: calculatedHeight,
|
|
167
|
+
width: calculatedHeight,
|
|
168
|
+
borderLeft: `1px solid ${theme.vars.palette.divider}`
|
|
169
|
+
}, /* @__PURE__ */ React4.createElement("div", {
|
|
170
|
+
ref
|
|
171
|
+
}, /* @__PURE__ */ React4.createElement(Identicon, {
|
|
172
|
+
size: calculatedHeight * 0.6,
|
|
173
|
+
value: `${value}`,
|
|
174
|
+
sx: {
|
|
175
|
+
padding: `${calculatedHeight * 0.2}px`
|
|
176
|
+
},
|
|
177
|
+
...props
|
|
178
|
+
}))));
|
|
179
|
+
}, "IdenticonCorner");
|
|
167
180
|
|
|
168
181
|
// src/components/Value.tsx
|
|
169
182
|
import { EllipsizeBox } from "@xyo-network/react-shared";
|
|
170
|
-
import
|
|
171
|
-
var PropertyValue = ({
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
variant: typographyVariant
|
|
184
|
-
},
|
|
185
|
-
width: "100%",
|
|
186
|
-
ref,
|
|
187
|
-
...props,
|
|
188
|
-
children: value
|
|
189
|
-
}
|
|
190
|
-
);
|
|
191
|
-
};
|
|
183
|
+
import React5 from "react";
|
|
184
|
+
var PropertyValue = /* @__PURE__ */ __name(({ ref, typographyVariant = "body1", value, ...props }) => {
|
|
185
|
+
return value === void 0 ? null : /* @__PURE__ */ React5.createElement(EllipsizeBox, {
|
|
186
|
+
typographyProps: {
|
|
187
|
+
component: void 0,
|
|
188
|
+
title: value?.toString(),
|
|
189
|
+
variant: typographyVariant
|
|
190
|
+
},
|
|
191
|
+
width: "100%",
|
|
192
|
+
ref,
|
|
193
|
+
...props
|
|
194
|
+
}, value);
|
|
195
|
+
}, "PropertyValue");
|
|
192
196
|
PropertyValue.displayName = "PropertyValue";
|
|
193
197
|
|
|
194
198
|
// src/components/Property.tsx
|
|
195
|
-
|
|
196
|
-
var PropertyBox = ({
|
|
197
|
-
titleProps,
|
|
198
|
-
title,
|
|
199
|
-
value,
|
|
200
|
-
children,
|
|
201
|
-
size = "medium",
|
|
202
|
-
tip,
|
|
203
|
-
actions,
|
|
204
|
-
required,
|
|
205
|
-
badge = false,
|
|
206
|
-
...props
|
|
207
|
-
}) => {
|
|
199
|
+
var PropertyBox = /* @__PURE__ */ __name(({ titleProps, title, value, children, size = "medium", tip, actions, required, badge = false, ...props }) => {
|
|
208
200
|
const sizeValueHeight = {
|
|
209
201
|
large: 48,
|
|
210
202
|
medium: 36,
|
|
@@ -215,62 +207,56 @@ var PropertyBox = ({
|
|
|
215
207
|
medium: "body1",
|
|
216
208
|
small: "body2"
|
|
217
209
|
};
|
|
218
|
-
return /* @__PURE__ */
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
210
|
+
return /* @__PURE__ */ React6.createElement(FlexRow5, {
|
|
211
|
+
flexDirection: "column",
|
|
212
|
+
minWidth: 0,
|
|
213
|
+
alignItems: "stretch",
|
|
214
|
+
overflow: "hidden",
|
|
215
|
+
...props
|
|
216
|
+
}, title === void 0 ? null : /* @__PURE__ */ React6.createElement(PropertyTitle, {
|
|
217
|
+
tip,
|
|
218
|
+
title: required ? `${title}*` : title,
|
|
219
|
+
size,
|
|
220
|
+
more: /* @__PURE__ */ React6.createElement(PropertyActionsMenu, {
|
|
221
|
+
actions
|
|
222
|
+
}),
|
|
223
|
+
...titleProps
|
|
224
|
+
}), /* @__PURE__ */ React6.createElement(FlexRow5, {
|
|
225
|
+
pl: 1,
|
|
226
|
+
columnGap: 1,
|
|
227
|
+
justifyContent: value === void 0 ? "center" : "space-between",
|
|
228
|
+
overflow: "hidden",
|
|
229
|
+
height: sizeValueHeight[size]
|
|
230
|
+
}, children ?? (value === void 0 ? /* @__PURE__ */ React6.createElement(CircularProgress, {
|
|
231
|
+
size: 16
|
|
232
|
+
}) : /* @__PURE__ */ React6.createElement(PropertyValue, {
|
|
233
|
+
value,
|
|
234
|
+
typographyVariant: sizeVariants[size]
|
|
235
|
+
})), value === void 0 ? null : badge ? /* @__PURE__ */ React6.createElement(IdenticonCorner, {
|
|
236
|
+
value
|
|
237
|
+
}) : null));
|
|
238
|
+
}, "PropertyBox");
|
|
245
239
|
PropertyBox.displayName = "PropertyBox";
|
|
246
|
-
var PropertyPaper = ({
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
},
|
|
263
|
-
variant,
|
|
264
|
-
elevation,
|
|
265
|
-
square,
|
|
266
|
-
children: /* @__PURE__ */ jsx6(PropertyBox, { ...props, paper: false })
|
|
267
|
-
}
|
|
268
|
-
);
|
|
269
|
-
};
|
|
240
|
+
var PropertyPaper = /* @__PURE__ */ __name(({ ref, style, variant, elevation = 2, square, ...props }) => {
|
|
241
|
+
return /* @__PURE__ */ React6.createElement(Paper2, {
|
|
242
|
+
ref,
|
|
243
|
+
style: {
|
|
244
|
+
minWidth: 0,
|
|
245
|
+
overflow: "hidden",
|
|
246
|
+
...style
|
|
247
|
+
},
|
|
248
|
+
variant,
|
|
249
|
+
elevation,
|
|
250
|
+
square
|
|
251
|
+
}, /* @__PURE__ */ React6.createElement(PropertyBox, {
|
|
252
|
+
...props,
|
|
253
|
+
paper: false
|
|
254
|
+
}));
|
|
255
|
+
}, "PropertyPaper");
|
|
270
256
|
PropertyPaper.displayName = "PropertyPaper";
|
|
271
|
-
var Property = ({ ...props }) => {
|
|
272
|
-
return props.paper ? /* @__PURE__ */
|
|
273
|
-
};
|
|
257
|
+
var Property = /* @__PURE__ */ __name(({ ...props }) => {
|
|
258
|
+
return props.paper ? /* @__PURE__ */ React6.createElement(PropertyPaper, props) : /* @__PURE__ */ React6.createElement(PropertyBox, props);
|
|
259
|
+
}, "Property");
|
|
274
260
|
Property.displayName = "Property";
|
|
275
261
|
export {
|
|
276
262
|
Property,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Group.tsx","../../src/components/Title.tsx","../../src/components/Property.tsx","../../src/components/ActionsMenu.tsx","../../src/components/IdenticonCorner.tsx","../../src/components/Value.tsx"],"sourcesContent":["import { Paper, useTheme } from '@mui/material'\nimport {\n FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport type {\n PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({\n titleProps, children, title, tip, ...props\n}) => {\n const theme = useTheme()\n const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined\n return (\n <FlexCol alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n <FlexRow overflow=\"hidden\" justifyContent=\"stretch\" alignItems=\"stretch\">\n <PropertyTitle alignItems=\"flex-start\" size=\"full\" title={title} tip={tip} {...titleProps} />\n {childrenArray\n ? (\n <FlexGrowRow>\n {childrenArray?.map((child, index) => {\n return child\n ? (\n <FlexGrowRow key={index} borderLeft={1} borderColor={theme.vars.palette.divider}>\n {child}\n </FlexGrowRow>\n )\n : null\n })}\n </FlexGrowRow>\n )\n : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n </FlexRow>\n </FlexCol>\n )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({\n style, variant, elevation, square, ...props\n}) => {\n return (\n <Paper\n style={{\n minWidth: 0, overflow: 'hidden', ...style,\n }}\n variant={variant}\n elevation={elevation}\n square={square}\n >\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 type { TypographyVariant } from '@mui/material'\nimport {\n Typography, useColorScheme, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { darkenCss, useIsDark } from '@xylabs/react-theme'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport type { ReactNode } from 'react'\nimport React 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> = ({\n elevation = 1, size = 'medium', tip, more, title, ...props\n}) => {\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 = Math.min(sizeFontSize[size], 16)\n\n const theme = useTheme()\n const {} = useColorScheme()\n const isDark = useIsDark()\n\n return (\n <FlexRow\n bgcolor={\n isDark\n ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation)\n : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation)\n }\n alignItems=\"center\"\n height={sizeTitleHeight[size]}\n justifyContent=\"space-between\"\n {...props}\n >\n <FlexRow paddingX={1} paddingY={0.5}>\n <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>\n <small>\n <strong>{title}</strong>\n </small>\n </Typography>\n {tip\n ? (\n <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n {tip}\n </QuickTipButton>\n )\n : null}\n </FlexRow>\n {more}\n </FlexRow>\n )\n}\n","import type { TypographyVariant } from '@mui/material'\nimport { CircularProgress, Paper } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu.tsx'\nimport { IdenticonCorner } from './IdenticonCorner.tsx'\nimport type {\n PropertyBoxProps, PropertyPaperProps, PropertyProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\nimport { PropertyValue } from './Value.tsx'\n\nconst PropertyBox: React.FC<PropertyBoxProps> = ({\n titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props\n}) => {\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 flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n {title === undefined\n ? null\n : (\n <PropertyTitle\n tip={tip}\n title={required ? `${title}*` : title}\n size={size}\n more={<PropertyActionsMenu actions={actions} />}\n {...titleProps}\n />\n )}\n <FlexRow\n pl={1}\n columnGap={1}\n justifyContent={value === undefined ? 'center' : 'space-between'}\n overflow=\"hidden\"\n height={sizeValueHeight[size]}\n >\n {children ?? ((value === undefined)\n ? <CircularProgress size={16} />\n : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />)}\n {value === undefined\n ? null\n : badge\n ? <IdenticonCorner value={value} />\n : null}\n </FlexRow>\n </FlexRow>\n )\n}\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper: React.FC<PropertyPaperProps> = ({\n ref, style, variant, elevation = 2, square, ...props\n}) => {\n return (\n <Paper\n ref={ref}\n style={{\n minWidth: 0, overflow: 'hidden', ...style,\n }}\n variant={variant}\n elevation={elevation}\n square={square}\n >\n <PropertyBox {...props} paper={false} />\n </Paper>\n )\n}\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property: React.FC<PropertyProps> = ({ ...props }) => {\n return props.paper ? <PropertyPaper {...props} /> : <PropertyBox {...props} />\n}\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport {\n IconButton, Menu, MenuItem,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nimport type { PropertyActionsProps } from './ActionsProps.ts'\n\nexport const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n const open = !!anchorEl\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget)\n }\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n return actions && actions?.length > 0\n ? (\n <FlexRow {...props}>\n <IconButton size=\"small\" color=\"inherit\" onClick={handleClick}>\n <MoreHorizIcon fontSize=\"inherit\" />\n </IconButton>\n <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n {actions?.map((action) => {\n return (\n <MenuItem\n key={action.name}\n onClick={() => {\n action?.onClick?.()\n handleClose()\n }}\n >\n {action.name}\n </MenuItem>\n )\n })}\n </Menu>\n </FlexRow>\n )\n : null\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport React, { useMemo, useRef } 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 ref = useRef<HTMLDivElement>(null)\n\n const parentHeight = useMemo(() => ref.current?.parentElement?.parentElement?.clientHeight, [ref.current])\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.vars.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 { TypographyVariant } from '@mui/material'\nimport type { EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { EllipsizeBox } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport interface PropertyValueProps extends EllipsizeBoxProps {\n typographyVariant?: TypographyVariant\n value?: string | number | boolean | null\n}\n\nexport const PropertyValue = ({\n ref, typographyVariant = 'body1', value, ...props\n}: PropertyValueProps) => {\n return value === undefined\n ? null\n : (\n <EllipsizeBox\n typographyProps={{\n component: undefined, title: value?.toString(), variant: typographyVariant,\n }}\n width=\"100%\"\n ref={ref}\n {...props}\n >\n {value}\n </EllipsizeBox>\n )\n}\n\nPropertyValue.displayName = 'PropertyValue'\n"],"mappings":"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","names":["useTheme","FlexRow","jsx","jsxs","useTheme","FlexRow","Paper","FlexRow","FlexRow","jsx","jsxs","useTheme","FlexRow","jsx","jsx","jsx","jsxs","FlexRow","Paper"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Group.tsx","../../src/components/Title.tsx","../../src/components/Property.tsx","../../src/components/ActionsMenu.tsx","../../src/components/IdenticonCorner.tsx","../../src/components/Value.tsx"],"sourcesContent":["import { Paper, useTheme } from '@mui/material'\nimport {\n FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport type {\n PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({\n titleProps, children, title, tip, ...props\n}) => {\n const theme = useTheme()\n const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined\n return (\n <FlexCol alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n <FlexRow overflow=\"hidden\" justifyContent=\"stretch\" alignItems=\"stretch\">\n <PropertyTitle alignItems=\"flex-start\" size=\"full\" title={title} tip={tip} {...titleProps} />\n {childrenArray\n ? (\n <FlexGrowRow>\n {childrenArray?.map((child, index) => {\n return child\n ? (\n <FlexGrowRow key={index} borderLeft={1} borderColor={theme.vars.palette.divider}>\n {child}\n </FlexGrowRow>\n )\n : null\n })}\n </FlexGrowRow>\n )\n : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n </FlexRow>\n </FlexCol>\n )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({\n style, variant, elevation, square, ...props\n}) => {\n return (\n <Paper\n style={{\n minWidth: 0, overflow: 'hidden', ...style,\n }}\n variant={variant}\n elevation={elevation}\n square={square}\n >\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 type { TypographyVariant } from '@mui/material'\nimport {\n Typography, useColorScheme, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { darkenCss, useIsDark } from '@xylabs/react-theme'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport type { ReactNode } from 'react'\nimport React 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> = ({\n elevation = 1, size = 'medium', tip, more, title, ...props\n}) => {\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 = Math.min(sizeFontSize[size], 16)\n\n const theme = useTheme()\n const {} = useColorScheme()\n const isDark = useIsDark()\n\n return (\n <FlexRow\n bgcolor={\n isDark\n ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation)\n : darkenCss(theme.vars.palette.background.paper, 0.025 * elevation)\n }\n alignItems=\"center\"\n height={sizeTitleHeight[size]}\n justifyContent=\"space-between\"\n {...props}\n >\n <FlexRow paddingX={1} paddingY={0.5}>\n <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>\n <small>\n <strong>{title}</strong>\n </small>\n </Typography>\n {tip\n ? (\n <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n {tip}\n </QuickTipButton>\n )\n : null}\n </FlexRow>\n {more}\n </FlexRow>\n )\n}\n","import type { TypographyVariant } from '@mui/material'\nimport { CircularProgress, Paper } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu.tsx'\nimport { IdenticonCorner } from './IdenticonCorner.tsx'\nimport type {\n PropertyBoxProps, PropertyPaperProps, PropertyProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\nimport { PropertyValue } from './Value.tsx'\n\nconst PropertyBox: React.FC<PropertyBoxProps> = ({\n titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props\n}) => {\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 flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n {title === undefined\n ? null\n : (\n <PropertyTitle\n tip={tip}\n title={required ? `${title}*` : title}\n size={size}\n more={<PropertyActionsMenu actions={actions} />}\n {...titleProps}\n />\n )}\n <FlexRow\n pl={1}\n columnGap={1}\n justifyContent={value === undefined ? 'center' : 'space-between'}\n overflow=\"hidden\"\n height={sizeValueHeight[size]}\n >\n {children ?? ((value === undefined)\n ? <CircularProgress size={16} />\n : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />)}\n {value === undefined\n ? null\n : badge\n ? <IdenticonCorner value={value} />\n : null}\n </FlexRow>\n </FlexRow>\n )\n}\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper: React.FC<PropertyPaperProps> = ({\n ref, style, variant, elevation = 2, square, ...props\n}) => {\n return (\n <Paper\n ref={ref}\n style={{\n minWidth: 0, overflow: 'hidden', ...style,\n }}\n variant={variant}\n elevation={elevation}\n square={square}\n >\n <PropertyBox {...props} paper={false} />\n </Paper>\n )\n}\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property: React.FC<PropertyProps> = ({ ...props }) => {\n return props.paper ? <PropertyPaper {...props} /> : <PropertyBox {...props} />\n}\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport {\n IconButton, Menu, MenuItem,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nimport type { PropertyActionsProps } from './ActionsProps.ts'\n\nexport const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n const open = !!anchorEl\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget)\n }\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n return actions && actions?.length > 0\n ? (\n <FlexRow {...props}>\n <IconButton size=\"small\" color=\"inherit\" onClick={handleClick}>\n <MoreHorizIcon fontSize=\"inherit\" />\n </IconButton>\n <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n {actions?.map((action) => {\n return (\n <MenuItem\n key={action.name}\n onClick={() => {\n action?.onClick?.()\n handleClose()\n }}\n >\n {action.name}\n </MenuItem>\n )\n })}\n </Menu>\n </FlexRow>\n )\n : null\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport React, { useMemo, useRef } 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 ref = useRef<HTMLDivElement>(null)\n\n const parentHeight = useMemo(() => ref.current?.parentElement?.parentElement?.clientHeight, [ref.current])\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.vars.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 { TypographyVariant } from '@mui/material'\nimport type { EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { EllipsizeBox } from '@xyo-network/react-shared'\nimport React from 'react'\n\nexport interface PropertyValueProps extends EllipsizeBoxProps {\n typographyVariant?: TypographyVariant\n value?: string | number | boolean | null\n}\n\nexport const PropertyValue = ({\n ref, typographyVariant = 'body1', value, ...props\n}: PropertyValueProps) => {\n return value === undefined\n ? null\n : (\n <EllipsizeBox\n typographyProps={{\n component: undefined, title: value?.toString(), variant: typographyVariant,\n }}\n width=\"100%\"\n ref={ref}\n {...props}\n >\n {value}\n </EllipsizeBox>\n )\n}\n\nPropertyValue.displayName = 'PropertyValue'\n"],"mappings":"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","names":["Paper","useTheme","FlexCol","FlexGrowRow","FlexRow","typeOf","React","Typography","useColorScheme","useTheme","FlexRow","QuickTipButton","darkenCss","useIsDark","React","PropertyTitle","elevation","size","tip","more","title","props","sizeVariants","full","large","medium","small","sizeTitleHeight","undefined","sizeFontSize","quickTipSize","Math","min","theme","useTheme","useColorScheme","isDark","useIsDark","FlexRow","bgcolor","darkenCss","vars","palette","background","paper","alignItems","height","justifyContent","paddingX","paddingY","Typography","fontWeight","noWrap","variant","fontSize","strong","QuickTipButton","style","color","PropertyGroupBox","titleProps","children","title","tip","props","theme","useTheme","childrenArray","typeOf","undefined","React","FlexCol","alignItems","overflow","FlexRow","justifyContent","PropertyTitle","size","FlexGrowRow","map","child","index","key","borderLeft","borderColor","vars","palette","divider","PropertyGroupPaper","style","variant","elevation","square","Paper","minWidth","paper","PropertyGroup","CircularProgress","Paper","FlexRow","React","MoreHoriz","MoreHorizIcon","IconButton","Menu","MenuItem","FlexRow","React","useState","PropertyActionsMenu","actions","props","anchorEl","setAnchorEl","useState","open","handleClick","event","currentTarget","handleClose","length","React","FlexRow","IconButton","size","color","onClick","MoreHorizIcon","fontSize","Menu","onClose","map","action","MenuItem","key","name","useTheme","FlexRow","Identicon","React","useMemo","useRef","IdenticonCorner","value","props","theme","useTheme","ref","useRef","parentHeight","useMemo","current","parentElement","clientHeight","calculatedHeight","React","FlexRow","alignItems","height","background","width","borderLeft","vars","palette","divider","div","Identicon","size","sx","padding","EllipsizeBox","React","PropertyValue","ref","typographyVariant","value","props","undefined","React","EllipsizeBox","typographyProps","component","title","toString","variant","width","displayName","PropertyBox","titleProps","title","value","children","size","tip","actions","required","badge","props","sizeValueHeight","large","medium","small","sizeVariants","React","FlexRow","flexDirection","minWidth","alignItems","overflow","undefined","PropertyTitle","more","PropertyActionsMenu","pl","columnGap","justifyContent","height","CircularProgress","PropertyValue","typographyVariant","IdenticonCorner","displayName","PropertyPaper","ref","style","variant","elevation","square","Paper","paper","Property"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-property",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.5.0",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -43,30 +43,30 @@
|
|
|
43
43
|
"src"
|
|
44
44
|
],
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@xylabs/react-flexbox": "~7.1.
|
|
47
|
-
"@xylabs/react-identicon": "~7.1.
|
|
48
|
-
"@xylabs/react-quick-tip-button": "~7.1.
|
|
49
|
-
"@xylabs/react-theme": "~7.1.
|
|
50
|
-
"@xyo-network/react-shared": "
|
|
51
|
-
"@xyo-network/typeof": "~5.2
|
|
46
|
+
"@xylabs/react-flexbox": "~7.1.9",
|
|
47
|
+
"@xylabs/react-identicon": "~7.1.9",
|
|
48
|
+
"@xylabs/react-quick-tip-button": "~7.1.9",
|
|
49
|
+
"@xylabs/react-theme": "~7.1.9",
|
|
50
|
+
"@xyo-network/react-shared": "7.5.0",
|
|
51
|
+
"@xyo-network/typeof": "~5.3.2"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@mui/icons-material": "~7.3.
|
|
55
|
-
"@mui/material": "~7.3.
|
|
56
|
-
"@storybook/react-vite": "~10.1
|
|
57
|
-
"@types/react": "^19.2.
|
|
58
|
-
"@xylabs/react-button": "~7.1.
|
|
59
|
-
"@xylabs/react-theme": "~7.1.
|
|
60
|
-
"@xylabs/ts-scripts-yarn3": "~7.2
|
|
61
|
-
"@xylabs/tsconfig": "~7.2
|
|
62
|
-
"@xylabs/tsconfig-dom": "~7.2
|
|
63
|
-
"@xylabs/tsconfig-react": "~7.2
|
|
64
|
-
"react": "^19.2.
|
|
65
|
-
"react-dom": "^19.2.
|
|
66
|
-
"react-router-dom": "^7.
|
|
67
|
-
"storybook": "~10.1
|
|
54
|
+
"@mui/icons-material": "~7.3.7",
|
|
55
|
+
"@mui/material": "~7.3.7",
|
|
56
|
+
"@storybook/react-vite": "~10.2.1",
|
|
57
|
+
"@types/react": "^19.2.10",
|
|
58
|
+
"@xylabs/react-button": "~7.1.9",
|
|
59
|
+
"@xylabs/react-theme": "~7.1.9",
|
|
60
|
+
"@xylabs/ts-scripts-yarn3": "~7.3.2",
|
|
61
|
+
"@xylabs/tsconfig": "~7.3.2",
|
|
62
|
+
"@xylabs/tsconfig-dom": "~7.3.2",
|
|
63
|
+
"@xylabs/tsconfig-react": "~7.3.2",
|
|
64
|
+
"react": "^19.2.4",
|
|
65
|
+
"react-dom": "^19.2.4",
|
|
66
|
+
"react-router-dom": "^7.13.0",
|
|
67
|
+
"storybook": "~10.2.1",
|
|
68
68
|
"typescript": "^5.9.3",
|
|
69
|
-
"vite": "~7.
|
|
69
|
+
"vite": "~7.3.1"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"@mui/icons-material": ">=6 <8",
|
|
@@ -79,4 +79,4 @@
|
|
|
79
79
|
"access": "public"
|
|
80
80
|
},
|
|
81
81
|
"docs": "dist/docs.json"
|
|
82
|
-
}
|
|
82
|
+
}
|