@xyo-network/react-address-render 2.47.2 → 2.47.4

package/dist/esm/components/RenderRowBox.js

@@ -6,11 +6,11 @@ import { useXyoEvent } from '@xyo-network/react-event';
 import { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared';
 import { forwardRef } from 'react';
 import { FavoriteIconButton } from './favorite';
-export const AddressRenderRowBox = forwardRef(({ address, children, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, showFavorite = false, ...props }, ref) => {
+export const AddressRenderRowBox = forwardRef(({ address, alias, children, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
     const theme = useTheme();
     const sharedRef = useShareForwardedRef(ref);
     const [elementRef, dispatch] = useXyoEvent(undefined, sharedRef);
-    return (_jsxs(FlexGrowRow, { gap: 2, justifyContent: "flex-start", ref: elementRef, onClick: () => (address ? dispatch('address', 'click', address) : undefined), ...props, children: [icons && address ? (_jsx(ListItemIcon, { sx: { minWidth: 0 }, children: _jsx(Identicon, { size: iconSize, value: address }) })) : null, iconOnly ? null : (_jsx(ListItemText, { children: _jsx(EllipsizeBox, { ellipsisPosition: 'end', width: "100%", typographyProps: { fontSize: theme.typography.body1.fontSize }, children: address }) })), children, showFavorite && address ? _jsx(FavoriteIconButton, { size: 'small', address: address, favorite: favoriteProp }) : null] }));
+    return (_jsxs(FlexGrowRow, { gap: 2, justifyContent: "flex-start", ref: elementRef, onClick: () => (address ? dispatch('address', 'click', address) : undefined), ...props, children: [icons && address ? (_jsx(ListItemIcon, { sx: { minWidth: 0 }, children: _jsx(Identicon, { size: iconSize, value: address }) })) : null, iconOnly ? null : (_jsx(ListItemText, { children: _jsx(EllipsizeBox, { ellipsisPosition: 'end', width: "100%", typographyProps: { fontSize: theme.typography.body1.fontSize }, children: alias ?? name ?? address }) })), children, showFavorite && address ? _jsx(FavoriteIconButton, { alias: alias, size: 'small', address: address, favorite: favoriteProp }) : null] }));
 });
 AddressRenderRowBox.displayName = 'AddressRenderRowBox';
 //# sourceMappingURL=RenderRowBox.js.map

package/dist/esm/components/RenderRowBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderRowBox.js","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAa/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAC3C,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7H,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAEhE,OAAO,CACL,MAAC,WAAW,IACV,GAAG,EAAE,CAAC,EACN,cAAc,EAAC,YAAY,EAC3B,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KACxE,KAAK,aAER,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,CAClB,KAAC,YAAY,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,YAC/B,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAI,GAChC,CAChB,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,KAAC,YAAY,cACX,KAAC,YAAY,IAAC,gBAAgB,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,YAC/G,OAAO,GACK,GACF,CAChB,EACA,QAAQ,EACR,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,IACrG,CACf,CAAA;AACH,CAAC,CACF,CAAA;AAED,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA"}
+{"version":3,"file":"RenderRowBox.js","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAe/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAC3C,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1I,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAEhE,OAAO,CACL,MAAC,WAAW,IACV,GAAG,EAAE,CAAC,EACN,cAAc,EAAC,YAAY,EAC3B,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KACxE,KAAK,aAER,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,CAClB,KAAC,YAAY,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,YAC/B,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAI,GAChC,CAChB,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,KAAC,YAAY,cACX,KAAC,YAAY,IAAC,gBAAgB,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,YAC/G,KAAK,IAAI,IAAI,IAAI,OAAO,GACZ,GACF,CAChB,EACA,QAAQ,EACR,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,IACnH,CACf,CAAA;AACH,CAAC,CACF,CAAA;AAED,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA"}

package/dist/esm/components/favorite/FavoriteIconButton.js

@@ -4,28 +4,36 @@ import StarBorderIcon from '@mui/icons-material/StarBorder';
 import { IconButton } from '@mui/material';
 import { useXyoEvent } from '@xyo-network/react-event';
 import { useShareForwardedRef } from '@xyo-network/react-shared';
-import { forwardRef, useEffect, useState } from 'react';
-export const FavoriteIconButton = forwardRef(({ address, children, favorite: favoriteProp, ...props }, ref) => {
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { popperId } from './lib';
+import { FavoritePopper } from './Popper';
+export const FavoriteIconButton = forwardRef(({ address, alias, children, favorite: favoriteProp, ...props }, ref) => {
+    const [openPopper, setOpenPopper] = useState(false);
     const [favorite, setFavorite] = useState(favoriteProp);
     useEffect(() => {
         setFavorite(favoriteProp);
     }, [favoriteProp]);
     const sharedRef = useShareForwardedRef(ref);
     const [buttonRef, dispatch] = useXyoEvent(undefined, sharedRef);
-    return (_jsxs(IconButton, { ref: buttonRef, 
+    const onConfirmFavorite = (alias, newFavoriteState) => {
+        setFavorite(() => {
+            const favoriteEvent = {
+                address,
+                alias,
+                favorite: !!newFavoriteState,
+            };
+            dispatch('address', 'favorite', JSON.stringify(favoriteEvent));
+            return newFavoriteState;
+        });
+        setOpenPopper(false);
+    };
+    const starRef = useRef(null);
+    return (_jsxs(IconButton, { ref: buttonRef, "aria-describedby": popperId, 
         // used to prevent parent items from rippling when IconButton is clicked
         onMouseDown: (e) => e.stopPropagation(), onClick: (event) => {
             event.stopPropagation();
-            setFavorite((current) => {
-                const newFavoriteState = !current;
-                const favoriteEvent = {
-                    address,
-                    favorite: newFavoriteState,
-                };
-                dispatch('address', 'favorite', JSON.stringify(favoriteEvent));
-                return newFavoriteState;
-            });
-        }, ...props, children: [favorite ? _jsx(StarIcon, { color: "secondary" }) : _jsx(StarBorderIcon, {}), children] }));
+            setOpenPopper(true);
+        }, ...props, children: [_jsx("span", { ref: starRef, children: favorite ? _jsx(StarIcon, { component: 'svg', color: "secondary" }) : _jsx(StarBorderIcon, {}) }), _jsx(FavoritePopper, { alias: alias, favorite: favorite, favoriteRef: starRef, open: openPopper, onConfirmFavorite: onConfirmFavorite, onClickAway: () => setOpenPopper(false) }), children] }));
 });
 FavoriteIconButton.displayName = 'FavoriteIconButton';
 //# sourceMappingURL=FavoriteIconButton.js.map

package/dist/esm/components/favorite/FavoriteIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoriteIconButton.js","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAYvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAC1C,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,YAAY,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAE/D,OAAO,CACL,MAAC,UAAU,IACT,GAAG,EAAE,SAAS;QACd,wEAAwE;QACxE,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,WAAW,CAAC,CAAC,OAAO,EAAE,EAAE;gBACtB,MAAM,gBAAgB,GAAG,CAAC,OAAO,CAAA;gBACjC,MAAM,aAAa,GAAkB;oBACnC,OAAO;oBACP,QAAQ,EAAE,gBAAgB;iBAC3B,CAAA;gBACD,QAAQ,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;gBAC9D,OAAO,gBAAgB,CAAA;YACzB,CAAC,CAAC,CAAA;QACJ,CAAC,KACG,KAAK,aAER,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,GAAG,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,EAC9D,QAAQ,IACE,CACd,CAAA;AACH,CAAC,CACF,CAAA;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA"}
+{"version":3,"file":"FavoriteIconButton.js","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAezC,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAC1C,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,YAAY,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAC/D,MAAM,iBAAiB,GAAG,CAAC,KAAc,EAAE,gBAA0B,EAAE,EAAE;QACvE,WAAW,CAAC,GAAG,EAAE;YACf,MAAM,aAAa,GAAkB;gBACnC,OAAO;gBACP,KAAK;gBACL,QAAQ,EAAE,CAAC,CAAC,gBAAgB;aAC7B,CAAA;YACD,QAAQ,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;YAC9D,OAAO,gBAAgB,CAAA;QACzB,CAAC,CAAC,CAAA;QACF,aAAa,CAAC,KAAK,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAE7C,OAAO,CACL,MAAC,UAAU,IACT,GAAG,EAAE,SAAS,sBACI,QAAQ;QAC1B,wEAAwE;QACxE,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,aAAa,CAAC,IAAI,CAAC,CAAA;QACrB,CAAC,KACG,KAAK,aAET,eAAM,GAAG,EAAE,OAAO,YAAG,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAC,WAAW,GAAG,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,GAAQ,EAC7G,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,OAAO,EACpB,IAAI,EAAE,UAAU,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,GACvC,EACD,QAAQ,IACE,CACd,CAAA;AACH,CAAC,CACF,CAAA;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA"}

package/dist/esm/components/favorite/Popper.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, ClickAwayListener, Fade, Popper, TextField } from '@mui/material';
+import { forwardRef, useEffect, useState } from 'react';
+import { popperId } from './lib';
+import { PopperButtonGroup } from './PopperButtonGroup';
+export const FavoritePopper = forwardRef(({ alias: aliasProp, favorite, favoriteRef, onClickAway = () => {
+    return;
+}, onConfirmFavorite, ...props }, ref) => {
+    const [alias, setAlias] = useState();
+    useEffect(() => {
+        setAlias(aliasProp);
+    }, [aliasProp]);
+    return (_jsx(ClickAwayListener, { onClickAway: onClickAway, children: _jsx(Popper, { id: popperId, anchorEl: favoriteRef?.current, transition: true, ref: ref, ...props, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 350, children: _jsx(Card, { children: _jsxs(CardContent, { sx: { display: 'flex', gap: 1 }, children: [_jsx(TextField, { autoFocus: true, label: "Favorite Alias", placeholder: "optional", size: "small", value: alias ?? '', onChange: (e) => setAlias(e.target.value) }), _jsx(PopperButtonGroup, { favorite: favorite, onConfirmFavorite: onConfirmFavorite, alias: alias })] }) }) })) }) }));
+});
+FavoritePopper.displayName = 'FavoritePopper';
+//# sourceMappingURL=Popper.js.map

package/dist/esm/components/favorite/Popper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.js","sourceRoot":"","sources":["../../../../src/components/favorite/Popper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAe,SAAS,EAAE,MAAM,eAAe,CAAA;AAC1G,OAAO,EAAE,UAAU,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AASvD,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,CACE,EACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,WAAW,EACX,WAAW,GAAG,GAAG,EAAE;IACjB,OAAM;AACR,CAAC,EACD,iBAAiB,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAU,CAAA;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,SAAS,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,KAAC,iBAAiB,IAAC,WAAW,EAAE,WAAW,YACzC,KAAC,MAAM,IAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,QAAC,GAAG,EAAE,GAAG,KAAM,KAAK,YACjF,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACxB,KAAC,IAAI,OAAK,eAAe,EAAE,OAAO,EAAE,GAAG,YACrC,KAAC,IAAI,cACH,MAAC,WAAW,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,aAC1C,KAAC,SAAS,IACR,SAAS,QACT,KAAK,EAAC,gBAAgB,EACtB,WAAW,EAAC,UAAU,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACzC,EACF,KAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,GAAI,IACjF,GACT,GACF,CACR,GACM,GACS,CACrB,CAAA;AACH,CAAC,CACF,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA"}

package/dist/esm/components/favorite/PopperButtonGroup.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DeleteIcon from '@mui/icons-material/Delete';
+import StarIcon from '@mui/icons-material/Star';
+import { Button, ButtonGroup } from '@mui/material';
+export const PopperButtonGroup = ({ alias, onConfirmFavorite, favorite, ...props }) => {
+    return (_jsxs(ButtonGroup, { ...props, children: [_jsx(Button, { variant: "contained", onClick: (e) => {
+                    e.stopPropagation();
+                    onConfirmFavorite?.(alias, true);
+                }, children: _jsx(StarIcon, {}) }), favorite ? (_jsx(Button, { variant: "contained", onClick: (e) => {
+                    e.stopPropagation();
+                    onConfirmFavorite?.(alias, false);
+                }, children: _jsx(DeleteIcon, {}) })) : null] }));
+};
+//# sourceMappingURL=PopperButtonGroup.js.map

package/dist/esm/components/favorite/PopperButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopperButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/favorite/PopperButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAA;AACnD,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAQrE,MAAM,CAAC,MAAM,iBAAiB,GAAkC,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnH,OAAO,CACL,MAAC,WAAW,OAAK,KAAK,aACpB,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,iBAAiB,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;gBAClC,CAAC,YAED,KAAC,QAAQ,KAAG,GACL,EACR,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,iBAAiB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;gBACnC,CAAC,YAED,KAAC,UAAU,KAAG,GACP,CACV,CAAC,CAAC,CAAC,IAAI,IACI,CACf,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/favorite/lib/PopperId.js

@@ -0,0 +1,2 @@
+export const popperId = 'favorite-popper';
+//# sourceMappingURL=PopperId.js.map

package/dist/esm/components/favorite/lib/PopperId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopperId.js","sourceRoot":"","sources":["../../../../../src/components/favorite/lib/PopperId.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,iBAAiB,CAAA"}

package/dist/esm/components/favorite/lib/index.js

@@ -0,0 +1,2 @@
+export * from './PopperId';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/favorite/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/favorite/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/types/components/RenderRowBox.d.ts

@@ -3,10 +3,12 @@ import { FlexBoxProps } from '@xylabs/react-flexbox';
 import { WithChildren } from '@xylabs/react-shared';
 export interface AddressRenderRowBoxPropsBase {
     address?: string | null;
+    alias?: string;
     favorite?: boolean;
     iconOnly?: boolean;
     iconSize?: number;
     icons?: boolean;
+    name?: string;
     showFavorite?: boolean;
 }
 export interface AddressRenderRowBoxProps extends WithChildren, AddressRenderRowBoxPropsBase, FlexBoxProps {

package/dist/types/components/RenderRowBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderRowBox.d.ts","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAe,MAAM,uBAAuB,CAAA;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAOnD,MAAM,WAAW,4BAA4B;IAC3C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,YAAY,EAAE,4BAA4B,EAAE,YAAY;CAAG;AAE7G,eAAO,MAAM,mBAAmB,kHAgC/B,CAAA"}
+{"version":3,"file":"RenderRowBox.d.ts","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAe,MAAM,uBAAuB,CAAA;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAOnD,MAAM,WAAW,4BAA4B;IAC3C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,YAAY,EAAE,4BAA4B,EAAE,YAAY;CAAG;AAE7G,eAAO,MAAM,mBAAmB,kHAgC/B,CAAA"}

package/dist/types/components/favorite/FavoriteIconButton.d.ts

@@ -3,10 +3,12 @@ import { IconButtonProps } from '@mui/material';
 import { WithChildren } from '@xylabs/react-shared';
 export interface FavoriteEvent {
     address?: string;
+    alias?: string;
     favorite: boolean;
 }
 export interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {
     address?: string;
+    alias?: string;
     favorite?: boolean;
 }
 export declare const FavoriteIconButton: import("react").ForwardRefExoticComponent<Omit<FavoriteIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/favorite/FavoriteIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAKnD,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,uBAAwB,SAAQ,YAAY,EAAE,eAAe;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,kBAAkB,oIAkC9B,CAAA"}
+{"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAQnD,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,uBAAwB,SAAQ,YAAY,EAAE,eAAe;IAE5E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,kBAAkB,oIAmD9B,CAAA"}

package/dist/types/components/favorite/Popper.d.ts

@@ -0,0 +1,11 @@
+import { PopperProps } from '@mui/material';
+import { RefObject } from 'react';
+export interface FavoritePopperProps extends PopperProps {
+    alias?: string;
+    favorite?: boolean;
+    favoriteRef?: RefObject<HTMLElement>;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onConfirmFavorite?: (alias?: string, newFavoriteState?: boolean) => void;
+}
+export declare const FavoritePopper: import("react").ForwardRefExoticComponent<Omit<FavoritePopperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Popper.d.ts.map

package/dist/types/components/favorite/Popper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsD,WAAW,EAAa,MAAM,eAAe,CAAA;AAC1G,OAAO,EAAc,SAAS,EAAuB,MAAM,OAAO,CAAA;AAKlE,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAA;IACtD,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACzE;AACD,eAAO,MAAM,cAAc,6HA2C1B,CAAA"}

package/dist/types/components/favorite/PopperButtonGroup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonGroupProps } from '@mui/material';
+export interface FavoritePopperProps extends ButtonGroupProps {
+    alias?: string;
+    favorite?: boolean;
+    onConfirmFavorite?: (alias?: string, newFavoriteState?: boolean) => void;
+}
+export declare const PopperButtonGroup: React.FC<FavoritePopperProps>;
+//# sourceMappingURL=PopperButtonGroup.d.ts.map

package/dist/types/components/favorite/PopperButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopperButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/PopperButtonGroup.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAuB,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAErE,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACzE;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyB3D,CAAA"}

package/dist/types/components/favorite/lib/PopperId.d.ts

@@ -0,0 +1,2 @@
+export declare const popperId = "favorite-popper";
+//# sourceMappingURL=PopperId.d.ts.map

package/dist/types/components/favorite/lib/PopperId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopperId.d.ts","sourceRoot":"","sources":["../../../../../src/components/favorite/lib/PopperId.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,oBAAoB,CAAA"}

package/dist/types/components/favorite/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PopperId';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/favorite/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/favorite/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/package.json

@@ -13,8 +13,8 @@
     "@xylabs/react-flexbox": "^2.16.11",
     "@xylabs/react-identicon": "^2.16.11",
     "@xylabs/react-shared": "^2.16.11",
-    "@xyo-network/react-event": "^2.47.2",
-    "@xyo-network/react-shared": "^2.47.2"
+    "@xyo-network/react-event": "^2.47.4",
+    "@xyo-network/react-shared": "^2.47.4"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5",
@@ -76,5 +76,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.47.2"
+  "version": "2.47.4"
 }

package/src/components/RenderRowBox.stories.tsx

@@ -1,7 +1,9 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { Account } from '@xyo-network/account'
 import { useXyoEvent } from '@xyo-network/react-event'
+import { useState } from 'react'
 
+import { FavoriteEvent } from './favorite'
 import { AddressRenderRowBox } from './RenderRowBox'
 
 const address = new Account({ phrase: 'temp' }).addressValue.hex
@@ -18,8 +20,17 @@ const StorybookEntry = {
 } as ComponentMeta<typeof AddressRenderRowBox>
 
 const Template: ComponentStory<typeof AddressRenderRowBox> = (args) => {
-  const [ref] = useXyoEvent<HTMLLIElement>((noun, verb, data) => console.log(`${noun}|${verb}|${data}`))
-  return <AddressRenderRowBox {...args} ref={ref} />
+  const [ref] = useXyoEvent<HTMLLIElement>((noun, verb, data) => {
+    console.log(`${noun}|${verb}|${data}`)
+    const parsedEvent = JSON.parse(data ?? '') as FavoriteEvent
+    if (parsedEvent.favorite) {
+      setAlias(parsedEvent.alias)
+    } else {
+      setAlias(undefined)
+    }
+  })
+  const [alias, setAlias] = useState(args.alias)
+  return <AddressRenderRowBox {...args} alias={alias} ref={ref} />
 }
 
 const Default = Template.bind({})
@@ -51,6 +62,15 @@ WithFavorite.args = {
   showFavorite: true,
 }
 
+const WithFavoriteAlias = Template.bind({})
+WithFavoriteAlias.args = {
+  address,
+  alias: 'My Alias',
+  favorite: true,
+  icons: true,
+  showFavorite: true,
+}
+
 const WithChildren = Template.bind({})
 WithChildren.args = {
   address,
@@ -60,7 +80,7 @@ WithChildren.args = {
   showFavorite: true,
 }
 
-export { Default, WithAddress, WithChildren, WithFavorite, WithIcon, WithIconOnly }
+export { Default, WithAddress, WithChildren, WithFavorite, WithFavoriteAlias, WithIcon, WithIconOnly }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/RenderRowBox.tsx

@@ -10,17 +10,19 @@ import { FavoriteIconButton } from './favorite'
 
 export interface AddressRenderRowBoxPropsBase {
   address?: string | null
+  alias?: string
   favorite?: boolean
   iconOnly?: boolean
   iconSize?: number
   icons?: boolean
+  name?: string
   showFavorite?: boolean
 }
 
 export interface AddressRenderRowBoxProps extends WithChildren, AddressRenderRowBoxPropsBase, FlexBoxProps {}
 
 export const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(
-  ({ address, children, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, showFavorite = false, ...props }, ref) => {
+  ({ address, alias, children, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
     const theme = useTheme()
 
     const sharedRef = useShareForwardedRef(ref)
@@ -42,12 +44,12 @@ export const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxPr
         {iconOnly ? null : (
           <ListItemText>
             <EllipsizeBox ellipsisPosition={'end'} width="100%" typographyProps={{ fontSize: theme.typography.body1.fontSize }}>
-              {address}
+              {alias ?? name ?? address}
             </EllipsizeBox>
           </ListItemText>
         )}
         {children}
-        {showFavorite && address ? <FavoriteIconButton size={'small'} address={address} favorite={favoriteProp} /> : null}
+        {showFavorite && address ? <FavoriteIconButton alias={alias} size={'small'} address={address} favorite={favoriteProp} /> : null}
       </FlexGrowRow>
     )
   },

package/src/components/favorite/FavoriteIconButton.tsx

@@ -4,20 +4,28 @@ import { IconButton, IconButtonProps } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
 import { useXyoEvent } from '@xyo-network/react-event'
 import { useShareForwardedRef } from '@xyo-network/react-shared'
-import { forwardRef, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+
+import { popperId } from './lib'
+import { FavoritePopper } from './Popper'
 
 export interface FavoriteEvent {
   address?: string
+  alias?: string
   favorite: boolean
 }
 
 export interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {
+  // TODO - this could be anything really
   address?: string
+  alias?: string
   favorite?: boolean
 }
 
 export const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(
-  ({ address, children, favorite: favoriteProp, ...props }, ref) => {
+  ({ address, alias, children, favorite: favoriteProp, ...props }, ref) => {
+    const [openPopper, setOpenPopper] = useState(false)
+
     const [favorite, setFavorite] = useState(favoriteProp)
     useEffect(() => {
       setFavorite(favoriteProp)
@@ -25,27 +33,42 @@ export const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButt
 
     const sharedRef = useShareForwardedRef(ref)
     const [buttonRef, dispatch] = useXyoEvent(undefined, sharedRef)
+    const onConfirmFavorite = (alias?: string, newFavoriteState?: boolean) => {
+      setFavorite(() => {
+        const favoriteEvent: FavoriteEvent = {
+          address,
+          alias,
+          favorite: !!newFavoriteState,
+        }
+        dispatch('address', 'favorite', JSON.stringify(favoriteEvent))
+        return newFavoriteState
+      })
+      setOpenPopper(false)
+    }
+
+    const starRef = useRef<HTMLSpanElement>(null)
 
     return (
       <IconButton
         ref={buttonRef}
+        aria-describedby={popperId}
         // used to prevent parent items from rippling when IconButton is clicked
         onMouseDown={(e) => e.stopPropagation()}
         onClick={(event) => {
           event.stopPropagation()
-          setFavorite((current) => {
-            const newFavoriteState = !current
-            const favoriteEvent: FavoriteEvent = {
-              address,
-              favorite: newFavoriteState,
-            }
-            dispatch('address', 'favorite', JSON.stringify(favoriteEvent))
-            return newFavoriteState
-          })
+          setOpenPopper(true)
         }}
         {...props}
       >
-        {favorite ? <StarIcon color="secondary" /> : <StarBorderIcon />}
+        <span ref={starRef}>{favorite ? <StarIcon component={'svg'} color="secondary" /> : <StarBorderIcon />}</span>
+        <FavoritePopper
+          alias={alias}
+          favorite={favorite}
+          favoriteRef={starRef}
+          open={openPopper}
+          onConfirmFavorite={onConfirmFavorite}
+          onClickAway={() => setOpenPopper(false)}
+        />
         {children}
       </IconButton>
     )

package/src/components/favorite/Popper.tsx

@@ -0,0 +1,59 @@
+import { Card, CardContent, ClickAwayListener, Fade, Popper, PopperProps, TextField } from '@mui/material'
+import { forwardRef, RefObject, useEffect, useState } from 'react'
+
+import { popperId } from './lib'
+import { PopperButtonGroup } from './PopperButtonGroup'
+
+export interface FavoritePopperProps extends PopperProps {
+  alias?: string
+  favorite?: boolean
+  favoriteRef?: RefObject<HTMLElement>
+  onClickAway?: (event: MouseEvent | TouchEvent) => void
+  onConfirmFavorite?: (alias?: string, newFavoriteState?: boolean) => void
+}
+export const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(
+  (
+    {
+      alias: aliasProp,
+      favorite,
+      favoriteRef,
+      onClickAway = () => {
+        return
+      },
+      onConfirmFavorite,
+      ...props
+    },
+    ref,
+  ) => {
+    const [alias, setAlias] = useState<string>()
+    useEffect(() => {
+      setAlias(aliasProp)
+    }, [aliasProp])
+
+    return (
+      <ClickAwayListener onClickAway={onClickAway}>
+        <Popper id={popperId} anchorEl={favoriteRef?.current} transition ref={ref} {...props}>
+          {({ TransitionProps }) => (
+            <Fade {...TransitionProps} timeout={350}>
+              <Card>
+                <CardContent sx={{ display: 'flex', gap: 1 }}>
+                  <TextField
+                    autoFocus
+                    label="Favorite Alias"
+                    placeholder="optional"
+                    size="small"
+                    value={alias ?? ''}
+                    onChange={(e) => setAlias(e.target.value)}
+                  />
+                  <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} alias={alias} />
+                </CardContent>
+              </Card>
+            </Fade>
+          )}
+        </Popper>
+      </ClickAwayListener>
+    )
+  },
+)
+
+FavoritePopper.displayName = 'FavoritePopper'

package/src/components/favorite/PopperButtonGroup.tsx

@@ -0,0 +1,36 @@
+import DeleteIcon from '@mui/icons-material/Delete'
+import StarIcon from '@mui/icons-material/Star'
+import { Button, ButtonGroup, ButtonGroupProps } from '@mui/material'
+
+export interface FavoritePopperProps extends ButtonGroupProps {
+  alias?: string
+  favorite?: boolean
+  onConfirmFavorite?: (alias?: string, newFavoriteState?: boolean) => void
+}
+
+export const PopperButtonGroup: React.FC<FavoritePopperProps> = ({ alias, onConfirmFavorite, favorite, ...props }) => {
+  return (
+    <ButtonGroup {...props}>
+      <Button
+        variant="contained"
+        onClick={(e) => {
+          e.stopPropagation()
+          onConfirmFavorite?.(alias, true)
+        }}
+      >
+        <StarIcon />
+      </Button>
+      {favorite ? (
+        <Button
+          variant="contained"
+          onClick={(e) => {
+            e.stopPropagation()
+            onConfirmFavorite?.(alias, false)
+          }}
+        >
+          <DeleteIcon />
+        </Button>
+      ) : null}
+    </ButtonGroup>
+  )
+}

package/src/components/favorite/lib/PopperId.ts

@@ -0,0 +1 @@
+export const popperId = 'favorite-popper'

package/src/components/favorite/lib/index.ts

@@ -0,0 +1 @@
+export * from './PopperId'