@gearbox-protocol/ui-kit 4.0.0-next.66 → 4.0.0-next.68

package/dist/cjs/components/base/history-chart/history-chart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),I=require("@gearbox-protocol/sdk/model"),A=require("react"),j=require("../text/use-title-text.cjs"),w=require("../../trading-view/trading-view.cjs"),M=require("../../typed-intl/index.cjs"),_=require("./constants.cjs"),E=I.CHART_RANGES,G={"1d":"1D","1w":"7D","1m":"1M","1y":"1Y",max:"MAX"};function L({data:t,range:e,onRange:a,isLoading:S=!1,error:x,yMeasureUnit:c="none",height:v,seriesTitles:l,priceLines:p,zones:y,showCurrentValue:C=!1,yScaleMin:T,title:h,trailing:b,dualYAxis:q}){const f=M.useIntlTyped(),R=j.useTitleText(),r=A.useMemo(()=>Array.isArray(c)?c:void 0,[c]),d=r!=null&&new Set(r).size>1,u=q??d,m=r?.[0],H=A.useMemo(()=>{const i=(n,o)=>{if(!u)return n;if(d&&r!=null&&m!=null){const s=r[o]??m;return{...n,priceScaleId:s===m?"left":"right"}}return{...n,priceScaleId:o===0?"left":"right"}};if(t)return(Array.isArray(t)?t:[t]).map((o,s)=>i(O(l)(o),s));if(l)return Object.entries(l).map(([n,o],s)=>i({id:n,title:o,data:[]},s))},[t,l,d,u,m,r]);return g.jsx("div",{"data-testid":_.HistoryChartTest.root,children:g.jsx(w.TradingView,{data:H,isLoading:S,error:x?f.formatMessage({messageId:"components.historyChart.error"}):void 0,emptyMessage:f.formatMessage({messageId:"components.historyChart.empty"}),dualYAxis:u,useSharedPriceScale:!u,yMeasureUnit:c,height:v,rangeList:E.map(i=>({value:i,label:G[i]})),range:e,setRange:a,priceLineOptions:p?[...p]:void 0,zoneOptions:y?[...y]:void 0,showCurrentValue:C,yScaleMin:T,disableZoom:!0,title:h!=null?R(h):void 0,trailing:b})})}function O(t){return e=>({id:e.metric,title:t?.[e.metric]??e.metric,data:e.points.map(a=>({time:a.timestamp,value:a.value}))})}exports.HistoryChartTest=_.HistoryChartTest;exports.HistoryChart=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),j=require("@gearbox-protocol/sdk/model"),A=require("react"),w=require("../text/use-title-text.cjs"),M=require("../../trading-view/trading-view.cjs"),E=require("../../typed-intl/index.cjs"),_=require("./constants.cjs"),G=j.CHART_RANGES,L={"1d":"1D","1w":"7D","1m":"1M","1y":"1Y",max:"MAX"};function O({data:t,range:e,onRange:a,isLoading:S=!1,error:x,yMeasureUnit:c="none",height:v,seriesTitles:l,priceLines:p,zones:y,showCurrentValue:C=!1,yScaleMin:T,title:h,trailing:b,emptyMessage:q,dualYAxis:R}){const f=E.useIntlTyped(),H=w.useTitleText(),r=A.useMemo(()=>Array.isArray(c)?c:void 0,[c]),d=r!=null&&new Set(r).size>1,u=R??d,m=r?.[0],I=A.useMemo(()=>{const i=(n,o)=>{if(!u)return n;if(d&&r!=null&&m!=null){const s=r[o]??m;return{...n,priceScaleId:s===m?"left":"right"}}return{...n,priceScaleId:o===0?"left":"right"}};if(t)return(Array.isArray(t)?t:[t]).map((o,s)=>i(D(l)(o),s));if(l)return Object.entries(l).map(([n,o],s)=>i({id:n,title:o,data:[]},s))},[t,l,d,u,m,r]);return g.jsx("div",{"data-testid":_.HistoryChartTest.root,children:g.jsx(M.TradingView,{data:I,isLoading:S,error:x?f.formatMessage({messageId:"components.historyChart.error"}):void 0,emptyMessage:q??f.formatMessage({messageId:"components.historyChart.empty"}),dualYAxis:u,useSharedPriceScale:!u,yMeasureUnit:c,height:v,rangeList:G.map(i=>({value:i,label:L[i]})),range:e,setRange:a,priceLineOptions:p?[...p]:void 0,zoneOptions:y?[...y]:void 0,showCurrentValue:C,yScaleMin:T,disableZoom:!0,title:h!=null?H(h):void 0,trailing:b})})}function D(t){return e=>({id:e.metric,title:t?.[e.metric]??e.metric,data:e.points.map(a=>({time:a.timestamp,value:a.value}))})}exports.HistoryChartTest=_.HistoryChartTest;exports.HistoryChart=O;

package/dist/esm/components/base/history-chart/history-chart.js

@@ -1,18 +1,18 @@
 import { jsx as y } from "react/jsx-runtime";
-import { CHART_RANGES as b } from "@gearbox-protocol/sdk/model";
+import { CHART_RANGES as w } from "@gearbox-protocol/sdk/model";
 import { useMemo as S } from "react";
-import { useTitleText as w } from "../text/use-title-text.js";
-import { TradingView as D } from "../../trading-view/trading-view.js";
-import { useIntlTyped as H } from "../../typed-intl/index.js";
-import { HistoryChartTest as M } from "./constants.js";
-const N = b, O = {
+import { useTitleText as D } from "../text/use-title-text.js";
+import { TradingView as H } from "../../trading-view/trading-view.js";
+import { useIntlTyped as M } from "../../typed-intl/index.js";
+import { HistoryChartTest as N } from "./constants.js";
+const O = w, T = {
   "1d": "1D",
   "1w": "7D",
   "1m": "1M",
   "1y": "1Y",
   max: "MAX"
 };
-function X({
+function Z({
   data: t,
   range: r,
   onRange: a,
@@ -27,12 +27,13 @@ function X({
   yScaleMin: I,
   title: A,
   trailing: R,
-  dualYAxis: E
+  emptyMessage: E,
+  dualYAxis: G
 }) {
-  const h = H(), G = w(), o = S(
+  const h = M(), L = D(), o = S(
     () => Array.isArray(m) ? m : void 0,
     [m]
-  ), p = o != null && new Set(o).size > 1, l = E ?? p, d = o?.[0], L = S(() => {
+  ), p = o != null && new Set(o).size > 1, l = G ?? p, d = o?.[0], b = S(() => {
     const n = (e, i) => {
       if (!l) return e;
       if (p && o != null && d != null) {
@@ -49,7 +50,7 @@ function X({
     };
     if (t)
       return (Array.isArray(t) ? t : [t]).map(
-        (i, s) => n(T(c)(i), s)
+        (i, s) => n(Y(c)(i), s)
       );
     if (c)
       return Object.entries(c).map(
@@ -63,22 +64,20 @@ function X({
         )
       );
   }, [t, c, p, l, d, o]);
-  return /* @__PURE__ */ y("div", { "data-testid": M.root, children: /* @__PURE__ */ y(
-    D,
+  return /* @__PURE__ */ y("div", { "data-testid": N.root, children: /* @__PURE__ */ y(
+    H,
     {
-      data: L,
+      data: b,
       isLoading: g,
       error: v ? h.formatMessage({ messageId: "components.historyChart.error" }) : void 0,
-      emptyMessage: h.formatMessage({
-        messageId: "components.historyChart.empty"
-      }),
+      emptyMessage: E ?? h.formatMessage({ messageId: "components.historyChart.empty" }),
       dualYAxis: l,
       useSharedPriceScale: !l,
       yMeasureUnit: m,
       height: x,
-      rangeList: N.map((n) => ({
+      rangeList: O.map((n) => ({
         value: n,
-        label: O[n]
+        label: T[n]
       })),
       range: r,
       setRange: a,
@@ -87,12 +86,12 @@ function X({
       showCurrentValue: C,
       yScaleMin: I,
       disableZoom: !0,
-      title: A != null ? G(A) : void 0,
+      title: A != null ? L(A) : void 0,
       trailing: R
     }
   ) });
 }
-function T(t) {
+function Y(t) {
   return (r) => ({
     id: r.metric,
     title: t?.[r.metric] ?? r.metric,
@@ -103,6 +102,6 @@ function T(t) {
   });
 }
 export {
-  X as HistoryChart,
-  M as HistoryChartTest
+  Z as HistoryChart,
+  N as HistoryChartTest
 };

package/dist/esm/components/graph/graph.js

@@ -719,7 +719,12 @@ function to({
           ...p.options || {}
         };
         m.color && (m.color = re(m.color, m.color));
-        const y = new _t(t, a, p.xCoordinate, m);
+        const y = new _t(
+          t,
+          a,
+          p.xCoordinate,
+          m
+        );
         a.attachPrimitive(y), r.push(y);
       }
     }

package/dist/types/components/base/history-chart/history-chart.d.ts

@@ -47,6 +47,11 @@ export interface HistoryChartProps {
     readonly title?: TitleText;
     /** Controls to the left of the range dropdown (e.g. leverage chips). */
     readonly trailing?: React.ReactNode;
+    /**
+     * Replaces the default "No data" placeholder when the range holds no points,
+     * e.g. a screen that knows the series is still being indexed.
+     */
+    readonly emptyMessage?: React.ReactNode;
     /**
      * Force a second Y-axis. When omitted, the chart splits axes only if
      * `yMeasureUnit` lists more than one distinct unit. Same-unit series share
@@ -59,4 +64,4 @@ export interface HistoryChartProps {
  * below the frame, tooltips, optional reference lines and zones. Takes the SDK's
  * a `HistorySeries` as it comes — points are mapped 1:1, no fetching.
  */
-export declare function HistoryChart({ data, range, onRange, isLoading, error, yMeasureUnit, height, seriesTitles, priceLines, zones, showCurrentValue, yScaleMin, title, trailing, dualYAxis: dualYAxisProp, }: HistoryChartProps): React.ReactElement;
+export declare function HistoryChart({ data, range, onRange, isLoading, error, yMeasureUnit, height, seriesTitles, priceLines, zones, showCurrentValue, yScaleMin, title, trailing, emptyMessage, dualYAxis: dualYAxisProp, }: HistoryChartProps): React.ReactElement;

package/dist/types/components/base/manage-pane/manage-pane.d.ts

@@ -2,15 +2,15 @@ import { default as React } from 'react';
 import { TitleText } from '../text';
 import { ManagePaneTest } from './constants';
 export { ManagePaneTest };
-export interface ManagePaneTabProps {
-    readonly id: string;
+export interface ManagePaneTabProps<T extends string = string> {
+    readonly id: T;
     readonly title: TitleText;
     readonly disabled?: boolean;
     /** Content is selectable (e.g. from the dropdown) but not shown in the segment. */
     readonly hidden?: boolean;
     readonly children?: React.ReactNode;
 }
-export declare function ManagePaneTab(_props: ManagePaneTabProps): null;
+export declare function ManagePaneTab<T extends string>(_props: ManagePaneTabProps<T>): null;
 export interface ManagePaneTabDropdownItem {
     readonly id: string;
     readonly title: React.ReactNode;
@@ -20,20 +20,20 @@ export interface ManagePaneTabDropdownProps {
     readonly items: ReadonlyArray<ManagePaneTabDropdownItem>;
 }
 export declare function ManagePaneTabDropdown(_props: ManagePaneTabDropdownProps): null;
-export interface ManagePaneActionTabProps {
-    readonly id: string;
+export interface ManagePaneActionTabProps<T extends string = string> {
+    readonly id: T;
     readonly title: TitleText;
     /** Fires without changing the active tab (e.g. "My positions"). */
     readonly onClick?: () => void;
     /** When set, a click opens this content in a dialog instead of switching tabs. */
     readonly children?: React.ReactNode;
 }
-export declare function ManagePaneActionTab(_props: ManagePaneActionTabProps): null;
-export interface ManagePaneProps {
+export declare function ManagePaneActionTab<T extends string>(_props: ManagePaneActionTabProps<T>): null;
+export interface ManagePaneProps<T extends string> {
     readonly children: React.ReactNode;
     /** Controlled active tab — the screen owns it (usually `?operation=`). */
-    readonly activeTab: string;
-    readonly onTabChange: (id: string) => void;
+    readonly activeTab: T;
+    readonly onTabChange: (id: T) => void;
     readonly header?: React.ReactNode;
     readonly footer?: React.ReactNode;
     /** Rendered to the right of the tabs (e.g. the settings button). */
@@ -45,7 +45,7 @@ export interface ManagePaneProps {
  * dropdown and actions) above one card that shows the active tab's content.
  * Controlled only — no hash state of its own.
  */
-export declare function ManagePane({ children, activeTab, onTabChange, header, footer, actions, testId, }: ManagePaneProps): React.ReactElement;
+export declare function ManagePane<T extends string>({ children, activeTab, onTabChange, header, footer, actions, testId, }: ManagePaneProps<T>): React.ReactElement;
 /** Body shown in place of a dialog when the tab has nothing to act on (no position, no wallet). */
 export declare function ManagePaneMessage({ children, }: {
     readonly children: React.ReactNode;

package/dist/types/components/graph/graph-view.d.ts

@@ -29,7 +29,7 @@ export interface GraphViewProps extends React.HTMLAttributes<HTMLDivElement>, Va
     /**
      * Optional empty state message
      */
-    emptyMessage?: string;
+    emptyMessage?: React.ReactNode;
     /**
      * Optional error message
      */

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

@@ -1,4 +1,4 @@
-import { ChartOptions, DeepPartial, Time } from 'lightweight-charts';
+import { ChartOptions, DeepPartial } from 'lightweight-charts';
 import { Point, YMeasureUnits } from './formatters';
 import { GraphTooltipProps } from './graph-tooltip';
 import { PriceLineConfig, PriceZoneConfig } from './graph-vocabulary';
@@ -90,7 +90,8 @@ export interface GraphProps {
     xMeasureUnit?: GraphTooltipProps["xMeasureUnit"];
     optionsOverrides?: DeepPartial<ChartOptions>;
     verticalLineOptions?: Array<{
-        xCoordinate: Time;
+        /** Same scale as `GraphPoint.timestamp`; branded for the chart internally. */
+        xCoordinate: number;
         options?: VerticalLineOptions;
     }>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.66",
+  "version": "4.0.0-next.68",
   "description": "Internal UI components",
   "repository": {
     "type": "git",