@xyo-network/react-address-render 2.61.1 → 2.63.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/dist/cjs/components/RenderRowBox.js +25 -0
  2. package/dist/cjs/components/RenderRowBox.js.map +1 -0
  3. package/dist/cjs/components/favorite/FavoriteIconButton.js +43 -0
  4. package/dist/cjs/components/favorite/FavoriteIconButton.js.map +1 -0
  5. package/dist/cjs/components/favorite/FavoriteToggleSVG.js +10 -0
  6. package/dist/cjs/components/favorite/FavoriteToggleSVG.js.map +1 -0
  7. package/dist/cjs/components/favorite/Popper.js +23 -0
  8. package/dist/cjs/components/favorite/Popper.js.map +1 -0
  9. package/dist/cjs/components/favorite/PopperButtonGroup.js +20 -0
  10. package/dist/cjs/components/favorite/PopperButtonGroup.js.map +1 -0
  11. package/dist/cjs/components/favorite/index.js +5 -0
  12. package/dist/cjs/components/favorite/index.js.map +1 -0
  13. package/dist/cjs/components/favorite/lib/PopperId.js +5 -0
  14. package/dist/cjs/components/favorite/lib/PopperId.js.map +1 -0
  15. package/dist/cjs/components/favorite/lib/index.js +5 -0
  16. package/dist/cjs/components/favorite/lib/index.js.map +1 -0
  17. package/dist/cjs/components/index.js +7 -0
  18. package/dist/cjs/components/index.js.map +1 -0
  19. package/dist/cjs/components/lib/FavoriteItemEvent.js +11 -0
  20. package/dist/cjs/components/lib/FavoriteItemEvent.js.map +1 -0
  21. package/dist/cjs/components/lib/index.js +5 -0
  22. package/dist/cjs/components/lib/index.js.map +1 -0
  23. package/dist/cjs/index.js +5 -0
  24. package/dist/cjs/index.js.map +1 -0
  25. package/dist/docs.json +24 -24
  26. package/dist/esm/components/RenderRowBox.js +20 -0
  27. package/dist/esm/components/RenderRowBox.js.map +1 -0
  28. package/dist/esm/components/favorite/FavoriteIconButton.js +38 -0
  29. package/dist/esm/components/favorite/FavoriteIconButton.js.map +1 -0
  30. package/dist/esm/components/favorite/FavoriteToggleSVG.js +5 -0
  31. package/dist/esm/components/favorite/FavoriteToggleSVG.js.map +1 -0
  32. package/dist/esm/components/favorite/Popper.js +18 -0
  33. package/dist/esm/components/favorite/Popper.js.map +1 -0
  34. package/dist/esm/components/favorite/PopperButtonGroup.js +14 -0
  35. package/dist/esm/components/favorite/PopperButtonGroup.js.map +1 -0
  36. package/dist/{components/favorite/index.d.mts → esm/components/favorite/index.js} +1 -1
  37. package/dist/esm/components/favorite/index.js.map +1 -0
  38. package/dist/esm/components/favorite/lib/PopperId.js +2 -0
  39. package/dist/esm/components/favorite/lib/PopperId.js.map +1 -0
  40. package/dist/esm/components/favorite/lib/index.js +2 -0
  41. package/dist/esm/components/favorite/lib/index.js.map +1 -0
  42. package/dist/{components/index.d.mts → esm/components/index.js} +1 -1
  43. package/dist/esm/components/index.js.map +1 -0
  44. package/dist/esm/components/lib/FavoriteItemEvent.js +7 -0
  45. package/dist/esm/components/lib/FavoriteItemEvent.js.map +1 -0
  46. package/dist/{components/lib/index.d.mts → esm/components/lib/index.js} +1 -1
  47. package/dist/esm/components/lib/index.js.map +1 -0
  48. package/dist/esm/index.js +2 -0
  49. package/dist/esm/index.js.map +1 -0
  50. package/dist/types/components/RenderRowBox.d.ts.map +1 -0
  51. package/dist/types/components/favorite/FavoriteIconButton.d.ts.map +1 -0
  52. package/dist/types/components/favorite/FavoriteToggleSVG.d.ts.map +1 -0
  53. package/dist/types/components/favorite/Popper.d.ts.map +1 -0
  54. package/dist/types/components/favorite/PopperButtonGroup.d.ts.map +1 -0
  55. package/dist/types/components/favorite/index.d.ts.map +1 -0
  56. package/dist/types/components/favorite/lib/PopperId.d.ts.map +1 -0
  57. package/dist/types/components/favorite/lib/index.d.ts.map +1 -0
  58. package/dist/types/components/index.d.ts.map +1 -0
  59. package/dist/types/components/lib/FavoriteItemEvent.d.ts.map +1 -0
  60. package/dist/types/components/lib/index.d.ts.map +1 -0
  61. package/dist/{index.d.ts.map → types/index.d.ts.map} +1 -1
  62. package/package.json +22 -30
  63. package/dist/components/RenderRowBox.d.mts +0 -14
  64. package/dist/components/RenderRowBox.d.mts.map +0 -1
  65. package/dist/components/RenderRowBox.d.ts.map +0 -1
  66. package/dist/components/RenderRowBox.stories.d.mts +0 -12
  67. package/dist/components/RenderRowBox.stories.d.mts.map +0 -1
  68. package/dist/components/RenderRowBox.stories.d.ts +0 -12
  69. package/dist/components/RenderRowBox.stories.d.ts.map +0 -1
  70. package/dist/components/favorite/FavoriteIconButton.d.mts +0 -12
  71. package/dist/components/favorite/FavoriteIconButton.d.mts.map +0 -1
  72. package/dist/components/favorite/FavoriteIconButton.d.ts.map +0 -1
  73. package/dist/components/favorite/FavoriteToggleSVG.d.mts +0 -5
  74. package/dist/components/favorite/FavoriteToggleSVG.d.mts.map +0 -1
  75. package/dist/components/favorite/FavoriteToggleSVG.d.ts.map +0 -1
  76. package/dist/components/favorite/Popper.d.mts +0 -11
  77. package/dist/components/favorite/Popper.d.mts.map +0 -1
  78. package/dist/components/favorite/Popper.d.ts.map +0 -1
  79. package/dist/components/favorite/PopperButtonGroup.d.mts +0 -9
  80. package/dist/components/favorite/PopperButtonGroup.d.mts.map +0 -1
  81. package/dist/components/favorite/PopperButtonGroup.d.ts.map +0 -1
  82. package/dist/components/favorite/index.d.mts.map +0 -1
  83. package/dist/components/favorite/index.d.ts.map +0 -1
  84. package/dist/components/favorite/lib/PopperId.d.mts +0 -2
  85. package/dist/components/favorite/lib/PopperId.d.mts.map +0 -1
  86. package/dist/components/favorite/lib/PopperId.d.ts.map +0 -1
  87. package/dist/components/favorite/lib/index.d.mts +0 -2
  88. package/dist/components/favorite/lib/index.d.mts.map +0 -1
  89. package/dist/components/favorite/lib/index.d.ts.map +0 -1
  90. package/dist/components/index.d.mts.map +0 -1
  91. package/dist/components/index.d.ts.map +0 -1
  92. package/dist/components/lib/FavoriteItemEvent.d.mts +0 -9
  93. package/dist/components/lib/FavoriteItemEvent.d.mts.map +0 -1
  94. package/dist/components/lib/FavoriteItemEvent.d.ts.map +0 -1
  95. package/dist/components/lib/index.d.mts.map +0 -1
  96. package/dist/components/lib/index.d.ts.map +0 -1
  97. package/dist/index.d.mts +0 -2
  98. package/dist/index.d.mts.map +0 -1
  99. package/dist/index.js +0 -259
  100. package/dist/index.js.map +0 -1
  101. package/dist/index.mjs +0 -220
  102. package/dist/index.mjs.map +0 -1
  103. /package/dist/{components → types/components}/RenderRowBox.d.ts +0 -0
  104. /package/dist/{components → types/components}/favorite/FavoriteIconButton.d.ts +0 -0
  105. /package/dist/{components → types/components}/favorite/FavoriteToggleSVG.d.ts +0 -0
  106. /package/dist/{components → types/components}/favorite/Popper.d.ts +0 -0
  107. /package/dist/{components → types/components}/favorite/PopperButtonGroup.d.ts +0 -0
  108. /package/dist/{components → types/components}/favorite/index.d.ts +0 -0
  109. /package/dist/{components → types/components}/favorite/lib/PopperId.d.ts +0 -0
  110. /package/dist/{components → types/components}/favorite/lib/index.d.ts +0 -0
  111. /package/dist/{components → types/components}/index.d.ts +0 -0
  112. /package/dist/{components → types/components}/lib/FavoriteItemEvent.d.ts +0 -0
  113. /package/dist/{components → types/components}/lib/index.d.ts +0 -0
  114. /package/dist/{index.d.ts → types/index.d.ts} +0 -0
package/dist/index.js DELETED
@@ -1,259 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/index.ts
31
- var src_exports = {};
32
- __export(src_exports, {
33
- AddressRenderRowBox: () => AddressRenderRowBox,
34
- FavoriteIconButton: () => FavoriteIconButton,
35
- generateFavoriteEvent: () => generateFavoriteEvent
36
- });
37
- module.exports = __toCommonJS(src_exports);
38
-
39
- // src/components/favorite/FavoriteIconButton.tsx
40
- var import_material3 = require("@mui/material");
41
- var import_react_event = require("@xyo-network/react-event");
42
- var import_react_shared = require("@xyo-network/react-shared");
43
- var import_react2 = require("react");
44
-
45
- // src/components/lib/FavoriteItemEvent.ts
46
- var generateFavoriteEvent = (favorite, favoriteType, favoriteValue, name) => ({
47
- favorite: !!favorite,
48
- favoriteType,
49
- favoriteValue,
50
- name
51
- });
52
-
53
- // src/components/favorite/FavoriteToggleSVG.tsx
54
- var import_Star = __toESM(require("@mui/icons-material/Star"));
55
- var import_StarBorder = __toESM(require("@mui/icons-material/StarBorder"));
56
- var import_jsx_runtime = require("react/jsx-runtime");
57
- var FavoriteToggleSVG = ({ favorite }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: favorite ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Star.default, { className: "favorite-icon", component: "svg", color: "secondary", fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StarBorder.default, { className: "favorite-icon", fontSize: "small" }) });
58
-
59
- // src/components/favorite/lib/PopperId.ts
60
- var popperId = "favorite-popper";
61
-
62
- // src/components/favorite/Popper.tsx
63
- var import_material2 = require("@mui/material");
64
- var import_react = require("react");
65
-
66
- // src/components/favorite/PopperButtonGroup.tsx
67
- var import_Delete = __toESM(require("@mui/icons-material/Delete"));
68
- var import_Star2 = __toESM(require("@mui/icons-material/Star"));
69
- var import_material = require("@mui/material");
70
- var import_jsx_runtime2 = require("react/jsx-runtime");
71
- var PopperButtonGroup = ({ name, onConfirmFavorite, favorite, ...props }) => {
72
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material.ButtonGroup, { ...props, children: [
73
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
74
- import_material.Button,
75
- {
76
- title: "Save Favorite",
77
- variant: "contained",
78
- onClick: (e) => {
79
- e.stopPropagation();
80
- onConfirmFavorite?.(name, true);
81
- },
82
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Star2.default, {})
83
- }
84
- ),
85
- favorite ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
86
- import_material.Button,
87
- {
88
- title: "Remove Favorite",
89
- variant: "contained",
90
- onClick: (e) => {
91
- e.stopPropagation();
92
- onConfirmFavorite?.(name, false);
93
- },
94
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Delete.default, {})
95
- }
96
- ) : null
97
- ] });
98
- };
99
-
100
- // src/components/favorite/Popper.tsx
101
- var import_jsx_runtime3 = require("react/jsx-runtime");
102
- var FavoritePopper = (0, import_react.forwardRef)(
103
- ({
104
- name: nameProp,
105
- favorite,
106
- favoriteRef,
107
- onClickAway = () => {
108
- return;
109
- },
110
- onConfirmFavorite,
111
- ...props
112
- }, ref) => {
113
- const [name, setName] = (0, import_react.useState)(nameProp);
114
- (0, import_react.useEffect)(() => {
115
- setName(nameProp);
116
- }, [nameProp]);
117
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.ClickAwayListener, { onClickAway, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
118
- PopperStyled,
119
- {
120
- id: popperId,
121
- anchorEl: favoriteRef?.current,
122
- onClick: (e) => e.stopPropagation(),
123
- onTouchStart: (e) => e.stopPropagation(),
124
- transition: true,
125
- ref,
126
- ...props,
127
- children: ({ TransitionProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material2.CardContent, { sx: { display: "flex", gap: 1 }, children: [
128
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
129
- import_material2.TextField,
130
- {
131
- autoFocus: true,
132
- label: "Favorite Name",
133
- placeholder: "optional",
134
- size: "small",
135
- value: name ?? "",
136
- onChange: (e) => setName(e.target.value)
137
- }
138
- ),
139
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopperButtonGroup, { favorite, onConfirmFavorite, name })
140
- ] }) }) })
141
- }
142
- ) });
143
- }
144
- );
145
- FavoritePopper.displayName = "FavoritePopper";
146
- var PopperStyled = (0, import_material2.styled)(import_material2.Popper, { name: "PopperStyled" })(() => ({ zIndex: 9999 }));
147
-
148
- // src/components/favorite/FavoriteIconButton.tsx
149
- var import_jsx_runtime4 = require("react/jsx-runtime");
150
- var FavoriteIconButton = (0, import_react2.forwardRef)(
151
- ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
152
- const [openPopper, setOpenPopper] = (0, import_react2.useState)(false);
153
- const [favorite, setFavorite] = (0, import_react2.useState)(favoriteProp);
154
- (0, import_react2.useEffect)(() => {
155
- setFavorite(favoriteProp);
156
- }, [favoriteProp]);
157
- const sharedRef = (0, import_react_shared.useShareForwardedRef)(ref);
158
- const [buttonRef, dispatch] = (0, import_react_event.useEvent)(void 0, sharedRef);
159
- const onConfirmFavorite = (name2, newFavoriteState) => {
160
- const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name2);
161
- dispatch("address", "favorite", JSON.stringify(favoriteEvent));
162
- setFavorite(newFavoriteState);
163
- setOpenPopper(false);
164
- };
165
- const starRef = (0, import_react2.useRef)(null);
166
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
167
- IconButtonCondensed,
168
- {
169
- "aria-describedby": popperId,
170
- ref: buttonRef,
171
- onClick: (event) => {
172
- event.stopPropagation();
173
- setOpenPopper(!openPopper);
174
- },
175
- onTouchStart: (event) => {
176
- event.stopPropagation();
177
- setOpenPopper(!openPopper);
178
- },
179
- onMouseDown: (e) => e.stopPropagation(),
180
- sx: { lineHeight: 0, p: 0.25 },
181
- ...props,
182
- children: [
183
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { ref: starRef, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FavoriteToggleSVG, { favorite }) }),
184
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
185
- FavoritePopper,
186
- {
187
- sx: { zIndex: 1301 },
188
- name,
189
- favorite,
190
- favoriteRef: starRef,
191
- open: openPopper,
192
- onConfirmFavorite,
193
- onClickAway: () => setOpenPopper(false)
194
- }
195
- ),
196
- children
197
- ]
198
- }
199
- );
200
- }
201
- );
202
- FavoriteIconButton.displayName = "FavoriteIconButton";
203
- var IconButtonCondensed = (0, import_material3.styled)(import_material3.IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
204
- lineHeight: 0,
205
- padding: theme.spacing(0.25)
206
- }));
207
-
208
- // src/components/RenderRowBox.tsx
209
- var import_material4 = require("@mui/material");
210
- var import_react_flexbox = require("@xylabs/react-flexbox");
211
- var import_react_identicon = require("@xylabs/react-identicon");
212
- var import_react_event2 = require("@xyo-network/react-event");
213
- var import_react_shared2 = require("@xyo-network/react-shared");
214
- var import_react3 = require("react");
215
- var import_jsx_runtime5 = require("react/jsx-runtime");
216
- var AddressRenderRowBox = (0, import_react3.forwardRef)(
217
- ({ address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
218
- const theme = (0, import_material4.useTheme)();
219
- const sharedRef = (0, import_react_shared2.useShareForwardedRef)(ref);
220
- const [elementRef, dispatch] = (0, import_react_event2.useEvent)(void 0, sharedRef);
221
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
222
- import_react_flexbox.FlexRow,
223
- {
224
- gap: 2,
225
- justifyContent: "flex-start",
226
- ref: elementRef,
227
- onClick: () => {
228
- if (address) {
229
- dispatch("address", "click", address);
230
- }
231
- },
232
- ...props,
233
- children: [
234
- icons && address ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_identicon.Identicon, { size: iconSize, value: address }) }) : null,
235
- iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
236
- import_react_shared2.EllipsizeBox,
237
- {
238
- disableSharedRef,
239
- ellipsisPosition: "end",
240
- width: "100%",
241
- typographyProps: { fontSize: theme.typography.body1.fontSize },
242
- children: name ?? address
243
- }
244
- ),
245
- children,
246
- showFavorite && address ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
247
- ]
248
- }
249
- );
250
- }
251
- );
252
- AddressRenderRowBox.displayName = "AddressRenderRowBox";
253
- // Annotate the CommonJS export names for ESM import in node:
254
- 0 && (module.exports = {
255
- AddressRenderRowBox,
256
- FavoriteIconButton,
257
- generateFavoriteEvent
258
- });
259
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/favorite/FavoriteIconButton.tsx","../src/components/lib/FavoriteItemEvent.ts","../src/components/favorite/FavoriteToggleSVG.tsx","../src/components/favorite/lib/PopperId.ts","../src/components/favorite/Popper.tsx","../src/components/favorite/PopperButtonGroup.tsx","../src/components/RenderRowBox.tsx"],"sourcesContent":["export * from './components'\n","import { IconButton, IconButtonProps, styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { FavoriteItemEvent, generateFavoriteEvent } from '../lib'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG'\nimport { popperId } from './lib'\nimport { FavoritePopper } from './Popper'\n\nexport interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useState(favoriteProp)\n useEffect(() => {\n setFavorite(favoriteProp)\n }, [favoriteProp])\n\n const sharedRef = useShareForwardedRef(ref)\n const [buttonRef, dispatch] = useEvent(undefined, sharedRef)\n\n const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {\n const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)\n dispatch('address', 'favorite', JSON.stringify(favoriteEvent))\n setFavorite(newFavoriteState)\n setOpenPopper(false)\n }\n\n const starRef = useRef<HTMLSpanElement>(null)\n\n return (\n <IconButtonCondensed\n aria-describedby={popperId}\n ref={buttonRef}\n onClick={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={(e) => e.stopPropagation()}\n sx={{ lineHeight: 0, p: 0.25 }}\n {...props}\n >\n <span ref={starRef}>\n <FavoriteToggleSVG favorite={favorite} />\n </span>\n <FavoritePopper\n sx={{ zIndex: 1301 }}\n name={name}\n favorite={favorite}\n favoriteRef={starRef}\n open={openPopper}\n onConfirmFavorite={onConfirmFavorite}\n onClickAway={() => setOpenPopper(false)}\n />\n {children}\n </IconButtonCondensed>\n )\n },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n lineHeight: 0,\n padding: theme.spacing(0.25),\n}))\n","export interface FavoriteItemEvent {\n favorite?: boolean\n favoriteType?: FavoriteType\n favoriteValue?: string\n name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n favorite: !!favorite,\n favoriteType,\n favoriteValue,\n name,\n})\n","import StarIcon from '@mui/icons-material/Star'\nimport StarBorderIcon from '@mui/icons-material/StarBorder'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n <>\n {favorite ? (\n <StarIcon className=\"favorite-icon\" component={'svg'} color=\"secondary\" fontSize=\"small\" />\n ) : (\n <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />\n )}\n </>\n)\n","export const popperId = 'favorite-popper'\n","import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, styled, TextField } from '@mui/material'\nimport { forwardRef, RefObject, useEffect, useState } from 'react'\n\nimport { popperId } from './lib'\nimport { PopperButtonGroup } from './PopperButtonGroup'\n\nexport interface FavoritePopperProps extends PopperProps {\n favorite?: boolean\n favoriteRef?: RefObject<HTMLElement>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n (\n {\n name: nameProp,\n favorite,\n favoriteRef,\n onClickAway = () => {\n return\n },\n onConfirmFavorite,\n ...props\n },\n ref,\n ) => {\n const [name, setName] = useState(nameProp)\n useEffect(() => {\n setName(nameProp)\n }, [nameProp])\n\n return (\n <ClickAwayListener onClickAway={onClickAway}>\n <PopperStyled\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n transition\n ref={ref}\n {...props}\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Card>\n <CardContent sx={{ display: 'flex', gap: 1 }}>\n <TextField\n autoFocus\n label=\"Favorite Name\"\n placeholder=\"optional\"\n size=\"small\"\n value={name ?? ''}\n onChange={(e) => setName(e.target.value)}\n />\n <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n </CardContent>\n </Card>\n </Fade>\n )}\n </PopperStyled>\n </ClickAwayListener>\n )\n },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import DeleteIcon from '@mui/icons-material/Delete'\nimport StarIcon from '@mui/icons-material/Star'\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'\n\nexport interface FavoritePopperProps extends ButtonGroupProps {\n favorite?: boolean\n name?: string\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\n\nexport const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ name, onConfirmFavorite, favorite, ...props }) => {\n return (\n <ButtonGroup {...props}>\n <Button\n title=\"Save Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, true)\n }}\n >\n <StarIcon />\n </Button>\n {favorite ? (\n <Button\n title=\"Remove Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, false)\n }}\n >\n <DeleteIcon />\n </Button>\n ) : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEvent } from '@xyo-network/react-event'\nimport { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite'\n\nexport interface AddressRenderRowBoxProps extends FlexBoxProps {\n address?: string | null\n disableSharedRef?: boolean\n favorite?: boolean\n iconOnly?: boolean\n iconSize?: number\n icons?: boolean\n name?: string\n showFavorite?: boolean\n}\n\nexport const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n (\n { address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props },\n ref,\n ) => {\n const theme = useTheme()\n\n const sharedRef = useShareForwardedRef(ref)\n const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n return (\n <FlexRow\n gap={2}\n justifyContent=\"flex-start\"\n ref={elementRef}\n onClick={() => {\n if (address) {\n dispatch('address', 'click', address)\n }\n }}\n {...props}\n >\n {icons && address ? (\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n ) : null}\n {iconOnly ? null : (\n <EllipsizeBox\n disableSharedRef={disableSharedRef}\n ellipsisPosition={'end'}\n width=\"100%\"\n typographyProps={{ fontSize: theme.typography.body1.fontSize }}\n >\n {name ?? address}\n </EllipsizeBox>\n )}\n {children}\n {showFavorite && address ? (\n <FavoriteIconButton name={name} size={'small'} value={address} valueType={'address'} favorite={favoriteProp} />\n ) : null}\n </FlexRow>\n )\n },\n)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,mBAAoD;AAEpD,yBAAyB;AACzB,0BAAqC;AACrC,IAAAC,gBAAwD;;;ACKjD,IAAM,wBAAwB,CAAC,UAAoB,cAA6B,eAAwB,UAAsC;AAAA,EACnJ,UAAU,CAAC,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF;;;ACdA,kBAAqB;AACrB,wBAA2B;AAGzB;AADK,IAAM,oBAAsD,CAAC,EAAE,SAAS,MAC7E,2EACG,qBACC,4CAAC,YAAAC,SAAA,EAAS,WAAU,iBAAgB,WAAW,OAAO,OAAM,aAAY,UAAS,SAAQ,IAEzF,4CAAC,kBAAAC,SAAA,EAAe,WAAU,iBAAgB,UAAS,SAAQ,GAE/D;;;ACVK,IAAM,WAAW;;;ACAxB,IAAAC,mBAAmG;AACnG,mBAA2D;;;ACD3D,oBAAuB;AACvB,IAAAC,eAAqB;AACrB,sBAAsD;AAUlD,IAAAC,sBAAA;AAFG,IAAM,oBAAmD,CAAC,EAAE,MAAM,mBAAmB,UAAU,GAAG,MAAM,MAAM;AACnH,SACE,8CAAC,+BAAa,GAAG,OACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,8BAAoB,MAAM,IAAI;AAAA,QAChC;AAAA,QAEA,uDAAC,aAAAC,SAAA,EAAS;AAAA;AAAA,IACZ;AAAA,IACC,WACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,8BAAoB,MAAM,KAAK;AAAA,QACjC;AAAA,QAEA,uDAAC,cAAAC,SAAA,EAAW;AAAA;AAAA,IACd,IACE;AAAA,KACN;AAEJ;;;ADSgB,IAAAC,sBAAA;AAjCT,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,cAAc,MAAM;AAClB;AAAA,IACF;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,QAAQ;AACzC,gCAAU,MAAM;AACd,cAAQ,QAAQ;AAAA,IAClB,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE,6CAAC,sCAAkB,aACjB;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU,aAAa;AAAA,QACvB,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,cAAc,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACvC,YAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEH,WAAC,EAAE,gBAAgB,MAClB,6CAAC,yBAAM,GAAG,iBAAiB,SAAS,KAClC,uDAAC,yBACC,wDAAC,gCAAY,IAAI,EAAE,SAAS,QAAQ,KAAK,EAAE,GACzC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAS;AAAA,cACT,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,MAAK;AAAA,cACL,OAAO,QAAQ;AAAA,cACf,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA;AAAA,UACzC;AAAA,UACA,6CAAC,qBAAkB,UAAoB,mBAAsC,MAAY;AAAA,WAC3F,GACF,GACF;AAAA;AAAA,IAEJ,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAG7B,IAAM,mBAAe,yBAAO,yBAAQ,EAAE,MAAM,eAAe,CAAC,EAAE,OAAO,EAAE,QAAQ,KAAK,EAAE;;;AJ7BhF,IAAAC,sBAAA;AAtBC,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,UAAU,cAAc,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC/E,UAAM,CAAC,YAAY,aAAa,QAAI,wBAAS,KAAK;AAElD,UAAM,CAAC,UAAU,WAAW,QAAI,wBAAS,YAAY;AACrD,iCAAU,MAAM;AACd,kBAAY,YAAY;AAAA,IAC1B,GAAG,CAAC,YAAY,CAAC;AAEjB,UAAM,gBAAY,0CAAqB,GAAG;AAC1C,UAAM,CAAC,WAAW,QAAQ,QAAI,6BAAS,QAAW,SAAS;AAE3D,UAAM,oBAAoB,CAACC,OAAe,qBAA+B;AACvE,YAAM,gBAAgB,sBAAsB,CAAC,CAAC,kBAAkB,WAAW,OAAOA,KAAI;AACtF,eAAS,WAAW,YAAY,KAAK,UAAU,aAAa,CAAC;AAC7D,kBAAY,gBAAgB;AAC5B,oBAAc,KAAK;AAAA,IACrB;AAEA,UAAM,cAAU,sBAAwB,IAAI;AAE5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS,CAAC,UAAU;AAClB,gBAAM,gBAAgB;AACtB,wBAAc,CAAC,UAAU;AAAA,QAC3B;AAAA,QACA,cAAc,CAAC,UAAU;AACvB,gBAAM,gBAAgB;AACtB,wBAAc,CAAC,UAAU;AAAA,QAC3B;AAAA,QACA,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACtC,IAAI,EAAE,YAAY,GAAG,GAAG,KAAK;AAAA,QAC5B,GAAG;AAAA,QAEJ;AAAA,uDAAC,UAAK,KAAK,SACT,uDAAC,qBAAkB,UAAoB,GACzC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,EAAE,QAAQ,KAAK;AAAA,cACnB;AAAA,cACA;AAAA,cACA,aAAa;AAAA,cACb,MAAM;AAAA,cACN;AAAA,cACA,aAAa,MAAM,cAAc,KAAK;AAAA;AAAA,UACxC;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAEjC,IAAM,0BAAsB,yBAAO,6BAAY,EAAE,MAAM,sBAAsB,CAAC,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC9F,YAAY;AAAA,EACZ,SAAS,MAAM,QAAQ,IAAI;AAC7B,EAAE;;;AM9EF,IAAAC,mBAAuC;AACvC,2BAAsC;AACtC,6BAA0B;AAC1B,IAAAC,sBAAyB;AACzB,IAAAC,uBAAmD;AACnD,IAAAC,gBAA2B;AA0BrB,IAAAC,sBAAA;AAXC,IAAM,0BAAsB;AAAA,EACjC,CACE,EAAE,SAAS,UAAU,kBAAkB,UAAU,eAAe,OAAO,UAAU,WAAW,IAAI,OAAO,MAAM,eAAe,OAAO,GAAG,MAAM,GAC5I,QACG;AACH,UAAM,YAAQ,2BAAS;AAEvB,UAAM,gBAAY,2CAAqB,GAAG;AAC1C,UAAM,CAAC,YAAY,QAAQ,QAAI,8BAAS,QAAW,SAAS;AAE5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,KAAK;AAAA,QACL,SAAS,MAAM;AACb,cAAI,SAAS;AACX,qBAAS,WAAW,SAAS,OAAO;AAAA,UACtC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,UACR,6CAAC,iCAAa,IAAI,EAAE,UAAU,EAAE,GAC9B,uDAAC,oCAAU,MAAM,UAAU,OAAO,SAAS,GAC7C,IACE;AAAA,UACH,WAAW,OACV;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,kBAAkB;AAAA,cAClB,OAAM;AAAA,cACN,iBAAiB,EAAE,UAAU,MAAM,WAAW,MAAM,SAAS;AAAA,cAE5D,kBAAQ;AAAA;AAAA,UACX;AAAA,UAED;AAAA,UACA,gBAAgB,UACf,6CAAC,sBAAmB,MAAY,MAAM,SAAS,OAAO,SAAS,WAAW,WAAW,UAAU,cAAc,IAC3G;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;","names":["import_material","import_react","StarIcon","StarBorderIcon","import_material","import_Star","import_jsx_runtime","StarIcon","DeleteIcon","import_jsx_runtime","import_jsx_runtime","name","import_material","import_react_event","import_react_shared","import_react","import_jsx_runtime"]}
package/dist/index.mjs DELETED
@@ -1,220 +0,0 @@
1
- // src/components/favorite/FavoriteIconButton.tsx
2
- import { IconButton, styled as styled2 } from "@mui/material";
3
- import { useEvent } from "@xyo-network/react-event";
4
- import { useShareForwardedRef } from "@xyo-network/react-shared";
5
- import { forwardRef as forwardRef2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
6
-
7
- // src/components/lib/FavoriteItemEvent.ts
8
- var generateFavoriteEvent = (favorite, favoriteType, favoriteValue, name) => ({
9
- favorite: !!favorite,
10
- favoriteType,
11
- favoriteValue,
12
- name
13
- });
14
-
15
- // src/components/favorite/FavoriteToggleSVG.tsx
16
- import StarIcon from "@mui/icons-material/Star";
17
- import StarBorderIcon from "@mui/icons-material/StarBorder";
18
- import { Fragment, jsx } from "react/jsx-runtime";
19
- var FavoriteToggleSVG = ({ favorite }) => /* @__PURE__ */ jsx(Fragment, { children: favorite ? /* @__PURE__ */ jsx(StarIcon, { className: "favorite-icon", component: "svg", color: "secondary", fontSize: "small" }) : /* @__PURE__ */ jsx(StarBorderIcon, { className: "favorite-icon", fontSize: "small" }) });
20
-
21
- // src/components/favorite/lib/PopperId.ts
22
- var popperId = "favorite-popper";
23
-
24
- // src/components/favorite/Popper.tsx
25
- import { Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField } from "@mui/material";
26
- import { forwardRef, useEffect, useState } from "react";
27
-
28
- // src/components/favorite/PopperButtonGroup.tsx
29
- import DeleteIcon from "@mui/icons-material/Delete";
30
- import StarIcon2 from "@mui/icons-material/Star";
31
- import { Button, ButtonGroup } from "@mui/material";
32
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
33
- var PopperButtonGroup = ({ name, onConfirmFavorite, favorite, ...props }) => {
34
- return /* @__PURE__ */ jsxs(ButtonGroup, { ...props, children: [
35
- /* @__PURE__ */ jsx2(
36
- Button,
37
- {
38
- title: "Save Favorite",
39
- variant: "contained",
40
- onClick: (e) => {
41
- e.stopPropagation();
42
- onConfirmFavorite?.(name, true);
43
- },
44
- children: /* @__PURE__ */ jsx2(StarIcon2, {})
45
- }
46
- ),
47
- favorite ? /* @__PURE__ */ jsx2(
48
- Button,
49
- {
50
- title: "Remove Favorite",
51
- variant: "contained",
52
- onClick: (e) => {
53
- e.stopPropagation();
54
- onConfirmFavorite?.(name, false);
55
- },
56
- children: /* @__PURE__ */ jsx2(DeleteIcon, {})
57
- }
58
- ) : null
59
- ] });
60
- };
61
-
62
- // src/components/favorite/Popper.tsx
63
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
64
- var FavoritePopper = forwardRef(
65
- ({
66
- name: nameProp,
67
- favorite,
68
- favoriteRef,
69
- onClickAway = () => {
70
- return;
71
- },
72
- onConfirmFavorite,
73
- ...props
74
- }, ref) => {
75
- const [name, setName] = useState(nameProp);
76
- useEffect(() => {
77
- setName(nameProp);
78
- }, [nameProp]);
79
- return /* @__PURE__ */ jsx3(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx3(
80
- PopperStyled,
81
- {
82
- id: popperId,
83
- anchorEl: favoriteRef?.current,
84
- onClick: (e) => e.stopPropagation(),
85
- onTouchStart: (e) => e.stopPropagation(),
86
- transition: true,
87
- ref,
88
- ...props,
89
- children: ({ TransitionProps }) => /* @__PURE__ */ jsx3(Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ jsx3(Card, { children: /* @__PURE__ */ jsxs2(CardContent, { sx: { display: "flex", gap: 1 }, children: [
90
- /* @__PURE__ */ jsx3(
91
- TextField,
92
- {
93
- autoFocus: true,
94
- label: "Favorite Name",
95
- placeholder: "optional",
96
- size: "small",
97
- value: name ?? "",
98
- onChange: (e) => setName(e.target.value)
99
- }
100
- ),
101
- /* @__PURE__ */ jsx3(PopperButtonGroup, { favorite, onConfirmFavorite, name })
102
- ] }) }) })
103
- }
104
- ) });
105
- }
106
- );
107
- FavoritePopper.displayName = "FavoritePopper";
108
- var PopperStyled = styled(Popper, { name: "PopperStyled" })(() => ({ zIndex: 9999 }));
109
-
110
- // src/components/favorite/FavoriteIconButton.tsx
111
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
112
- var FavoriteIconButton = forwardRef2(
113
- ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
114
- const [openPopper, setOpenPopper] = useState2(false);
115
- const [favorite, setFavorite] = useState2(favoriteProp);
116
- useEffect2(() => {
117
- setFavorite(favoriteProp);
118
- }, [favoriteProp]);
119
- const sharedRef = useShareForwardedRef(ref);
120
- const [buttonRef, dispatch] = useEvent(void 0, sharedRef);
121
- const onConfirmFavorite = (name2, newFavoriteState) => {
122
- const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name2);
123
- dispatch("address", "favorite", JSON.stringify(favoriteEvent));
124
- setFavorite(newFavoriteState);
125
- setOpenPopper(false);
126
- };
127
- const starRef = useRef(null);
128
- return /* @__PURE__ */ jsxs3(
129
- IconButtonCondensed,
130
- {
131
- "aria-describedby": popperId,
132
- ref: buttonRef,
133
- onClick: (event) => {
134
- event.stopPropagation();
135
- setOpenPopper(!openPopper);
136
- },
137
- onTouchStart: (event) => {
138
- event.stopPropagation();
139
- setOpenPopper(!openPopper);
140
- },
141
- onMouseDown: (e) => e.stopPropagation(),
142
- sx: { lineHeight: 0, p: 0.25 },
143
- ...props,
144
- children: [
145
- /* @__PURE__ */ jsx4("span", { ref: starRef, children: /* @__PURE__ */ jsx4(FavoriteToggleSVG, { favorite }) }),
146
- /* @__PURE__ */ jsx4(
147
- FavoritePopper,
148
- {
149
- sx: { zIndex: 1301 },
150
- name,
151
- favorite,
152
- favoriteRef: starRef,
153
- open: openPopper,
154
- onConfirmFavorite,
155
- onClickAway: () => setOpenPopper(false)
156
- }
157
- ),
158
- children
159
- ]
160
- }
161
- );
162
- }
163
- );
164
- FavoriteIconButton.displayName = "FavoriteIconButton";
165
- var IconButtonCondensed = styled2(IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
166
- lineHeight: 0,
167
- padding: theme.spacing(0.25)
168
- }));
169
-
170
- // src/components/RenderRowBox.tsx
171
- import { ListItemIcon, useTheme } from "@mui/material";
172
- import { FlexRow } from "@xylabs/react-flexbox";
173
- import { Identicon } from "@xylabs/react-identicon";
174
- import { useEvent as useEvent2 } from "@xyo-network/react-event";
175
- import { EllipsizeBox, useShareForwardedRef as useShareForwardedRef2 } from "@xyo-network/react-shared";
176
- import { forwardRef as forwardRef3 } from "react";
177
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
178
- var AddressRenderRowBox = forwardRef3(
179
- ({ address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
180
- const theme = useTheme();
181
- const sharedRef = useShareForwardedRef2(ref);
182
- const [elementRef, dispatch] = useEvent2(void 0, sharedRef);
183
- return /* @__PURE__ */ jsxs4(
184
- FlexRow,
185
- {
186
- gap: 2,
187
- justifyContent: "flex-start",
188
- ref: elementRef,
189
- onClick: () => {
190
- if (address) {
191
- dispatch("address", "click", address);
192
- }
193
- },
194
- ...props,
195
- children: [
196
- icons && address ? /* @__PURE__ */ jsx5(ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx5(Identicon, { size: iconSize, value: address }) }) : null,
197
- iconOnly ? null : /* @__PURE__ */ jsx5(
198
- EllipsizeBox,
199
- {
200
- disableSharedRef,
201
- ellipsisPosition: "end",
202
- width: "100%",
203
- typographyProps: { fontSize: theme.typography.body1.fontSize },
204
- children: name ?? address
205
- }
206
- ),
207
- children,
208
- showFavorite && address ? /* @__PURE__ */ jsx5(FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
209
- ]
210
- }
211
- );
212
- }
213
- );
214
- AddressRenderRowBox.displayName = "AddressRenderRowBox";
215
- export {
216
- AddressRenderRowBox,
217
- FavoriteIconButton,
218
- generateFavoriteEvent
219
- };
220
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/favorite/FavoriteIconButton.tsx","../src/components/lib/FavoriteItemEvent.ts","../src/components/favorite/FavoriteToggleSVG.tsx","../src/components/favorite/lib/PopperId.ts","../src/components/favorite/Popper.tsx","../src/components/favorite/PopperButtonGroup.tsx","../src/components/RenderRowBox.tsx"],"sourcesContent":["import { IconButton, IconButtonProps, styled } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { FavoriteItemEvent, generateFavoriteEvent } from '../lib'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG'\nimport { popperId } from './lib'\nimport { FavoritePopper } from './Popper'\n\nexport interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n ({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useState(favoriteProp)\n useEffect(() => {\n setFavorite(favoriteProp)\n }, [favoriteProp])\n\n const sharedRef = useShareForwardedRef(ref)\n const [buttonRef, dispatch] = useEvent(undefined, sharedRef)\n\n const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {\n const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)\n dispatch('address', 'favorite', JSON.stringify(favoriteEvent))\n setFavorite(newFavoriteState)\n setOpenPopper(false)\n }\n\n const starRef = useRef<HTMLSpanElement>(null)\n\n return (\n <IconButtonCondensed\n aria-describedby={popperId}\n ref={buttonRef}\n onClick={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={(e) => e.stopPropagation()}\n sx={{ lineHeight: 0, p: 0.25 }}\n {...props}\n >\n <span ref={starRef}>\n <FavoriteToggleSVG favorite={favorite} />\n </span>\n <FavoritePopper\n sx={{ zIndex: 1301 }}\n name={name}\n favorite={favorite}\n favoriteRef={starRef}\n open={openPopper}\n onConfirmFavorite={onConfirmFavorite}\n onClickAway={() => setOpenPopper(false)}\n />\n {children}\n </IconButtonCondensed>\n )\n },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n lineHeight: 0,\n padding: theme.spacing(0.25),\n}))\n","export interface FavoriteItemEvent {\n favorite?: boolean\n favoriteType?: FavoriteType\n favoriteValue?: string\n name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n favorite: !!favorite,\n favoriteType,\n favoriteValue,\n name,\n})\n","import StarIcon from '@mui/icons-material/Star'\nimport StarBorderIcon from '@mui/icons-material/StarBorder'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n <>\n {favorite ? (\n <StarIcon className=\"favorite-icon\" component={'svg'} color=\"secondary\" fontSize=\"small\" />\n ) : (\n <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />\n )}\n </>\n)\n","export const popperId = 'favorite-popper'\n","import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, styled, TextField } from '@mui/material'\nimport { forwardRef, RefObject, useEffect, useState } from 'react'\n\nimport { popperId } from './lib'\nimport { PopperButtonGroup } from './PopperButtonGroup'\n\nexport interface FavoritePopperProps extends PopperProps {\n favorite?: boolean\n favoriteRef?: RefObject<HTMLElement>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n (\n {\n name: nameProp,\n favorite,\n favoriteRef,\n onClickAway = () => {\n return\n },\n onConfirmFavorite,\n ...props\n },\n ref,\n ) => {\n const [name, setName] = useState(nameProp)\n useEffect(() => {\n setName(nameProp)\n }, [nameProp])\n\n return (\n <ClickAwayListener onClickAway={onClickAway}>\n <PopperStyled\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n transition\n ref={ref}\n {...props}\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Card>\n <CardContent sx={{ display: 'flex', gap: 1 }}>\n <TextField\n autoFocus\n label=\"Favorite Name\"\n placeholder=\"optional\"\n size=\"small\"\n value={name ?? ''}\n onChange={(e) => setName(e.target.value)}\n />\n <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n </CardContent>\n </Card>\n </Fade>\n )}\n </PopperStyled>\n </ClickAwayListener>\n )\n },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import DeleteIcon from '@mui/icons-material/Delete'\nimport StarIcon from '@mui/icons-material/Star'\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'\n\nexport interface FavoritePopperProps extends ButtonGroupProps {\n favorite?: boolean\n name?: string\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\n\nexport const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ name, onConfirmFavorite, favorite, ...props }) => {\n return (\n <ButtonGroup {...props}>\n <Button\n title=\"Save Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, true)\n }}\n >\n <StarIcon />\n </Button>\n {favorite ? (\n <Button\n title=\"Remove Favorite\"\n variant=\"contained\"\n onClick={(e) => {\n e.stopPropagation()\n onConfirmFavorite?.(name, false)\n }}\n >\n <DeleteIcon />\n </Button>\n ) : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport { useEvent } from '@xyo-network/react-event'\nimport { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nimport { FavoriteIconButton } from './favorite'\n\nexport interface AddressRenderRowBoxProps extends FlexBoxProps {\n address?: string | null\n disableSharedRef?: boolean\n favorite?: boolean\n iconOnly?: boolean\n iconSize?: number\n icons?: boolean\n name?: string\n showFavorite?: boolean\n}\n\nexport const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n (\n { address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props },\n ref,\n ) => {\n const theme = useTheme()\n\n const sharedRef = useShareForwardedRef(ref)\n const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n return (\n <FlexRow\n gap={2}\n justifyContent=\"flex-start\"\n ref={elementRef}\n onClick={() => {\n if (address) {\n dispatch('address', 'click', address)\n }\n }}\n {...props}\n >\n {icons && address ? (\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n ) : null}\n {iconOnly ? null : (\n <EllipsizeBox\n disableSharedRef={disableSharedRef}\n ellipsisPosition={'end'}\n width=\"100%\"\n typographyProps={{ fontSize: theme.typography.body1.fontSize }}\n >\n {name ?? address}\n </EllipsizeBox>\n )}\n {children}\n {showFavorite && address ? (\n <FavoriteIconButton name={name} size={'small'} value={address} valueType={'address'} favorite={favoriteProp} />\n ) : null}\n </FlexRow>\n )\n },\n)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"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","names":["styled","forwardRef","useEffect","useState","StarIcon","jsx","jsx","jsxs","jsx","jsxs","forwardRef","useState","useEffect","name","styled","useEvent","useShareForwardedRef","forwardRef","jsx","jsxs","forwardRef","useShareForwardedRef","useEvent"]}
File without changes