@xyo-network/react-address-render 7.4.1 → 7.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/browser/components/RenderRowBox.stories.d.ts +7 -7
  2. package/dist/browser/index.mjs +142 -176
  3. package/dist/browser/index.mjs.map +1 -1
  4. package/package.json +22 -21
  5. package/src/components/RenderRowBox.stories.tsx +1 -1
package/dist/browser/components/RenderRowBox.stories.d.ts CHANGED
@@ -2,25 +2,25 @@ import type { Meta } from '@storybook/react-vite';
2
2
  import React from 'react';
3
3
  import { AddressRenderRowBox } from './RenderRowBox.tsx';
4
4
  declare const StorybookEntry: Meta<typeof AddressRenderRowBox>;
5
- declare const Default: import(".store/storybook-virtual-a067dd1507/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
5
+ declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
6
6
  ref?: React.RefObject<HTMLElement | null>;
7
7
  }>;
8
- declare const WithAddress: import(".store/storybook-virtual-a067dd1507/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
8
+ declare const WithAddress: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
9
9
  ref?: React.RefObject<HTMLElement | null>;
10
10
  }>;
11
- declare const WithIcon: import(".store/storybook-virtual-a067dd1507/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
11
+ declare const WithIcon: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
12
12
  ref?: React.RefObject<HTMLElement | null>;
13
13
  }>;
14
- declare const WithIconOnly: import(".store/storybook-virtual-a067dd1507/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
14
+ declare const WithIconOnly: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
15
15
  ref?: React.RefObject<HTMLElement | null>;
16
16
  }>;
17
- declare const WithFavorite: import(".store/storybook-virtual-a067dd1507/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
17
+ declare const WithFavorite: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
18
18
  ref?: React.RefObject<HTMLElement | null>;
19
19
  }>;
20
- declare const WithFavoriteAlias: import(".store/storybook-virtual-a067dd1507/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
20
+ declare const WithFavoriteAlias: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
21
21
  ref?: React.RefObject<HTMLElement | null>;
22
22
  }>;
23
- declare const WithChildren: import(".store/storybook-virtual-a067dd1507/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
23
+ declare const WithChildren: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./RenderRowBox.tsx").AddressRenderRowBoxProps & {
24
24
  ref?: React.RefObject<HTMLElement | null>;
25
25
  }>;
26
26
  export { Default, WithAddress, WithChildren, WithFavorite, WithFavoriteAlias, WithIcon, WithIconOnly, };
package/dist/browser/index.mjs CHANGED
@@ -1,176 +1,152 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
+
1
4
  // src/components/favorite/FavoriteIconButton.tsx
2
5
  import { IconButton, styled } from "@mui/material";
3
6
  import { useResetState } from "@xylabs/react-hooks";
4
7
  import { useEvent } from "@xyo-network/react-event";
5
8
  import { useShareForwardedRef } from "@xyo-network/react-shared";
6
- import { useRef, useState as useState2 } from "react";
9
+ import React4, { useRef, useState as useState2 } from "react";
7
10
 
8
11
  // src/components/lib/FavoriteItemEvent.ts
9
- var generateFavoriteEvent = (favorite, favoriteType, favoriteValue, name) => ({
12
+ var generateFavoriteEvent = /* @__PURE__ */ __name((favorite, favoriteType, favoriteValue, name) => ({
10
13
  favorite: !!favorite,
11
14
  favoriteType,
12
15
  favoriteValue,
13
16
  name
14
- });
17
+ }), "generateFavoriteEvent");
15
18
 
16
19
  // src/components/favorite/FavoriteToggleSVG.tsx
17
20
  import { Star as StarIcon, StarBorder as StarBorderIcon } from "@mui/icons-material";
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" }) });
21
+ import React from "react";
22
+ var FavoriteToggleSVG = /* @__PURE__ */ __name(({ favorite }) => /* @__PURE__ */ React.createElement(React.Fragment, null, favorite ? /* @__PURE__ */ React.createElement(StarIcon, {
23
+ className: "favorite-icon",
24
+ component: "svg",
25
+ color: "secondary",
26
+ fontSize: "small"
27
+ }) : /* @__PURE__ */ React.createElement(StarBorderIcon, {
28
+ className: "favorite-icon",
29
+ fontSize: "small"
30
+ })), "FavoriteToggleSVG");
20
31
 
21
32
  // src/components/favorite/lib/PopperId.ts
22
33
  var popperId = "favorite-popper";
23
34
 
24
35
  // src/components/favorite/Popper.tsx
25
- import {
26
- Card,
27
- CardContent,
28
- ClickAwayListener,
29
- Fade,
30
- Popper,
31
- TextField
32
- } from "@mui/material";
33
- import { useState } from "react";
36
+ import { Card, CardContent, ClickAwayListener, Fade, Popper, TextField } from "@mui/material";
37
+ import React3, { useState } from "react";
34
38
 
35
39
  // src/components/favorite/PopperButtonGroup.tsx
36
40
  import { Delete as DeleteIcon, Star as StarIcon2 } from "@mui/icons-material";
37
41
  import { Button, ButtonGroup } from "@mui/material";
38
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
39
- var PopperButtonGroup = ({
40
- name,
41
- onConfirmFavorite,
42
- favorite,
43
- ...props
44
- }) => {
45
- return /* @__PURE__ */ jsxs(ButtonGroup, { ...props, children: [
46
- /* @__PURE__ */ jsx2(
47
- Button,
48
- {
49
- title: "Save Favorite",
50
- variant: "contained",
51
- onClick: (e) => {
52
- e.stopPropagation();
53
- onConfirmFavorite?.(name, true);
54
- },
55
- children: /* @__PURE__ */ jsx2(StarIcon2, {})
56
- }
57
- ),
58
- favorite ? /* @__PURE__ */ jsx2(
59
- Button,
60
- {
61
- title: "Remove Favorite",
62
- variant: "contained",
63
- onClick: (e) => {
64
- e.stopPropagation();
65
- onConfirmFavorite?.(name, false);
66
- },
67
- children: /* @__PURE__ */ jsx2(DeleteIcon, {})
68
- }
69
- ) : null
70
- ] });
71
- };
42
+ import React2 from "react";
43
+ var PopperButtonGroup = /* @__PURE__ */ __name(({ name, onConfirmFavorite, favorite, ...props }) => {
44
+ return /* @__PURE__ */ React2.createElement(ButtonGroup, props, /* @__PURE__ */ React2.createElement(Button, {
45
+ title: "Save Favorite",
46
+ variant: "contained",
47
+ onClick: /* @__PURE__ */ __name((e) => {
48
+ e.stopPropagation();
49
+ onConfirmFavorite?.(name, true);
50
+ }, "onClick")
51
+ }, /* @__PURE__ */ React2.createElement(StarIcon2, null)), favorite ? /* @__PURE__ */ React2.createElement(Button, {
52
+ title: "Remove Favorite",
53
+ variant: "contained",
54
+ onClick: /* @__PURE__ */ __name((e) => {
55
+ e.stopPropagation();
56
+ onConfirmFavorite?.(name, false);
57
+ }, "onClick")
58
+ }, /* @__PURE__ */ React2.createElement(DeleteIcon, null)) : null);
59
+ }, "PopperButtonGroup");
72
60
 
73
61
  // src/components/favorite/Popper.tsx
74
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
75
- var FavoritePopper = ({
76
- ref,
77
- name: nameProp,
78
- favorite,
79
- favoriteRef,
80
- onClickAway,
81
- onConfirmFavorite,
82
- ...props
83
- }) => {
62
+ var FavoritePopper = /* @__PURE__ */ __name(({ ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props }) => {
84
63
  const [name, setName] = useState(() => nameProp);
85
- return /* @__PURE__ */ jsx3(ClickAwayListener, { onClickAway: onClickAway ?? (() => null), children: /* @__PURE__ */ jsx3(
86
- Popper,
87
- {
88
- id: popperId,
89
- anchorEl: favoriteRef?.current,
90
- onClick: (e) => e.stopPropagation(),
91
- onTouchStart: (e) => e.stopPropagation(),
92
- transition: true,
93
- style: { zIndex: 9999 },
94
- ref,
95
- ...props,
96
- children: ({ TransitionProps }) => /* @__PURE__ */ jsx3(Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ jsx3(Card, { children: /* @__PURE__ */ jsxs2(CardContent, { sx: { display: "flex", gap: 1 }, children: [
97
- /* @__PURE__ */ jsx3(
98
- TextField,
99
- {
100
- autoFocus: true,
101
- label: "Favorite Name",
102
- placeholder: "optional",
103
- size: "small",
104
- value: name ?? "",
105
- onChange: (e) => setName(e.target.value)
106
- }
107
- ),
108
- /* @__PURE__ */ jsx3(PopperButtonGroup, { favorite, onConfirmFavorite, name })
109
- ] }) }) })
64
+ return /* @__PURE__ */ React3.createElement(ClickAwayListener, {
65
+ onClickAway: onClickAway ?? (() => null)
66
+ }, /* @__PURE__ */ React3.createElement(Popper, {
67
+ id: popperId,
68
+ anchorEl: favoriteRef?.current,
69
+ onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
70
+ onTouchStart: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onTouchStart"),
71
+ transition: true,
72
+ style: {
73
+ zIndex: 9999
74
+ },
75
+ ref,
76
+ ...props
77
+ }, ({ TransitionProps }) => /* @__PURE__ */ React3.createElement(Fade, {
78
+ ...TransitionProps,
79
+ timeout: 350
80
+ }, /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardContent, {
81
+ sx: {
82
+ display: "flex",
83
+ gap: 1
110
84
  }
111
- ) });
112
- };
85
+ }, /* @__PURE__ */ React3.createElement(TextField, {
86
+ autoFocus: true,
87
+ label: "Favorite Name",
88
+ placeholder: "optional",
89
+ size: "small",
90
+ value: name ?? "",
91
+ onChange: /* @__PURE__ */ __name((e) => setName(e.target.value), "onChange")
92
+ }), /* @__PURE__ */ React3.createElement(PopperButtonGroup, {
93
+ favorite,
94
+ onConfirmFavorite,
95
+ name
96
+ }))))));
97
+ }, "FavoritePopper");
113
98
  FavoritePopper.displayName = "FavoritePopper";
114
99
 
115
100
  // src/components/favorite/FavoriteIconButton.tsx
116
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
117
- var FavoriteIconButton = ({
118
- ref,
119
- children,
120
- favorite: favoriteProp,
121
- name,
122
- valueType,
123
- value,
124
- ...props
125
- }) => {
101
+ var FavoriteIconButton = /* @__PURE__ */ __name(({ ref, children, favorite: favoriteProp, name, valueType, value, ...props }) => {
126
102
  const [openPopper, setOpenPopper] = useState2(false);
127
103
  const [favorite, setFavorite] = useResetState(favoriteProp);
128
104
  const sharedRef = useShareForwardedRef(ref);
129
105
  const [buttonRef, dispatch] = useEvent(void 0, sharedRef);
130
- const onConfirmFavorite = (name2, newFavoriteState) => {
106
+ const onConfirmFavorite = /* @__PURE__ */ __name((name2, newFavoriteState) => {
131
107
  const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name2);
132
108
  dispatch("address", "favorite", JSON.stringify(favoriteEvent));
133
109
  setFavorite(newFavoriteState);
134
110
  setOpenPopper(false);
135
- };
111
+ }, "onConfirmFavorite");
136
112
  const starRef = useRef(null);
137
- return /* @__PURE__ */ jsxs3(
138
- IconButtonCondensed,
139
- {
140
- "aria-describedby": popperId,
141
- ref: buttonRef,
142
- onClick: (event) => {
143
- event.stopPropagation();
144
- setOpenPopper(!openPopper);
145
- },
146
- onTouchStart: (event) => {
147
- event.stopPropagation();
148
- setOpenPopper(!openPopper);
149
- },
150
- onMouseDown: (event) => event.stopPropagation(),
151
- sx: { lineHeight: 0, p: 0.25 },
152
- ...props,
153
- children: [
154
- /* @__PURE__ */ jsx4("span", { ref: starRef, children: /* @__PURE__ */ jsx4(FavoriteToggleSVG, { favorite }) }),
155
- /* @__PURE__ */ jsx4(
156
- FavoritePopper,
157
- {
158
- sx: { zIndex: 1301 },
159
- name,
160
- favorite,
161
- favoriteRef: starRef,
162
- open: openPopper,
163
- onConfirmFavorite,
164
- onClickAway: () => setOpenPopper(false)
165
- }
166
- ),
167
- children
168
- ]
169
- }
170
- );
171
- };
113
+ return /* @__PURE__ */ React4.createElement(IconButtonCondensed, {
114
+ "aria-describedby": popperId,
115
+ ref: buttonRef,
116
+ onClick: /* @__PURE__ */ __name((event) => {
117
+ event.stopPropagation();
118
+ setOpenPopper(!openPopper);
119
+ }, "onClick"),
120
+ onTouchStart: /* @__PURE__ */ __name((event) => {
121
+ event.stopPropagation();
122
+ setOpenPopper(!openPopper);
123
+ }, "onTouchStart"),
124
+ onMouseDown: /* @__PURE__ */ __name((event) => event.stopPropagation(), "onMouseDown"),
125
+ sx: {
126
+ lineHeight: 0,
127
+ p: 0.25
128
+ },
129
+ ...props
130
+ }, /* @__PURE__ */ React4.createElement("span", {
131
+ ref: starRef
132
+ }, /* @__PURE__ */ React4.createElement(FavoriteToggleSVG, {
133
+ favorite
134
+ })), /* @__PURE__ */ React4.createElement(FavoritePopper, {
135
+ sx: {
136
+ zIndex: 1301
137
+ },
138
+ name,
139
+ favorite,
140
+ favoriteRef: starRef,
141
+ open: openPopper,
142
+ onConfirmFavorite,
143
+ onClickAway: /* @__PURE__ */ __name(() => setOpenPopper(false), "onClickAway")
144
+ }), children);
145
+ }, "FavoriteIconButton");
172
146
  FavoriteIconButton.displayName = "FavoriteIconButton";
173
- var IconButtonCondensed = styled(IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
147
+ var IconButtonCondensed = styled(IconButton, {
148
+ name: "IconButtonCondensed"
149
+ })(({ theme }) => ({
174
150
  lineHeight: 0,
175
151
  padding: theme.spacing(0.25)
176
152
  }));
@@ -181,53 +157,43 @@ import { FlexRow } from "@xylabs/react-flexbox";
181
157
  import { Identicon } from "@xylabs/react-identicon";
182
158
  import { useEvent as useEvent2 } from "@xyo-network/react-event";
183
159
  import { EllipsizeBox, useShareForwardedRef as useShareForwardedRef2 } from "@xyo-network/react-shared";
184
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
185
- var AddressRenderRowBox = ({
186
- ref,
187
- address,
188
- children,
189
- disableSharedRef,
190
- favorite: favoriteProp = false,
191
- iconOnly,
192
- iconSize = 24,
193
- icons,
194
- name,
195
- showFavorite = false,
196
- ...props
197
- }) => {
160
+ import React5 from "react";
161
+ var AddressRenderRowBox = /* @__PURE__ */ __name(({ ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }) => {
198
162
  const theme = useTheme();
199
163
  const sharedRef = useShareForwardedRef2(ref);
200
164
  const [elementRef, dispatch] = useEvent2(void 0, sharedRef);
201
- return /* @__PURE__ */ jsxs4(
202
- FlexRow,
203
- {
204
- gap: 2,
205
- justifyContent: "flex-start",
206
- ref: elementRef,
207
- onClick: () => {
208
- if (address) {
209
- dispatch("address", "click", address);
210
- }
211
- },
212
- ...props,
213
- children: [
214
- icons && address ? /* @__PURE__ */ jsx5(ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx5(Identicon, { size: iconSize, value: address }) }) : null,
215
- iconOnly ? null : /* @__PURE__ */ jsx5(
216
- EllipsizeBox,
217
- {
218
- disableSharedRef,
219
- ellipsisPosition: "end",
220
- width: "100%",
221
- typographyProps: { fontSize: theme.typography.body1.fontSize },
222
- children: name ?? address
223
- }
224
- ),
225
- children,
226
- showFavorite && address ? /* @__PURE__ */ jsx5(FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
227
- ]
165
+ return /* @__PURE__ */ React5.createElement(FlexRow, {
166
+ gap: 2,
167
+ justifyContent: "flex-start",
168
+ ref: elementRef,
169
+ onClick: /* @__PURE__ */ __name(() => {
170
+ if (address) {
171
+ dispatch("address", "click", address);
172
+ }
173
+ }, "onClick"),
174
+ ...props
175
+ }, icons && address ? /* @__PURE__ */ React5.createElement(ListItemIcon, {
176
+ sx: {
177
+ minWidth: 0
228
178
  }
229
- );
230
- };
179
+ }, /* @__PURE__ */ React5.createElement(Identicon, {
180
+ size: iconSize,
181
+ value: address
182
+ })) : null, iconOnly ? null : /* @__PURE__ */ React5.createElement(EllipsizeBox, {
183
+ disableSharedRef,
184
+ ellipsisPosition: "end",
185
+ width: "100%",
186
+ typographyProps: {
187
+ fontSize: theme.typography.body1.fontSize
188
+ }
189
+ }, name ?? address), children, showFavorite && address ? /* @__PURE__ */ React5.createElement(FavoriteIconButton, {
190
+ name,
191
+ size: "small",
192
+ value: address,
193
+ valueType: "address",
194
+ favorite: favoriteProp
195
+ }) : null);
196
+ }, "AddressRenderRowBox");
231
197
  AddressRenderRowBox.displayName = "AddressRenderRowBox";
232
198
  export {
233
199
  AddressRenderRowBox,
package/dist/browser/index.mjs.map CHANGED
@@ -1 +1 @@
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 type { IconButtonProps } from '@mui/material'\nimport { IconButton, styled } from '@mui/material'\nimport { useResetState } from '@xylabs/react-hooks'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport type {\n MouseEvent, PropsWithChildren, TouchEvent,\n} from 'react'\nimport React, { useRef, useState } from 'react'\n\nimport type { FavoriteItemEvent } from '../lib/index.ts'\nimport { generateFavoriteEvent } from '../lib/index.ts'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG.tsx'\nimport { popperId } from './lib/index.ts'\nimport { FavoritePopper } from './Popper.tsx'\n\nexport interface FavoriteIconButtonProps extends PropsWithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = ({\n ref, children, favorite: favoriteProp, name, valueType, value, ...props\n}: FavoriteIconButtonProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useResetState(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: MouseEvent) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event: TouchEvent) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={(event: MouseEvent) => event.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\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 { Star as StarIcon, StarBorder as StarBorderIcon } from '@mui/icons-material'\nimport React from 'react'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n <>\n {favorite\n ? <StarIcon className=\"favorite-icon\" component=\"svg\" color=\"secondary\" fontSize=\"small\" />\n : <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />}\n </>\n)\n","export const popperId = 'favorite-popper'\n","import type { PopperProps } from '@mui/material'\nimport {\n Card, CardContent, ClickAwayListener, Fade, Popper, TextField,\n} from '@mui/material'\nimport type { RefObject } from 'react'\nimport React, { useState } from 'react'\n\nimport { popperId } from './lib/index.ts'\nimport { PopperButtonGroup } from './PopperButtonGroup.tsx'\n\nexport interface FavoritePopperProps extends PopperProps {\n favorite?: boolean\n favoriteRef?: RefObject<HTMLElement | null>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = (\n {\n ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props\n }: FavoritePopperProps,\n) => {\n const [name, setName] = useState(() => nameProp)\n\n return (\n <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>\n <Popper\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={e => e.stopPropagation()}\n onTouchStart={e => e.stopPropagation()}\n transition\n style={{ zIndex: 9999 }}\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 </Popper>\n </ClickAwayListener>\n )\n}\n\nFavoritePopper.displayName = 'FavoritePopper'\n","import { Delete as DeleteIcon, Star as StarIcon } from '@mui/icons-material'\nimport type { ButtonGroupProps } from '@mui/material'\nimport { Button, ButtonGroup } from '@mui/material'\nimport React from 'react'\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> = ({\n name, onConfirmFavorite, favorite, ...props\n}) => {\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 ? (\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 )\n : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { 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 React from 'react'\n\nimport { FavoriteIconButton } from './favorite/index.ts'\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 = (\n {\n ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props\n }: AddressRenderRowBoxProps & { ref?: React.RefObject<HTMLElement | null> },\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 ? (\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n )\n : null}\n {iconOnly\n ? null\n : (\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\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"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","names":["useState","StarIcon","jsx","jsx","jsxs","jsx","jsxs","useState","name","useEvent","useShareForwardedRef","jsx","jsxs","useShareForwardedRef","useEvent"]}
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 type { IconButtonProps } from '@mui/material'\nimport { IconButton, styled } from '@mui/material'\nimport { useResetState } from '@xylabs/react-hooks'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport type {\n MouseEvent, PropsWithChildren, TouchEvent,\n} from 'react'\nimport React, { useRef, useState } from 'react'\n\nimport type { FavoriteItemEvent } from '../lib/index.ts'\nimport { generateFavoriteEvent } from '../lib/index.ts'\nimport { FavoriteToggleSVG } from './FavoriteToggleSVG.tsx'\nimport { popperId } from './lib/index.ts'\nimport { FavoritePopper } from './Popper.tsx'\n\nexport interface FavoriteIconButtonProps extends PropsWithChildren, IconButtonProps {\n favorite?: FavoriteItemEvent['favorite']\n name?: FavoriteItemEvent['name']\n value?: string\n valueType?: FavoriteItemEvent['favoriteType']\n}\n\nexport const FavoriteIconButton = ({\n ref, children, favorite: favoriteProp, name, valueType, value, ...props\n}: FavoriteIconButtonProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {\n const [openPopper, setOpenPopper] = useState(false)\n\n const [favorite, setFavorite] = useResetState(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: MouseEvent) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event: TouchEvent) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={(event: MouseEvent) => event.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\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 { Star as StarIcon, StarBorder as StarBorderIcon } from '@mui/icons-material'\nimport React from 'react'\n\nexport const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (\n <>\n {favorite\n ? <StarIcon className=\"favorite-icon\" component=\"svg\" color=\"secondary\" fontSize=\"small\" />\n : <StarBorderIcon className=\"favorite-icon\" fontSize=\"small\" />}\n </>\n)\n","export const popperId = 'favorite-popper'\n","import type { PopperProps } from '@mui/material'\nimport {\n Card, CardContent, ClickAwayListener, Fade, Popper, TextField,\n} from '@mui/material'\nimport type { RefObject } from 'react'\nimport React, { useState } from 'react'\n\nimport { popperId } from './lib/index.ts'\nimport { PopperButtonGroup } from './PopperButtonGroup.tsx'\n\nexport interface FavoritePopperProps extends PopperProps {\n favorite?: boolean\n favoriteRef?: RefObject<HTMLElement | null>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = (\n {\n ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props\n }: FavoritePopperProps,\n) => {\n const [name, setName] = useState(() => nameProp)\n\n return (\n <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>\n <Popper\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={e => e.stopPropagation()}\n onTouchStart={e => e.stopPropagation()}\n transition\n style={{ zIndex: 9999 }}\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 </Popper>\n </ClickAwayListener>\n )\n}\n\nFavoritePopper.displayName = 'FavoritePopper'\n","import { Delete as DeleteIcon, Star as StarIcon } from '@mui/icons-material'\nimport type { ButtonGroupProps } from '@mui/material'\nimport { Button, ButtonGroup } from '@mui/material'\nimport React from 'react'\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> = ({\n name, onConfirmFavorite, favorite, ...props\n}) => {\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 ? (\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 )\n : null}\n </ButtonGroup>\n )\n}\n","import { ListItemIcon, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { 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 React from 'react'\n\nimport { FavoriteIconButton } from './favorite/index.ts'\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 = (\n {\n ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props\n }: AddressRenderRowBoxProps & { ref?: React.RefObject<HTMLElement | null> },\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 ? (\n <ListItemIcon sx={{ minWidth: 0 }}>\n <Identicon size={iconSize} value={address} />\n </ListItemIcon>\n )\n : null}\n {iconOnly\n ? null\n : (\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\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":";;;;AACA,SAASA,YAAYC,cAAc;AACnC,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AACzB,SAASC,4BAA4B;AAIrC,OAAOC,UAASC,QAAQC,YAAAA,iBAAgB;;;ACCjC,IAAMC,wBAAwB,wBAACC,UAAoBC,cAA6BC,eAAwBC,UAAsC;EACnJH,UAAU,CAAC,CAACA;EACZC;EACAC;EACAC;AACF,IALqC;;;ACTrC,SAASC,QAAQC,UAAUC,cAAcC,sBAAsB;AAC/D,OAAOC,WAAW;AAEX,IAAMC,oBAAsD,wBAAC,EAAEC,SAAQ,MAC5E,sBAAA,cAAA,MAAA,UAAA,MACGA,WACG,sBAAA,cAACC,UAAAA;EAASC,WAAU;EAAgBC,WAAU;EAAMC,OAAM;EAAYC,UAAS;KAC/E,sBAAA,cAACC,gBAAAA;EAAeJ,WAAU;EAAgBG,UAAS;KAJQ;;;ACH5D,IAAME,WAAW;;;ACCxB,SACEC,MAAMC,aAAaC,mBAAmBC,MAAMC,QAAQC,iBAC/C;AAEP,OAAOC,UAASC,gBAAgB;;;ACLhC,SAASC,UAAUC,YAAYC,QAAQC,iBAAgB;AAEvD,SAASC,QAAQC,mBAAmB;AACpC,OAAOC,YAAW;AAQX,IAAMC,oBAAmD,wBAAC,EAC/DC,MAAMC,mBAAmBC,UAAU,GAAGC,MAAAA,MACvC;AACC,SACE,gBAAAC,OAAA,cAACC,aAAgBF,OACf,gBAAAC,OAAA,cAACE,QAAAA;IACCC,OAAM;IACNC,SAAQ;IACRC,SAAS,wBAACC,MAAAA;AACRA,QAAEC,gBAAe;AACjBV,0BAAoBD,MAAM,IAAA;IAC5B,GAHS;KAKT,gBAAAI,OAAA,cAACQ,WAAAA,IAAAA,CAAAA,GAEFV,WAEK,gBAAAE,OAAA,cAACE,QAAAA;IACCC,OAAM;IACNC,SAAQ;IACRC,SAAS,wBAACC,MAAAA;AACRA,QAAEC,gBAAe;AACjBV,0BAAoBD,MAAM,KAAA;IAC5B,GAHS;KAKT,gBAAAI,OAAA,cAACS,YAAAA,IAAAA,CAAAA,IAGL,IAAA;AAGV,GA/BgE;;;ADMzD,IAAMC,iBAAiB,wBAC5B,EACEC,KAAKC,MAAMC,UAAUC,UAAUC,aAAaC,aAAaC,mBAAmB,GAAGC,MAAAA,MAC3D;AAEtB,QAAM,CAACN,MAAMO,OAAAA,IAAWC,SAAS,MAAMP,QAAAA;AAEvC,SACE,gBAAAQ,OAAA,cAACC,mBAAAA;IAAkBN,aAAaA,gBAAgB,MAAM;KACpD,gBAAAK,OAAA,cAACE,QAAAA;IACCC,IAAIC;IACJC,UAAUX,aAAaY;IACvBC,SAASC,wBAAAA,MAAKA,EAAEC,gBAAe,GAAtBD;IACTE,cAAcF,wBAAAA,MAAKA,EAAEC,gBAAe,GAAtBD;IACdG,YAAAA;IACAC,OAAO;MAAEC,QAAQ;IAAK;IACtBvB;IACC,GAAGO;KAEH,CAAC,EAAEiB,gBAAe,MACjB,gBAAAd,OAAA,cAACe,MAAAA;IAAM,GAAGD;IAAiBE,SAAS;KAClC,gBAAAhB,OAAA,cAACiB,MAAAA,MACC,gBAAAjB,OAAA,cAACkB,aAAAA;IAAYC,IAAI;MAAEC,SAAS;MAAQC,KAAK;IAAE;KACzC,gBAAArB,OAAA,cAACsB,WAAAA;IACCC,WAAAA;IACAC,OAAM;IACNC,aAAY;IACZC,MAAK;IACLC,OAAOpC,QAAQ;IACfqC,UAAUpB,wBAAAA,MAAKV,QAAQU,EAAEqB,OAAOF,KAAK,GAA3BnB;MAEZ,gBAAAR,OAAA,cAAC8B,mBAAAA;IAAkBrC;IAAoBG;IAAsCL;;AAQ7F,GAvC8B;AAyC9BF,eAAe0C,cAAc;;;AJnCtB,IAAMC,qBAAqB,wBAAC,EACjCC,KAAKC,UAAUC,UAAUC,cAAcC,MAAMC,WAAWC,OAAO,GAAGC,MAAAA,MACY;AAC9E,QAAM,CAACC,YAAYC,aAAAA,IAAiBC,UAAS,KAAA;AAE7C,QAAM,CAACR,UAAUS,WAAAA,IAAeC,cAAcT,YAAAA;AAE9C,QAAMU,YAAYC,qBAAqBd,GAAAA;AACvC,QAAM,CAACe,WAAWC,QAAAA,IAAYC,SAASC,QAAWL,SAAAA;AAElD,QAAMM,oBAAoB,wBAACf,OAAegB,qBAAAA;AACxC,UAAMC,gBAAgBC,sBAAsB,CAAC,CAACF,kBAAkBf,WAAWC,OAAOF,KAAAA;AAClFY,aAAS,WAAW,YAAYO,KAAKC,UAAUH,aAAAA,CAAAA;AAC/CV,gBAAYS,gBAAAA;AACZX,kBAAc,KAAA;EAChB,GAL0B;AAO1B,QAAMgB,UAAUC,OAAwB,IAAA;AAExC,SACE,gBAAAC,OAAA,cAACC,qBAAAA;IACCC,oBAAkBC;IAClB9B,KAAKe;IACLgB,SAAS,wBAACC,UAAAA;AACRA,YAAMC,gBAAe;AACrBxB,oBAAc,CAACD,UAAAA;IACjB,GAHS;IAIT0B,cAAc,wBAACF,UAAAA;AACbA,YAAMC,gBAAe;AACrBxB,oBAAc,CAACD,UAAAA;IACjB,GAHc;IAId2B,aAAa,wBAACH,UAAsBA,MAAMC,gBAAe,GAA5C;IACbG,IAAI;MAAEC,YAAY;MAAGC,GAAG;IAAK;IAC5B,GAAG/B;KAEJ,gBAAAoB,OAAA,cAACY,QAAAA;IAAKvC,KAAKyB;KACT,gBAAAE,OAAA,cAACa,mBAAAA;IAAkBtC;OAErB,gBAAAyB,OAAA,cAACc,gBAAAA;IACCL,IAAI;MAAEM,QAAQ;IAAK;IACnBtC;IACAF;IACAyC,aAAalB;IACbmB,MAAMpC;IACNW;IACA0B,aAAa,6BAAMpC,cAAc,KAAA,GAApB;MAEdR,QAAAA;AAGP,GAlDkC;AAoDlCF,mBAAmB+C,cAAc;AAEjC,IAAMlB,sBAAsBmB,OAAOC,YAAY;EAAE5C,MAAM;AAAsB,CAAA,EAAG,CAAC,EAAE6C,MAAK,OAAQ;EAC9FZ,YAAY;EACZa,SAASD,MAAME,QAAQ,IAAA;AACzB,EAAA;;;AMhFA,SAASC,cAAcC,gBAAgB;AAEvC,SAASC,eAAe;AACxB,SAASC,iBAAiB;AAC1B,SAASC,YAAAA,iBAAgB;AACzB,SAASC,cAAcC,wBAAAA,6BAA4B;AACnD,OAAOC,YAAW;AAeX,IAAMC,sBAAsB,wBACjC,EACEC,KAAKC,SAASC,UAAUC,kBAAkBC,UAAUC,eAAe,OAAOC,UAAUC,WAAW,IAAIC,OAAOC,MAAMC,eAAe,OAAO,GAAGC,MAAAA,MAChE;AAE3E,QAAMC,QAAQC,SAAAA;AAEd,QAAMC,YAAYC,sBAAqBf,GAAAA;AACvC,QAAM,CAACgB,YAAYC,QAAAA,IAAYC,UAASC,QAAWL,SAAAA;AAEnD,SACE,gBAAAM,OAAA,cAACC,SAAAA;IACCC,KAAK;IACLC,gBAAe;IACfvB,KAAKgB;IACLQ,SAAS,6BAAA;AACP,UAAIvB,SAAS;AACXgB,iBAAS,WAAW,SAAShB,OAAAA;MAC/B;IACF,GAJS;IAKR,GAAGU;KAEHH,SAASP,UAEJ,gBAAAmB,OAAA,cAACK,cAAAA;IAAaC,IAAI;MAAEC,UAAU;IAAE;KAC9B,gBAAAP,OAAA,cAACQ,WAAAA;IAAUC,MAAMtB;IAAUuB,OAAO7B;QAGtC,MACHK,WACG,OAEE,gBAAAc,OAAA,cAACW,cAAAA;IACC5B;IACA6B,kBAAiB;IACjBC,OAAM;IACNC,iBAAiB;MAAEC,UAAUvB,MAAMwB,WAAWC,MAAMF;IAAS;KAE5D1B,QAAQR,OAAAA,GAGhBC,UACAQ,gBAAgBT,UACb,gBAAAmB,OAAA,cAACkB,oBAAAA;IAAmB7B;IAAYoB,MAAK;IAAQC,OAAO7B;IAASsC,WAAU;IAAUnC,UAAUC;OAC3F,IAAA;AAGV,GA/CmC;AAiDnCN,oBAAoByC,cAAc;","names":["IconButton","styled","useResetState","useEvent","useShareForwardedRef","React","useRef","useState","generateFavoriteEvent","favorite","favoriteType","favoriteValue","name","Star","StarIcon","StarBorder","StarBorderIcon","React","FavoriteToggleSVG","favorite","StarIcon","className","component","color","fontSize","StarBorderIcon","popperId","Card","CardContent","ClickAwayListener","Fade","Popper","TextField","React","useState","Delete","DeleteIcon","Star","StarIcon","Button","ButtonGroup","React","PopperButtonGroup","name","onConfirmFavorite","favorite","props","React","ButtonGroup","Button","title","variant","onClick","e","stopPropagation","StarIcon","DeleteIcon","FavoritePopper","ref","name","nameProp","favorite","favoriteRef","onClickAway","onConfirmFavorite","props","setName","useState","React","ClickAwayListener","Popper","id","popperId","anchorEl","current","onClick","e","stopPropagation","onTouchStart","transition","style","zIndex","TransitionProps","Fade","timeout","Card","CardContent","sx","display","gap","TextField","autoFocus","label","placeholder","size","value","onChange","target","PopperButtonGroup","displayName","FavoriteIconButton","ref","children","favorite","favoriteProp","name","valueType","value","props","openPopper","setOpenPopper","useState","setFavorite","useResetState","sharedRef","useShareForwardedRef","buttonRef","dispatch","useEvent","undefined","onConfirmFavorite","newFavoriteState","favoriteEvent","generateFavoriteEvent","JSON","stringify","starRef","useRef","React","IconButtonCondensed","aria-describedby","popperId","onClick","event","stopPropagation","onTouchStart","onMouseDown","sx","lineHeight","p","span","FavoriteToggleSVG","FavoritePopper","zIndex","favoriteRef","open","onClickAway","displayName","styled","IconButton","theme","padding","spacing","ListItemIcon","useTheme","FlexRow","Identicon","useEvent","EllipsizeBox","useShareForwardedRef","React","AddressRenderRowBox","ref","address","children","disableSharedRef","favorite","favoriteProp","iconOnly","iconSize","icons","name","showFavorite","props","theme","useTheme","sharedRef","useShareForwardedRef","elementRef","dispatch","useEvent","undefined","React","FlexRow","gap","justifyContent","onClick","ListItemIcon","sx","minWidth","Identicon","size","value","EllipsizeBox","ellipsisPosition","width","typographyProps","fontSize","typography","body1","FavoriteIconButton","valueType","displayName"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xyo-network/react-address-render",
3
- "version": "7.4.1",
3
+ "version": "7.5.0",
4
4
  "description": "Common React library for all XYO projects that use React",
5
5
  "keywords": [
6
6
  "xyo",
@@ -43,29 +43,30 @@
43
43
  "src"
44
44
  ],
45
45
  "dependencies": {
46
- "@xylabs/react-flexbox": "~7.1.8",
47
- "@xylabs/react-hooks": "~7.1.8",
48
- "@xylabs/react-identicon": "~7.1.8",
49
- "@xyo-network/react-event": "^7.4.1",
50
- "@xyo-network/react-shared": "^7.4.1"
46
+ "@xylabs/react-flexbox": "~7.1.9",
47
+ "@xylabs/react-hooks": "~7.1.9",
48
+ "@xylabs/react-identicon": "~7.1.9",
49
+ "@xylabs/sdk-js": "~5.0.64",
50
+ "@xyo-network/react-event": "7.5.0",
51
+ "@xyo-network/react-shared": "7.5.0"
51
52
  },
52
53
  "devDependencies": {
53
- "@mui/icons-material": "~7.3.6",
54
- "@mui/material": "~7.3.6",
55
- "@storybook/react-vite": "~10.1.4",
56
- "@types/react": "^19.2.7",
57
- "@xylabs/hex": "~5.0.50",
58
- "@xylabs/ts-scripts-yarn3": "~7.2.8",
59
- "@xylabs/tsconfig": "~7.2.8",
60
- "@xylabs/tsconfig-dom": "~7.2.8",
61
- "@xylabs/tsconfig-react": "~7.2.8",
54
+ "@mui/icons-material": "~7.3.7",
55
+ "@mui/material": "~7.3.7",
56
+ "@storybook/react-vite": "~10.2.1",
57
+ "@types/react": "^19.2.10",
58
+ "@xylabs/hex": "~5.0.64",
59
+ "@xylabs/ts-scripts-yarn3": "~7.3.2",
60
+ "@xylabs/tsconfig": "~7.3.2",
61
+ "@xylabs/tsconfig-dom": "~7.3.2",
62
+ "@xylabs/tsconfig-react": "~7.3.2",
62
63
  "ethers": "~6.16.0",
63
- "react": "^19.2.1",
64
- "react-dom": "^19.2.1",
65
- "react-router-dom": "^7.10.0",
66
- "storybook": "~10.1.4",
64
+ "react": "^19.2.4",
65
+ "react-dom": "^19.2.4",
66
+ "react-router-dom": "^7.13.0",
67
+ "storybook": "~10.2.1",
67
68
  "typescript": "^5.9.3",
68
- "vite": "~7.2.6"
69
+ "vite": "~7.3.1"
69
70
  },
70
71
  "peerDependencies": {
71
72
  "@mui/icons-material": ">=6 <8",
@@ -78,4 +79,4 @@
78
79
  "access": "public"
79
80
  },
80
81
  "docs": "dist/docs.json"
81
- }
82
+ }
package/src/components/RenderRowBox.stories.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { Meta, StoryFn } from '@storybook/react-vite'
2
- import { asAddress, toHex } from '@xylabs/hex'
2
+ import { asAddress, toHex } from '@xylabs/sdk-js'
3
3
  import { useEvent } from '@xyo-network/react-event'
4
4
  import { randomBytes } from 'ethers'
5
5
  import React, { useState } from 'react'