@xyo-network/react-address-render 7.5.8 → 7.5.11

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAIhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAA;IACtD,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACxE;AACD,eAAO,MAAM,cAAc;+FAGtB,mBAAmB;;CAoCvB,CAAA"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAIhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAA;IACtD,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACxE;AACD,eAAO,MAAM,cAAc;+FAGtB,mBAAmB;;CA0CvB,CAAA"}

package/dist/browser/index.mjs

@@ -1,152 +1,180 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/favorite/FavoriteIconButton.tsx
 import { IconButton, styled } from "@mui/material";
 import { useResetState } from "@xylabs/react-hooks";
 import { useEvent } from "@xyo-network/react-event";
 import { useShareForwardedRef } from "@xyo-network/react-shared";
-import React4, { useRef, useState as useState2 } from "react";
+import { useRef, useState as useState2 } from "react";
 
 // src/components/lib/FavoriteItemEvent.ts
-var generateFavoriteEvent = /* @__PURE__ */ __name((favorite, favoriteType, favoriteValue, name) => ({
+var generateFavoriteEvent = (favorite, favoriteType, favoriteValue, name) => ({
   favorite: !!favorite,
   favoriteType,
   favoriteValue,
   name
-}), "generateFavoriteEvent");
+});
 
 // src/components/favorite/FavoriteToggleSVG.tsx
 import { Star as StarIcon, StarBorder as StarBorderIcon } from "@mui/icons-material";
-import React from "react";
-var FavoriteToggleSVG = /* @__PURE__ */ __name(({ favorite }) => /* @__PURE__ */ React.createElement(React.Fragment, null, favorite ? /* @__PURE__ */ React.createElement(StarIcon, {
-  className: "favorite-icon",
-  component: "svg",
-  color: "secondary",
-  fontSize: "small"
-}) : /* @__PURE__ */ React.createElement(StarBorderIcon, {
-  className: "favorite-icon",
-  fontSize: "small"
-})), "FavoriteToggleSVG");
+import { Fragment, jsx } from "react/jsx-runtime";
+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" }) });
 
 // src/components/favorite/lib/PopperId.ts
 var popperId = "favorite-popper";
 
 // src/components/favorite/Popper.tsx
-import { Card, CardContent, ClickAwayListener, Fade, Popper, TextField } from "@mui/material";
-import React3, { useState } from "react";
+import {
+  Card,
+  CardContent,
+  ClickAwayListener,
+  Fade,
+  Popper,
+  TextField
+} from "@mui/material";
+import { useLayoutEffect, useState } from "react";
 
 // src/components/favorite/PopperButtonGroup.tsx
 import { Delete as DeleteIcon, Star as StarIcon2 } from "@mui/icons-material";
 import { Button, ButtonGroup } from "@mui/material";
-import React2 from "react";
-var PopperButtonGroup = /* @__PURE__ */ __name(({ name, onConfirmFavorite, favorite, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(ButtonGroup, props, /* @__PURE__ */ React2.createElement(Button, {
-    title: "Save Favorite",
-    variant: "contained",
-    onClick: /* @__PURE__ */ __name((e) => {
-      e.stopPropagation();
-      onConfirmFavorite?.(name, true);
-    }, "onClick")
-  }, /* @__PURE__ */ React2.createElement(StarIcon2, null)), favorite ? /* @__PURE__ */ React2.createElement(Button, {
-    title: "Remove Favorite",
-    variant: "contained",
-    onClick: /* @__PURE__ */ __name((e) => {
-      e.stopPropagation();
-      onConfirmFavorite?.(name, false);
-    }, "onClick")
-  }, /* @__PURE__ */ React2.createElement(DeleteIcon, null)) : null);
-}, "PopperButtonGroup");
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PopperButtonGroup = ({
+  name,
+  onConfirmFavorite,
+  favorite,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(ButtonGroup, { ...props, children: [
+    /* @__PURE__ */ jsx2(
+      Button,
+      {
+        title: "Save Favorite",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          onConfirmFavorite?.(name, true);
+        },
+        children: /* @__PURE__ */ jsx2(StarIcon2, {})
+      }
+    ),
+    favorite ? /* @__PURE__ */ jsx2(
+      Button,
+      {
+        title: "Remove Favorite",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          onConfirmFavorite?.(name, false);
+        },
+        children: /* @__PURE__ */ jsx2(DeleteIcon, {})
+      }
+    ) : null
+  ] });
+};
 
 // src/components/favorite/Popper.tsx
-var FavoritePopper = /* @__PURE__ */ __name(({ ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props }) => {
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FavoritePopper = ({
+  ref,
+  name: nameProp,
+  favorite,
+  favoriteRef,
+  onClickAway,
+  onConfirmFavorite,
+  ...props
+}) => {
   const [name, setName] = useState(() => nameProp);
-  return /* @__PURE__ */ React3.createElement(ClickAwayListener, {
-    onClickAway: onClickAway ?? (() => null)
-  }, /* @__PURE__ */ React3.createElement(Popper, {
-    id: popperId,
-    anchorEl: favoriteRef?.current,
-    onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
-    onTouchStart: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onTouchStart"),
-    transition: true,
-    style: {
-      zIndex: 9999
-    },
-    ref,
-    ...props
-  }, ({ TransitionProps }) => /* @__PURE__ */ React3.createElement(Fade, {
-    ...TransitionProps,
-    timeout: 350
-  }, /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardContent, {
-    sx: {
-      display: "flex",
-      gap: 1
+  const [anchorEl, setAnchorEl] = useState(null);
+  useLayoutEffect(() => {
+    setAnchorEl(favoriteRef?.current ?? null);
+  }, [favoriteRef]);
+  return /* @__PURE__ */ jsx3(ClickAwayListener, { onClickAway: onClickAway ?? (() => null), children: /* @__PURE__ */ jsx3(
+    Popper,
+    {
+      id: popperId,
+      anchorEl,
+      onClick: (e) => e.stopPropagation(),
+      onTouchStart: (e) => e.stopPropagation(),
+      transition: true,
+      style: { zIndex: 9999 },
+      ref,
+      ...props,
+      children: ({ TransitionProps }) => /* @__PURE__ */ jsx3(Fade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ jsx3(Card, { children: /* @__PURE__ */ jsxs2(CardContent, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ jsx3(
+          TextField,
+          {
+            autoFocus: true,
+            label: "Favorite Name",
+            placeholder: "optional",
+            size: "small",
+            value: name ?? "",
+            onChange: (e) => setName(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx3(PopperButtonGroup, { favorite, onConfirmFavorite, name })
+      ] }) }) })
     }
-  }, /* @__PURE__ */ React3.createElement(TextField, {
-    autoFocus: true,
-    label: "Favorite Name",
-    placeholder: "optional",
-    size: "small",
-    value: name ?? "",
-    onChange: /* @__PURE__ */ __name((e) => setName(e.target.value), "onChange")
-  }), /* @__PURE__ */ React3.createElement(PopperButtonGroup, {
-    favorite,
-    onConfirmFavorite,
-    name
-  }))))));
-}, "FavoritePopper");
+  ) });
+};
 FavoritePopper.displayName = "FavoritePopper";
 
 // src/components/favorite/FavoriteIconButton.tsx
-var FavoriteIconButton = /* @__PURE__ */ __name(({ ref, children, favorite: favoriteProp, name, valueType, value, ...props }) => {
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var FavoriteIconButton = ({
+  ref,
+  children,
+  favorite: favoriteProp,
+  name,
+  valueType,
+  value,
+  ...props
+}) => {
   const [openPopper, setOpenPopper] = useState2(false);
   const [favorite, setFavorite] = useResetState(favoriteProp);
   const sharedRef = useShareForwardedRef(ref);
   const [buttonRef, dispatch] = useEvent(void 0, sharedRef);
-  const onConfirmFavorite = /* @__PURE__ */ __name((name2, newFavoriteState) => {
+  const onConfirmFavorite = (name2, newFavoriteState) => {
     const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name2);
     dispatch("address", "favorite", JSON.stringify(favoriteEvent));
     setFavorite(newFavoriteState);
     setOpenPopper(false);
-  }, "onConfirmFavorite");
+  };
   const starRef = useRef(null);
-  return /* @__PURE__ */ React4.createElement(IconButtonCondensed, {
-    "aria-describedby": popperId,
-    ref: buttonRef,
-    onClick: /* @__PURE__ */ __name((event) => {
-      event.stopPropagation();
-      setOpenPopper(!openPopper);
-    }, "onClick"),
-    onTouchStart: /* @__PURE__ */ __name((event) => {
-      event.stopPropagation();
-      setOpenPopper(!openPopper);
-    }, "onTouchStart"),
-    onMouseDown: /* @__PURE__ */ __name((event) => event.stopPropagation(), "onMouseDown"),
-    sx: {
-      lineHeight: 0,
-      p: 0.25
-    },
-    ...props
-  }, /* @__PURE__ */ React4.createElement("span", {
-    ref: starRef
-  }, /* @__PURE__ */ React4.createElement(FavoriteToggleSVG, {
-    favorite
-  })), /* @__PURE__ */ React4.createElement(FavoritePopper, {
-    sx: {
-      zIndex: 1301
-    },
-    name,
-    favorite,
-    favoriteRef: starRef,
-    open: openPopper,
-    onConfirmFavorite,
-    onClickAway: /* @__PURE__ */ __name(() => setOpenPopper(false), "onClickAway")
-  }), children);
-}, "FavoriteIconButton");
+  return /* @__PURE__ */ jsxs3(
+    IconButtonCondensed,
+    {
+      "aria-describedby": popperId,
+      ref: buttonRef,
+      onClick: (event) => {
+        event.stopPropagation();
+        setOpenPopper(!openPopper);
+      },
+      onTouchStart: (event) => {
+        event.stopPropagation();
+        setOpenPopper(!openPopper);
+      },
+      onMouseDown: (event) => event.stopPropagation(),
+      sx: { lineHeight: 0, p: 0.25 },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4("span", { ref: starRef, children: /* @__PURE__ */ jsx4(FavoriteToggleSVG, { favorite }) }),
+        /* @__PURE__ */ jsx4(
+          FavoritePopper,
+          {
+            sx: { zIndex: 1301 },
+            name,
+            favorite,
+            favoriteRef: starRef,
+            open: openPopper,
+            onConfirmFavorite,
+            onClickAway: () => setOpenPopper(false)
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
 FavoriteIconButton.displayName = "FavoriteIconButton";
-var IconButtonCondensed = styled(IconButton, {
-  name: "IconButtonCondensed"
-})(({ theme }) => ({
+var IconButtonCondensed = styled(IconButton, { name: "IconButtonCondensed" })(({ theme }) => ({
   lineHeight: 0,
   padding: theme.spacing(0.25)
 }));
@@ -157,43 +185,53 @@ import { FlexRow } from "@xylabs/react-flexbox";
 import { Identicon } from "@xylabs/react-identicon";
 import { useEvent as useEvent2 } from "@xyo-network/react-event";
 import { EllipsizeBox, useShareForwardedRef as useShareForwardedRef2 } from "@xyo-network/react-shared";
-import React5 from "react";
-var AddressRenderRowBox = /* @__PURE__ */ __name(({ ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }) => {
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var AddressRenderRowBox = ({
+  ref,
+  address,
+  children,
+  disableSharedRef,
+  favorite: favoriteProp = false,
+  iconOnly,
+  iconSize = 24,
+  icons,
+  name,
+  showFavorite = false,
+  ...props
+}) => {
   const theme = useTheme();
   const sharedRef = useShareForwardedRef2(ref);
   const [elementRef, dispatch] = useEvent2(void 0, sharedRef);
-  return /* @__PURE__ */ React5.createElement(FlexRow, {
-    gap: 2,
-    justifyContent: "flex-start",
-    ref: elementRef,
-    onClick: /* @__PURE__ */ __name(() => {
-      if (address) {
-        dispatch("address", "click", address);
-      }
-    }, "onClick"),
-    ...props
-  }, icons && address ? /* @__PURE__ */ React5.createElement(ListItemIcon, {
-    sx: {
-      minWidth: 0
+  return /* @__PURE__ */ jsxs4(
+    FlexRow,
+    {
+      gap: 2,
+      justifyContent: "flex-start",
+      ref: elementRef,
+      onClick: () => {
+        if (address) {
+          dispatch("address", "click", address);
+        }
+      },
+      ...props,
+      children: [
+        icons && address ? /* @__PURE__ */ jsx5(ListItemIcon, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx5(Identicon, { size: iconSize, value: address }) }) : null,
+        iconOnly ? null : /* @__PURE__ */ jsx5(
+          EllipsizeBox,
+          {
+            disableSharedRef,
+            ellipsisPosition: "end",
+            width: "100%",
+            typographyProps: { fontSize: theme.typography.body1.fontSize },
+            children: name ?? address
+          }
+        ),
+        children,
+        showFavorite && address ? /* @__PURE__ */ jsx5(FavoriteIconButton, { name, size: "small", value: address, valueType: "address", favorite: favoriteProp }) : null
+      ]
     }
-  }, /* @__PURE__ */ React5.createElement(Identicon, {
-    size: iconSize,
-    value: address
-  })) : null, iconOnly ? null : /* @__PURE__ */ React5.createElement(EllipsizeBox, {
-    disableSharedRef,
-    ellipsisPosition: "end",
-    width: "100%",
-    typographyProps: {
-      fontSize: theme.typography.body1.fontSize
-    }
-  }, name ?? address), children, showFavorite && address ? /* @__PURE__ */ React5.createElement(FavoriteIconButton, {
-    name,
-    size: "small",
-    value: address,
-    valueType: "address",
-    favorite: favoriteProp
-  }) : null);
-}, "AddressRenderRowBox");
+  );
+};
 AddressRenderRowBox.displayName = "AddressRenderRowBox";
 export {
   AddressRenderRowBox,

package/dist/browser/index.mjs.map

@@ -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":["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"]}
+{"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, { useLayoutEffect, 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  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-x/set-state-in-effect\n    setAnchorEl(favoriteRef?.current ?? null)\n  }, [favoriteRef])\n\n  return (\n    <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>\n      <Popper\n        id={popperId}\n        anchorEl={anchorEl}\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-address-render",
-  "version": "7.5.8",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,49 +36,110 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-hooks": "~7.1.17",
-    "@xylabs/react-identicon": "~7.1.17",
-    "@xyo-network/react-event": "7.5.8",
-    "@xyo-network/react-shared": "7.5.8"
+    "@xyo-network/react-event": "~7.5.11",
+    "@xyo-network/react-shared": "~7.5.11"
   },
   "devDependencies": {
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@bitauth/libauth": "~3.0.0",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/sdk-js": "~5.0.90",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
-    "ethers": "~6.16.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "~10.3.3",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-identicon": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/threads": "~5.0.100",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "debug": "~4.4.3",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "hash-wasm": "~4.12.0",
+    "js-cookie": "~3.0.5",
+    "observable-fns": "~0.6.1",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3",
+    "vite": "^8.0.10",
+    "wasm-feature-detect": "~1.8.0",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-identicon": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/components/RenderRowBox.stories.tsx

@@ -1,83 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { asAddress, toHex } from '@xylabs/sdk-js'
-import { useEvent } from '@xyo-network/react-event'
-import { randomBytes } from 'ethers'
-import React, { useState } from 'react'
-
-import type { FavoriteItemEvent } from './lib/index.ts'
-import { AddressRenderRowBox } from './RenderRowBox.tsx'
-
-const address = asAddress(toHex(randomBytes(20).buffer), true)
-
-const StorybookEntry = {
-  argTypes: {},
-  component: AddressRenderRowBox,
-  parameters: { docs: { page: null } },
-  title: 'address/render/AddressRenderRowBox',
-} as Meta<typeof AddressRenderRowBox>
-
-const Template: StoryFn<typeof AddressRenderRowBox> = (args) => {
-  const { name: argsName } = args
-  const [ref] = useEvent<HTMLLIElement>((noun, verb, data) => {
-    console.log(`${noun}|${verb}|${data}`)
-    const parsedEvent = JSON.parse(data ?? '') as FavoriteItemEvent
-    if (parsedEvent.favorite) {
-      setName(parsedEvent.name)
-    } else {
-      setName(undefined)
-    }
-  })
-  const [name, setName] = useState(argsName)
-  return <AddressRenderRowBox {...args} name={name} ref={ref} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithAddress = Template.bind({})
-WithAddress.args = { address }
-
-const WithIcon = Template.bind({})
-WithIcon.args = {
-  address,
-  icons: true,
-}
-
-const WithIconOnly = Template.bind({})
-WithIconOnly.args = {
-  address,
-  iconOnly: true,
-  icons: true,
-}
-
-const WithFavorite = Template.bind({})
-WithFavorite.args = {
-  address,
-  favorite: true,
-  icons: true,
-  showFavorite: true,
-}
-
-const WithFavoriteAlias = Template.bind({})
-WithFavoriteAlias.args = {
-  address,
-  favorite: true,
-  icons: true,
-  name: 'My Name',
-  showFavorite: true,
-}
-
-const WithChildren = Template.bind({})
-WithChildren.args = {
-  address,
-  children: <span>[InsertedChild]</span>,
-  favorite: true,
-  icons: true,
-  showFavorite: true,
-}
-
-export {
-  Default, WithAddress, WithChildren, WithFavorite, WithFavoriteAlias, WithIcon, WithIconOnly,
-}
-
-export default StorybookEntry

package/src/components/RenderRowBox.tsx

@@ -1,71 +0,0 @@
-import { ListItemIcon, useTheme } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { Identicon } from '@xylabs/react-identicon'
-import { useEvent } from '@xyo-network/react-event'
-import { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'
-import React from 'react'
-
-import { FavoriteIconButton } from './favorite/index.ts'
-
-export interface AddressRenderRowBoxProps extends FlexBoxProps {
-  address?: string | null
-  disableSharedRef?: boolean
-  favorite?: boolean
-  iconOnly?: boolean
-  iconSize?: number
-  icons?: boolean
-  name?: string
-  showFavorite?: boolean
-}
-
-export const AddressRenderRowBox = (
-  {
-    ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props
-  }: AddressRenderRowBoxProps & { ref?: React.RefObject<HTMLElement | null> },
-) => {
-  const theme = useTheme()
-
-  const sharedRef = useShareForwardedRef(ref)
-  const [elementRef, dispatch] = useEvent(undefined, sharedRef)
-
-  return (
-    <FlexRow
-      gap={2}
-      justifyContent="flex-start"
-      ref={elementRef}
-      onClick={() => {
-        if (address) {
-          dispatch('address', 'click', address)
-        }
-      }}
-      {...props}
-    >
-      {icons && address
-        ? (
-            <ListItemIcon sx={{ minWidth: 0 }}>
-              <Identicon size={iconSize} value={address} />
-            </ListItemIcon>
-          )
-        : null}
-      {iconOnly
-        ? null
-        : (
-            <EllipsizeBox
-              disableSharedRef={disableSharedRef}
-              ellipsisPosition="end"
-              width="100%"
-              typographyProps={{ fontSize: theme.typography.body1.fontSize }}
-            >
-              {name ?? address}
-            </EllipsizeBox>
-          )}
-      {children}
-      {showFavorite && address
-        ? <FavoriteIconButton name={name} size="small" value={address} valueType="address" favorite={favoriteProp} />
-        : null}
-    </FlexRow>
-  )
-}
-
-AddressRenderRowBox.displayName = 'AddressRenderRowBox'

package/src/components/favorite/FavoriteIconButton.tsx

@@ -1,81 +0,0 @@
-import type { IconButtonProps } from '@mui/material'
-import { IconButton, styled } from '@mui/material'
-import { useResetState } from '@xylabs/react-hooks'
-import { useEvent } from '@xyo-network/react-event'
-import { useShareForwardedRef } from '@xyo-network/react-shared'
-import type {
-  MouseEvent, PropsWithChildren, TouchEvent,
-} from 'react'
-import React, { useRef, useState } from 'react'
-
-import type { FavoriteItemEvent } from '../lib/index.ts'
-import { generateFavoriteEvent } from '../lib/index.ts'
-import { FavoriteToggleSVG } from './FavoriteToggleSVG.tsx'
-import { popperId } from './lib/index.ts'
-import { FavoritePopper } from './Popper.tsx'
-
-export interface FavoriteIconButtonProps extends PropsWithChildren, IconButtonProps {
-  favorite?: FavoriteItemEvent['favorite']
-  name?: FavoriteItemEvent['name']
-  value?: string
-  valueType?: FavoriteItemEvent['favoriteType']
-}
-
-export const FavoriteIconButton = ({
-  ref, children, favorite: favoriteProp, name, valueType, value, ...props
-}: FavoriteIconButtonProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
-  const [openPopper, setOpenPopper] = useState(false)
-
-  const [favorite, setFavorite] = useResetState(favoriteProp)
-
-  const sharedRef = useShareForwardedRef(ref)
-  const [buttonRef, dispatch] = useEvent(undefined, sharedRef)
-
-  const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {
-    const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)
-    dispatch('address', 'favorite', JSON.stringify(favoriteEvent))
-    setFavorite(newFavoriteState)
-    setOpenPopper(false)
-  }
-
-  const starRef = useRef<HTMLSpanElement>(null)
-
-  return (
-    <IconButtonCondensed
-      aria-describedby={popperId}
-      ref={buttonRef}
-      onClick={(event: MouseEvent) => {
-        event.stopPropagation()
-        setOpenPopper(!openPopper)
-      }}
-      onTouchStart={(event: TouchEvent) => {
-        event.stopPropagation()
-        setOpenPopper(!openPopper)
-      }}
-      onMouseDown={(event: MouseEvent) => event.stopPropagation()}
-      sx={{ lineHeight: 0, p: 0.25 }}
-      {...props}
-    >
-      <span ref={starRef}>
-        <FavoriteToggleSVG favorite={favorite} />
-      </span>
-      <FavoritePopper
-        sx={{ zIndex: 1301 }}
-        name={name}
-        favorite={favorite}
-        favoriteRef={starRef}
-        open={openPopper}
-        onConfirmFavorite={onConfirmFavorite}
-        onClickAway={() => setOpenPopper(false)}
-      />
-      {children}
-    </IconButtonCondensed>
-  )
-}
-
-FavoriteIconButton.displayName = 'FavoriteIconButton'
-
-const IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({
-  lineHeight: 0,
-  padding: theme.spacing(0.25),
-}))

package/src/components/favorite/FavoriteToggleSVG.tsx

@@ -1,10 +0,0 @@
-import { Star as StarIcon, StarBorder as StarBorderIcon } from '@mui/icons-material'
-import React from 'react'
-
-export const FavoriteToggleSVG: React.FC<{ favorite?: boolean }> = ({ favorite }) => (
-  <>
-    {favorite
-      ? <StarIcon className="favorite-icon" component="svg" color="secondary" fontSize="small" />
-      : <StarBorderIcon className="favorite-icon" fontSize="small" />}
-  </>
-)

package/src/components/favorite/Popper.tsx

@@ -1,59 +0,0 @@
-import type { PopperProps } from '@mui/material'
-import {
-  Card, CardContent, ClickAwayListener, Fade, Popper, TextField,
-} from '@mui/material'
-import type { RefObject } from 'react'
-import React, { useState } from 'react'
-
-import { popperId } from './lib/index.ts'
-import { PopperButtonGroup } from './PopperButtonGroup.tsx'
-
-export interface FavoritePopperProps extends PopperProps {
-  favorite?: boolean
-  favoriteRef?: RefObject<HTMLElement | null>
-  name?: string
-  onClickAway?: (event: MouseEvent | TouchEvent) => void
-  onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void
-}
-export const FavoritePopper = (
-  {
-    ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props
-  }: FavoritePopperProps,
-) => {
-  const [name, setName] = useState(() => nameProp)
-
-  return (
-    <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>
-      <Popper
-        id={popperId}
-        anchorEl={favoriteRef?.current}
-        onClick={e => e.stopPropagation()}
-        onTouchStart={e => e.stopPropagation()}
-        transition
-        style={{ zIndex: 9999 }}
-        ref={ref}
-        {...props}
-      >
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
-            <Card>
-              <CardContent sx={{ display: 'flex', gap: 1 }}>
-                <TextField
-                  autoFocus
-                  label="Favorite Name"
-                  placeholder="optional"
-                  size="small"
-                  value={name ?? ''}
-                  onChange={e => setName(e.target.value)}
-                />
-                <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />
-              </CardContent>
-            </Card>
-          </Fade>
-        )}
-      </Popper>
-    </ClickAwayListener>
-  )
-}
-
-FavoritePopper.displayName = 'FavoritePopper'

package/src/components/favorite/PopperButtonGroup.tsx

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

package/src/components/favorite/index.ts

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

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

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

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

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

package/src/components/index.ts

@@ -1,3 +0,0 @@
-export * from './favorite/index.ts'
-export * from './lib/index.ts'
-export * from './RenderRowBox.tsx'

package/src/components/lib/FavoriteItemEvent.ts

@@ -1,15 +0,0 @@
-export interface FavoriteItemEvent {
-  favorite?: boolean
-  favoriteType?: FavoriteType
-  favoriteValue?: string
-  name?: string
-}
-
-export type FavoriteType = 'address' | 'schema' | 'hash'
-
-export const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({
-  favorite: !!favorite,
-  favoriteType,
-  favoriteValue,
-  name,
-})

package/src/components/lib/index.ts

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

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/index.ts'