@blockscout/ui-toolkit 2.7.3 → 2.8.0-alpha.0

package/dist/components/charts/sankey/SankeyChartWidget.d.ts

@@ -0,0 +1,14 @@
+import { FlexProps } from '@chakra-ui/react';
+import { default as React } from 'react';
+import { SankeyChartData } from './types';
+import { ChartContentProps } from '../components/ChartContent';
+import { SankeyChartProps } from './SankeyChart';
+export interface SankeyChartWidgetProps extends Omit<ChartContentProps, 'children'>, Omit<SankeyChartProps, 'data'> {
+    data?: SankeyChartData;
+    title: string;
+    description?: string;
+    href?: string;
+    chartUrl?: string;
+    containerProps?: FlexProps;
+}
+export declare const SankeyChartWidget: ({ data, title, description, isLoading, href, chartUrl, containerProps, ...rest }: SankeyChartWidgetProps) => React.JSX.Element;

package/dist/components/charts/sankey/constants.d.ts

@@ -10,7 +10,7 @@ export declare const SANKEY_NODE_COLOR_TOKENS_LIGHT: Array<string>;
  * @see https://www.figma.com/design/3mGpZEE65cSuLnhtJBfKkO?node-id=6867-21363
  */
 export declare const SANKEY_NODE_COLOR_TOKENS_DARK: Array<string>;
-export declare const DEFAULT_SANKEY_NODE_WIDTH = 16;
-export declare const DEFAULT_SANKEY_NODE_PADDING = 40;
-export declare const DEFAULT_SANKEY_LINK_OPACITY = 0.35;
-export declare const DEFAULT_SANKEY_LINK_HOVER_OPACITY = 0.6;
+export declare const SANKEY_NODE_DEFAULT_WIDTH = 16;
+export declare const SANKEY_NODE_DEFAULT_PADDING = 40;
+export declare const SANKEY_LINK_DEFAULT_OPACITY = 0.35;
+export declare const SANKEY_LINK_DEFAULT_HOVER_OPACITY = 0.6;

package/dist/components/charts/sankey/index.d.ts

@@ -1,6 +1,6 @@
 export * from './SankeyChart';
-export * from './parts/SankeyNode';
-export * from './parts/SankeyLink';
+export * from './parts/SankeyChartNode';
+export * from './parts/SankeyChartLink';
 export * from './useSankeyController';
 export * from './types';
 export * from './constants';

package/dist/components/charts/sankey/parts/SankeyChartLink.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { SankeyChartLinkExtended } from '../types';
+export interface SankeyChartLinkProps {
+    link: SankeyChartLinkExtended;
+    /** Single color when gradient is not used */
+    color?: string;
+    /** When set with targetColor, link stroke is a gradient from source to target */
+    sourceColor?: string;
+    targetColor?: string;
+    /** Unique suffix for gradient id (e.g. link index) when multiple links share same source/target */
+    gradientIdSuffix?: string | number;
+    opacity: number;
+    hoverOpacity: number;
+    pathGenerator: (link: SankeyChartLinkExtended, ...args: Array<any>) => string | null;
+    onMouseEnter?: (link: SankeyChartLinkExtended, event: React.MouseEvent) => void;
+    onMouseLeave?: () => void;
+}
+export declare const SankeyChartLink: React.MemoExoticComponent<({ link, color, sourceColor, targetColor, gradientIdSuffix, opacity, hoverOpacity, pathGenerator, onMouseEnter, onMouseLeave, }: SankeyChartLinkProps) => React.JSX.Element | null>;

package/dist/components/charts/sankey/parts/SankeyChartMenu.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { SankeyChartData } from '../types';
+import { ChartMenuProps } from '../../components/ChartMenu';
+export interface SankeyChartMenuProps extends Omit<ChartMenuProps, 'csvData' | 'onFullscreenOpen'> {
+    data?: SankeyChartData;
+}
+export declare const SankeyChartMenu: React.MemoExoticComponent<({ data, ...rest }: SankeyChartMenuProps) => React.JSX.Element>;

package/dist/components/charts/sankey/parts/SankeyChartNode.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { SankeyChartNodeExtended } from '../types';
+export interface SankeyChartNodeProps {
+    node: SankeyChartNodeExtended;
+    color: string;
+    onMouseEnter?: (node: SankeyChartNodeExtended, event: React.MouseEvent) => void;
+    onMouseLeave?: () => void;
+}
+export declare const SankeyChartNode: React.MemoExoticComponent<({ node, color, onMouseEnter, onMouseLeave }: SankeyChartNodeProps) => React.JSX.Element>;

package/dist/components/charts/sankey/types.d.ts

@@ -8,12 +8,12 @@ export interface SankeyLinkDatum {
     readonly target: string;
     readonly value: number;
 }
-export interface SankeyData {
+export interface SankeyChartData {
     readonly nodes: ReadonlyArray<SankeyNodeDatum>;
     readonly links: ReadonlyArray<SankeyLinkDatum>;
 }
-export type SankeyNodeExtended = SankeyNodeDatum & SankeyNode<SankeyNodeDatum, SankeyLinkDatum>;
-export type SankeyLinkExtended = Omit<SankeyLink<SankeyNodeDatum, SankeyLinkDatum>, 'source' | 'target'> & {
-    source: SankeyNodeExtended;
-    target: SankeyNodeExtended;
+export type SankeyChartNodeExtended = SankeyNodeDatum & SankeyNode<SankeyNodeDatum, SankeyLinkDatum>;
+export type SankeyChartLinkExtended = Omit<SankeyLink<SankeyNodeDatum, SankeyLinkDatum>, 'source' | 'target'> & {
+    source: SankeyChartNodeExtended;
+    target: SankeyChartNodeExtended;
 };

package/dist/components/charts/sankey/useSankeyController.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 import { ChartMargin } from '../types';
-import { SankeyData, SankeyLinkExtended, SankeyNodeExtended } from './types';
+import { SankeyChartData, SankeyChartLinkExtended, SankeyChartNodeExtended } from './types';
 interface Props {
-    data: SankeyData;
+    data: SankeyChartData;
     margin?: ChartMargin;
     nodeWidth?: number;
     nodePadding?: number;
@@ -12,9 +12,9 @@ interface UseSankeyControllerResult {
     readonly rect: DOMRect | null;
     readonly innerWidth: number;
     readonly innerHeight: number;
-    readonly nodes: Array<SankeyNodeExtended>;
-    readonly links: Array<SankeyLinkExtended>;
-    readonly linkPathGenerator: (link: SankeyLinkExtended) => string | null;
+    readonly nodes: Array<SankeyChartNodeExtended>;
+    readonly links: Array<SankeyChartLinkExtended>;
+    readonly linkPathGenerator: (link: SankeyChartLinkExtended) => string | null;
 }
 export declare function useSankeyController({ data, margin, nodeWidth, nodePadding }: Props): UseSankeyControllerResult;
 export {};

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

@@ -1,22 +1,3 @@
-import { Resolution as ResolutionEnum } from '@blockscout/stats-types';
-import type * as d3 from 'd3';
-export { Resolution } from '@blockscout/stats-types';
-export declare const RESOLUTION_LABELS: Array<{
-    id: ResolutionEnum;
-    title: string;
-}>;
-export interface TimeChartItemRaw {
-    date: Date;
-    dateLabel?: string;
-    value: number | string | null;
-}
-export interface TimeChartItem {
-    date: Date;
-    date_to?: Date;
-    dateLabel?: string;
-    value: number;
-    isApproximate?: boolean;
-}
 export interface ChartMargin {
     top?: number;
     right?: number;
@@ -27,41 +8,13 @@ export interface ChartOffset {
     x?: number;
     y?: number;
 }
-export type ChartConfig = {
-    type: 'line';
-    color: string;
-    strokeWidth?: number;
-    strokeDasharray?: string;
-} | {
-    type: 'area';
-    gradient: {
-        startColor: string;
-        stopColor: string;
-    };
-};
-export interface TimeChartDataItem {
-    id: string;
-    name: string;
-    items: Array<TimeChartItem>;
-    charts: Array<ChartConfig>;
-    units?: string;
-    valueFormatter?: (value: number) => string;
+export declare enum ChartResolution {
+    DAY = "DAY",
+    WEEK = "WEEK",
+    MONTH = "MONTH",
+    YEAR = "YEAR"
 }
-export type TimeChartData = Array<TimeChartDataItem>;
-export interface AxisConfig {
-    ticks?: number;
-    nice?: boolean;
-    noLabel?: boolean;
-    scale?: {
-        min?: number;
-    };
-    tickFormatter?: () => (d: d3.AxisDomain) => string;
-}
-export interface AxesConfig {
-    x?: AxisConfig;
-    y?: AxisConfig;
-}
-export type AxesConfigFn = (props: {
-    isEnlarged?: boolean;
-    isMobile?: boolean;
-}) => AxesConfig;
+export declare const CHART_RESOLUTION_LABELS: Array<{
+    id: ChartResolution;
+    title: string;
+}>;

package/dist/components/forms/fields/FormFieldSwitch.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { SwitchProps } from '../../../chakra/switch';
-export type FormFieldSwitchProps<FormFields extends FieldValues, Name extends Path<FormFields>> = Pick<FormFieldPropsBase<FormFields, Name>, 'name' | 'placeholder' | 'rules' | 'controllerProps'> & SwitchProps;
-declare const FormFieldSwitchContent: <FormFields extends FieldValues, Name extends Path<FormFields>>({ name, placeholder, onCheckedChange, rules, controllerProps, disabled, ...rest }: FormFieldSwitchProps<FormFields, Name>) => React.JSX.Element;
+export type FormFieldSwitchProps<FormFields extends FieldValues, Name extends Path<FormFields>> = Pick<FormFieldPropsBase<FormFields, Name>, 'name' | 'rules' | 'controllerProps'> & SwitchProps;
+declare const FormFieldSwitchContent: <FormFields extends FieldValues, Name extends Path<FormFields>>({ name, onCheckedChange, rules, controllerProps, disabled, children, ...rest }: FormFieldSwitchProps<FormFields, Name>) => React.JSX.Element;
 export declare const FormFieldSwitch: typeof FormFieldSwitchContent;
 export {};

package/dist/components/truncation/TruncatedText.d.ts

@@ -1,11 +1,12 @@
-import { Placement } from '@floating-ui/dom';
 import { default as React } from 'react';
+import { ExcludeUndefined } from '../../../types/utils';
 import { SkeletonTextProps } from '../../chakra/skeleton';
+import { TooltipProps } from '../../chakra/tooltip';
 export interface TruncatedTextProps extends Omit<SkeletonTextProps, 'loading'> {
     text: string;
     loading?: boolean;
     tooltipContent?: string;
-    tooltipPlacement?: Placement;
+    tooltipPlacement?: ExcludeUndefined<TooltipProps['positioning']>['placement'];
     tooltipInteractive?: boolean;
 }
 export declare const TruncatedText: ({ text, tooltipPlacement, tooltipInteractive, tooltipContent, loading, ...rest }: TruncatedTextProps) => React.JSX.Element;

package/dist/components/truncation/TruncatedTextTooltip.d.ts

@@ -1,9 +1,10 @@
-import { Placement } from '@floating-ui/dom';
 import { default as React } from 'react';
+import { ExcludeUndefined } from '../../../types/utils';
+import { TooltipProps } from '../../chakra/tooltip';
 export interface TruncatedTextTooltipProps {
     children: React.ReactNode;
     label: React.ReactNode;
-    placement?: Placement;
+    placement?: ExcludeUndefined<TooltipProps['positioning']>['placement'];
     interactive?: boolean;
 }
 export declare const TruncatedTextTooltip: React.MemoExoticComponent<({ children, label, placement, interactive }: TruncatedTextTooltipProps) => React.JSX.Element>;

package/dist/hooks/useClipboard.d.ts

@@ -3,8 +3,6 @@ export declare function useClipboard(text: string, timeout?: number): {
     copy: () => void;
     disclosure: {
         open: boolean;
-        onOpenChange: ({ open }: {
-            open: boolean;
-        }) => void;
+        onOpenChange: ({ open }: import('./useDisclosure').OpenChangeDetails) => void;
     };
 };

package/dist/hooks/useDisclosure.d.ts

@@ -1,9 +1,11 @@
 import { UseDisclosureProps } from '@chakra-ui/react';
+export interface OpenChangeDetails {
+    open: boolean;
+}
+export type OnOpenChangeHandler = (details: OpenChangeDetails) => void;
 export declare function useDisclosure(props?: UseDisclosureProps): {
     open: boolean;
-    onOpenChange: ({ open }: {
-        open: boolean;
-    }) => void;
+    onOpenChange: ({ open }: OpenChangeDetails) => void;
     onClose: () => void;
     onOpen: () => void;
     onToggle: () => void;