@ledgerhq/lumen-ui-react 0.1.61 → 0.1.63

package/dist/lib/Components/visualization/LineChart/LineChart.js

@@ -1,84 +1,85 @@
-import { jsx as t, jsxs as D, Fragment as C } from "react/jsx-runtime";
+import { jsx as t, jsxs as E, Fragment as u } from "react/jsx-runtime";
 import { useMemo as d } from "react";
-import { ChartEmptyLabel as R } from "../CartesianChart/ChartEmptyLabel/ChartEmptyLabel.js";
-import { useShimmerAnimation as q } from "../CartesianChart/hooks/useShimmerAnimation.js";
-import { chartConfig as h } from "../config.js";
-import { mergeDefaults as b, computeAxisPadding as z, canRenderLine as J, getChartAriaLabel as K, getChartDisplayStates as Q } from "./utils.js";
-import { CartesianChart as U } from "../CartesianChart/CartesianChart.js";
-import { LineChartEmptyState as V } from "./LineChartEmptyState/LineChartEmptyState.js";
-import { XAxis as X } from "../Axis/XAxis/XAxis.js";
-import { YAxis as Y } from "../Axis/YAxis/YAxis.js";
-import { Line as Z } from "../Line/Line.js";
-import { useTheme as _ } from "../../core/ThemeProvider/ThemeProvider.js";
-import { getContrastSafeColor as $ } from "../../../../libs/design-core/dist/lib/colorContrast/colorContrast.js";
-import { primitiveColorTokens as v } from "../../../../libs/design-core/dist/lib/themes/js/primitives/primitive.colors.js";
-const N = {
+import { ChartEmptyLabel as z } from "../CartesianChart/ChartEmptyLabel/ChartEmptyLabel.js";
+import { useShimmerAnimation as J } from "../CartesianChart/hooks/useShimmerAnimation.js";
+import { chartConfig as C } from "../config.js";
+import { mergeDefaults as v, computeAxisPadding as K, canRenderLine as Q, getChartAriaLabel as U, getChartDisplayStates as V } from "./utils.js";
+import { useCommonTranslation as X } from "../../../../translations/translations.js";
+import { CartesianChart as Y } from "../CartesianChart/CartesianChart.js";
+import { LineChartEmptyState as Z } from "./LineChartEmptyState/LineChartEmptyState.js";
+import { XAxis as _ } from "../Axis/XAxis/XAxis.js";
+import { YAxis as $ } from "../Axis/YAxis/YAxis.js";
+import { Line as N } from "../Line/Line.js";
+import { useTheme as tt } from "../../core/ThemeProvider/ThemeProvider.js";
+import { getContrastSafeColor as ot } from "../../../../libs/design-core/dist/lib/colorContrast/colorContrast.js";
+import { primitiveColorTokens as D } from "../../../../libs/design-core/dist/lib/themes/js/primitives/primitive.colors.js";
+const et = {
   position: "bottom",
   showGrid: !1,
   showLine: !1,
   showTickMark: !1,
   scaleType: "linear",
   nice: !1
-}, tt = {
+}, it = {
   position: "start",
   showGrid: !1,
   showLine: !1,
   showTickMark: !1,
   scaleType: "linear",
   nice: !0,
-  width: h.axis.defaultWidth
-}, E = ({
+  width: C.axis.defaultWidth
+}, M = ({
   series: e,
   showArea: r,
   areaType: s,
   connectNulls: a,
-  stroke: o
-}) => /* @__PURE__ */ t(C, { children: e.map((i) => /* @__PURE__ */ t(
-  Z,
+  stroke: i
+}) => /* @__PURE__ */ t(u, { children: e.map((o) => /* @__PURE__ */ t(
+  N,
   {
-    seriesId: i.id,
-    stroke: o ?? i.stroke,
+    seriesId: o.id,
+    stroke: i ?? o.stroke,
     showArea: r,
     areaType: s,
     connectNulls: a
   },
-  i.id
-)) }), it = ({
+  o.id
+)) }), rt = ({
   series: e,
   showArea: r,
   areaType: s,
   connectNulls: a
 }) => {
-  const { animationStyle: o, keyframe: i } = q();
-  return /* @__PURE__ */ D(C, { children: [
-    /* @__PURE__ */ t("style", { children: i }),
-    /* @__PURE__ */ t("g", { style: { animation: o }, children: /* @__PURE__ */ t(
-      E,
+  const { animationStyle: i, keyframe: o } = J();
+  return /* @__PURE__ */ E(u, { children: [
+    /* @__PURE__ */ t("style", { children: o }),
+    /* @__PURE__ */ t("g", { style: { animation: i }, children: /* @__PURE__ */ t(
+      M,
       {
         series: e,
         showArea: r,
         areaType: s,
         connectNulls: a,
-        stroke: h.color.mutedLine
+        stroke: C.color.mutedLine
       }
     ) })
   ] });
-}, et = ({
+}, st = ({
   series: e,
   showArea: r,
   areaType: s,
   connectNulls: a,
-  showXAxis: o,
-  showYAxis: i,
+  showXAxis: i,
+  showYAxis: o,
   xAxisConfig: n,
   yAxisConfig: m,
   isTransitionLoading: p,
-  children: g
-}) => /* @__PURE__ */ D(C, { children: [
-  o && /* @__PURE__ */ t(X, { ...n }),
-  i && /* @__PURE__ */ t(Y, { ...m }),
+  children: h
+}) => /* @__PURE__ */ E(u, { children: [
+  i && /* @__PURE__ */ t(_, { ...n }),
+  o && /* @__PURE__ */ t($, { ...m }),
   p ? /* @__PURE__ */ t(
-    it,
+    rt,
     {
       series: e,
       showArea: r,
@@ -86,7 +87,7 @@ const N = {
       connectNulls: a
     }
   ) : /* @__PURE__ */ t(
-    E,
+    M,
     {
       series: e,
       showArea: r,
@@ -94,88 +95,93 @@ const N = {
       connectNulls: a
     }
   ),
-  g
+  h
 ] });
-function ut({
+function xt({
   series: e,
   showArea: r = !1,
   areaType: s = "gradient",
   connectNulls: a,
-  showXAxis: o = !1,
-  showYAxis: i = !1,
+  showXAxis: i = !1,
+  showYAxis: o = !1,
   xAxis: n,
   yAxis: m,
   width: p = "100%",
-  height: g = h.root.defaultHeight,
-  inset: M,
-  enableScrubbing: j,
-  onScrubberPositionChange: G,
-  animate: W,
-  magnetRadius: B,
+  height: h = C.root.defaultHeight,
+  inset: j,
+  enableScrubbing: G,
+  onScrubberPositionChange: W,
+  animate: B,
+  magnetRadius: F,
   loading: L = !1,
-  emptyLabel: k = h.emptyState.defaultLabel,
-  enableColorContrast: x = !1,
-  children: F
+  emptyLabel: H,
+  enableColorContrast: k = !1,
+  children: I
 }) {
-  const { colorScheme: H } = _(), T = H === "dark" ? v.dark.grey["050"] : v.light.grey["050"], u = d(
+  const { t: x } = X(), { colorScheme: O } = tt(), b = O === "dark" ? D.dark.grey["050"] : D.light.grey["050"], g = d(
     () => e?.map((y) => ({
       ...y,
-      ...y.stroke && x && {
-        stroke: $(y.stroke, T)
+      ...y.stroke && k && {
+        stroke: ot(y.stroke, b)
       }
     })),
-    [e, x, T]
+    [e, k, b]
   ), l = d(
-    () => b(N, n),
+    () => v(et, n),
     [n]
   ), c = d(
-    () => b(tt, m),
+    () => v(it, m),
     [m]
-  ), A = l.position, S = c.position, P = c.width, I = d(
-    () => z({
-      showXAxis: o,
-      showYAxis: i,
-      xAxisPosition: A,
-      yAxisPosition: S,
+  ), T = l.position, A = c.position, P = c.width, R = d(
+    () => K({
+      showXAxis: i,
+      showYAxis: o,
+      xAxisPosition: T,
+      yAxisPosition: A,
       yAxisWidth: P
     }),
-    [o, i, A, S, P]
-  ), w = J(u, l.data), f = Q({ loading: L, hasData: w }), O = K({ loading: L, hasData: w, emptyLabel: k });
+    [i, o, T, A, P]
+  ), S = Q(g, l.data), f = V({ loading: L, hasData: S }), w = H ?? x("components.chart.emptyLabel"), q = U({
+    loading: L,
+    hasData: S,
+    emptyLabel: w,
+    loadingLabel: x("components.chart.loadingAriaLabel")
+  });
   return /* @__PURE__ */ t(
-    U,
+    Y,
     {
-      series: u ?? [],
+      series: g ?? [],
       xAxis: l,
       yAxis: c,
       width: p,
-      height: g,
-      inset: M,
-      axisPadding: I,
-      enableScrubbing: j,
-      onScrubberPositionChange: G,
-      animate: W,
-      magnetRadius: B,
-      ariaLabel: O,
+      height: h,
+      inset: j,
+      axisPadding: R,
+      enableScrubbing: G,
+      onScrubberPositionChange: W,
+      animate: B,
+      magnetRadius: F,
+      ariaLabel: q,
       ariaBusy: L,
-      overlay: f.showEmptyOverlay ? /* @__PURE__ */ t(R, { children: k }) : void 0,
-      children: f.showPlaceholder ? /* @__PURE__ */ t(V, { loading: f.placeholderLoading }) : /* @__PURE__ */ t(
-        et,
+      overlay: f.showEmptyOverlay ? /* @__PURE__ */ t(z, { children: w }) : void 0,
+      children: f.showPlaceholder ? /* @__PURE__ */ t(Z, { loading: f.placeholderLoading }) : /* @__PURE__ */ t(
+        st,
         {
-          series: u ?? [],
+          series: g ?? [],
           showArea: r,
           areaType: s,
           connectNulls: a,
-          showXAxis: o,
-          showYAxis: i,
+          showXAxis: i,
+          showYAxis: o,
           xAxisConfig: l,
           yAxisConfig: c,
           isTransitionLoading: f.isTransitionLoading,
-          children: F
+          children: I
         }
       )
     }
   );
 }
 export {
-  ut as LineChart
+  xt as LineChart
 };

package/dist/lib/Components/visualization/LineChart/types.d.ts

@@ -50,7 +50,7 @@ export type LineChartProps = LineRenderOptions & Pick<CartesianChartProps, 'widt
     /**
      * Text shown in the centre of the chart when there is no data and the chart
      * is not loading.
-     * @default 'No data'
+     * @default 'No data' (translated)
      */
     emptyLabel?: string;
     /**

package/dist/lib/Components/visualization/LineChart/utils.d.ts

@@ -31,10 +31,11 @@ export declare const getChartDisplayStates: ({ loading, hasData, }: {
  * Accessibility label matching the chart's current state: the loading label
  * while loading, the empty label when there is nothing to draw, otherwise none.
  */
-export declare const getChartAriaLabel: ({ loading, hasData, emptyLabel, }: {
+export declare const getChartAriaLabel: ({ loading, hasData, emptyLabel, loadingLabel, }: {
     loading: boolean;
     hasData: boolean;
     emptyLabel: string;
+    loadingLabel: string;
 }) => string | undefined;
 /**
  * Whether any series has at least `emptyState.minDrawablePoints` finite points,

package/dist/lib/Components/visualization/LineChart/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/LineChart/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAIzD,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACtC,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACtC,UAAU,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,qEAMhC,wBAAwB,KAAG,OAAO,CAAC,UAAU,CAAC,GAAG,SAanD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,uBAGnC;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;;;;;CAKC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,mCAI/B;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,KAAG,MAAM,GAAG,SAUZ,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,QAAQ,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KACnC,OAWF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,MAAM,EAC5C,UAAU,CAAC,EACX,YAAY,OAAO,CAAC,CAAC,CAAC,KACrB,CAUF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/LineChart/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAIzD,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACtC,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACtC,UAAU,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,qEAMhC,wBAAwB,KAAG,OAAO,CAAC,UAAU,CAAC,GAAG,SAanD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,uBAGnC;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;;;;;CAKC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,iDAK/B;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB,KAAG,MAAM,GAAG,SAUZ,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,QAAQ,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KACnC,OAWF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,MAAM,EAC5C,UAAU,CAAC,EACX,YAAY,OAAO,CAAC,CAAC,CAAC,KACrB,CAUF,CAAC"}

package/dist/lib/Components/visualization/LineChart/utils.js

@@ -1,20 +1,20 @@
-import { chartConfig as f } from "../config.js";
-import { isFiniteNumber as d } from "../utils/numbers.js";
-const { axis: l, emptyState: c } = f, g = ({
+import { chartConfig as c } from "../config.js";
+import { isFiniteNumber as f } from "../utils/numbers.js";
+const { axis: a, emptyState: u } = c, g = ({
   showXAxis: e,
   showYAxis: t,
-  xAxisPosition: r,
-  yAxisPosition: n,
+  xAxisPosition: n,
+  yAxisPosition: r,
   yAxisWidth: o
 }) => {
   if (!e && !t)
     return;
-  const i = o ?? l.defaultWidth;
+  const i = o ?? a.defaultWidth;
   return {
-    top: e && r === "top" ? l.defaultHeight : 0,
-    bottom: e && r === "bottom" ? l.defaultHeight : 0,
-    left: t && n === "start" ? i : 0,
-    right: t && n === "end" ? i : 0
+    top: e && n === "top" ? a.defaultHeight : 0,
+    bottom: e && n === "bottom" ? a.defaultHeight : 0,
+    left: t && r === "start" ? i : 0,
+    right: t && r === "end" ? i : 0
   };
 }, s = ({
   loading: e,
@@ -27,26 +27,27 @@ const { axis: l, emptyState: c } = f, g = ({
 }), p = ({
   loading: e,
   hasData: t,
-  emptyLabel: r
+  emptyLabel: n,
+  loadingLabel: r
 }) => {
   if (e)
-    return c.loadingAriaLabel;
-  if (!t)
     return r;
-}, h = (e, t) => (e ?? []).some((r) => {
-  const n = r.data ?? [], o = t ? Math.min(n.length, t.length) : n.length;
+  if (!t)
+    return n;
+}, h = (e, t) => (e ?? []).some((n) => {
+  const r = n.data ?? [], o = t ? Math.min(r.length, t.length) : r.length;
   let i = 0;
-  for (let a = 0; a < o; a++)
-    if (d(n[a]) && i++, i >= c.minDrawablePoints) return !0;
+  for (let l = 0; l < o; l++)
+    if (f(r[l]) && i++, i >= u.minDrawablePoints) return !0;
   return !1;
 }), b = (e, t) => {
   if (!t) return e;
-  const r = { ...e };
-  for (const n of Object.keys(t)) {
-    const o = t[n];
-    o !== void 0 && (r[n] = o);
+  const n = { ...e };
+  for (const r of Object.keys(t)) {
+    const o = t[r];
+    o !== void 0 && (n[r] = o);
   }
-  return r;
+  return n;
 };
 export {
   h as canRenderLine,

package/dist/lib/Components/visualization/config.d.ts

@@ -84,8 +84,6 @@ export declare const chartConfig: {
     };
     readonly emptyState: {
         readonly minDrawablePoints: 2;
-        readonly loadingAriaLabel: "Loading chart";
-        readonly defaultLabel: "No data";
         readonly gridLineRatios: readonly [0.3, 0.5, 0.7];
         readonly placeholderViewWidth: 728;
         readonly placeholderViewHeight: 208;
@@ -135,7 +133,6 @@ export declare const chartConfig: {
             readonly durationInSeconds: 2;
             readonly minOpacity: 0.5;
             readonly easing: "cubic-bezier(0.4, 0, 0.6, 1)";
-            readonly ariaLabel: "Loading donut chart";
         };
         readonly size: {
             readonly md: {

package/dist/lib/Components/visualization/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/visualization/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;8BAwBqC,UAAU;;;;;;;;;;;;;;;;;;;;;;;QA2BnE,yDAAyD;;;;;;;;;;;;;;QAezD,oEAAoE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8CpE,2EAA2E;;;;;QAE3E,wEAAwE;;;;YAItE,8EAA8E;;YAE9E;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/visualization/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;8BAwBqC,UAAU;;;;;;;;;;;;;;;;;;;;;;;QA2BnE,yDAAyD;;;;;;;;;;;;;;QAezD,oEAAoE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4CpE,2EAA2E;;;;;QAE3E,wEAAwE;;;;YAItE,8EAA8E;;YAE9E;;;;eAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,CAAC"}

package/dist/lib/Components/visualization/config.js

@@ -1,5 +1,5 @@
 import { cssVar as e } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-const t = {
+const a = {
   color: {
     stroke: e("var(--border-muted)"),
     gridLine: e("var(--border-muted-subtle-transparent)"),
@@ -79,8 +79,6 @@ const t = {
   },
   emptyState: {
     minDrawablePoints: 2,
-    loadingAriaLabel: "Loading chart",
-    defaultLabel: "No data",
     gridLineRatios: [0.3, 0.5, 0.7],
     placeholderViewWidth: 728,
     placeholderViewHeight: 208,
@@ -126,8 +124,7 @@ const t = {
     loading: {
       durationInSeconds: 2,
       minOpacity: 0.5,
-      easing: "cubic-bezier(0.4, 0, 0.6, 1)",
-      ariaLabel: "Loading donut chart"
+      easing: "cubic-bezier(0.4, 0, 0.6, 1)"
     },
     size: {
       md: {
@@ -152,5 +149,5 @@ const t = {
   }
 };
 export {
-  t as chartConfig
+  a as chartConfig
 };