@xyo-network/react-payload-raw-info 7.5.7 → 7.5.11

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 (29) hide show
  1. package/dist/browser/components/styled/StyledChipLabel.d.ts +3 -1
  2. package/dist/browser/components/styled/StyledChipLabel.d.ts.map +1 -1
  3. package/dist/browser/index.mjs +197 -156
  4. package/dist/browser/index.mjs.map +1 -1
  5. package/package.json +90 -35
  6. package/src/components/Button/RawInfoButton.stories.tsx +0 -35
  7. package/src/components/Button/RawInfoButton.tsx +0 -76
  8. package/src/components/Button/RawInfoIconButton.stories.tsx +0 -35
  9. package/src/components/Button/RawInfoIconButton.tsx +0 -62
  10. package/src/components/Button/index.ts +0 -2
  11. package/src/components/Button/lib/IconSize.ts +0 -1
  12. package/src/components/Button/lib/index.ts +0 -2
  13. package/src/components/Button/lib/presetIconSize.ts +0 -15
  14. package/src/components/img/index.tsx +0 -29
  15. package/src/components/img/xyo-color-logo.svg +0 -1
  16. package/src/components/index.ts +0 -3
  17. package/src/components/shared/Dialog/JsonViewerCollapse.tsx +0 -64
  18. package/src/components/shared/Dialog/RawInfoDialog.stories.tsx +0 -37
  19. package/src/components/shared/Dialog/RawInfoDialog.tsx +0 -51
  20. package/src/components/shared/Dialog/index.ts +0 -2
  21. package/src/components/shared/JsonViewerEx.stories.tsx +0 -29
  22. package/src/components/shared/JsonViewerEx.tsx +0 -24
  23. package/src/components/shared/index.ts +0 -2
  24. package/src/components/styled/StyledChipLabel.tsx +0 -10
  25. package/src/components/styled/index.ts +0 -1
  26. package/src/index.ts +0 -1
  27. package/src/lib/ExpansionProps.ts +0 -4
  28. package/src/lib/index.ts +0 -1
  29. package/src/types/images.d.ts +0 -5
package/dist/browser/components/styled/StyledChipLabel.d.ts CHANGED
@@ -1,2 +1,4 @@
1
- export declare const StyledChipLabel: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "className" | "style" | "classes" | "p" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping">, "ref" | "className" | "style" | "classes" | "p" | "slot" | "title" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "content" | "translate" | "align" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1
+ import { Typography } from '@mui/material';
2
+ import type React from 'react';
3
+ export declare const StyledChipLabel: React.FC<React.ComponentProps<typeof Typography>>;
2
4
  //# sourceMappingURL=StyledChipLabel.d.ts.map
package/dist/browser/components/styled/StyledChipLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StyledChipLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/styled/StyledChipLabel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,myQAOzB,CAAA"}
1
+ {"version":3,"file":"StyledChipLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/styled/StyledChipLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,UAAU,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAO3E,CAAA"}
package/dist/browser/index.mjs CHANGED
@@ -1,49 +1,65 @@
1
- var __defProp = Object.defineProperty;
2
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
-
4
1
  // src/components/Button/RawInfoButton.tsx
5
2
  import { ButtonEx } from "@xylabs/react-button";
6
3
  import { toSafeJson } from "@xylabs/sdk-js";
7
- import React5, { useMemo, useState } from "react";
4
+ import { useMemo, useState } from "react";
8
5
 
9
6
  // src/components/img/index.tsx
10
7
  import { createSvgIcon } from "@mui/material";
11
- import React from "react";
12
- var XyoColorLogo = createSvgIcon(/* @__PURE__ */ React.createElement("svg", {
13
- xmlns: "http://www.w3.org/2000/svg",
14
- viewBox: "0 0 256 238"
15
- }, /* @__PURE__ */ React.createElement("path", {
16
- className: "cls-1",
17
- d: "M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z",
18
- fill: "#8d8fc6"
19
- }), /* @__PURE__ */ React.createElement("path", {
20
- className: "cls-2",
21
- d: "M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z",
22
- fill: "#579fd6"
23
- }), /* @__PURE__ */ React.createElement("path", {
24
- className: "cls-3",
25
- d: "M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z",
26
- fill: "#f27046"
27
- }), /* @__PURE__ */ React.createElement("path", {
28
- className: "cls-4",
29
- d: "M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z",
30
- fill: "#eb407a"
31
- })), "XyoColorLogo");
8
+ import { jsx, jsxs } from "react/jsx-runtime";
9
+ var XyoColorLogo = createSvgIcon(
10
+ /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 238", children: [
11
+ /* @__PURE__ */ jsx(
12
+ "path",
13
+ {
14
+ className: "cls-1",
15
+ d: "M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z",
16
+ fill: "#8d8fc6"
17
+ }
18
+ ),
19
+ /* @__PURE__ */ jsx(
20
+ "path",
21
+ {
22
+ className: "cls-2",
23
+ d: "M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z",
24
+ fill: "#579fd6"
25
+ }
26
+ ),
27
+ /* @__PURE__ */ jsx(
28
+ "path",
29
+ {
30
+ className: "cls-3",
31
+ d: "M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z",
32
+ fill: "#f27046"
33
+ }
34
+ ),
35
+ /* @__PURE__ */ jsx(
36
+ "path",
37
+ {
38
+ className: "cls-4",
39
+ d: "M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z",
40
+ fill: "#eb407a"
41
+ }
42
+ )
43
+ ] }),
44
+ "XyoColorLogo"
45
+ );
32
46
 
33
47
  // src/components/shared/Dialog/JsonViewerCollapse.tsx
34
- import { Button, Chip, Collapse, Typography as Typography2 } from "@mui/material";
48
+ import {
49
+ Button,
50
+ Chip,
51
+ Collapse,
52
+ Typography as Typography2
53
+ } from "@mui/material";
35
54
  import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
36
55
  import { usePromise } from "@xylabs/react-promise";
37
56
  import { PayloadBuilder } from "@xyo-network/payload-builder";
38
57
  import { isAnyPayload } from "@xyo-network/payload-model";
39
58
  import { useDataState } from "@xyo-network/react-shared";
40
- import React3 from "react";
41
59
 
42
60
  // src/components/styled/StyledChipLabel.tsx
43
61
  import { styled, Typography } from "@mui/material";
44
- var StyledChipLabel = styled(Typography, {
45
- name: "StyledChipLabel"
46
- })(({ theme }) => ({
62
+ var StyledChipLabel = styled(Typography, { name: "StyledChipLabel" })(({ theme }) => ({
47
63
  display: "block",
48
64
  lineHeight: 1,
49
65
  overflow: "hidden",
@@ -56,95 +72,98 @@ var StyledChipLabel = styled(Typography, {
56
72
  import { useTheme } from "@mui/material";
57
73
  import { JsonViewer } from "@textea/json-viewer";
58
74
  import { useIsDark } from "@xylabs/react-theme";
59
- import React2 from "react";
60
- var JsonViewerEx = /* @__PURE__ */ __name((props) => {
75
+ import { jsx as jsx2 } from "react/jsx-runtime";
76
+ var JsonViewerEx = (props) => {
61
77
  const theme = useTheme();
62
78
  const isDark = useIsDark();
63
- return /* @__PURE__ */ React2.createElement(JsonViewer, {
64
- theme: isDark ? "dark" : "light",
65
- collapseStringsAfterLength: 50,
66
- style: {
67
- borderRadius: theme.shape.borderRadius,
68
- padding: theme.spacing(2)
69
- },
70
- ...props
71
- });
72
- }, "JsonViewerEx");
79
+ return /* @__PURE__ */ jsx2(
80
+ JsonViewer,
81
+ {
82
+ theme: isDark ? "dark" : "light",
83
+ collapseStringsAfterLength: 50,
84
+ style: {
85
+ borderRadius: theme.shape.borderRadius,
86
+ padding: theme.spacing(2)
87
+ },
88
+ ...props
89
+ }
90
+ );
91
+ };
73
92
 
74
93
  // src/components/shared/Dialog/JsonViewerCollapse.tsx
75
- var JsonViewerCollapse = /* @__PURE__ */ __name(({ defaultExpandedJson, jsonValue, updateExpandedJson, ...props }) => {
94
+ import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
95
+ var JsonViewerCollapse = ({
96
+ defaultExpandedJson,
97
+ jsonValue,
98
+ updateExpandedJson,
99
+ ...props
100
+ }) => {
76
101
  const [expandedJson, setExpandedJson] = useDataState(defaultExpandedJson);
77
102
  const [hash] = usePromise(async () => {
78
103
  if (!jsonValue || !isAnyPayload(jsonValue)) return;
79
104
  return await PayloadBuilder.dataHash(jsonValue);
80
- }, [
81
- jsonValue
82
- ]);
105
+ }, [jsonValue]);
83
106
  const actionText = expandedJson ? "Hide JSON" : "Show JSON";
84
- const handleExpansion = /* @__PURE__ */ __name(() => {
107
+ const handleExpansion = () => {
85
108
  updateExpandedJson?.(!expandedJson);
86
109
  setExpandedJson(!expandedJson);
87
- }, "handleExpansion");
88
- return /* @__PURE__ */ React3.createElement(React3.Fragment, null, jsonValue ? /* @__PURE__ */ React3.createElement(FlexRow, null, /* @__PURE__ */ React3.createElement(Button, {
89
- onClick: handleExpansion,
90
- size: "small",
91
- variant: "outlined"
92
- }, actionText)) : null, /* @__PURE__ */ React3.createElement(Collapse, {
93
- in: expandedJson,
94
- ...props
95
- }, jsonValue ? /* @__PURE__ */ React3.createElement(FlexCol, {
96
- alignItems: "stretch",
97
- gap: 1.5
98
- }, /* @__PURE__ */ React3.createElement(Typography2, {
99
- sx: {
100
- lineHeight: 1
101
- }
102
- }, "Payload Hash:"), hash ? /* @__PURE__ */ React3.createElement(Chip, {
103
- label: /* @__PURE__ */ React3.createElement(StyledChipLabel, null, hash),
104
- sx: {
105
- alignSelf: "start"
106
- }
107
- }) : null, /* @__PURE__ */ React3.createElement(JsonViewerEx, {
108
- value: jsonValue
109
- })) : null));
110
- }, "JsonViewerCollapse");
110
+ };
111
+ return /* @__PURE__ */ jsxs2(Fragment, { children: [
112
+ jsonValue ? /* @__PURE__ */ jsx3(FlexRow, { children: /* @__PURE__ */ jsx3(Button, { onClick: handleExpansion, size: "small", variant: "outlined", children: actionText }) }) : null,
113
+ /* @__PURE__ */ jsx3(Collapse, { in: expandedJson, ...props, children: jsonValue ? /* @__PURE__ */ jsxs2(FlexCol, { alignItems: "stretch", gap: 1.5, children: [
114
+ /* @__PURE__ */ jsx3(Typography2, { sx: { lineHeight: 1 }, children: "Payload Hash:" }),
115
+ hash ? /* @__PURE__ */ jsx3(Chip, { label: /* @__PURE__ */ jsx3(StyledChipLabel, { children: hash }), sx: { alignSelf: "start" } }) : null,
116
+ /* @__PURE__ */ jsx3(JsonViewerEx, { value: jsonValue })
117
+ ] }) : null })
118
+ ] });
119
+ };
111
120
 
112
121
  // src/components/shared/Dialog/RawInfoDialog.tsx
113
- import { Button as Button2, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
114
- import React4 from "react";
115
- var RawInfoDialog = /* @__PURE__ */ __name(({ defaultExpandedJson, dialogContent, onCloseCallback, jsonValue: jsonObject, updateExpandedJson, open = false, ...props }) => {
116
- const onDialogClick = /* @__PURE__ */ __name((event) => {
122
+ import {
123
+ Button as Button2,
124
+ Dialog,
125
+ DialogActions,
126
+ DialogContent,
127
+ DialogTitle
128
+ } from "@mui/material";
129
+ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
130
+ var RawInfoDialog = ({
131
+ defaultExpandedJson,
132
+ dialogContent,
133
+ onCloseCallback,
134
+ jsonValue: jsonObject,
135
+ updateExpandedJson,
136
+ open = false,
137
+ ...props
138
+ }) => {
139
+ const onDialogClick = (event) => {
117
140
  event.stopPropagation();
118
- }, "onDialogClick");
141
+ };
119
142
  return (
120
143
  // Wrapping in a span so we can catch click events and prevent them from propagating outside the component
121
- /* @__PURE__ */ React4.createElement("span", {
122
- onClick: onDialogClick
123
- }, /* @__PURE__ */ React4.createElement(Dialog, {
124
- fullWidth: true,
125
- maxWidth: "lg",
126
- onClose: /* @__PURE__ */ __name(() => onCloseCallback?.(), "onClose"),
127
- open,
128
- ...props
129
- }, /* @__PURE__ */ React4.createElement(DialogTitle, null, "Raw Data"), /* @__PURE__ */ React4.createElement(DialogContent, {
130
- sx: {
131
- display: "flex",
132
- flexDirection: "column",
133
- gap: 2
134
- }
135
- }, dialogContent, /* @__PURE__ */ React4.createElement(JsonViewerCollapse, {
136
- defaultExpandedJson,
137
- jsonValue: jsonObject,
138
- updateExpandedJson
139
- })), /* @__PURE__ */ React4.createElement(DialogActions, null, /* @__PURE__ */ React4.createElement(Button2, {
140
- variant: "contained",
141
- onClick: /* @__PURE__ */ __name(() => onCloseCallback?.(), "onClick")
142
- }, "Close"))))
144
+ /* @__PURE__ */ jsx4("span", { onClick: onDialogClick, children: /* @__PURE__ */ jsxs3(Dialog, { fullWidth: true, maxWidth: "lg", onClose: () => onCloseCallback?.(), open, ...props, children: [
145
+ /* @__PURE__ */ jsx4(DialogTitle, { children: "Raw Data" }),
146
+ /* @__PURE__ */ jsxs3(
147
+ DialogContent,
148
+ {
149
+ sx: {
150
+ display: "flex",
151
+ flexDirection: "column",
152
+ gap: 2
153
+ },
154
+ children: [
155
+ dialogContent,
156
+ /* @__PURE__ */ jsx4(JsonViewerCollapse, { defaultExpandedJson, jsonValue: jsonObject, updateExpandedJson })
157
+ ]
158
+ }
159
+ ),
160
+ /* @__PURE__ */ jsx4(DialogActions, { children: /* @__PURE__ */ jsx4(Button2, { variant: "contained", onClick: () => onCloseCallback?.(), children: "Close" }) })
161
+ ] }) })
143
162
  );
144
- }, "RawInfoDialog");
163
+ };
145
164
 
146
165
  // src/components/Button/lib/presetIconSize.ts
147
- var presetIconSizeValue = /* @__PURE__ */ __name((size) => {
166
+ var presetIconSizeValue = (size) => {
148
167
  switch (size) {
149
168
  case "small": {
150
169
  return 16;
@@ -156,81 +175,103 @@ var presetIconSizeValue = /* @__PURE__ */ __name((size) => {
156
175
  return 48;
157
176
  }
158
177
  }
159
- }, "presetIconSizeValue");
178
+ };
160
179
 
161
180
  // src/components/Button/RawInfoButton.tsx
162
- var RawInfoButton = /* @__PURE__ */ __name(({ defaultExpandedJson = true, dialogContent, iconOnly, iconSize = 24, onCloseCallback, children, rawValue, presetIconSize, updateExpandedJson, ...props }) => {
181
+ import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
182
+ var RawInfoButton = ({
183
+ defaultExpandedJson = true,
184
+ dialogContent,
185
+ iconOnly,
186
+ iconSize = 24,
187
+ onCloseCallback,
188
+ children,
189
+ rawValue,
190
+ presetIconSize,
191
+ updateExpandedJson,
192
+ ...props
193
+ }) => {
163
194
  const [open, setOpen] = useState(false);
164
195
  const size = presetIconSizeValue(presetIconSize);
165
- const json = useMemo(() => toSafeJson(rawValue), [
166
- rawValue
167
- ]);
168
- const handleClick = /* @__PURE__ */ __name((event) => {
196
+ const json = useMemo(() => toSafeJson(rawValue), [rawValue]);
197
+ const handleClick = (event) => {
169
198
  event.stopPropagation();
170
199
  setOpen(true);
171
- }, "handleClick");
172
- const onCloseCallBackWrapped = /* @__PURE__ */ __name(() => {
200
+ };
201
+ const onCloseCallBackWrapped = () => {
173
202
  setOpen(false);
174
203
  onCloseCallback?.();
175
- }, "onCloseCallBackWrapped");
176
- return /* @__PURE__ */ React5.createElement("span", null, /* @__PURE__ */ React5.createElement(ButtonEx, {
177
- variant: "outlined",
178
- size: "small",
179
- startIcon: /* @__PURE__ */ React5.createElement(XyoColorLogo, {
180
- sx: {
181
- height: size ?? iconSize,
182
- width: size ?? iconSize
204
+ };
205
+ return /* @__PURE__ */ jsxs4("span", { children: [
206
+ /* @__PURE__ */ jsx5(
207
+ ButtonEx,
208
+ {
209
+ variant: "outlined",
210
+ size: "small",
211
+ startIcon: /* @__PURE__ */ jsx5(XyoColorLogo, { sx: { height: size ?? iconSize, width: size ?? iconSize } }),
212
+ onClick: handleClick,
213
+ disabled: iconOnly ? false : !rawValue,
214
+ ...props,
215
+ children: children ?? /* @__PURE__ */ jsx5("span", { children: "Data" })
183
216
  }
184
- }),
185
- onClick: handleClick,
186
- disabled: iconOnly ? false : !rawValue,
187
- ...props
188
- }, children ?? /* @__PURE__ */ React5.createElement("span", null, "Data")), iconOnly ? null : /* @__PURE__ */ React5.createElement(RawInfoDialog, {
189
- defaultExpandedJson,
190
- jsonValue: json,
191
- onCloseCallback: onCloseCallBackWrapped,
192
- dialogContent,
193
- open,
194
- updateExpandedJson
195
- }));
196
- }, "RawInfoButton");
217
+ ),
218
+ iconOnly ? null : /* @__PURE__ */ jsx5(
219
+ RawInfoDialog,
220
+ {
221
+ defaultExpandedJson,
222
+ jsonValue: json,
223
+ onCloseCallback: onCloseCallBackWrapped,
224
+ dialogContent,
225
+ open,
226
+ updateExpandedJson
227
+ }
228
+ )
229
+ ] });
230
+ };
197
231
 
198
232
  // src/components/Button/RawInfoIconButton.tsx
199
233
  import { IconButton } from "@mui/material";
200
234
  import { toSafeJson as toSafeJson2 } from "@xylabs/sdk-js";
201
- import React6, { useMemo as useMemo2, useState as useState2 } from "react";
202
- var RawInfoIconButton = /* @__PURE__ */ __name(({ ref, defaultExpandedJson = true, dialogContent, iconOnly, iconSize = 32, onCloseCallback, rawValue, presetIconSize, updateExpandedJson, ...props }) => {
235
+ import { useMemo as useMemo2, useState as useState2 } from "react";
236
+ import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
237
+ var RawInfoIconButton = ({
238
+ ref,
239
+ defaultExpandedJson = true,
240
+ dialogContent,
241
+ iconOnly,
242
+ iconSize = 32,
243
+ onCloseCallback,
244
+ rawValue,
245
+ presetIconSize,
246
+ updateExpandedJson,
247
+ ...props
248
+ }) => {
203
249
  const [open, setOpen] = useState2(false);
204
250
  const size = presetIconSizeValue(presetIconSize);
205
- const json = useMemo2(() => toSafeJson2(rawValue), [
206
- rawValue
207
- ]);
208
- const handleClick = /* @__PURE__ */ __name((event) => {
251
+ const json = useMemo2(() => toSafeJson2(rawValue), [rawValue]);
252
+ const handleClick = (event) => {
209
253
  event.stopPropagation();
210
254
  setOpen(true);
211
- }, "handleClick");
212
- const onCloseCallBackWrapped = /* @__PURE__ */ __name(() => {
255
+ };
256
+ const onCloseCallBackWrapped = () => {
213
257
  setOpen(false);
214
258
  onCloseCallback?.();
215
- }, "onCloseCallBackWrapped");
216
- return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(IconButton, {
217
- onClick: handleClick,
218
- ref,
219
- ...props
220
- }, /* @__PURE__ */ React6.createElement(XyoColorLogo, {
221
- sx: {
222
- height: size ?? iconSize,
223
- width: size ?? iconSize
224
- }
225
- })), iconOnly ? null : /* @__PURE__ */ React6.createElement(RawInfoDialog, {
226
- defaultExpandedJson,
227
- jsonValue: json,
228
- onCloseCallback: onCloseCallBackWrapped,
229
- dialogContent,
230
- open,
231
- updateExpandedJson
232
- }));
233
- }, "RawInfoIconButton");
259
+ };
260
+ return /* @__PURE__ */ jsxs5(Fragment2, { children: [
261
+ /* @__PURE__ */ jsx6(IconButton, { onClick: handleClick, ref, ...props, children: /* @__PURE__ */ jsx6(XyoColorLogo, { sx: { height: size ?? iconSize, width: size ?? iconSize } }) }),
262
+ iconOnly ? null : /* @__PURE__ */ jsx6(
263
+ RawInfoDialog,
264
+ {
265
+ defaultExpandedJson,
266
+ jsonValue: json,
267
+ onCloseCallback: onCloseCallBackWrapped,
268
+ dialogContent,
269
+ open,
270
+ updateExpandedJson
271
+ }
272
+ )
273
+ ] });
274
+ };
234
275
  RawInfoIconButton.displayName = "RawInfoIcon";
235
276
  export {
236
277
  JsonViewerCollapse,
package/dist/browser/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/Button/RawInfoButton.tsx","../../src/components/img/index.tsx","../../src/components/shared/Dialog/JsonViewerCollapse.tsx","../../src/components/styled/StyledChipLabel.tsx","../../src/components/shared/JsonViewerEx.tsx","../../src/components/shared/Dialog/RawInfoDialog.tsx","../../src/components/Button/lib/presetIconSize.ts","../../src/components/Button/RawInfoIconButton.tsx"],"sourcesContent":["import type { ButtonExProps } from '@xylabs/react-button'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { toSafeJson } from '@xylabs/sdk-js'\nimport type { MouseEventHandler, ReactNode } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport type { ExpansionProps } from '../../lib/index.ts'\nimport { XyoColorLogo } from '../img/index.tsx'\nimport { RawInfoDialog } from '../shared/index.ts'\nimport type { IconSize } from './lib/index.ts'\nimport { presetIconSizeValue } from './lib/index.ts'\n\nexport type RawInfoButtonProps = ButtonExProps & ExpansionProps & {\n dialogContent?: ReactNode\n iconOnly?: boolean\n iconSize?: number\n onCloseCallback?: () => void\n presetIconSize?: IconSize\n rawValue?: unknown\n}\n\nexport const RawInfoButton: React.FC<RawInfoButtonProps> = ({\n defaultExpandedJson = true,\n dialogContent,\n iconOnly,\n iconSize = 24,\n onCloseCallback,\n children,\n rawValue,\n presetIconSize,\n updateExpandedJson,\n ...props\n}) => {\n const [open, setOpen] = useState(false)\n const size = presetIconSizeValue(presetIconSize)\n const json = useMemo(() => toSafeJson(rawValue), [rawValue])\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.stopPropagation()\n setOpen(true)\n }\n\n const onCloseCallBackWrapped = () => {\n setOpen(false)\n onCloseCallback?.()\n }\n\n return (\n <span>\n <ButtonEx\n variant=\"outlined\"\n size=\"small\"\n startIcon={(\n <XyoColorLogo sx={{ height: size ?? iconSize, width: size ?? iconSize }} />\n )}\n onClick={handleClick}\n disabled={iconOnly ? false : !rawValue}\n {...props}\n >\n {children ?? <span>Data</span>}\n </ButtonEx>\n {iconOnly\n ? null\n : (\n <RawInfoDialog\n defaultExpandedJson={defaultExpandedJson}\n jsonValue={json}\n onCloseCallback={onCloseCallBackWrapped}\n dialogContent={dialogContent}\n open={open}\n updateExpandedJson={updateExpandedJson}\n />\n )}\n </span>\n )\n}\n","/* eslint-disable @stylistic/max-len */\nimport { createSvgIcon } from '@mui/material'\nimport React from 'react'\n\nexport const XyoColorLogo = createSvgIcon(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 238\">\n <path\n className=\"cls-1\"\n d=\"M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z\"\n fill=\"#8d8fc6\"\n />\n <path\n className=\"cls-2\"\n d=\"M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z\"\n fill=\"#579fd6\"\n />\n <path\n className=\"cls-3\"\n d=\"M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z\"\n fill=\"#f27046\"\n />\n <path\n className=\"cls-4\"\n d=\"M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z\"\n fill=\"#eb407a\"\n />\n </svg>,\n 'XyoColorLogo',\n)\n","import type { CollapseProps } from '@mui/material'\nimport {\n Button, Chip, Collapse, Typography,\n} from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport type { JsonValue } from '@xylabs/sdk-js'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport { isAnyPayload } from '@xyo-network/payload-model'\nimport { useDataState } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport type { ExpansionProps } from '../../../lib/index.ts'\nimport { StyledChipLabel } from '../../styled/index.ts'\nimport { JsonViewerEx } from '../JsonViewerEx.tsx'\n\nexport interface RawInfoPayloadCollapse extends CollapseProps, ExpansionProps {\n jsonValue?: JsonValue\n}\n\nexport const JsonViewerCollapse: React.FC<RawInfoPayloadCollapse> = ({\n defaultExpandedJson, jsonValue, updateExpandedJson, ...props\n}) => {\n const [expandedJson, setExpandedJson] = useDataState(defaultExpandedJson)\n\n const [hash] = usePromise(async () => {\n if (!jsonValue || !isAnyPayload(jsonValue)) return\n return await PayloadBuilder.dataHash(jsonValue)\n }, [jsonValue])\n\n const actionText = expandedJson ? 'Hide JSON' : 'Show JSON'\n\n const handleExpansion = () => {\n updateExpandedJson?.(!expandedJson)\n setExpandedJson(!expandedJson)\n }\n\n return (\n <>\n {jsonValue\n ? (\n <FlexRow>\n <Button onClick={handleExpansion} size=\"small\" variant=\"outlined\">\n {actionText}\n </Button>\n </FlexRow>\n )\n : null}\n <Collapse in={expandedJson} {...props}>\n {jsonValue\n ? (\n <FlexCol alignItems=\"stretch\" gap={1.5}>\n <Typography sx={{ lineHeight: 1 }}>Payload Hash:</Typography>\n {hash\n ? <Chip label={<StyledChipLabel>{hash}</StyledChipLabel>} sx={{ alignSelf: 'start' }} />\n : null}\n <JsonViewerEx value={jsonValue} />\n </FlexCol>\n )\n : null}\n </Collapse>\n </>\n )\n}\n","import { styled, Typography } from '@mui/material'\n\nexport const StyledChipLabel = styled(Typography, { name: 'StyledChipLabel' })(({ theme }) => ({\n display: 'block',\n lineHeight: 1,\n overflow: 'hidden',\n paddingRight: theme.spacing(0.95),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}))\n","import { useTheme } from '@mui/material'\nimport type { JsonViewerProps } from '@textea/json-viewer'\nimport { JsonViewer } from '@textea/json-viewer'\nimport { useIsDark } from '@xylabs/react-theme'\nimport React from 'react'\n\nexport type JsonViewerExProps = JsonViewerProps\n\nexport const JsonViewerEx: React.FC<JsonViewerExProps> = (props) => {\n const theme = useTheme()\n const isDark = useIsDark()\n\n return (\n <JsonViewer\n theme={isDark ? 'dark' : 'light'}\n collapseStringsAfterLength={50}\n style={{\n borderRadius: theme.shape.borderRadius,\n padding: theme.spacing(2),\n }}\n {...props}\n />\n )\n}\n","import type { DialogProps } from '@mui/material'\nimport {\n Button, Dialog, DialogActions, DialogContent, DialogTitle,\n} from '@mui/material'\nimport type { JsonValue } from '@xylabs/sdk-js'\nimport type { MouseEventHandler, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { ExpansionProps } from '../../../lib/index.ts'\nimport { JsonViewerCollapse } from './JsonViewerCollapse.tsx'\n\nexport interface RawInfoDialogProps extends DialogProps, ExpansionProps {\n dialogContent?: ReactNode\n jsonValue?: JsonValue\n onCloseCallback?: () => void\n}\n\nexport const RawInfoDialog: React.FC<RawInfoDialogProps> = ({\n defaultExpandedJson,\n dialogContent,\n onCloseCallback,\n jsonValue: jsonObject,\n updateExpandedJson,\n open = false,\n ...props\n}) => {\n const onDialogClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n event.stopPropagation()\n }\n\n return (\n // Wrapping in a span so we can catch click events and prevent them from propagating outside the component\n <span onClick={onDialogClick}>\n <Dialog fullWidth maxWidth=\"lg\" onClose={() => onCloseCallback?.()} open={open} {...props}>\n <DialogTitle>Raw Data</DialogTitle>\n <DialogContent sx={{\n display: 'flex', flexDirection: 'column', gap: 2,\n }}\n >\n {dialogContent}\n <JsonViewerCollapse defaultExpandedJson={defaultExpandedJson} jsonValue={jsonObject} updateExpandedJson={updateExpandedJson} />\n </DialogContent>\n <DialogActions>\n <Button variant=\"contained\" onClick={() => onCloseCallback?.()}>\n Close\n </Button>\n </DialogActions>\n </Dialog>\n </span>\n )\n}\n","import type { IconSize } from './IconSize.ts'\n\nexport const presetIconSizeValue = (size?: IconSize) => {\n switch (size) {\n case 'small': {\n return 16\n }\n case 'medium': {\n return 32\n }\n case 'large': {\n return 48\n }\n }\n}\n","import type { IconButtonProps } from '@mui/material'\nimport { IconButton } from '@mui/material'\nimport { toSafeJson } from '@xylabs/sdk-js'\nimport type { MouseEventHandler, ReactNode } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport type { ExpansionProps } from '../../lib/index.ts'\nimport { XyoColorLogo } from '../img/index.tsx'\nimport { RawInfoDialog } from '../shared/index.ts'\nimport type { IconSize } from './lib/index.ts'\nimport { presetIconSizeValue } from './lib/index.ts'\n\nexport interface RawInfoIconProps extends IconButtonProps, ExpansionProps {\n dialogContent?: ReactNode\n iconOnly?: boolean\n iconSize?: number\n onCloseCallback?: () => void\n presetIconSize?: IconSize\n rawValue?: unknown\n}\n\nexport const RawInfoIconButton = (\n {\n ref, defaultExpandedJson = true, dialogContent, iconOnly, iconSize = 32, onCloseCallback, rawValue, presetIconSize, updateExpandedJson, ...props\n }: RawInfoIconProps & { ref?: React.RefObject<HTMLButtonElement | null> },\n) => {\n const [open, setOpen] = useState(false)\n const size = presetIconSizeValue(presetIconSize)\n const json = useMemo(() => toSafeJson(rawValue), [rawValue])\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.stopPropagation()\n setOpen(true)\n }\n\n const onCloseCallBackWrapped = () => {\n setOpen(false)\n onCloseCallback?.()\n }\n\n return (\n <>\n <IconButton onClick={handleClick} ref={ref} {...props}>\n <XyoColorLogo sx={{ height: size ?? iconSize, width: size ?? iconSize }} />\n </IconButton>\n {iconOnly\n ? null\n : (\n <RawInfoDialog\n defaultExpandedJson={defaultExpandedJson}\n jsonValue={json}\n onCloseCallback={onCloseCallBackWrapped}\n dialogContent={dialogContent}\n open={open}\n updateExpandedJson={updateExpandedJson}\n />\n )}\n </>\n )\n}\n\nRawInfoIconButton.displayName = 'RawInfoIcon'\n"],"mappings":"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","names":["ButtonEx","toSafeJson","React","useMemo","useState","createSvgIcon","React","XyoColorLogo","svg","xmlns","viewBox","path","className","d","fill","Button","Chip","Collapse","Typography","FlexCol","FlexRow","usePromise","PayloadBuilder","isAnyPayload","useDataState","React","styled","Typography","StyledChipLabel","name","theme","display","lineHeight","overflow","paddingRight","spacing","textOverflow","whiteSpace","useTheme","JsonViewer","useIsDark","React","JsonViewerEx","props","theme","useTheme","isDark","useIsDark","React","JsonViewer","collapseStringsAfterLength","style","borderRadius","shape","padding","spacing","JsonViewerCollapse","defaultExpandedJson","jsonValue","updateExpandedJson","props","expandedJson","setExpandedJson","useDataState","hash","usePromise","isAnyPayload","PayloadBuilder","dataHash","actionText","handleExpansion","React","FlexRow","Button","onClick","size","variant","Collapse","in","FlexCol","alignItems","gap","Typography","sx","lineHeight","Chip","label","StyledChipLabel","alignSelf","JsonViewerEx","value","Button","Dialog","DialogActions","DialogContent","DialogTitle","React","RawInfoDialog","defaultExpandedJson","dialogContent","onCloseCallback","jsonValue","jsonObject","updateExpandedJson","open","props","onDialogClick","event","stopPropagation","React","span","onClick","Dialog","fullWidth","maxWidth","onClose","DialogTitle","DialogContent","sx","display","flexDirection","gap","JsonViewerCollapse","DialogActions","Button","variant","presetIconSizeValue","size","RawInfoButton","defaultExpandedJson","dialogContent","iconOnly","iconSize","onCloseCallback","children","rawValue","presetIconSize","updateExpandedJson","props","open","setOpen","useState","size","presetIconSizeValue","json","useMemo","toSafeJson","handleClick","event","stopPropagation","onCloseCallBackWrapped","React","span","ButtonEx","variant","startIcon","XyoColorLogo","sx","height","width","onClick","disabled","RawInfoDialog","jsonValue","IconButton","toSafeJson","React","useMemo","useState","RawInfoIconButton","ref","defaultExpandedJson","dialogContent","iconOnly","iconSize","onCloseCallback","rawValue","presetIconSize","updateExpandedJson","props","open","setOpen","useState","size","presetIconSizeValue","json","useMemo","toSafeJson","handleClick","event","stopPropagation","onCloseCallBackWrapped","React","IconButton","onClick","XyoColorLogo","sx","height","width","RawInfoDialog","jsonValue","displayName"]}
1
+ {"version":3,"sources":["../../src/components/Button/RawInfoButton.tsx","../../src/components/img/index.tsx","../../src/components/shared/Dialog/JsonViewerCollapse.tsx","../../src/components/styled/StyledChipLabel.tsx","../../src/components/shared/JsonViewerEx.tsx","../../src/components/shared/Dialog/RawInfoDialog.tsx","../../src/components/Button/lib/presetIconSize.ts","../../src/components/Button/RawInfoIconButton.tsx"],"sourcesContent":["import type { ButtonExProps } from '@xylabs/react-button'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { toSafeJson } from '@xylabs/sdk-js'\nimport type { MouseEventHandler, ReactNode } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport type { ExpansionProps } from '../../lib/index.ts'\nimport { XyoColorLogo } from '../img/index.tsx'\nimport { RawInfoDialog } from '../shared/index.ts'\nimport type { IconSize } from './lib/index.ts'\nimport { presetIconSizeValue } from './lib/index.ts'\n\nexport type RawInfoButtonProps = ButtonExProps & ExpansionProps & {\n dialogContent?: ReactNode\n iconOnly?: boolean\n iconSize?: number\n onCloseCallback?: () => void\n presetIconSize?: IconSize\n rawValue?: unknown\n}\n\nexport const RawInfoButton: React.FC<RawInfoButtonProps> = ({\n defaultExpandedJson = true,\n dialogContent,\n iconOnly,\n iconSize = 24,\n onCloseCallback,\n children,\n rawValue,\n presetIconSize,\n updateExpandedJson,\n ...props\n}) => {\n const [open, setOpen] = useState(false)\n const size = presetIconSizeValue(presetIconSize)\n const json = useMemo(() => toSafeJson(rawValue), [rawValue])\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.stopPropagation()\n setOpen(true)\n }\n\n const onCloseCallBackWrapped = () => {\n setOpen(false)\n onCloseCallback?.()\n }\n\n return (\n <span>\n <ButtonEx\n variant=\"outlined\"\n size=\"small\"\n startIcon={(\n <XyoColorLogo sx={{ height: size ?? iconSize, width: size ?? iconSize }} />\n )}\n onClick={handleClick}\n disabled={iconOnly ? false : !rawValue}\n {...props}\n >\n {children ?? <span>Data</span>}\n </ButtonEx>\n {iconOnly\n ? null\n : (\n <RawInfoDialog\n defaultExpandedJson={defaultExpandedJson}\n jsonValue={json}\n onCloseCallback={onCloseCallBackWrapped}\n dialogContent={dialogContent}\n open={open}\n updateExpandedJson={updateExpandedJson}\n />\n )}\n </span>\n )\n}\n","/* eslint-disable @stylistic/max-len */\nimport { createSvgIcon } from '@mui/material'\nimport React from 'react'\n\nexport const XyoColorLogo = createSvgIcon(\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 238\">\n <path\n className=\"cls-1\"\n d=\"M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z\"\n fill=\"#8d8fc6\"\n />\n <path\n className=\"cls-2\"\n d=\"M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z\"\n fill=\"#579fd6\"\n />\n <path\n className=\"cls-3\"\n d=\"M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z\"\n fill=\"#f27046\"\n />\n <path\n className=\"cls-4\"\n d=\"M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z\"\n fill=\"#eb407a\"\n />\n </svg>,\n 'XyoColorLogo',\n)\n","import type { CollapseProps } from '@mui/material'\nimport {\n Button, Chip, Collapse, Typography,\n} from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport type { JsonValue } from '@xylabs/sdk-js'\nimport { PayloadBuilder } from '@xyo-network/payload-builder'\nimport { isAnyPayload } from '@xyo-network/payload-model'\nimport { useDataState } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport type { ExpansionProps } from '../../../lib/index.ts'\nimport { StyledChipLabel } from '../../styled/index.ts'\nimport { JsonViewerEx } from '../JsonViewerEx.tsx'\n\nexport interface RawInfoPayloadCollapse extends CollapseProps, ExpansionProps {\n jsonValue?: JsonValue\n}\n\nexport const JsonViewerCollapse: React.FC<RawInfoPayloadCollapse> = ({\n defaultExpandedJson, jsonValue, updateExpandedJson, ...props\n}) => {\n const [expandedJson, setExpandedJson] = useDataState(defaultExpandedJson)\n\n const [hash] = usePromise(async () => {\n if (!jsonValue || !isAnyPayload(jsonValue)) return\n return await PayloadBuilder.dataHash(jsonValue)\n }, [jsonValue])\n\n const actionText = expandedJson ? 'Hide JSON' : 'Show JSON'\n\n const handleExpansion = () => {\n updateExpandedJson?.(!expandedJson)\n setExpandedJson(!expandedJson)\n }\n\n return (\n <>\n {jsonValue\n ? (\n <FlexRow>\n <Button onClick={handleExpansion} size=\"small\" variant=\"outlined\">\n {actionText}\n </Button>\n </FlexRow>\n )\n : null}\n <Collapse in={expandedJson} {...props}>\n {jsonValue\n ? (\n <FlexCol alignItems=\"stretch\" gap={1.5}>\n <Typography sx={{ lineHeight: 1 }}>Payload Hash:</Typography>\n {hash\n ? <Chip label={<StyledChipLabel>{hash}</StyledChipLabel>} sx={{ alignSelf: 'start' }} />\n : null}\n <JsonViewerEx value={jsonValue} />\n </FlexCol>\n )\n : null}\n </Collapse>\n </>\n )\n}\n","import { styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const StyledChipLabel: React.FC<React.ComponentProps<typeof Typography>> = styled(Typography, { name: 'StyledChipLabel' })(({ theme }) => ({\n display: 'block',\n lineHeight: 1,\n overflow: 'hidden',\n paddingRight: theme.spacing(0.95),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}))\n","import { useTheme } from '@mui/material'\nimport type { JsonViewerProps } from '@textea/json-viewer'\nimport { JsonViewer } from '@textea/json-viewer'\nimport { useIsDark } from '@xylabs/react-theme'\nimport React from 'react'\n\nexport type JsonViewerExProps = JsonViewerProps\n\nexport const JsonViewerEx: React.FC<JsonViewerExProps> = (props) => {\n const theme = useTheme()\n const isDark = useIsDark()\n\n return (\n <JsonViewer\n theme={isDark ? 'dark' : 'light'}\n collapseStringsAfterLength={50}\n style={{\n borderRadius: theme.shape.borderRadius,\n padding: theme.spacing(2),\n }}\n {...props}\n />\n )\n}\n","import type { DialogProps } from '@mui/material'\nimport {\n Button, Dialog, DialogActions, DialogContent, DialogTitle,\n} from '@mui/material'\nimport type { JsonValue } from '@xylabs/sdk-js'\nimport type { MouseEventHandler, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { ExpansionProps } from '../../../lib/index.ts'\nimport { JsonViewerCollapse } from './JsonViewerCollapse.tsx'\n\nexport interface RawInfoDialogProps extends DialogProps, ExpansionProps {\n dialogContent?: ReactNode\n jsonValue?: JsonValue\n onCloseCallback?: () => void\n}\n\nexport const RawInfoDialog: React.FC<RawInfoDialogProps> = ({\n defaultExpandedJson,\n dialogContent,\n onCloseCallback,\n jsonValue: jsonObject,\n updateExpandedJson,\n open = false,\n ...props\n}) => {\n const onDialogClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n event.stopPropagation()\n }\n\n return (\n // Wrapping in a span so we can catch click events and prevent them from propagating outside the component\n <span onClick={onDialogClick}>\n <Dialog fullWidth maxWidth=\"lg\" onClose={() => onCloseCallback?.()} open={open} {...props}>\n <DialogTitle>Raw Data</DialogTitle>\n <DialogContent sx={{\n display: 'flex', flexDirection: 'column', gap: 2,\n }}\n >\n {dialogContent}\n <JsonViewerCollapse defaultExpandedJson={defaultExpandedJson} jsonValue={jsonObject} updateExpandedJson={updateExpandedJson} />\n </DialogContent>\n <DialogActions>\n <Button variant=\"contained\" onClick={() => onCloseCallback?.()}>\n Close\n </Button>\n </DialogActions>\n </Dialog>\n </span>\n )\n}\n","import type { IconSize } from './IconSize.ts'\n\nexport const presetIconSizeValue = (size?: IconSize) => {\n switch (size) {\n case 'small': {\n return 16\n }\n case 'medium': {\n return 32\n }\n case 'large': {\n return 48\n }\n }\n}\n","import type { IconButtonProps } from '@mui/material'\nimport { IconButton } from '@mui/material'\nimport { toSafeJson } from '@xylabs/sdk-js'\nimport type { MouseEventHandler, ReactNode } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport type { ExpansionProps } from '../../lib/index.ts'\nimport { XyoColorLogo } from '../img/index.tsx'\nimport { RawInfoDialog } from '../shared/index.ts'\nimport type { IconSize } from './lib/index.ts'\nimport { presetIconSizeValue } from './lib/index.ts'\n\nexport interface RawInfoIconProps extends IconButtonProps, ExpansionProps {\n dialogContent?: ReactNode\n iconOnly?: boolean\n iconSize?: number\n onCloseCallback?: () => void\n presetIconSize?: IconSize\n rawValue?: unknown\n}\n\nexport const RawInfoIconButton = (\n {\n ref, defaultExpandedJson = true, dialogContent, iconOnly, iconSize = 32, onCloseCallback, rawValue, presetIconSize, updateExpandedJson, ...props\n }: RawInfoIconProps & { ref?: React.RefObject<HTMLButtonElement | null> },\n) => {\n const [open, setOpen] = useState(false)\n const size = presetIconSizeValue(presetIconSize)\n const json = useMemo(() => toSafeJson(rawValue), [rawValue])\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.stopPropagation()\n setOpen(true)\n }\n\n const onCloseCallBackWrapped = () => {\n setOpen(false)\n onCloseCallback?.()\n }\n\n return (\n <>\n <IconButton onClick={handleClick} ref={ref} {...props}>\n <XyoColorLogo sx={{ height: size ?? iconSize, width: size ?? iconSize }} />\n </IconButton>\n {iconOnly\n ? null\n : (\n <RawInfoDialog\n defaultExpandedJson={defaultExpandedJson}\n jsonValue={json}\n onCloseCallback={onCloseCallBackWrapped}\n dialogContent={dialogContent}\n open={open}\n updateExpandedJson={updateExpandedJson}\n />\n )}\n </>\n )\n}\n\nRawInfoIconButton.displayName = 'RawInfoIcon'\n"],"mappings":";AACA,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAE3B,SAAgB,SAAS,gBAAgB;;;ACHzC,SAAS,qBAAqB;AAI5B,SACE,KADF;AADK,IAAM,eAAe;AAAA,EAC1B,qBAAC,SAAI,OAAM,8BAA6B,SAAQ,eAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAAA,EACA;AACF;;;AC3BA;AAAA,EACE;AAAA,EAAQ;AAAA,EAAM;AAAA,EAAU,cAAAA;AAAA,OACnB;AACP,SAAS,SAAS,eAAe;AACjC,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;;;ACT7B,SAAS,QAAQ,kBAAkB;AAG5B,IAAM,kBAAqE,OAAO,YAAY,EAAE,MAAM,kBAAkB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAChJ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc,MAAM,QAAQ,IAAI;AAAA,EAChC,cAAc;AAAA,EACd,YAAY;AACd,EAAE;;;ACVF,SAAS,gBAAgB;AAEzB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAUtB,gBAAAC,YAAA;AALG,IAAM,eAA4C,CAAC,UAAU;AAClE,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,UAAU;AAEzB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS,SAAS;AAAA,MACzB,4BAA4B;AAAA,MAC5B,OAAO;AAAA,QACL,cAAc,MAAM,MAAM;AAAA,QAC1B,SAAS,MAAM,QAAQ,CAAC;AAAA,MAC1B;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;AFeI,mBAIU,OAAAC,MASA,QAAAC,aAbV;AAlBG,IAAM,qBAAuD,CAAC;AAAA,EACnE;AAAA,EAAqB;AAAA,EAAW;AAAA,EAAoB,GAAG;AACzD,MAAM;AACJ,QAAM,CAAC,cAAc,eAAe,IAAI,aAAa,mBAAmB;AAExE,QAAM,CAAC,IAAI,IAAI,WAAW,YAAY;AACpC,QAAI,CAAC,aAAa,CAAC,aAAa,SAAS,EAAG;AAC5C,WAAO,MAAM,eAAe,SAAS,SAAS;AAAA,EAChD,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,aAAa,eAAe,cAAc;AAEhD,QAAM,kBAAkB,MAAM;AAC5B,yBAAqB,CAAC,YAAY;AAClC,oBAAgB,CAAC,YAAY;AAAA,EAC/B;AAEA,SACE,gBAAAA,MAAA,YACG;AAAA,gBAEK,gBAAAD,KAAC,WACC,0BAAAA,KAAC,UAAO,SAAS,iBAAiB,MAAK,SAAQ,SAAQ,YACpD,sBACH,GACF,IAEF;AAAA,IACJ,gBAAAA,KAAC,YAAS,IAAI,cAAe,GAAG,OAC7B,sBAEK,gBAAAC,MAAC,WAAQ,YAAW,WAAU,KAAK,KACjC;AAAA,sBAAAD,KAACE,aAAA,EAAW,IAAI,EAAE,YAAY,EAAE,GAAG,2BAAa;AAAA,MAC/C,OACG,gBAAAF,KAAC,QAAK,OAAO,gBAAAA,KAAC,mBAAiB,gBAAK,GAAoB,IAAI,EAAE,WAAW,QAAQ,GAAG,IACpF;AAAA,MACJ,gBAAAA,KAAC,gBAAa,OAAO,WAAW;AAAA,OAClC,IAEF,MACN;AAAA,KACF;AAEJ;;;AG9DA;AAAA,EACE,UAAAG;AAAA,EAAQ;AAAA,EAAQ;AAAA,EAAe;AAAA,EAAe;AAAA,OACzC;AA+BC,gBAAAC,MACA,QAAAC,aADA;AAjBD,IAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,QAAM,gBAAoD,CAAC,UAAU;AACnE,UAAM,gBAAgB;AAAA,EACxB;AAEA;AAAA;AAAA,IAEE,gBAAAD,KAAC,UAAK,SAAS,eACb,0BAAAC,MAAC,UAAO,WAAS,MAAC,UAAS,MAAK,SAAS,MAAM,kBAAkB,GAAG,MAAa,GAAG,OAClF;AAAA,sBAAAD,KAAC,eAAY,sBAAQ;AAAA,MACrB,gBAAAC;AAAA,QAAC;AAAA;AAAA,UAAc,IAAI;AAAA,YACjB,SAAS;AAAA,YAAQ,eAAe;AAAA,YAAU,KAAK;AAAA,UACjD;AAAA,UAEG;AAAA;AAAA,YACD,gBAAAD,KAAC,sBAAmB,qBAA0C,WAAW,YAAY,oBAAwC;AAAA;AAAA;AAAA,MAC/H;AAAA,MACA,gBAAAA,KAAC,iBACC,0BAAAA,KAACE,SAAA,EAAO,SAAQ,aAAY,SAAS,MAAM,kBAAkB,GAAG,mBAEhE,GACF;AAAA,OACF,GACF;AAAA;AAEJ;;;AChDO,IAAM,sBAAsB,CAAC,SAAoB;AACtD,UAAQ,MAAM;AAAA,IACZ,KAAK,SAAS;AACZ,aAAO;AAAA,IACT;AAAA,IACA,KAAK,UAAU;AACb,aAAO;AAAA,IACT;AAAA,IACA,KAAK,SAAS;AACZ,aAAO;AAAA,IACT;AAAA,EACF;AACF;;;ANkCI,SAKM,OAAAC,MALN,QAAAC,aAAA;AA3BG,IAAM,gBAA8C,CAAC;AAAA,EAC1D,sBAAsB;AAAA,EACtB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,OAAO,oBAAoB,cAAc;AAC/C,QAAM,OAAO,QAAQ,MAAM,WAAW,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE3D,QAAM,cAAoD,CAAC,UAAU;AACnE,UAAM,gBAAgB;AACtB,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,yBAAyB,MAAM;AACnC,YAAQ,KAAK;AACb,sBAAkB;AAAA,EACpB;AAEA,SACE,gBAAAA,MAAC,UACC;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WACE,gBAAAA,KAAC,gBAAa,IAAI,EAAE,QAAQ,QAAQ,UAAU,OAAO,QAAQ,SAAS,GAAG;AAAA,QAE3E,SAAS;AAAA,QACT,UAAU,WAAW,QAAQ,CAAC;AAAA,QAC7B,GAAG;AAAA,QAEH,sBAAY,gBAAAA,KAAC,UAAK,kBAAI;AAAA;AAAA,IACzB;AAAA,IACC,WACG,OAEE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAER;AAEJ;;;AO1EA,SAAS,kBAAkB;AAC3B,SAAS,cAAAE,mBAAkB;AAE3B,SAAgB,WAAAC,UAAS,YAAAC,iBAAgB;AAqCrC,qBAAAC,WAEI,OAAAC,MAFJ,QAAAC,aAAA;AApBG,IAAM,oBAAoB,CAC/B;AAAA,EACE;AAAA,EAAK,sBAAsB;AAAA,EAAM;AAAA,EAAe;AAAA,EAAU,WAAW;AAAA,EAAI;AAAA,EAAiB;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAoB,GAAG;AAC7I,MACG;AACH,QAAM,CAAC,MAAM,OAAO,IAAIC,UAAS,KAAK;AACtC,QAAM,OAAO,oBAAoB,cAAc;AAC/C,QAAM,OAAOC,SAAQ,MAAMC,YAAW,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE3D,QAAM,cAAoD,CAAC,UAAU;AACnE,UAAM,gBAAgB;AACtB,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,yBAAyB,MAAM;AACnC,YAAQ,KAAK;AACb,sBAAkB;AAAA,EACpB;AAEA,SACE,gBAAAH,MAAAF,WAAA,EACE;AAAA,oBAAAC,KAAC,cAAW,SAAS,aAAa,KAAW,GAAG,OAC9C,0BAAAA,KAAC,gBAAa,IAAI,EAAE,QAAQ,QAAQ,UAAU,OAAO,QAAQ,SAAS,GAAG,GAC3E;AAAA,IACC,WACG,OAEE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAER;AAEJ;AAEA,kBAAkB,cAAc;","names":["Typography","jsx","jsx","jsxs","Typography","Button","jsx","jsxs","Button","jsx","jsxs","toSafeJson","useMemo","useState","Fragment","jsx","jsxs","useState","useMemo","toSafeJson"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xyo-network/react-payload-raw-info",
3
- "version": "7.5.7",
3
+ "version": "7.5.11",
4
4
  "description": "Common React library for all XYO projects that use React",
5
5
  "keywords": [
6
6
  "xyo",
@@ -36,54 +36,109 @@
36
36
  },
37
37
  "./package.json": "./package.json"
38
38
  },
39
- "module": "dist/browser/index.mjs",
40
- "types": "dist/browser/index.d.ts",
41
39
  "files": [
42
40
  "dist",
43
- "src"
41
+ "README.md"
44
42
  ],
45
43
  "dependencies": {
46
- "@xylabs/react-button": "~7.1.17",
47
- "@xylabs/react-flexbox": "~7.1.17",
48
- "@xylabs/react-promise": "~7.1.17",
49
- "@xylabs/react-theme": "~7.1.17",
50
- "@xylabs/sdk-js": "~5.0.90",
51
- "@xyo-network/payload-builder": "~5.3.17",
52
- "@xyo-network/payload-model": "~5.3.17",
53
- "@xyo-network/react-shared": "7.5.7"
44
+ "@xyo-network/react-shared": "~7.5.11"
54
45
  },
55
46
  "devDependencies": {
56
- "@emotion/react": "~11.14.0",
57
- "@emotion/styled": "~11.14.1",
58
- "@mui/icons-material": "~7.3.9",
59
- "@mui/material": "~7.3.9",
60
- "@storybook/react-vite": "~10.3.3",
47
+ "@bitauth/libauth": "~3.0.0",
48
+ "@emotion/react": "^11.14.0",
49
+ "@emotion/styled": "^11.14.1",
50
+ "@mui/icons-material": "^7.3.10",
51
+ "@mui/material": "^7.3.10",
52
+ "@opentelemetry/api": "^1.9.1",
53
+ "@opentelemetry/sdk-trace-base": "^2.7.0",
54
+ "@scure/base": "~2.2.0",
55
+ "@storybook/react-vite": "~10.3.5",
61
56
  "@textea/json-viewer": "~4.0.1",
57
+ "@types/node": "~25.6.0",
62
58
  "@types/react": "^19.2.14",
63
- "@xylabs/ts-scripts-common": "~7.5.6",
64
- "@xylabs/ts-scripts-yarn3": "~7.5.6",
65
- "@xylabs/tsconfig": "~7.5.6",
66
- "@xylabs/tsconfig-dom": "~7.5.6",
67
- "@xylabs/tsconfig-react": "~7.5.6",
68
- "react": "^19.2.4",
69
- "react-dom": "^19.2.4",
70
- "react-router-dom": "^7.13.2",
71
- "storybook": "~10.3.3",
59
+ "@xylabs/react-async-effect": "~7.1.20",
60
+ "@xylabs/react-button": "~7.1.20",
61
+ "@xylabs/react-flexbox": "~7.1.20",
62
+ "@xylabs/react-hooks": "~7.1.20",
63
+ "@xylabs/react-link": "~7.1.20",
64
+ "@xylabs/react-promise": "~7.1.20",
65
+ "@xylabs/react-shared": "~7.1.20",
66
+ "@xylabs/react-theme": "~7.1.20",
67
+ "@xylabs/sdk-js": "^5.0.100",
68
+ "@xylabs/threads": "~5.0.100",
69
+ "@xylabs/toolchain": "~7.11.9",
70
+ "@xylabs/tsconfig": "^7.11.9",
71
+ "@xylabs/tsconfig-dom": "^7.11.9",
72
+ "@xylabs/tsconfig-react": "~7.11.9",
73
+ "@xylabs/zod": "~5.0.100",
74
+ "@xyo-network/boundwitness-model": "^5.5.1",
75
+ "@xyo-network/boundwitness-validator": "^5.5.1",
76
+ "@xyo-network/payload-builder": "^5.5.1",
77
+ "@xyo-network/payload-model": "^5.5.1",
78
+ "async-mutex": "^0.5.0",
79
+ "axios": "^1.15.2",
80
+ "bn.js": "^5.2.3",
81
+ "bowser": "^2.14.1",
82
+ "buffer": "^6.0.3",
83
+ "chalk": "^5.6.2",
84
+ "debug": "~4.4.3",
85
+ "esbuild": "~0.28.0",
86
+ "eslint": "^10.2.1",
87
+ "ethers": "^6.16.0",
88
+ "fast-deep-equal": "~3.1.3",
89
+ "hash-wasm": "~4.12.0",
90
+ "js-cookie": "~3.0.5",
91
+ "observable-fns": "~0.6.1",
92
+ "pako": "^2.1.0",
93
+ "react": "^19.2.5",
94
+ "react-dom": "^19.2.5",
95
+ "react-router-dom": "^7.14.2",
96
+ "spark-md5": "~3.0.2",
97
+ "storybook": "^10.3.5",
72
98
  "typescript": "^5.9.3",
73
- "vite": "~8.0.3",
99
+ "vite": "^8.0.10",
100
+ "wasm-feature-detect": "~1.8.0",
74
101
  "zod": "^4.3.6"
75
102
  },
76
103
  "peerDependencies": {
77
- "@mui/icons-material": ">=6 <8",
78
- "@mui/material": ">=6 <8",
79
- "@textea/json-viewer": "^4",
80
- "react": "^19",
81
- "react-dom": "^19",
82
- "react-router-dom": "^7",
83
- "zod": "^4"
104
+ "@emotion/react": "^11.14.0",
105
+ "@emotion/styled": "^11.14.1",
106
+ "@mui/icons-material": "^7.3.10",
107
+ "@mui/material": "^7.3.10",
108
+ "@opentelemetry/sdk-trace-base": "^2.7.0",
109
+ "@scure/base": "~2.2.0",
110
+ "@textea/json-viewer": "~4.0.1",
111
+ "@xylabs/react-async-effect": "~7.1.20",
112
+ "@xylabs/react-button": "~7.1.20",
113
+ "@xylabs/react-flexbox": "~7.1.20",
114
+ "@xylabs/react-hooks": "~7.1.20",
115
+ "@xylabs/react-link": "~7.1.20",
116
+ "@xylabs/react-promise": "~7.1.20",
117
+ "@xylabs/react-shared": "~7.1.20",
118
+ "@xylabs/react-theme": "~7.1.20",
119
+ "@xylabs/sdk-js": "^5.0.100",
120
+ "@xylabs/zod": "~5.0.100",
121
+ "@xyo-network/boundwitness-model": "^5.5.1",
122
+ "@xyo-network/boundwitness-validator": "^5.5.1",
123
+ "@xyo-network/payload-builder": "^5.5.1",
124
+ "@xyo-network/payload-model": "^5.5.1",
125
+ "async-mutex": "^0.5.0",
126
+ "bn.js": "^5.2.3",
127
+ "bowser": "^2.14.1",
128
+ "buffer": "^6.0.3",
129
+ "chalk": "^5.6.2",
130
+ "ethers": "^6.16.0",
131
+ "fast-deep-equal": "~3.1.3",
132
+ "js-cookie": "~3.0.5",
133
+ "pako": "^2.1.0",
134
+ "react": "^19.2.5",
135
+ "react-dom": "^19.2.5",
136
+ "react-router-dom": "^7.14.2",
137
+ "spark-md5": "~3.0.2",
138
+ "zod": "^4.3.6"
84
139
  },
85
140
  "publishConfig": {
86
141
  "access": "public"
87
142
  },
88
143
  "docs": "dist/docs.json"
89
- }
144
+ }
package/src/components/Button/RawInfoButton.stories.tsx DELETED
@@ -1,35 +0,0 @@
1
- import type { Meta, StoryFn } from '@storybook/react-vite'
2
- import { FlexCol } from '@xylabs/react-flexbox'
3
- import {
4
- asSchema, type Payload, type Schema,
5
- } from '@xyo-network/payload-model'
6
- import React from 'react'
7
-
8
- import { RawInfoButton } from './RawInfoButton.tsx'
9
-
10
- type TestPayload = Payload<{ id: string; type: string }, Schema<'network.xyo.test'>>
11
- const TestPayload: TestPayload = {
12
- id: '123',
13
- schema: asSchema('network.xyo.test', true),
14
- type: 'test',
15
- }
16
-
17
- export default {
18
- component: RawInfoButton,
19
- title: 'payload/RawInfoButton',
20
- } as Meta
21
-
22
- const Template: StoryFn<typeof RawInfoButton> = args => (
23
- <FlexCol>
24
- <RawInfoButton {...args} />
25
- </FlexCol>
26
- )
27
-
28
- const Default = Template.bind({})
29
- const WithPayload = Template.bind({})
30
- WithPayload.args = {
31
- dialogContent: 'This is a test',
32
- rawValue: TestPayload,
33
- }
34
-
35
- export { Default, WithPayload }
package/src/components/Button/RawInfoButton.tsx DELETED
@@ -1,76 +0,0 @@
1
- import type { ButtonExProps } from '@xylabs/react-button'
2
- import { ButtonEx } from '@xylabs/react-button'
3
- import { toSafeJson } from '@xylabs/sdk-js'
4
- import type { MouseEventHandler, ReactNode } from 'react'
5
- import React, { useMemo, useState } from 'react'
6
-
7
- import type { ExpansionProps } from '../../lib/index.ts'
8
- import { XyoColorLogo } from '../img/index.tsx'
9
- import { RawInfoDialog } from '../shared/index.ts'
10
- import type { IconSize } from './lib/index.ts'
11
- import { presetIconSizeValue } from './lib/index.ts'
12
-
13
- export type RawInfoButtonProps = ButtonExProps & ExpansionProps & {
14
- dialogContent?: ReactNode
15
- iconOnly?: boolean
16
- iconSize?: number
17
- onCloseCallback?: () => void
18
- presetIconSize?: IconSize
19
- rawValue?: unknown
20
- }
21
-
22
- export const RawInfoButton: React.FC<RawInfoButtonProps> = ({
23
- defaultExpandedJson = true,
24
- dialogContent,
25
- iconOnly,
26
- iconSize = 24,
27
- onCloseCallback,
28
- children,
29
- rawValue,
30
- presetIconSize,
31
- updateExpandedJson,
32
- ...props
33
- }) => {
34
- const [open, setOpen] = useState(false)
35
- const size = presetIconSizeValue(presetIconSize)
36
- const json = useMemo(() => toSafeJson(rawValue), [rawValue])
37
-
38
- const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
39
- event.stopPropagation()
40
- setOpen(true)
41
- }
42
-
43
- const onCloseCallBackWrapped = () => {
44
- setOpen(false)
45
- onCloseCallback?.()
46
- }
47
-
48
- return (
49
- <span>
50
- <ButtonEx
51
- variant="outlined"
52
- size="small"
53
- startIcon={(
54
- <XyoColorLogo sx={{ height: size ?? iconSize, width: size ?? iconSize }} />
55
- )}
56
- onClick={handleClick}
57
- disabled={iconOnly ? false : !rawValue}
58
- {...props}
59
- >
60
- {children ?? <span>Data</span>}
61
- </ButtonEx>
62
- {iconOnly
63
- ? null
64
- : (
65
- <RawInfoDialog
66
- defaultExpandedJson={defaultExpandedJson}
67
- jsonValue={json}
68
- onCloseCallback={onCloseCallBackWrapped}
69
- dialogContent={dialogContent}
70
- open={open}
71
- updateExpandedJson={updateExpandedJson}
72
- />
73
- )}
74
- </span>
75
- )
76
- }
package/src/components/Button/RawInfoIconButton.stories.tsx DELETED
@@ -1,35 +0,0 @@
1
- import type { Meta, StoryFn } from '@storybook/react-vite'
2
- import { FlexCol } from '@xylabs/react-flexbox'
3
- import {
4
- asSchema, type Payload, type Schema,
5
- } from '@xyo-network/payload-model'
6
- import React from 'react'
7
-
8
- import { RawInfoIconButton } from './RawInfoIconButton.tsx'
9
-
10
- type TestPayload = Payload<{ id: string; schema: string; type: string }, Schema<'network.xyo.test'>>
11
- const TestPayload: TestPayload = {
12
- id: '123',
13
- schema: asSchema('network.xyo.test', true),
14
- type: 'test',
15
- }
16
-
17
- export default {
18
- component: RawInfoIconButton,
19
- title: 'payload/RawInfoIconButton',
20
- } as Meta
21
-
22
- const Template: StoryFn<typeof RawInfoIconButton> = args => (
23
- <FlexCol>
24
- <RawInfoIconButton {...args} />
25
- </FlexCol>
26
- )
27
-
28
- const Default = Template.bind({})
29
- const WithPayload = Template.bind({})
30
- WithPayload.args = {
31
- dialogContent: 'This is a test',
32
- rawValue: TestPayload,
33
- }
34
-
35
- export { Default, WithPayload }
package/src/components/Button/RawInfoIconButton.tsx DELETED
@@ -1,62 +0,0 @@
1
- import type { IconButtonProps } from '@mui/material'
2
- import { IconButton } from '@mui/material'
3
- import { toSafeJson } from '@xylabs/sdk-js'
4
- import type { MouseEventHandler, ReactNode } from 'react'
5
- import React, { useMemo, useState } from 'react'
6
-
7
- import type { ExpansionProps } from '../../lib/index.ts'
8
- import { XyoColorLogo } from '../img/index.tsx'
9
- import { RawInfoDialog } from '../shared/index.ts'
10
- import type { IconSize } from './lib/index.ts'
11
- import { presetIconSizeValue } from './lib/index.ts'
12
-
13
- export interface RawInfoIconProps extends IconButtonProps, ExpansionProps {
14
- dialogContent?: ReactNode
15
- iconOnly?: boolean
16
- iconSize?: number
17
- onCloseCallback?: () => void
18
- presetIconSize?: IconSize
19
- rawValue?: unknown
20
- }
21
-
22
- export const RawInfoIconButton = (
23
- {
24
- ref, defaultExpandedJson = true, dialogContent, iconOnly, iconSize = 32, onCloseCallback, rawValue, presetIconSize, updateExpandedJson, ...props
25
- }: RawInfoIconProps & { ref?: React.RefObject<HTMLButtonElement | null> },
26
- ) => {
27
- const [open, setOpen] = useState(false)
28
- const size = presetIconSizeValue(presetIconSize)
29
- const json = useMemo(() => toSafeJson(rawValue), [rawValue])
30
-
31
- const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
32
- event.stopPropagation()
33
- setOpen(true)
34
- }
35
-
36
- const onCloseCallBackWrapped = () => {
37
- setOpen(false)
38
- onCloseCallback?.()
39
- }
40
-
41
- return (
42
- <>
43
- <IconButton onClick={handleClick} ref={ref} {...props}>
44
- <XyoColorLogo sx={{ height: size ?? iconSize, width: size ?? iconSize }} />
45
- </IconButton>
46
- {iconOnly
47
- ? null
48
- : (
49
- <RawInfoDialog
50
- defaultExpandedJson={defaultExpandedJson}
51
- jsonValue={json}
52
- onCloseCallback={onCloseCallBackWrapped}
53
- dialogContent={dialogContent}
54
- open={open}
55
- updateExpandedJson={updateExpandedJson}
56
- />
57
- )}
58
- </>
59
- )
60
- }
61
-
62
- RawInfoIconButton.displayName = 'RawInfoIcon'
package/src/components/Button/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './RawInfoButton.tsx'
2
- export * from './RawInfoIconButton.tsx'
package/src/components/Button/lib/IconSize.ts DELETED
@@ -1 +0,0 @@
1
- export type IconSize = 'small' | 'medium' | 'large'
package/src/components/Button/lib/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './IconSize.ts'
2
- export * from './presetIconSize.ts'
package/src/components/Button/lib/presetIconSize.ts DELETED
@@ -1,15 +0,0 @@
1
- import type { IconSize } from './IconSize.ts'
2
-
3
- export const presetIconSizeValue = (size?: IconSize) => {
4
- switch (size) {
5
- case 'small': {
6
- return 16
7
- }
8
- case 'medium': {
9
- return 32
10
- }
11
- case 'large': {
12
- return 48
13
- }
14
- }
15
- }
package/src/components/img/index.tsx DELETED
@@ -1,29 +0,0 @@
1
- /* eslint-disable @stylistic/max-len */
2
- import { createSvgIcon } from '@mui/material'
3
- import React from 'react'
4
-
5
- export const XyoColorLogo = createSvgIcon(
6
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 238">
7
- <path
8
- className="cls-1"
9
- d="M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z"
10
- fill="#8d8fc6"
11
- />
12
- <path
13
- className="cls-2"
14
- d="M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z"
15
- fill="#579fd6"
16
- />
17
- <path
18
- className="cls-3"
19
- d="M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z"
20
- fill="#f27046"
21
- />
22
- <path
23
- className="cls-4"
24
- d="M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z"
25
- fill="#eb407a"
26
- />
27
- </svg>,
28
- 'XyoColorLogo',
29
- )
package/src/components/img/xyo-color-logo.svg DELETED
@@ -1 +0,0 @@
1
- <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z"/><path class="cls-2" d="M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z"/><path class="cls-3" d="M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z"/><path class="cls-4" d="M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z"/></svg>
package/src/components/index.ts DELETED
@@ -1,3 +0,0 @@
1
- export * from './Button/index.ts'
2
- export * from './shared/index.ts'
3
- export * from './styled/index.ts'
package/src/components/shared/Dialog/JsonViewerCollapse.tsx DELETED
@@ -1,64 +0,0 @@
1
- import type { CollapseProps } from '@mui/material'
2
- import {
3
- Button, Chip, Collapse, Typography,
4
- } from '@mui/material'
5
- import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
6
- import { usePromise } from '@xylabs/react-promise'
7
- import type { JsonValue } from '@xylabs/sdk-js'
8
- import { PayloadBuilder } from '@xyo-network/payload-builder'
9
- import { isAnyPayload } from '@xyo-network/payload-model'
10
- import { useDataState } from '@xyo-network/react-shared'
11
- import React from 'react'
12
-
13
- import type { ExpansionProps } from '../../../lib/index.ts'
14
- import { StyledChipLabel } from '../../styled/index.ts'
15
- import { JsonViewerEx } from '../JsonViewerEx.tsx'
16
-
17
- export interface RawInfoPayloadCollapse extends CollapseProps, ExpansionProps {
18
- jsonValue?: JsonValue
19
- }
20
-
21
- export const JsonViewerCollapse: React.FC<RawInfoPayloadCollapse> = ({
22
- defaultExpandedJson, jsonValue, updateExpandedJson, ...props
23
- }) => {
24
- const [expandedJson, setExpandedJson] = useDataState(defaultExpandedJson)
25
-
26
- const [hash] = usePromise(async () => {
27
- if (!jsonValue || !isAnyPayload(jsonValue)) return
28
- return await PayloadBuilder.dataHash(jsonValue)
29
- }, [jsonValue])
30
-
31
- const actionText = expandedJson ? 'Hide JSON' : 'Show JSON'
32
-
33
- const handleExpansion = () => {
34
- updateExpandedJson?.(!expandedJson)
35
- setExpandedJson(!expandedJson)
36
- }
37
-
38
- return (
39
- <>
40
- {jsonValue
41
- ? (
42
- <FlexRow>
43
- <Button onClick={handleExpansion} size="small" variant="outlined">
44
- {actionText}
45
- </Button>
46
- </FlexRow>
47
- )
48
- : null}
49
- <Collapse in={expandedJson} {...props}>
50
- {jsonValue
51
- ? (
52
- <FlexCol alignItems="stretch" gap={1.5}>
53
- <Typography sx={{ lineHeight: 1 }}>Payload Hash:</Typography>
54
- {hash
55
- ? <Chip label={<StyledChipLabel>{hash}</StyledChipLabel>} sx={{ alignSelf: 'start' }} />
56
- : null}
57
- <JsonViewerEx value={jsonValue} />
58
- </FlexCol>
59
- )
60
- : null}
61
- </Collapse>
62
- </>
63
- )
64
- }
package/src/components/shared/Dialog/RawInfoDialog.stories.tsx DELETED
@@ -1,37 +0,0 @@
1
- import type { Meta, StoryFn } from '@storybook/react-vite'
2
- import { FlexCol } from '@xylabs/react-flexbox'
3
- import { toSafeJson } from '@xylabs/sdk-js'
4
- import {
5
- asSchema, type Payload, type Schema,
6
- } from '@xyo-network/payload-model'
7
- import React from 'react'
8
-
9
- import { RawInfoDialog } from './RawInfoDialog.tsx'
10
-
11
- type TestPayload = Payload<{ id: string; schema: string; type: string }, Schema<'network.xyo.test'>>
12
- const TestPayload: TestPayload = {
13
- id: '123',
14
- schema: asSchema('network.xyo.test', true),
15
- type: 'test',
16
- }
17
-
18
- export default {
19
- component: RawInfoDialog,
20
- title: 'payload/RawInfoDialog',
21
- } as Meta
22
-
23
- const Template: StoryFn<typeof RawInfoDialog> = args => (
24
- <FlexCol>
25
- <RawInfoDialog {...args} />
26
- </FlexCol>
27
- )
28
-
29
- const Default = Template.bind({})
30
- const WithPayload = Template.bind({})
31
- WithPayload.args = {
32
- dialogContent: 'This is a test',
33
- jsonValue: toSafeJson(TestPayload),
34
- open: true,
35
- }
36
-
37
- export { Default, WithPayload }
package/src/components/shared/Dialog/RawInfoDialog.tsx DELETED
@@ -1,51 +0,0 @@
1
- import type { DialogProps } from '@mui/material'
2
- import {
3
- Button, Dialog, DialogActions, DialogContent, DialogTitle,
4
- } from '@mui/material'
5
- import type { JsonValue } from '@xylabs/sdk-js'
6
- import type { MouseEventHandler, ReactNode } from 'react'
7
- import React from 'react'
8
-
9
- import type { ExpansionProps } from '../../../lib/index.ts'
10
- import { JsonViewerCollapse } from './JsonViewerCollapse.tsx'
11
-
12
- export interface RawInfoDialogProps extends DialogProps, ExpansionProps {
13
- dialogContent?: ReactNode
14
- jsonValue?: JsonValue
15
- onCloseCallback?: () => void
16
- }
17
-
18
- export const RawInfoDialog: React.FC<RawInfoDialogProps> = ({
19
- defaultExpandedJson,
20
- dialogContent,
21
- onCloseCallback,
22
- jsonValue: jsonObject,
23
- updateExpandedJson,
24
- open = false,
25
- ...props
26
- }) => {
27
- const onDialogClick: MouseEventHandler<HTMLSpanElement> = (event) => {
28
- event.stopPropagation()
29
- }
30
-
31
- return (
32
- // Wrapping in a span so we can catch click events and prevent them from propagating outside the component
33
- <span onClick={onDialogClick}>
34
- <Dialog fullWidth maxWidth="lg" onClose={() => onCloseCallback?.()} open={open} {...props}>
35
- <DialogTitle>Raw Data</DialogTitle>
36
- <DialogContent sx={{
37
- display: 'flex', flexDirection: 'column', gap: 2,
38
- }}
39
- >
40
- {dialogContent}
41
- <JsonViewerCollapse defaultExpandedJson={defaultExpandedJson} jsonValue={jsonObject} updateExpandedJson={updateExpandedJson} />
42
- </DialogContent>
43
- <DialogActions>
44
- <Button variant="contained" onClick={() => onCloseCallback?.()}>
45
- Close
46
- </Button>
47
- </DialogActions>
48
- </Dialog>
49
- </span>
50
- )
51
- }
package/src/components/shared/Dialog/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './JsonViewerCollapse.tsx'
2
- export * from './RawInfoDialog.tsx'
package/src/components/shared/JsonViewerEx.stories.tsx DELETED
@@ -1,29 +0,0 @@
1
- import type { Meta, StoryFn } from '@storybook/react-vite'
2
- import {
3
- asSchema, type Payload, type Schema,
4
- } from '@xyo-network/payload-model'
5
- import React from 'react'
6
-
7
- import { JsonViewerEx } from './JsonViewerEx.tsx'
8
-
9
- type TestPayload = Payload<{ id: string; schema: string; type: string }, Schema<'network.xyo.test'>>
10
- const TestPayload: TestPayload = {
11
- id: '123',
12
- schema: asSchema('network.xyo.test', true),
13
- type: 'test',
14
- }
15
-
16
- export default {
17
- component: JsonViewerEx,
18
- title: 'payload/JsonViewerEx',
19
- } as Meta
20
-
21
- const Template: StoryFn<typeof JsonViewerEx> = args => (
22
- <JsonViewerEx {...args} />
23
- )
24
-
25
- const Default = Template.bind({})
26
- const WithPayload = Template.bind({})
27
- WithPayload.args = { value: TestPayload }
28
-
29
- export { Default, WithPayload }
package/src/components/shared/JsonViewerEx.tsx DELETED
@@ -1,24 +0,0 @@
1
- import { useTheme } from '@mui/material'
2
- import type { JsonViewerProps } from '@textea/json-viewer'
3
- import { JsonViewer } from '@textea/json-viewer'
4
- import { useIsDark } from '@xylabs/react-theme'
5
- import React from 'react'
6
-
7
- export type JsonViewerExProps = JsonViewerProps
8
-
9
- export const JsonViewerEx: React.FC<JsonViewerExProps> = (props) => {
10
- const theme = useTheme()
11
- const isDark = useIsDark()
12
-
13
- return (
14
- <JsonViewer
15
- theme={isDark ? 'dark' : 'light'}
16
- collapseStringsAfterLength={50}
17
- style={{
18
- borderRadius: theme.shape.borderRadius,
19
- padding: theme.spacing(2),
20
- }}
21
- {...props}
22
- />
23
- )
24
- }
package/src/components/shared/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './Dialog/index.ts'
2
- export * from './JsonViewerEx.tsx'
package/src/components/styled/StyledChipLabel.tsx DELETED
@@ -1,10 +0,0 @@
1
- import { styled, Typography } from '@mui/material'
2
-
3
- export const StyledChipLabel = styled(Typography, { name: 'StyledChipLabel' })(({ theme }) => ({
4
- display: 'block',
5
- lineHeight: 1,
6
- overflow: 'hidden',
7
- paddingRight: theme.spacing(0.95),
8
- textOverflow: 'ellipsis',
9
- whiteSpace: 'nowrap',
10
- }))
package/src/components/styled/index.ts DELETED
@@ -1 +0,0 @@
1
- export * from './StyledChipLabel.tsx'
package/src/index.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/index.ts'
package/src/lib/ExpansionProps.ts DELETED
@@ -1,4 +0,0 @@
1
- export interface ExpansionProps {
2
- defaultExpandedJson?: boolean
3
- updateExpandedJson?: (expanded: boolean) => void
4
- }
package/src/lib/index.ts DELETED
@@ -1 +0,0 @@
1
- export * from './ExpansionProps.ts'
package/src/types/images.d.ts DELETED
@@ -1,5 +0,0 @@
1
- declare module '*.png'
2
- declare module '*.jpg'
3
- declare module '*.svg'
4
- declare module '*.gif'
5
- declare module '*.webp'