@blockscout/ui-toolkit 2.7.0-alpha.1 → 2.7.0-alpha.3

package/README.md

@@ -32,7 +32,7 @@ Ensure you have the following peer dependencies installed:
 {
   "dependencies": {
     "@blockscout/ui-toolkit": "latest",
-    "@chakra-ui/react": ">=3.15.0",
+    "@chakra-ui/react": ">=3.33.0",
     "@emotion/react": ">=11.14.0",
     "@uidotdev/usehooks": ">=2.4.1",
     "d3": ">=7.6.1",
@@ -46,7 +46,7 @@ Ensure you have the following peer dependencies installed:
     "react-hook-form": ">=7.52.1"
   },
   "devDependencies": {
-    "@chakra-ui/cli": ">=3.15.0",
+    "@chakra-ui/cli": ">=3.33.0",
     "@types/node": "^20",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",

package/dist/chakra/collapsible.d.ts

@@ -14,7 +14,8 @@ interface CollapsibleListProps<T> extends FlexProps {
     renderItem: (item: T, index: number) => React.ReactNode;
     triggerProps?: LinkProps;
     cutLength?: number;
-    text?: [string, string];
+    text?: [React.ReactNode, React.ReactNode];
+    defaultExpanded?: boolean;
 }
 export declare const CollapsibleList: <T>(props: CollapsibleListProps<T>) => React.JSX.Element;
 export {};

package/dist/chakra/select.d.ts

@@ -6,6 +6,7 @@ export interface SelectOption<Value extends string = string> {
     renderLabel?: () => React.ReactNode;
     value: Value;
     icon?: React.ReactNode;
+    afterElement?: React.ReactNode;
 }
 export interface SelectControlProps extends ChakraSelect.ControlProps {
     noIndicator?: boolean;
@@ -48,6 +49,8 @@ export interface SelectProps extends SelectRootProps {
     loading?: boolean;
     errorText?: string;
     contentProps?: SelectContentProps;
+    contentHeader?: React.ReactNode;
+    itemFilter?: (item: SelectOption) => boolean;
     mode?: ViewMode;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ChartMargin } from '../types';
+import { SankeyData } from './types';
+export type SankeyLinkColorMode = 'source' | 'target';
+export interface SankeyChartProps {
+    data: SankeyData;
+    margin?: ChartMargin;
+    nodeWidth?: number;
+    nodePadding?: number;
+    linkOpacity?: number;
+    linkHoverOpacity?: number;
+    linkColorMode?: SankeyLinkColorMode;
+    colors?: ReadonlyArray<string>;
+    valueFormatter?: (value: number) => string;
+}
+export declare const SankeyChart: React.MemoExoticComponent<({ data, margin: marginProps, nodeWidth, nodePadding, linkOpacity, linkHoverOpacity, linkColorMode, colors: colorsProp, valueFormatter, }: SankeyChartProps) => React.JSX.Element>;

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

@@ -0,0 +1,16 @@
+/**
+ * Sankey node color tokens from Figma (Universal Bridge Indexer).
+ * Light theme: Chakra 300 palette. Resolved via useToken in the chart.
+ * @see https://www.figma.com/design/3mGpZEE65cSuLnhtJBfKkO?node-id=6867-20752
+ */
+export declare const SANKEY_NODE_COLOR_TOKENS_LIGHT: Array<string>;
+/**
+ * Sankey node color tokens from Figma (Universal Bridge Indexer).
+ * Dark theme: Chakra 700 palette. Resolved via useToken in the chart.
+ * @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;

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

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

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { SankeyLinkExtended } from '../types';
+export interface SankeyLinkProps {
+    link: SankeyLinkExtended;
+    /** 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: SankeyLinkExtended, ...args: Array<any>) => string | null;
+    onMouseEnter?: (link: SankeyLinkExtended, event: React.MouseEvent) => void;
+    onMouseLeave?: () => void;
+}
+export declare const SankeyLink: React.MemoExoticComponent<({ link, color, sourceColor, targetColor, gradientIdSuffix, opacity, hoverOpacity, pathGenerator, onMouseEnter, onMouseLeave, }: SankeyLinkProps) => React.JSX.Element | null>;

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

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

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

@@ -0,0 +1,19 @@
+import { SankeyNode, SankeyLink } from 'd3-sankey';
+export interface SankeyNodeDatum {
+    readonly id: string;
+    readonly name: string;
+}
+export interface SankeyLinkDatum {
+    readonly source: string;
+    readonly target: string;
+    readonly value: number;
+}
+export interface SankeyData {
+    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;
+};

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

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