@xyo-network/react-shared 4.4.10 → 5.0.0-rc.1

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -1,7 +1,7 @@
 import type { TableCellProps } from '@mui/material'
 import { styled, TableCell } from '@mui/material'
 import { asLinkHrefOrToProps, LinkEx } from '@xylabs/react-link'
-import React, { forwardRef, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import type { To } from 'react-router-dom'
 
 import { EllipsizeBox } from '../Ellipsize.tsx'
@@ -26,30 +26,28 @@ export interface EllipsisTableCellProps extends Omit<TableCellProps, 'ref'> {
   width?: string | number
 }
 
-export const EllipsisTableCellWithRef = forwardRef<HTMLDivElement, EllipsisTableCellProps>(
-  ({
-    children, href, link = false, to, value, ...props
-  }, ref) => {
-    const data = useMemo(() => {
-      if (children) {
-        return children
-      }
-      if (href || link || to) {
-        return (
-          <LinkEx title={value} {...asLinkHrefOrToProps({ to, href })} target={href ? '_blank' : undefined}>
-            {value}
-          </LinkEx>
-        )
-      }
-      return value
-    }, [children, href, link, to, value])
-    return (
-      <EllipsisTableCellRoot {...props}>
-        <EllipsizeBox ref={ref} sx={{ cursor: link || to || href ? 'pointer' : 'inherit' }}>{data}</EllipsizeBox>
-      </EllipsisTableCellRoot>
-    )
-  },
-)
+export const EllipsisTableCellWithRef = ({
+  ref, children, href, link = false, to, value, ...props
+}: EllipsisTableCellProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
+  const data = useMemo(() => {
+    if (children) {
+      return children
+    }
+    if (href || link || to) {
+      return (
+        <LinkEx title={value} {...asLinkHrefOrToProps({ to, href })} target={href ? '_blank' : undefined}>
+          {value}
+        </LinkEx>
+      )
+    }
+    return value
+  }, [children, href, link, to, value])
+  return (
+    <EllipsisTableCellRoot {...props}>
+      <EllipsizeBox ref={ref} sx={{ cursor: link || to || href ? 'pointer' : 'inherit' }}>{data}</EllipsizeBox>
+    </EllipsisTableCellRoot>
+  )
+}
 
 EllipsisTableCellWithRef.displayName = 'EllipsisTableCell'
 export const EllipsisTableCell = EllipsisTableCellWithRef

package/src/components/bigint/TextField.tsx

@@ -2,6 +2,7 @@ import type { FormControlProps, StandardTextFieldProps } from '@mui/material'
 import {
   FormControl, FormHelperText, TextField,
 } from '@mui/material'
+import { toFixedPoint } from '@xylabs/decimal-precision'
 import type { FocusEventHandler } from 'react'
 import React, {
   useEffect, useMemo, useState,
@@ -20,14 +21,12 @@ export interface BigIntTextFieldProps extends StandardTextFieldProps {
 export const BigIntTextField: React.FC<BigIntTextFieldProps> = ({
   defaultFixedPoint = 18, defaultRawValue, helperText, hideAdornment, onChangeFixedPoint, onChange, resetValue, ...props
 }) => {
-  const [value, setValue] = useState<number | undefined>()
   const [rawValue, setRawValue] = useState<string>('')
   const [fixedPoint, setFixedPoint] = useState(defaultFixedPoint)
   const [error, setError] = useState<Error>()
 
   useMemo(() => {
     setRawValue('')
-    setValue(undefined)
   }, [resetValue])
 
   const handleRawValueChange = (rawValue: string) => {
@@ -36,19 +35,11 @@ export const BigIntTextField: React.FC<BigIntTextFieldProps> = ({
     // only allow one decimal point
     if (filteredValue.split('.').length > 2) return
     setRawValue(filteredValue)
-
-    // parse the raw filtered raw value
-    const value = Number.parseFloat(filteredValue)
-    // if the value is NaN set it to 0
-    if (Number.isNaN(value)) setValue(undefined)
-    setValue(value)
   }
 
   useMemo(() => {
     if (defaultRawValue) {
       handleRawValueChange(defaultRawValue)
-    } else {
-      setValue(undefined)
     }
   }, [defaultRawValue])
 
@@ -62,11 +53,11 @@ export const BigIntTextField: React.FC<BigIntTextFieldProps> = ({
 
   // on value or point changes, run the bigInt callback
   const bigIntValue = useMemo(() => {
-    if (value) {
-      const fixedValue = value * (10 ** fixedPoint)
+    if (rawValue) {
+      const fixedValue = toFixedPoint(rawValue)
       setError(undefined)
       try {
-        return BigInt(fixedValue)
+        return fixedValue
       } catch (e) {
         console.error(e)
         setError(e as Error)
@@ -76,7 +67,7 @@ export const BigIntTextField: React.FC<BigIntTextFieldProps> = ({
       return
     }
     // run bigInt callback
-  }, [value, fixedPoint])
+  }, [rawValue, fixedPoint])
 
   useEffect(() => {
     onChangeFixedPoint?.(bigIntValue)

package/src/contexts/ListMode/Provider.tsx

@@ -19,10 +19,10 @@ export const ListModeProvider: React.FC<PropsWithChildren<ListModeProviderProps>
     setListMode])
 
   return (
-    <ListModeContext.Provider
+    <ListModeContext
       value={value}
     >
       {children}
-    </ListModeContext.Provider>
+    </ListModeContext>
   )
 }

package/src/contexts/contextEx/use.ts

@@ -1,10 +1,10 @@
 import type { Context } from 'react'
-import { useContext } from 'react'
+import { use } from 'react'
 
 import type { ContextExState } from './State.ts'
 
 export const useContextEx = <T extends ContextExState>(context: Context<T>, contextName: string, required = true) => {
-  const { provided, ...props } = useContext(context)
+  const { provided, ...props } = use(context)
   if (!provided && required) {
     throw new Error(`use${contextName} can not be used outside of a ${contextName}Context when required=true`)
   }
@@ -12,6 +12,6 @@ export const useContextEx = <T extends ContextExState>(context: Context<T>, cont
 }
 
 export const useProvided = <T extends ContextExState>(context: Context<T>) => {
-  const { provided } = useContext(context)
+  const { provided } = use(context)
   return provided
 }

package/src/contexts/diviner/Provider.tsx

@@ -12,7 +12,7 @@ export interface DivinerProviderProps<D> extends ContextExProviderProps, PropsWi
 
 /** Exposes a resolved diviner */
 export const ResolvedDivinerProvider = <D,>({
-  diviner: divinerProp, required = false, children, context,
+  diviner: divinerProp, required = false, children, context: Context,
 }: DivinerProviderProps<D>) => {
   const [diviner, setDiviner] = useResetState<D | undefined>(divinerProp)
 
@@ -33,7 +33,7 @@ export const ResolvedDivinerProvider = <D,>({
     setDiviner, divinerProp])
 
   return (
-    <context.Provider
+    <Context
       value={value}
     >
       {diviner
@@ -41,6 +41,6 @@ export const ResolvedDivinerProvider = <D,>({
         : required
           ? null
           : children}
-    </context.Provider>
+    </Context>
   )
 }

package/src/hooks/useShareForwardRef.ts

@@ -1,7 +1,7 @@
 import type { ForwardedRef } from 'react'
 import { useEffect, useRef } from 'react'
 
-export const useShareForwardedRef = <T>(forwardedRef: ForwardedRef<T>, refresh = 0) => {
+export const useShareForwardedRef = <T>(forwardedRef: ForwardedRef<T> | null | undefined, refresh = 0) => {
   // final ref that will share value with forward ref. this is the one to be attached to components
   const innerRef = useRef<T>(null)
 

package/dist/browser/index.d.ts

@@ -1,343 +0,0 @@
-import { TypographyProps, PopoverProps, StandardTextFieldProps, FormControlProps, InputAdornmentProps, BoxProps, TypographyTypeMap, StackProps, ListItemButtonProps, AlertProps, TableCellProps, AvatarProps, AvatarGroupProps, PaperProps, CardHeaderProps, SvgIconProps } from '@mui/material';
-export { useMediaQuery } from '@mui/material';
-import * as React from 'react';
-import React__default, { ReactElement, PropsWithChildren, ReactNode, Context, Dispatch, SetStateAction, CSSProperties, ForwardedRef } from 'react';
-import * as _xylabs_react_flexbox from '@xylabs/react-flexbox';
-import { FlexBoxProps } from '@xylabs/react-flexbox';
-import { To, NavigateOptions } from 'react-router-dom';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Hash } from '@xylabs/hex';
-import * as _mui_styles from '@mui/styles';
-import { Payload } from '@xyo-network/payload-model';
-import { BoundWitness } from '@xyo-network/boundwitness-model';
-
-declare const Ampersand: React__default.FC<TypographyProps>;
-
-interface BasicHeroProps extends FlexBoxProps {
-    backgroundColor?: string;
-    backgroundImage?: string;
-    button1Href?: string;
-    button1Text?: string;
-    button1To?: string;
-    button2Href?: string;
-    button2Text?: string;
-    button2To?: string;
-    desc: string;
-    gradientTitle?: string;
-    heroImage?: string;
-    subLinkIcon?: ReactElement;
-    subLinkPath?: string;
-    subLinkText1?: string;
-    subLinkText2?: string;
-    sx?: Record<string, string>;
-    textColor?: string;
-    title: string;
-    title2?: string;
-}
-declare const BasicHero: React__default.FC<BasicHeroProps>;
-
-interface FixedPointPopoverProps extends PopoverProps {
-    fixedPoint?: number;
-    minFixedPoint?: number;
-    onFixedPointChange?: (value: number) => void;
-}
-declare const FixedPointPopover: React__default.FC<FixedPointPopoverProps>;
-
-interface BigIntTextFieldProps extends StandardTextFieldProps {
-    defaultFixedPoint?: number;
-    defaultRawValue?: string;
-    hideAdornment?: boolean;
-    onChangeFixedPoint?: (value?: bigint) => void;
-    resetValue?: number;
-}
-declare const BigIntTextField: React__default.FC<BigIntTextFieldProps>;
-interface InputWithFormControlProps extends FormControlProps {
-    textFieldProps?: BigIntTextFieldProps;
-}
-declare const WithFormControl: React__default.FC<InputWithFormControlProps>;
-
-declare const BigIntInput: {
-    TextField: React.FC<BigIntTextFieldProps>;
-    WithFormControl: React.FC<InputWithFormControlProps>;
-};
-
-interface FixedPointInputAdornmentProps extends InputAdornmentProps {
-    fixedPoint?: number;
-    minFixedPoint?: number;
-    onFixedPointChange?: (value: number) => void;
-}
-declare const FixedPointInputAdornment: React__default.FC<FixedPointInputAdornmentProps>;
-
-interface EllipsizeRootProps extends BoxProps {
-    beforeLineHeight?: string | number;
-}
-type TypographyWithComponentProps<D extends React__default.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = TypographyProps<D, P> & {
-    ellipsisPosition?: 'start' | 'end';
-};
-interface EllipsizeBoxProps extends BoxProps {
-    disableSharedRef?: boolean;
-    ellipsisPosition?: 'start' | 'end';
-    typographyProps?: TypographyWithComponentProps;
-}
-declare const EllipsizeBox: React__default.ForwardRefExoticComponent<Omit<PropsWithChildren<EllipsizeBoxProps>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
-
-interface LabeledTextFieldWrapperProps extends StackProps {
-    label: string;
-}
-declare const LabeledTextFieldWrapper: React__default.FC<LabeledTextFieldWrapperProps>;
-
-interface ListItemButtonExProps extends ListItemButtonProps {
-    target?: string;
-    to?: To;
-    toOptions?: NavigateOptions;
-}
-declare const ListItemButtonExTo: React__default.FC<ListItemButtonExProps>;
-declare const ListItemButtonEx: React__default.FC<ListItemButtonExProps>;
-
-interface LoadResultProps<T> {
-    apiError?: Error;
-    error?: boolean;
-    notFound: boolean;
-    searchResult: T | undefined;
-}
-declare function LoadResult<T>(props: PropsWithChildren<LoadResultProps<T>>): react_jsx_runtime.JSX.Element;
-
-declare const NotFound: React__default.FC<FlexBoxProps>;
-
-declare const Pipe: React__default.FC<TypographyProps>;
-
-interface PayloadDataMissingProps extends AlertProps {
-    alertBody?: string;
-}
-declare const PayloadDataMissing: React__default.FC<PayloadDataMissingProps>;
-
-declare const ScrollTableOnSm: React__default.FC<PropsWithChildren>;
-
-declare const SectionSpacingRow: React__default.ForwardRefExoticComponent<_xylabs_react_flexbox.BusyBoxProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface EllipsisTableCellProps extends Omit<TableCellProps, 'ref'> {
-    href?: string;
-    link?: boolean;
-    to?: To;
-    value?: string;
-    width?: string | number;
-}
-declare const EllipsisTableCellWithRef: React__default.ForwardRefExoticComponent<EllipsisTableCellProps & React__default.RefAttributes<HTMLDivElement>>;
-declare const EllipsisTableCell: React__default.ForwardRefExoticComponent<EllipsisTableCellProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface AddressTableCellProps extends Omit<EllipsisTableCellProps, 'ref'> {
-    archive?: string;
-    exploreDomain?: string;
-    link?: boolean;
-}
-declare const AddressTableCell: React__default.ForwardRefExoticComponent<AddressTableCellProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface HashTableCellProps extends EllipsisTableCellProps {
-    archive?: string;
-    dataType?: 'block' | 'payload';
-    exploreDomain?: string;
-    network?: string;
-    onHashClick?: (value: Hash) => void;
-}
-declare const HashTableCell: React__default.FC<HashTableCellProps>;
-
-declare const ThemeTokenAvatar: React__default.FC<AvatarProps>;
-
-interface ThemeTokenAvatarGroupProps extends AvatarGroupProps {
-    images?: string[];
-}
-declare const ThemeTokenAvatarGroup: React__default.FC<ThemeTokenAvatarGroupProps>;
-
-interface TokenBarProps extends PaperProps {
-    text1?: ReactNode;
-    text1Props?: TypographyProps;
-    text1Suffix?: ReactNode;
-    text2?: ReactNode;
-    text2Props?: TypographyProps;
-    text2Suffix?: ReactNode;
-}
-declare const TokenBar: React__default.FC<TokenBarProps>;
-
-interface TokenData {
-    coinmarketcapLink: string;
-    etherscanLink: string;
-    icon: string;
-    readableName: string;
-    tokenSymbol: string;
-    uniqueTokenId: string;
-}
-declare const TokenData: TokenData[];
-
-declare const useGetTokenData: (symbols: (string | undefined)[]) => TokenData[];
-
-interface TokenSummaryProps extends CardHeaderProps {
-    icon?: string;
-    imgBgProps?: AvatarProps;
-    symbol?: string;
-    symbolElement?: ReactNode;
-}
-declare const TokenSummary: React__default.FC<TokenSummaryProps>;
-
-interface TypographyExProps extends TypographyProps {
-    gradient?: 'text';
-}
-declare const TypographyEx: React__default.FC<TypographyExProps>;
-
-type EmptyObject = {};
-type ContextExProviderProps<T extends EmptyObject = EmptyObject> = PropsWithChildren<{
-    required?: boolean;
-} & T>;
-
-interface ContextExState {
-    provided: boolean;
-}
-
-declare const createContextEx: <T>() => React.Context<T & ContextExState>;
-
-declare const useContextEx: <T extends ContextExState>(context: Context<T>, contextName: string, required?: boolean) => Omit<T, "provided">;
-declare const useProvided: <T extends ContextExState>(context: Context<T>) => boolean;
-
-declare const ResolvedDivinerContext: <T>() => React.Context<T & ContextExState>;
-
-interface ResolvedDivinerState<T> extends ContextExState {
-    diviner?: T;
-    setDiviner?: Dispatch<SetStateAction<T | undefined>>;
-}
-
-interface DivinerProviderProps<D> extends ContextExProviderProps, PropsWithChildren {
-    context: Context<ResolvedDivinerState<D>>;
-    diviner?: D;
-}
-declare const ResolvedDivinerProvider: <D>({ diviner: divinerProp, required, children, context, }: DivinerProviderProps<D>) => react_jsx_runtime.JSX.Element;
-
-type ListMode = 'table' | 'grid' | 'default';
-
-interface ListModeContextState extends ContextExState {
-    listMode: ListMode;
-    setListMode?: Dispatch<ListMode>;
-}
-
-declare const ListModeContext: React.Context<ListModeContextState & ContextExState>;
-
-interface ListModeProviderProps {
-    defaultListMode?: ListMode;
-}
-declare const ListModeProvider: React__default.FC<PropsWithChildren<ListModeProviderProps>>;
-
-declare const useListMode: (required?: boolean) => Omit<ListModeContextState & ContextExState, "provided">;
-
-interface GradientStyles {
-    background: CSSProperties;
-    border: CSSProperties;
-    heading: CSSProperties;
-}
-declare const colorfulGradientLightMode: () => {
-    background: {
-        backgroundImage: string;
-    };
-    border: {
-        borderImage: string;
-        borderImageSlice: number;
-        borderImageSource: string;
-        borderRadius: number;
-        borderStyle: string;
-        borderWidth: string;
-    };
-    heading: {
-        WebkitBackgroundClip: string;
-        WebkitTextFillColor: string;
-        background: string;
-        display: string;
-    };
-};
-declare const colorfulGradientDarkMode: () => {
-    background: {
-        backgroundImage: string;
-    };
-    border: {
-        borderImage: string;
-        borderImageSlice: number;
-        borderImageSource: string;
-        borderRadius: number;
-        borderStyle: string;
-        borderWidth: string;
-    };
-    heading: {
-        WebkitBackgroundClip: string;
-        WebkitTextFillColor: string;
-        background: string;
-        display: string;
-    };
-};
-declare const useGradientStyles: () => {
-    classes: (props?: any) => _mui_styles.ClassNameMap<"border" | "background" | "heading">;
-    styles: {
-        background: {
-            backgroundImage: string;
-        };
-        border: {
-            borderImage: string;
-            borderImageSlice: number;
-            borderImageSource: string;
-            borderRadius: number;
-            borderStyle: string;
-            borderWidth: string;
-        };
-        heading: {
-            WebkitBackgroundClip: string;
-            WebkitTextFillColor: string;
-            background: string;
-            display: string;
-        };
-    };
-};
-
-type ValidatedResponse<T extends Payload = Payload> = {
-    errors?: Error[];
-    payload?: T;
-};
-
-declare const useValidateBoundWitness: (input?: string) => ValidatedResponse<BoundWitness>;
-
-declare const usePayloadHash: <TPayload extends Payload>(payload: TPayload | undefined | null) => Lowercase<string> | undefined;
-declare const usePayloadRootHash: <TPayload extends Payload>(payload: TPayload | undefined | null) => Lowercase<string> | undefined;
-declare const usePayloadHashes: <TPayload extends Payload>(payloads: TPayload[] | undefined | null) => [TPayload, Lowercase<string>][] | undefined;
-
-declare const usePayloadValidate: <TPayload extends Payload>(input?: string) => ValidatedResponse;
-
-declare const useDataState: <T>(defaultValue: T | undefined) => [T | undefined, Dispatch<SetStateAction<T | undefined>>];
-
-declare const useIsMobile: () => boolean;
-declare const useIsSmall: () => boolean;
-
-declare const useShareForwardedRef: <T>(forwardedRef: ForwardedRef<T>, refresh?: number) => React.RefObject<T>;
-
-declare const assertDefinedEx: <T>(expr?: T | null, message?: string) => T;
-
-declare const parseMeausureString: (measure?: string, absolute?: number) => number | undefined;
-declare const parsePadding: (padding: string) => {
-    bottom: string;
-    left: string;
-    right: string;
-    top: string;
-} | {
-    bottom: string;
-    right: string;
-    top: string;
-    left?: undefined;
-} | undefined;
-declare const getActualPaddingX: (element: HTMLElement) => number;
-
-type NetworkComponentSlug = 'sentinel' | 'bridge' | 'archivist' | 'diviner' | 'node' | 'witness';
-interface NetworkComponentDetails {
-    icon: (props?: SvgIconProps) => ReactElement;
-    name: string;
-    slug: NetworkComponentSlug;
-}
-declare const networkComponents: NetworkComponentDetails[];
-declare const findNetworkComponentIndex: (slug: string) => number;
-declare const findNetworkComponent: (slug: string) => NetworkComponentDetails | undefined;
-
-type SizeProp = 'small' | 'medium' | 'large';
-
-export { AddressTableCell, type AddressTableCellProps, Ampersand, BasicHero, type BasicHeroProps, BigIntInput, BigIntTextField, type BigIntTextFieldProps, type ContextExProviderProps, type ContextExState, type DivinerProviderProps, EllipsisTableCell, type EllipsisTableCellProps, EllipsisTableCellWithRef, EllipsizeBox, type EllipsizeBoxProps, type EllipsizeRootProps, type EmptyObject, FixedPointInputAdornment, type FixedPointInputAdornmentProps, FixedPointPopover, type FixedPointPopoverProps, type GradientStyles, HashTableCell, type HashTableCellProps, type InputWithFormControlProps, LabeledTextFieldWrapper, type LabeledTextFieldWrapperProps, ListItemButtonEx, type ListItemButtonExProps, ListItemButtonExTo, type ListMode, ListModeContext, type ListModeContextState, ListModeProvider, type ListModeProviderProps, LoadResult, type LoadResultProps, type NetworkComponentDetails, type NetworkComponentSlug, NotFound, PayloadDataMissing, type PayloadDataMissingProps, Pipe, ResolvedDivinerContext, ResolvedDivinerProvider, type ResolvedDivinerState, ScrollTableOnSm, SectionSpacingRow, type SizeProp, ThemeTokenAvatar, ThemeTokenAvatarGroup, type ThemeTokenAvatarGroupProps, TokenBar, type TokenBarProps, TokenData, TokenSummary, type TokenSummaryProps, TypographyEx, type TypographyExProps, type TypographyWithComponentProps, type ValidatedResponse, WithFormControl, assertDefinedEx, colorfulGradientDarkMode, colorfulGradientLightMode, createContextEx, findNetworkComponent, findNetworkComponentIndex, getActualPaddingX, networkComponents, parseMeausureString, parsePadding, useContextEx, useDataState, useGetTokenData, useGradientStyles, useIsMobile, useIsSmall, useListMode, usePayloadHash, usePayloadHashes, usePayloadRootHash, usePayloadValidate, useProvided, useShareForwardedRef, useValidateBoundWitness };