@xyo-network/react-property 7.5.8 → 7.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-property",
-  "version": "7.5.8",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,50 +36,113 @@
     },
     "./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-identicon": "~7.1.17",
-    "@xylabs/react-quick-tip-button": "~7.1.17",
-    "@xylabs/react-theme": "~7.1.17",
-    "@xyo-network/react-shared": "7.5.8",
-    "@xyo-network/typeof": "~5.3.17"
+    "@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/react-button": "~7.1.17",
-    "@xylabs/react-theme": "~7.1.17",
-    "@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",
-    "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-dialogs": "~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-quick-tip-button": "~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",
+    "@xyo-network/typeof": "~5.3.30",
+    "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-dialogs": "~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-quick-tip-button": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@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",
+    "@xyo-network/typeof": "~5.3.30",
+    "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/Action.ts

@@ -1,8 +0,0 @@
-import type { ReactNode } from 'react'
-
-export interface PropertyAction {
-  disabled?: boolean
-  icon?: ReactNode
-  name: string
-  onClick?: () => void
-}

package/src/components/Actions.tsx

@@ -1,45 +0,0 @@
-import { IconButton } from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import type { PropertyActionsProps } from './ActionsProps.ts'
-
-export const PropertyActions: React.FC<PropertyActionsProps> = ({
-  buttons = false, actions, ...props
-}) => {
-  if (actions) {
-    return (actions?.length ?? 0) > 0
-      ? (
-          <FlexRow gap={1} {...props}>
-            {actions.map((action, index) => {
-              return (
-                action.icon
-                  ? (
-                      <IconButton size="small" key={index} color="inherit" onClick={action.onClick}>
-                        {action.icon}
-                      </IconButton>
-                    )
-                  : buttons
-                    ? (
-                        <ButtonEx
-                          paddingY={0}
-                          color="primary"
-                          key={index}
-                          size="small"
-                          disabled={action.disabled}
-                          onClick={action.onClick}
-                          variant="contained"
-                        >
-                          {action.name}
-                        </ButtonEx>
-                      )
-                    : null
-              )
-            })}
-          </FlexRow>
-        )
-      : null
-  }
-  return null
-}

package/src/components/ActionsMenu.tsx

@@ -1,45 +0,0 @@
-import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'
-import {
-  IconButton, Menu, MenuItem,
-} from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React, { useState } from 'react'
-
-import type { PropertyActionsProps } from './ActionsProps.ts'
-
-export const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = !!anchorEl
-
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  return actions && actions?.length > 0
-    ? (
-        <FlexRow {...props}>
-          <IconButton size="small" color="inherit" onClick={handleClick}>
-            <MoreHorizIcon fontSize="inherit" />
-          </IconButton>
-          <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-            {actions?.map((action) => {
-              return (
-                <MenuItem
-                  key={action.name}
-                  onClick={() => {
-                    action?.onClick?.()
-                    handleClose()
-                  }}
-                >
-                  {action.name}
-                </MenuItem>
-              )
-            })}
-          </Menu>
-        </FlexRow>
-      )
-    : null
-}

package/src/components/ActionsProps.ts

@@ -1,8 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-
-import type { PropertyAction } from './Action.ts'
-
-export interface PropertyActionsProps extends FlexBoxProps {
-  actions?: PropertyAction[]
-  buttons?: boolean
-}

package/src/components/Group.tsx

@@ -1,62 +0,0 @@
-import { Paper, useTheme } from '@mui/material'
-import {
-  FlexCol, FlexGrowRow, FlexRow,
-} from '@xylabs/react-flexbox'
-import { typeOf } from '@xyo-network/typeof'
-import type { ReactElement } from 'react'
-import React from 'react'
-
-import type {
-  PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps,
-} from './Props.ts'
-import { PropertyTitle } from './Title.tsx'
-
-const PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({
-  titleProps, children, title, tip, ...props
-}) => {
-  const theme = useTheme()
-  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined
-  return (
-    <FlexCol alignItems="stretch" overflow="hidden" {...props}>
-      <FlexRow overflow="hidden" justifyContent="stretch" alignItems="stretch">
-        <PropertyTitle alignItems="flex-start" size="full" title={title} tip={tip} {...titleProps} />
-        {childrenArray
-          ? (
-              <FlexGrowRow>
-                {childrenArray?.map((child, index) => {
-                  return child
-                    ? (
-                        <FlexGrowRow key={index} borderLeft={1} borderColor={theme.vars.palette.divider}>
-                          {child}
-                        </FlexGrowRow>
-                      )
-                    : null
-                })}
-              </FlexGrowRow>
-            )
-          : <FlexGrowRow overflow="hidden">{children}</FlexGrowRow>}
-      </FlexRow>
-    </FlexCol>
-  )
-}
-
-const PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({
-  style, variant, elevation, square, ...props
-}) => {
-  return (
-    <Paper
-      style={{
-        minWidth: 0, overflow: 'hidden', ...style,
-      }}
-      variant={variant}
-      elevation={elevation}
-      square={square}
-    >
-      <PropertyGroupBox {...props} paper={false} />
-    </Paper>
-  )
-}
-
-export const PropertyGroup: React.FC<PropertyGroupProps> = (props) => {
-  return props.paper ? <PropertyGroupPaper {...props} /> : <PropertyGroupBox {...props} />
-}

package/src/components/IdenticonCorner.tsx

@@ -1,28 +0,0 @@
-import { useTheme } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { Identicon } from '@xylabs/react-identicon'
-import React, { useMemo, useRef } from 'react'
-
-export interface IdenticonCornerProps extends FlexBoxProps {
-  value?: string | number | boolean | null
-}
-
-export const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {
-  const theme = useTheme()
-  const ref = useRef<HTMLDivElement>(null)
-
-  const parentHeight = useMemo(() => ref.current?.parentElement?.parentElement?.clientHeight, [ref.current])
-
-  const calculatedHeight = parentHeight ?? 0
-
-  return (
-    <FlexRow alignItems="flex-start" height="100%">
-      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.vars.palette.divider}`}>
-        <div ref={ref}>
-          <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />
-        </div>
-      </FlexRow>
-    </FlexRow>
-  )
-}

package/src/components/Property.tsx

@@ -1,86 +0,0 @@
-import type { TypographyVariant } from '@mui/material'
-import { CircularProgress, Paper } from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import type { SizeProp } from '@xyo-network/react-shared'
-import React from 'react'
-
-import { PropertyActionsMenu } from './ActionsMenu.tsx'
-import { IdenticonCorner } from './IdenticonCorner.tsx'
-import type {
-  PropertyBoxProps, PropertyPaperProps, PropertyProps,
-} from './Props.ts'
-import { PropertyTitle } from './Title.tsx'
-import { PropertyValue } from './Value.tsx'
-
-const PropertyBox: React.FC<PropertyBoxProps> = ({
-  titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props
-}) => {
-  const sizeValueHeight: Record<SizeProp, number> = {
-    large: 48,
-    medium: 36,
-    small: 24,
-  }
-
-  const sizeVariants: Record<SizeProp, TypographyVariant> = {
-    large: 'h6',
-    medium: 'body1',
-    small: 'body2',
-  }
-
-  return (
-    <FlexRow flexDirection="column" minWidth={0} alignItems="stretch" overflow="hidden" {...props}>
-      {title === undefined
-        ? null
-        : (
-            <PropertyTitle
-              tip={tip}
-              title={required ? `${title}*` : title}
-              size={size}
-              more={<PropertyActionsMenu actions={actions} />}
-              {...titleProps}
-            />
-          )}
-      <FlexRow
-        pl={1}
-        columnGap={1}
-        justifyContent={value === undefined ? 'center' : 'space-between'}
-        overflow="hidden"
-        height={sizeValueHeight[size]}
-      >
-        {children ?? ((value === undefined)
-          ? <CircularProgress size={16} />
-          : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />)}
-        {value === undefined
-          ? null
-          : badge
-            ? <IdenticonCorner value={value} />
-            : null}
-      </FlexRow>
-    </FlexRow>
-  )
-}
-PropertyBox.displayName = 'PropertyBox'
-
-const PropertyPaper: React.FC<PropertyPaperProps> = ({
-  ref, style, variant, elevation = 2, square, ...props
-}) => {
-  return (
-    <Paper
-      ref={ref}
-      style={{
-        minWidth: 0, overflow: 'hidden', ...style,
-      }}
-      variant={variant}
-      elevation={elevation}
-      square={square}
-    >
-      <PropertyBox {...props} paper={false} />
-    </Paper>
-  )
-}
-PropertyPaper.displayName = 'PropertyPaper'
-
-export const Property: React.FC<PropertyProps> = ({ ...props }) => {
-  return props.paper ? <PropertyPaper {...props} /> : <PropertyBox {...props} />
-}
-Property.displayName = 'Property'

package/src/components/PropertyBox.stories.tsx

@@ -1,173 +0,0 @@
-import { Replay as ReplayIcon } from '@mui/icons-material'
-import { TextField } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import { Property } from './Property.tsx'
-import type { PropertyProps } from './Props.ts'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: Property,
-  parameters: { docs: { page: null } },
-  title: 'property/PropertyBox',
-} as Meta<typeof Property>
-
-const Template: StoryFn = (args: PropertyProps) => <Property {...args} paper={false}></Property>
-
-const TemplateWithCompare: StoryFn = (args: PropertyProps) => (
-  <FlexCol gap={1} alignItems="stretch">
-    <FlexRow gap={1}>
-      <TextField size="small" value="Sample text Field" />
-      <Property {...args} size="small"></Property>
-    </FlexRow>
-    <FlexRow gap={1}>
-      <Property {...args} size="small"></Property>
-      <Property {...args} size="small"></Property>
-    </FlexRow>
-    <FlexRow gap={1}>
-      <TextField size="medium" value="Sample text Field" />
-      <Property {...args} size="medium"></Property>
-    </FlexRow>
-    <FlexRow gap={1}>
-      <Property {...args} size="medium"></Property>
-      <Property {...args} size="medium"></Property>
-    </FlexRow>
-    <FlexRow gap={1}>
-      <TextField value="Sample text Field" />
-      <Property {...args} size="large"></Property>
-    </FlexRow>
-    <FlexRow gap={1}>
-      <Property {...args} size="large"></Property>
-      <Property {...args} size="large"></Property>
-    </FlexRow>
-  </FlexCol>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithTitle = Template.bind({})
-WithTitle.args = { title: 'No Data' }
-
-const WithUndefinedData = Template.bind({})
-WithUndefinedData.args = { title: 'Block Hash' }
-
-const WithData = Template.bind({})
-WithData.args = {
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock)
-}
-
-const WithDataSmall = Template.bind({})
-WithDataSmall.args = {
-  size: 'small',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock)
-}
-
-const WithDataCompare = TemplateWithCompare.bind({})
-WithDataCompare.args = {
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const WithDataAndBadgeSmall = Template.bind({})
-WithDataAndBadgeSmall.args = {
-  badge: true,
-  size: 'small',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const WithDataAndBadgeMedium = Template.bind({})
-WithDataAndBadgeMedium.args = {
-  badge: true,
-  size: 'medium',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const WithDataAndBadgeLarge = Template.bind({})
-WithDataAndBadgeLarge.args = {
-  badge: true,
-  size: 'large',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const WithTip = Template.bind({})
-WithTip.args = {
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const WithTipAndBadge = Template.bind({})
-WithTipAndBadge.args = {
-  badge: true,
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const WithActions = Template.bind({})
-WithActions.args = {
-  actions: [{ name: 'ActionOne' }, { name: 'ActionTwo' }],
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const LargeWithValue = Template.bind({})
-LargeWithValue.args = {
-  badge: true,
-  size: 'large',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const LargeWithValueAndActions = Template.bind({})
-LargeWithValueAndActions.args = {
-  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],
-  badge: true,
-  size: 'large',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-const SmallWithValueAndActions = Template.bind({})
-SmallWithValueAndActions.args = {
-  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],
-  badge: true,
-  size: 'small',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  // value: await PayloadBuilder.dataHash(sampleBlock),
-}
-
-export {
-  Default,
-  LargeWithValue,
-  LargeWithValueAndActions,
-  SmallWithValueAndActions,
-  WithActions,
-  WithData,
-  WithDataAndBadgeLarge,
-  WithDataAndBadgeMedium,
-  WithDataAndBadgeSmall,
-  WithDataCompare,
-  WithDataSmall,
-  WithTip,
-  WithTipAndBadge,
-  WithUndefinedData,
-}
-
-export default StorybookEntry