@xyo-network/react-address-render 4.4.11 → 5.0.0-rc.2

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 (33) hide show
  1. package/dist/browser/index.mjs +9 -9
  2. package/dist/browser/index.mjs.map +1 -1
  3. package/dist/types/components/RenderRowBox.d.ts +19 -0
  4. package/dist/types/components/RenderRowBox.d.ts.map +1 -0
  5. package/dist/{browser → types}/components/favorite/FavoriteIconButton.d.ts +6 -1
  6. package/dist/types/components/favorite/FavoriteIconButton.d.ts.map +1 -0
  7. package/dist/{browser → types}/components/favorite/Popper.d.ts +6 -1
  8. package/dist/{browser → types}/components/favorite/Popper.d.ts.map +1 -1
  9. package/package.json +24 -22
  10. package/src/components/RenderRowBox.tsx +47 -50
  11. package/src/components/favorite/FavoriteIconButton.tsx +47 -51
  12. package/src/components/favorite/Popper.tsx +39 -47
  13. package/dist/browser/components/RenderRowBox.d.ts +0 -14
  14. package/dist/browser/components/RenderRowBox.d.ts.map +0 -1
  15. package/dist/browser/components/favorite/FavoriteIconButton.d.ts.map +0 -1
  16. /package/dist/{browser → types}/components/favorite/FavoriteToggleSVG.d.ts +0 -0
  17. /package/dist/{browser → types}/components/favorite/FavoriteToggleSVG.d.ts.map +0 -0
  18. /package/dist/{browser → types}/components/favorite/PopperButtonGroup.d.ts +0 -0
  19. /package/dist/{browser → types}/components/favorite/PopperButtonGroup.d.ts.map +0 -0
  20. /package/dist/{browser → types}/components/favorite/index.d.ts +0 -0
  21. /package/dist/{browser → types}/components/favorite/index.d.ts.map +0 -0
  22. /package/dist/{browser → types}/components/favorite/lib/PopperId.d.ts +0 -0
  23. /package/dist/{browser → types}/components/favorite/lib/PopperId.d.ts.map +0 -0
  24. /package/dist/{browser → types}/components/favorite/lib/index.d.ts +0 -0
  25. /package/dist/{browser → types}/components/favorite/lib/index.d.ts.map +0 -0
  26. /package/dist/{browser → types}/components/index.d.ts +0 -0
  27. /package/dist/{browser → types}/components/index.d.ts.map +0 -0
  28. /package/dist/{browser → types}/components/lib/FavoriteItemEvent.d.ts +0 -0
  29. /package/dist/{browser → types}/components/lib/FavoriteItemEvent.d.ts.map +0 -0
  30. /package/dist/{browser → types}/components/lib/index.d.ts +0 -0
  31. /package/dist/{browser → types}/components/lib/index.d.ts.map +0 -0
  32. /package/dist/{browser → types}/index.d.ts +0 -0
  33. /package/dist/{browser → types}/index.d.ts.map +0 -0
@@ -6,7 +6,7 @@ import { IconButton, styled as styled2 } from "@mui/material";
6
6
  import { useResetState } from "@xylabs/react-hooks";
7
7
  import { useEvent } from "@xyo-network/react-event";
8
8
  import { useShareForwardedRef } from "@xyo-network/react-shared";
9
- import React4, { forwardRef as forwardRef2, useRef, useState as useState2 } from "react";
9
+ import React4, { useRef, useState as useState2 } from "react";
10
10
 
11
11
  // src/components/lib/FavoriteItemEvent.ts
12
12
  var generateFavoriteEvent = /* @__PURE__ */ __name((favorite, favoriteType, favoriteValue, name) => ({
@@ -34,7 +34,7 @@ var popperId = "favorite-popper";
34
34
 
35
35
  // src/components/favorite/Popper.tsx
36
36
  import { Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField } from "@mui/material";
37
- import React3, { forwardRef, useState } from "react";
37
+ import React3, { useState } from "react";
38
38
 
39
39
  // src/components/favorite/PopperButtonGroup.tsx
40
40
  import { Delete as DeleteIcon, Star as StarIcon2 } from "@mui/icons-material";
@@ -59,7 +59,7 @@ var PopperButtonGroup = /* @__PURE__ */ __name(({ name, onConfirmFavorite, favor
59
59
  }, "PopperButtonGroup");
60
60
 
61
61
  // src/components/favorite/Popper.tsx
62
- var FavoritePopper = /* @__PURE__ */ forwardRef(({ name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props }, ref) => {
62
+ var FavoritePopper = /* @__PURE__ */ __name(({ ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props }) => {
63
63
  const [name, setName] = useState(() => nameProp);
64
64
  return /* @__PURE__ */ React3.createElement(ClickAwayListener, {
65
65
  onClickAway: onClickAway ?? (() => null)
@@ -91,7 +91,7 @@ var FavoritePopper = /* @__PURE__ */ forwardRef(({ name: nameProp, favorite, fav
91
91
  onConfirmFavorite,
92
92
  name
93
93
  }))))));
94
- });
94
+ }, "FavoritePopper");
95
95
  FavoritePopper.displayName = "FavoritePopper";
96
96
  var PopperStyled = styled(Popper, {
97
97
  name: "PopperStyled"
@@ -100,7 +100,7 @@ var PopperStyled = styled(Popper, {
100
100
  }));
101
101
 
102
102
  // src/components/favorite/FavoriteIconButton.tsx
103
- var FavoriteIconButton = /* @__PURE__ */ forwardRef2(({ children, favorite: favoriteProp, name, valueType, value, ...props }, ref) => {
103
+ var FavoriteIconButton = /* @__PURE__ */ __name(({ ref, children, favorite: favoriteProp, name, valueType, value, ...props }) => {
104
104
  const [openPopper, setOpenPopper] = useState2(false);
105
105
  const [favorite, setFavorite] = useResetState(favoriteProp);
106
106
  const sharedRef = useShareForwardedRef(ref);
@@ -144,7 +144,7 @@ var FavoriteIconButton = /* @__PURE__ */ forwardRef2(({ children, favorite: favo
144
144
  onConfirmFavorite,
145
145
  onClickAway: /* @__PURE__ */ __name(() => setOpenPopper(false), "onClickAway")
146
146
  }), children);
147
- });
147
+ }, "FavoriteIconButton");
148
148
  FavoriteIconButton.displayName = "FavoriteIconButton";
149
149
  var IconButtonCondensed = styled2(IconButton, {
150
150
  name: "IconButtonCondensed"
@@ -159,8 +159,8 @@ import { FlexRow } from "@xylabs/react-flexbox";
159
159
  import { Identicon } from "@xylabs/react-identicon";
160
160
  import { useEvent as useEvent2 } from "@xyo-network/react-event";
161
161
  import { EllipsizeBox, useShareForwardedRef as useShareForwardedRef2 } from "@xyo-network/react-shared";
162
- import React5, { forwardRef as forwardRef3 } from "react";
163
- var AddressRenderRowBox = /* @__PURE__ */ forwardRef3(({ address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }, ref) => {
162
+ import React5 from "react";
163
+ var AddressRenderRowBox = /* @__PURE__ */ __name(({ ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props }) => {
164
164
  const theme = useTheme();
165
165
  const sharedRef = useShareForwardedRef2(ref);
166
166
  const [elementRef, dispatch] = useEvent2(void 0, sharedRef);
@@ -195,7 +195,7 @@ var AddressRenderRowBox = /* @__PURE__ */ forwardRef3(({ address, children, disa
195
195
  valueType: "address",
196
196
  favorite: favoriteProp
197
197
  }) : null);
198
- });
198
+ }, "AddressRenderRowBox");
199
199
  AddressRenderRowBox.displayName = "AddressRenderRowBox";
200
200
  export {
201
201
  AddressRenderRowBox,
@@ -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 { PropsWithChildren } from 'react'\nimport React, {\n forwardRef, useRef, useState,\n} 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 = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(\n ({\n children, favorite: favoriteProp, name, valueType, value, ...props\n }, ref) => {\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) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={e => e.stopPropagation()}\n sx={{ lineHeight: 0, p: 0.25 }}\n {...props}\n >\n <span ref={starRef}>\n <FavoriteToggleSVG favorite={favorite} />\n </span>\n <FavoritePopper\n sx={{ zIndex: 1301 }}\n name={name}\n favorite={favorite}\n favoriteRef={starRef}\n open={openPopper}\n onConfirmFavorite={onConfirmFavorite}\n onClickAway={() => setOpenPopper(false)}\n />\n {children}\n </IconButtonCondensed>\n )\n },\n)\n\nFavoriteIconButton.displayName = 'FavoriteIconButton'\n\nconst IconButtonCondensed = styled(IconButton, { name: 'IconButtonCondensed' })(({ theme }) => ({\n lineHeight: 0,\n padding: theme.spacing(0.25),\n}))\n","export interface FavoriteItemEvent {\n favorite?: boolean\n favoriteType?: FavoriteType\n favoriteValue?: string\n name?: string\n}\n\nexport type FavoriteType = 'address' | 'schema' | 'hash'\n\nexport const generateFavoriteEvent = (favorite?: boolean, favoriteType?: FavoriteType, favoriteValue?: string, name?: string): FavoriteItemEvent => ({\n favorite: !!favorite,\n favoriteType,\n favoriteValue,\n name,\n})\n","import { 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, styled, TextField,\n} from '@mui/material'\nimport type { RefObject } from 'react'\nimport React, { forwardRef, 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>\n name?: string\n onClickAway?: (event: MouseEvent | TouchEvent) => void\n onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void\n}\nexport const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(\n (\n {\n name: nameProp,\n favorite,\n favoriteRef,\n onClickAway,\n onConfirmFavorite,\n ...props\n },\n ref,\n ) => {\n const [name, setName] = useState(() => nameProp)\n\n return (\n <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>\n <PopperStyled\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={e => e.stopPropagation()}\n onTouchStart={e => e.stopPropagation()}\n transition\n ref={ref}\n {...props}\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Card>\n <CardContent sx={{ display: 'flex', gap: 1 }}>\n <TextField\n autoFocus\n label=\"Favorite Name\"\n placeholder=\"optional\"\n size=\"small\"\n value={name ?? ''}\n onChange={e => setName(e.target.value)}\n />\n <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n </CardContent>\n </Card>\n </Fade>\n )}\n </PopperStyled>\n </ClickAwayListener>\n )\n },\n)\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import { 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, { forwardRef } 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 = forwardRef<HTMLElement, AddressRenderRowBoxProps>(\n (\n {\n address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props\n },\n ref,\n ) => {\n const theme = useTheme()\n\n const sharedRef = useShareForwardedRef(ref)\n const [elementRef, dispatch] = useEvent(undefined, sharedRef)\n\n return (\n <FlexRow\n gap={2}\n justifyContent=\"flex-start\"\n ref={elementRef}\n onClick={() => {\n if (address) {\n dispatch('address', 'click', address)\n }\n }}\n {...props}\n >\n {icons && address\n ? (\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)\n\nAddressRenderRowBox.displayName = 'AddressRenderRowBox'\n"],"mappings":"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","names":["IconButton","styled","useResetState","useEvent","useShareForwardedRef","React","forwardRef","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","styled","TextField","React","forwardRef","useState","Delete","DeleteIcon","Star","StarIcon","Button","ButtonGroup","React","PopperButtonGroup","name","onConfirmFavorite","favorite","props","React","ButtonGroup","Button","title","variant","onClick","e","stopPropagation","StarIcon","DeleteIcon","FavoritePopper","forwardRef","name","nameProp","favorite","favoriteRef","onClickAway","onConfirmFavorite","props","ref","setName","useState","React","ClickAwayListener","PopperStyled","id","popperId","anchorEl","current","onClick","e","stopPropagation","onTouchStart","transition","TransitionProps","Fade","timeout","Card","CardContent","sx","display","gap","TextField","autoFocus","label","placeholder","size","value","onChange","target","PopperButtonGroup","displayName","styled","Popper","zIndex","FavoriteIconButton","forwardRef","children","favorite","favoriteProp","name","valueType","value","props","ref","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","e","sx","lineHeight","p","span","FavoriteToggleSVG","FavoritePopper","zIndex","favoriteRef","open","onClickAway","displayName","styled","IconButton","theme","padding","spacing","ListItemIcon","useTheme","FlexRow","Identicon","useEvent","EllipsizeBox","useShareForwardedRef","React","forwardRef","AddressRenderRowBox","forwardRef","address","children","disableSharedRef","favorite","favoriteProp","iconOnly","iconSize","icons","name","showFavorite","props","ref","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"]}
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 { PropsWithChildren } 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) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onTouchStart={(event) => {\n event.stopPropagation()\n setOpenPopper(!openPopper)\n }}\n onMouseDown={e => e.stopPropagation()}\n sx={{ lineHeight: 0, p: 0.25 }}\n {...props}\n >\n <span ref={starRef}>\n <FavoriteToggleSVG favorite={favorite} />\n </span>\n <FavoritePopper\n sx={{ zIndex: 1301 }}\n name={name}\n favorite={favorite}\n favoriteRef={starRef}\n open={openPopper}\n onConfirmFavorite={onConfirmFavorite}\n onClickAway={() => setOpenPopper(false)}\n />\n {children}\n </IconButtonCondensed>\n )\n}\n\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, styled, 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>\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 & { ref?: React.RefObject<HTMLDivElement | null> },\n) => {\n const [name, setName] = useState(() => nameProp)\n\n return (\n <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>\n <PopperStyled\n id={popperId}\n anchorEl={favoriteRef?.current}\n onClick={e => e.stopPropagation()}\n onTouchStart={e => e.stopPropagation()}\n transition\n ref={ref}\n {...props}\n >\n {({ TransitionProps }) => (\n <Fade {...TransitionProps} timeout={350}>\n <Card>\n <CardContent sx={{ display: 'flex', gap: 1 }}>\n <TextField\n autoFocus\n label=\"Favorite Name\"\n placeholder=\"optional\"\n size=\"small\"\n value={name ?? ''}\n onChange={e => setName(e.target.value)}\n />\n <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />\n </CardContent>\n </Card>\n </Fade>\n )}\n </PopperStyled>\n </ClickAwayListener>\n )\n}\n\nFavoritePopper.displayName = 'FavoritePopper'\n\n// Ensure the popper is over all other mui portal elements\nconst PopperStyled = styled(Popper, { name: 'PopperStyled' })(() => ({ zIndex: 9999 }))\n","import { 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","styled","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","PopperStyled","id","popperId","anchorEl","current","onClick","e","stopPropagation","onTouchStart","transition","TransitionProps","Fade","timeout","Card","CardContent","sx","display","gap","TextField","autoFocus","label","placeholder","size","value","onChange","target","PopperButtonGroup","displayName","styled","Popper","zIndex","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","e","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"]}
@@ -0,0 +1,19 @@
1
+ import type { FlexBoxProps } from '@xylabs/react-flexbox';
2
+ import React from 'react';
3
+ export interface AddressRenderRowBoxProps extends FlexBoxProps {
4
+ address?: string | null;
5
+ disableSharedRef?: boolean;
6
+ favorite?: boolean;
7
+ iconOnly?: boolean;
8
+ iconSize?: number;
9
+ icons?: boolean;
10
+ name?: string;
11
+ showFavorite?: boolean;
12
+ }
13
+ export declare const AddressRenderRowBox: {
14
+ ({ ref, address, children, disableSharedRef, favorite: favoriteProp, iconOnly, iconSize, icons, name, showFavorite, ...props }: AddressRenderRowBoxProps & {
15
+ ref?: React.RefObject<HTMLElement | null>;
16
+ }): import("react/jsx-runtime").JSX.Element;
17
+ displayName: string;
18
+ };
19
+ //# sourceMappingURL=RenderRowBox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RenderRowBox.d.ts","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,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,eAAO,MAAM,mBAAmB;oIAG3B,wBAAwB,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;KAAE;;CA4C5E,CAAA"}
@@ -8,5 +8,10 @@ export interface FavoriteIconButtonProps extends PropsWithChildren, IconButtonPr
8
8
  value?: string;
9
9
  valueType?: FavoriteItemEvent['favoriteType'];
10
10
  }
11
- export declare const FavoriteIconButton: React.ForwardRefExoticComponent<Omit<FavoriteIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
11
+ export declare const FavoriteIconButton: {
12
+ ({ ref, children, favorite: favoriteProp, name, valueType, value, ...props }: FavoriteIconButtonProps & {
13
+ ref?: React.RefObject<HTMLButtonElement | null>;
14
+ }): import("react/jsx-runtime").JSX.Element;
15
+ displayName: string;
16
+ };
12
17
  //# sourceMappingURL=FavoriteIconButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAKpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAMxD,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB,EAAE,eAAe;IACjF,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,kBAAkB;kFAE5B,uBAAuB,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;KAAE;;CAgD/E,CAAA"}
@@ -8,5 +8,10 @@ export interface FavoritePopperProps extends PopperProps {
8
8
  onClickAway?: (event: MouseEvent | TouchEvent) => void;
9
9
  onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void;
10
10
  }
11
- export declare const FavoritePopper: React.ForwardRefExoticComponent<Omit<FavoritePopperProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
11
+ export declare const FavoritePopper: {
12
+ ({ ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props }: FavoritePopperProps & {
13
+ ref?: React.RefObject<HTMLDivElement | null>;
14
+ }): import("react/jsx-runtime").JSX.Element;
15
+ displayName: string;
16
+ };
12
17
  //# sourceMappingURL=Popper.d.ts.map
@@ -1 +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;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAA;AAKnD,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;IACpC,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,yGA8C1B,CAAA"}
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;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;IACpC,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,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;KAAE;;CAmC1E,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xyo-network/react-address-render",
3
- "version": "4.4.11",
3
+ "version": "5.0.0-rc.2",
4
4
  "description": "Common React library for all XYO projects that use React",
5
5
  "keywords": [
6
6
  "xyo",
@@ -28,10 +28,10 @@
28
28
  "exports": {
29
29
  ".": {
30
30
  "browser": {
31
- "types": "./dist/browser/index.d.ts",
31
+ "types": "./dist/types/index.d.ts",
32
32
  "default": "./dist/browser/index.mjs"
33
33
  },
34
- "types": "./dist/browser/index.d.ts",
34
+ "types": "./dist/types/index.d.ts",
35
35
  "default": "./dist/browser/index.mjs"
36
36
  },
37
37
  "./package.json": "./package.json"
@@ -43,37 +43,39 @@
43
43
  "lint-pkg": "npmPkgJsonLint ."
44
44
  },
45
45
  "dependencies": {
46
- "@xylabs/react-flexbox": "^5.3.25",
47
- "@xylabs/react-hooks": "^5.3.25",
48
- "@xylabs/react-identicon": "^5.3.25",
49
- "@xyo-network/react-event": "^4.4.11",
50
- "@xyo-network/react-shared": "^4.4.11"
46
+ "@xylabs/react-flexbox": "^6.0.0-rc.2",
47
+ "@xylabs/react-hooks": "^6.0.0-rc.2",
48
+ "@xylabs/react-identicon": "^6.0.0-rc.2",
49
+ "@xyo-network/react-event": "^5.0.0-rc.2",
50
+ "@xyo-network/react-shared": "^5.0.0-rc.2"
51
51
  },
52
52
  "devDependencies": {
53
- "@mui/icons-material": "^6.4.6",
54
- "@mui/material": "^6.4.6",
55
- "@mui/styles": "^6.4.6",
56
- "@storybook/react": "^8.6.3",
57
- "@xylabs/hex": "^4.5.6",
58
- "@xylabs/ts-scripts-yarn3": "^5.0.39",
59
- "@xylabs/tsconfig-react": "^5.0.39",
53
+ "@mui/icons-material": "^6.4.7",
54
+ "@mui/material": "^6.4.7",
55
+ "@mui/styles": "^6.4.7",
56
+ "@storybook/react": "^8.6.4",
57
+ "@types/react": "^19.0.10",
58
+ "@xylabs/hex": "^4.5.10",
59
+ "@xylabs/ts-scripts-yarn3": "^6.0.3",
60
+ "@xylabs/tsconfig-react": "^6.0.3",
60
61
  "ethers": "^6.13.5",
61
- "react": "^18.3.1",
62
- "react-dom": "^18.3.1",
63
- "react-router-dom": "^7.2.0",
64
- "storybook": "^8.6.3",
62
+ "react": "^19",
63
+ "react-dom": "^19",
64
+ "react-router-dom": "^7.3.0",
65
+ "storybook": "^8.6.4",
65
66
  "typescript": "^5.8.2"
66
67
  },
67
68
  "peerDependencies": {
68
69
  "@mui/icons-material": "^6",
69
70
  "@mui/material": "^6",
70
71
  "@mui/styles": "^6",
71
- "react": "^18",
72
- "react-dom": "^18",
72
+ "react": "^19",
73
+ "react-dom": "^19",
73
74
  "react-router-dom": "^7"
74
75
  },
75
76
  "publishConfig": {
76
77
  "access": "public"
77
78
  },
78
- "docs": "dist/docs.json"
79
+ "docs": "dist/docs.json",
80
+ "stableVersion": "4.4.11"
79
81
  }
@@ -4,7 +4,7 @@ import { FlexRow } from '@xylabs/react-flexbox'
4
4
  import { Identicon } from '@xylabs/react-identicon'
5
5
  import { useEvent } from '@xyo-network/react-event'
6
6
  import { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'
7
- import React, { forwardRef } from 'react'
7
+ import React from 'react'
8
8
 
9
9
  import { FavoriteIconButton } from './favorite/index.ts'
10
10
 
@@ -19,56 +19,53 @@ export interface AddressRenderRowBoxProps extends FlexBoxProps {
19
19
  showFavorite?: boolean
20
20
  }
21
21
 
22
- export const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(
23
- (
24
- {
25
- address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props
26
- },
27
- ref,
28
- ) => {
29
- const theme = useTheme()
22
+ export const AddressRenderRowBox = (
23
+ {
24
+ ref, address, children, disableSharedRef, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, name, showFavorite = false, ...props
25
+ }: AddressRenderRowBoxProps & { ref?: React.RefObject<HTMLElement | null> },
26
+ ) => {
27
+ const theme = useTheme()
30
28
 
31
- const sharedRef = useShareForwardedRef(ref)
32
- const [elementRef, dispatch] = useEvent(undefined, sharedRef)
29
+ const sharedRef = useShareForwardedRef(ref)
30
+ const [elementRef, dispatch] = useEvent(undefined, sharedRef)
33
31
 
34
- return (
35
- <FlexRow
36
- gap={2}
37
- justifyContent="flex-start"
38
- ref={elementRef}
39
- onClick={() => {
40
- if (address) {
41
- dispatch('address', 'click', address)
42
- }
43
- }}
44
- {...props}
45
- >
46
- {icons && address
47
- ? (
48
- <ListItemIcon sx={{ minWidth: 0 }}>
49
- <Identicon size={iconSize} value={address} />
50
- </ListItemIcon>
51
- )
52
- : null}
53
- {iconOnly
54
- ? null
55
- : (
56
- <EllipsizeBox
57
- disableSharedRef={disableSharedRef}
58
- ellipsisPosition="end"
59
- width="100%"
60
- typographyProps={{ fontSize: theme.typography.body1.fontSize }}
61
- >
62
- {name ?? address}
63
- </EllipsizeBox>
64
- )}
65
- {children}
66
- {showFavorite && address
67
- ? <FavoriteIconButton name={name} size="small" value={address} valueType="address" favorite={favoriteProp} />
68
- : null}
69
- </FlexRow>
70
- )
71
- },
72
- )
32
+ return (
33
+ <FlexRow
34
+ gap={2}
35
+ justifyContent="flex-start"
36
+ ref={elementRef}
37
+ onClick={() => {
38
+ if (address) {
39
+ dispatch('address', 'click', address)
40
+ }
41
+ }}
42
+ {...props}
43
+ >
44
+ {icons && address
45
+ ? (
46
+ <ListItemIcon sx={{ minWidth: 0 }}>
47
+ <Identicon size={iconSize} value={address} />
48
+ </ListItemIcon>
49
+ )
50
+ : null}
51
+ {iconOnly
52
+ ? null
53
+ : (
54
+ <EllipsizeBox
55
+ disableSharedRef={disableSharedRef}
56
+ ellipsisPosition="end"
57
+ width="100%"
58
+ typographyProps={{ fontSize: theme.typography.body1.fontSize }}
59
+ >
60
+ {name ?? address}
61
+ </EllipsizeBox>
62
+ )}
63
+ {children}
64
+ {showFavorite && address
65
+ ? <FavoriteIconButton name={name} size="small" value={address} valueType="address" favorite={favoriteProp} />
66
+ : null}
67
+ </FlexRow>
68
+ )
69
+ }
73
70
 
74
71
  AddressRenderRowBox.displayName = 'AddressRenderRowBox'
@@ -4,9 +4,7 @@ import { useResetState } from '@xylabs/react-hooks'
4
4
  import { useEvent } from '@xyo-network/react-event'
5
5
  import { useShareForwardedRef } from '@xyo-network/react-shared'
6
6
  import type { PropsWithChildren } from 'react'
7
- import React, {
8
- forwardRef, useRef, useState,
9
- } from 'react'
7
+ import React, { useRef, useState } from 'react'
10
8
 
11
9
  import type { FavoriteItemEvent } from '../lib/index.ts'
12
10
  import { generateFavoriteEvent } from '../lib/index.ts'
@@ -21,59 +19,57 @@ export interface FavoriteIconButtonProps extends PropsWithChildren, IconButtonPr
21
19
  valueType?: FavoriteItemEvent['favoriteType']
22
20
  }
23
21
 
24
- export const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(
25
- ({
26
- children, favorite: favoriteProp, name, valueType, value, ...props
27
- }, ref) => {
28
- const [openPopper, setOpenPopper] = useState(false)
22
+ export const FavoriteIconButton = ({
23
+ ref, children, favorite: favoriteProp, name, valueType, value, ...props
24
+ }: FavoriteIconButtonProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
25
+ const [openPopper, setOpenPopper] = useState(false)
29
26
 
30
- const [favorite, setFavorite] = useResetState(favoriteProp)
27
+ const [favorite, setFavorite] = useResetState(favoriteProp)
31
28
 
32
- const sharedRef = useShareForwardedRef(ref)
33
- const [buttonRef, dispatch] = useEvent(undefined, sharedRef)
29
+ const sharedRef = useShareForwardedRef(ref)
30
+ const [buttonRef, dispatch] = useEvent(undefined, sharedRef)
34
31
 
35
- const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {
36
- const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)
37
- dispatch('address', 'favorite', JSON.stringify(favoriteEvent))
38
- setFavorite(newFavoriteState)
39
- setOpenPopper(false)
40
- }
32
+ const onConfirmFavorite = (name?: string, newFavoriteState?: boolean) => {
33
+ const favoriteEvent = generateFavoriteEvent(!!newFavoriteState, valueType, value, name)
34
+ dispatch('address', 'favorite', JSON.stringify(favoriteEvent))
35
+ setFavorite(newFavoriteState)
36
+ setOpenPopper(false)
37
+ }
41
38
 
42
- const starRef = useRef<HTMLSpanElement>(null)
39
+ const starRef = useRef<HTMLSpanElement>(null)
43
40
 
44
- return (
45
- <IconButtonCondensed
46
- aria-describedby={popperId}
47
- ref={buttonRef}
48
- onClick={(event) => {
49
- event.stopPropagation()
50
- setOpenPopper(!openPopper)
51
- }}
52
- onTouchStart={(event) => {
53
- event.stopPropagation()
54
- setOpenPopper(!openPopper)
55
- }}
56
- onMouseDown={e => e.stopPropagation()}
57
- sx={{ lineHeight: 0, p: 0.25 }}
58
- {...props}
59
- >
60
- <span ref={starRef}>
61
- <FavoriteToggleSVG favorite={favorite} />
62
- </span>
63
- <FavoritePopper
64
- sx={{ zIndex: 1301 }}
65
- name={name}
66
- favorite={favorite}
67
- favoriteRef={starRef}
68
- open={openPopper}
69
- onConfirmFavorite={onConfirmFavorite}
70
- onClickAway={() => setOpenPopper(false)}
71
- />
72
- {children}
73
- </IconButtonCondensed>
74
- )
75
- },
76
- )
41
+ return (
42
+ <IconButtonCondensed
43
+ aria-describedby={popperId}
44
+ ref={buttonRef}
45
+ onClick={(event) => {
46
+ event.stopPropagation()
47
+ setOpenPopper(!openPopper)
48
+ }}
49
+ onTouchStart={(event) => {
50
+ event.stopPropagation()
51
+ setOpenPopper(!openPopper)
52
+ }}
53
+ onMouseDown={e => e.stopPropagation()}
54
+ sx={{ lineHeight: 0, p: 0.25 }}
55
+ {...props}
56
+ >
57
+ <span ref={starRef}>
58
+ <FavoriteToggleSVG favorite={favorite} />
59
+ </span>
60
+ <FavoritePopper
61
+ sx={{ zIndex: 1301 }}
62
+ name={name}
63
+ favorite={favorite}
64
+ favoriteRef={starRef}
65
+ open={openPopper}
66
+ onConfirmFavorite={onConfirmFavorite}
67
+ onClickAway={() => setOpenPopper(false)}
68
+ />
69
+ {children}
70
+ </IconButtonCondensed>
71
+ )
72
+ }
77
73
 
78
74
  FavoriteIconButton.displayName = 'FavoriteIconButton'
79
75
 
@@ -3,7 +3,7 @@ import {
3
3
  Card, CardContent, ClickAwayListener, Fade, Popper, styled, TextField,
4
4
  } from '@mui/material'
5
5
  import type { RefObject } from 'react'
6
- import React, { forwardRef, useState } from 'react'
6
+ import React, { useState } from 'react'
7
7
 
8
8
  import { popperId } from './lib/index.ts'
9
9
  import { PopperButtonGroup } from './PopperButtonGroup.tsx'
@@ -15,53 +15,45 @@ export interface FavoritePopperProps extends PopperProps {
15
15
  onClickAway?: (event: MouseEvent | TouchEvent) => void
16
16
  onConfirmFavorite?: (name?: string, newFavoriteState?: boolean) => void
17
17
  }
18
- export const FavoritePopper = forwardRef<HTMLDivElement, FavoritePopperProps>(
19
- (
20
- {
21
- name: nameProp,
22
- favorite,
23
- favoriteRef,
24
- onClickAway,
25
- onConfirmFavorite,
26
- ...props
27
- },
28
- ref,
29
- ) => {
30
- const [name, setName] = useState(() => nameProp)
18
+ export const FavoritePopper = (
19
+ {
20
+ ref, name: nameProp, favorite, favoriteRef, onClickAway, onConfirmFavorite, ...props
21
+ }: FavoritePopperProps & { ref?: React.RefObject<HTMLDivElement | null> },
22
+ ) => {
23
+ const [name, setName] = useState(() => nameProp)
31
24
 
32
- return (
33
- <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>
34
- <PopperStyled
35
- id={popperId}
36
- anchorEl={favoriteRef?.current}
37
- onClick={e => e.stopPropagation()}
38
- onTouchStart={e => e.stopPropagation()}
39
- transition
40
- ref={ref}
41
- {...props}
42
- >
43
- {({ TransitionProps }) => (
44
- <Fade {...TransitionProps} timeout={350}>
45
- <Card>
46
- <CardContent sx={{ display: 'flex', gap: 1 }}>
47
- <TextField
48
- autoFocus
49
- label="Favorite Name"
50
- placeholder="optional"
51
- size="small"
52
- value={name ?? ''}
53
- onChange={e => setName(e.target.value)}
54
- />
55
- <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />
56
- </CardContent>
57
- </Card>
58
- </Fade>
59
- )}
60
- </PopperStyled>
61
- </ClickAwayListener>
62
- )
63
- },
64
- )
25
+ return (
26
+ <ClickAwayListener onClickAway={onClickAway ?? (() => null)}>
27
+ <PopperStyled
28
+ id={popperId}
29
+ anchorEl={favoriteRef?.current}
30
+ onClick={e => e.stopPropagation()}
31
+ onTouchStart={e => e.stopPropagation()}
32
+ transition
33
+ ref={ref}
34
+ {...props}
35
+ >
36
+ {({ TransitionProps }) => (
37
+ <Fade {...TransitionProps} timeout={350}>
38
+ <Card>
39
+ <CardContent sx={{ display: 'flex', gap: 1 }}>
40
+ <TextField
41
+ autoFocus
42
+ label="Favorite Name"
43
+ placeholder="optional"
44
+ size="small"
45
+ value={name ?? ''}
46
+ onChange={e => setName(e.target.value)}
47
+ />
48
+ <PopperButtonGroup favorite={favorite} onConfirmFavorite={onConfirmFavorite} name={name} />
49
+ </CardContent>
50
+ </Card>
51
+ </Fade>
52
+ )}
53
+ </PopperStyled>
54
+ </ClickAwayListener>
55
+ )
56
+ }
65
57
 
66
58
  FavoritePopper.displayName = 'FavoritePopper'
67
59
 
@@ -1,14 +0,0 @@
1
- import type { FlexBoxProps } from '@xylabs/react-flexbox';
2
- import React from 'react';
3
- export interface AddressRenderRowBoxProps extends FlexBoxProps {
4
- address?: string | null;
5
- disableSharedRef?: boolean;
6
- favorite?: boolean;
7
- iconOnly?: boolean;
8
- iconSize?: number;
9
- icons?: boolean;
10
- name?: string;
11
- showFavorite?: boolean;
12
- }
13
- export declare const AddressRenderRowBox: React.ForwardRefExoticComponent<AddressRenderRowBoxProps & React.RefAttributes<HTMLElement>>;
14
- //# sourceMappingURL=RenderRowBox.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RenderRowBox.d.ts","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKzD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,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,eAAO,MAAM,mBAAmB,8FAkD/B,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAKpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAEN,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAMxD,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB,EAAE,eAAe;IACjF,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,kBAAkB,gHAoD9B,CAAA"}
File without changes
File without changes
File without changes