enefit-design-system 0.6.2-alpha.1 → 0.7.2

package/README.md

@@ -2,4 +2,10 @@
 
 See the documentation at https://enefit-design-system.pages.dev
 
-.
+## How to release new library version
+
+1. Make changes in the library source code
+2. Set new `<VERSION>` (e.g. `0.6.1`) in `version` in `package.json` and `package-lock.json` files according to the Semantic versioning.
+3. Prepare the changes as part of PR.
+4. **Merge and squash** the changes with commit like `RELEASE <VERSION>` e.g. `RELEASE 0.6.1` into the `main` branch
+5. Make sure [`the proper workflow`](https://github.com/Enefit-Web/enefit-design-system/actions/workflows/release.yml) has succeeded

package/dist/Accordion/Accordion.js

@@ -2,12 +2,12 @@
 import { j as e } from "../external/react/jsx-runtime.js";
 import { useContext as y, useRef as _, useState as g, useEffect as d } from "react";
 import p from "../external/classnames/index.js";
-/* empty css                                  */
+/* empty css                                */
+/* empty css                                 */
+/* empty css                              */
 /* empty css                                 */
 /* empty css                            */
-/* empty css                                */
 /* empty css                                  */
-/* empty css                                   */
 /* empty css                            */
 /* empty css                            */
 import z from "../output/icons/IconChevronDownAltSm.js";

package/dist/Autocomplete/Autocomplete.js

@@ -2,12 +2,12 @@
 import { j as e } from "../external/react/jsx-runtime.js";
 import { useRef as s, useEffect as Q } from "react";
 import r from "../external/classnames/index.js";
-/* empty css                                  */
+/* empty css                                */
+/* empty css                                 */
+/* empty css                              */
 /* empty css                                 */
 /* empty css                            */
-/* empty css                                */
 /* empty css                                  */
-/* empty css                                   */
 /* empty css                            */
 /* empty css                            */
 import U from "../output/icons/IconCrossSm.js";

package/dist/Badge/Badge.js

@@ -2,12 +2,12 @@
 import { j as r } from "../external/react/jsx-runtime.js";
 import m from "../external/classnames/index.js";
 /* empty css          */
-/* empty css                                  */
+/* empty css                                */
+/* empty css                                 */
+/* empty css                              */
 /* empty css                                 */
 /* empty css                            */
-/* empty css                                */
 /* empty css                                  */
-/* empty css                                   */
 /* empty css                            */
 /* empty css                            */
 import p from "../output/icons/IconAlertTriangleXs.js";

package/dist/Calendar/CalendarHeader.js

@@ -1,10 +1,10 @@
 import { j as r } from "../external/react/jsx-runtime.js";
-/* empty css                                  */
+/* empty css                                */
+/* empty css                                 */
+/* empty css                              */
 /* empty css                                 */
 /* empty css                            */
-/* empty css                                */
 /* empty css                                  */
-/* empty css                                   */
 /* empty css                            */
 /* empty css                            */
 import p from "../output/icons/IconChevronLeftAltSm.js";

package/dist/Calendar/Day/CalendarCell.js

@@ -2,12 +2,12 @@
 import { j as r } from "../../external/react/jsx-runtime.js";
 import { useRef as $ } from "react";
 import b from "../../external/classnames/index.js";
-/* empty css                                     */
+/* empty css                                   */
+/* empty css                                    */
+/* empty css                                 */
 /* empty css                                    */
 /* empty css                               */
-/* empty css                                   */
 /* empty css                                     */
-/* empty css                                      */
 /* empty css                               */
 /* empty css                               */
 /* empty css                    */

package/dist/Calendar/Day/CalendarGrid.js

@@ -1,12 +1,12 @@
 "use client";
 import { j as r } from "../../external/react/jsx-runtime.js";
 import { getWeeksInMonth as f } from "../../external/@internationalized/date/dist/queries.js";
-/* empty css                                     */
+/* empty css                                   */
+/* empty css                                    */
+/* empty css                                 */
 /* empty css                                    */
 /* empty css                               */
-/* empty css                                   */
 /* empty css                                     */
-/* empty css                                      */
 /* empty css                               */
 /* empty css                               */
 /* empty css                    */

package/dist/Calendar/Month/MonthCell.js

@@ -3,12 +3,12 @@ import { useRef as y } from "react";
 import { CalendarDate as g } from "../../external/@internationalized/date/dist/CalendarDate.js";
 import { today as j, getLocalTimeZone as F } from "../../external/@internationalized/date/dist/queries.js";
 import A from "../../external/classnames/index.js";
-/* empty css                                     */
+/* empty css                                   */
+/* empty css                                    */
+/* empty css                                 */
 /* empty css                                    */
 /* empty css                               */
-/* empty css                                   */
 /* empty css                                     */
-/* empty css                                      */
 /* empty css                               */
 /* empty css                               */
 /* empty css                    */

package/dist/Calendar/Year/YearCell.js

@@ -2,12 +2,12 @@
 import { j as c } from "../../external/react/jsx-runtime.js";
 import { useRef as V } from "react";
 import L from "../../external/classnames/index.js";
-/* empty css                                     */
+/* empty css                                   */
+/* empty css                                    */
+/* empty css                                 */
 /* empty css                                    */
 /* empty css                               */
-/* empty css                                   */
 /* empty css                                     */
-/* empty css                                      */
 /* empty css                               */
 /* empty css                               */
 /* empty css                    */

package/dist/Chart/Chart.js

@@ -1,202 +1,226 @@
 "use client";
 import { j as i } from "../external/react/jsx-runtime.js";
-import { forwardRef as $, useState as N } from "react";
-import O from "./ChartAxis.js";
-import w from "./ChartTooltip.js";
-import M from "./ChartOutline.js";
-import v from "./ChartBar.js";
-import d from "./ChartLine.js";
-import c from "./ChartArea.js";
-import { prepareData as L, getYAxisOrientations as j, isStackWithNegatives as T } from "./utils.js";
-import { getTicks as R } from "./ticks.js";
-import { curveSloped as h } from "./curve.js";
+import { forwardRef as w, useState as L, useRef as O } from "react";
+import R from "./ChartAxes.js";
+import T from "./ChartTooltip.js";
+import S from "./ChartOutline.js";
+import b from "./ChartBar.js";
+import s from "./ChartLine.js";
+import d from "./ChartArea.js";
+import { prepareData as D, getYAxisOrientations as y, isStackWithNegatives as E } from "./utils.js";
+import { curveSloped as x } from "./curve.js";
 /* empty css          */
-import S from "../external/classnames/index.js";
-import { useId as D } from "../external/@react-aria/utils/dist/useId.js";
-import { ResponsiveContainer as G } from "../external/recharts/es6/component/ResponsiveContainer.js";
-import { ComposedChart as I } from "../external/recharts/es6/chart/ComposedChart.js";
-const B = $(
-  ({ datasets: t, data: n, settings: a, className: C, children: b }, y) => {
-    const [p, m] = N(null);
-    function s(r) {
-      var e;
-      r.isTooltipActive === !0 ? m({
-        x: (e = r.activeCoordinate) == null ? void 0 : e.x,
-        label: r.activeLabel
-      }) : m(null);
+import G from "../external/classnames/index.js";
+import { useId as B } from "../external/@react-aria/utils/dist/useId.js";
+import { ResponsiveContainer as W } from "../external/recharts/es6/component/ResponsiveContainer.js";
+import { ComposedChart as X } from "../external/recharts/es6/chart/ComposedChart.js";
+const Y = w(
+  ({ datasets: c, data: h, settings: e, className: _, children: k, onActive: l, ...I }, $) => {
+    const [o, m] = L(null), f = O(null);
+    function u(r) {
+      var a;
+      if (r.activeIndex === null)
+        m(null), l == null || l(null);
+      else {
+        const n = parseInt(String(r.activeIndex));
+        if (n !== f.current) {
+          f.current = n;
+          const C = {
+            x: (a = r.activeCoordinate) == null ? void 0 : a.x,
+            index: n,
+            label: r.activeLabel
+          };
+          m(C), l == null || l(C);
+        }
+      }
     }
-    const k = a.variant === "card" ? 0 : 24, x = -10;
-    t.length > 1 && !t[1].yAxisOrientation && (t[1].yAxisOrientation = "right");
-    const l = D(), o = L(t, n), u = 6, _ = R(t, o, u), A = {
-      bar: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        v,
+    function v() {
+      m(null), l == null || l(null);
+    }
+    const M = e.variant === "card" ? 0 : 24, j = -10;
+    c.length > 1 && !c[1].yAxisOrientation && (c[1].yAxisOrientation = "right");
+    const p = B(), t = D(c, h), N = {
+      bar: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        b,
         {
           dataset: r,
-          index: e,
-          settings: a,
-          data: n,
-          active: !!p
+          index: a,
+          settings: e,
+          data: h,
+          active: !!o
         }
       ),
-      bar_stack: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        v,
+      bar_stack: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        b,
         {
           dataset: r,
-          index: e,
-          settings: a,
-          data: n,
-          active: !!p
+          index: a,
+          settings: e,
+          data: h,
+          active: !!o,
+          stack: !0
         }
       ),
-      line: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        d,
+      line: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        s,
         {
           dataset: r,
-          index: e,
-          settings: a,
-          data: o,
-          curve: "linear"
+          index: a,
+          settings: e,
+          data: t,
+          curve: "linear",
+          active: !!o
         }
       ),
-      line_step: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        d,
+      line_step: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        s,
         {
           dataset: r,
-          index: e,
-          settings: a,
-          data: o,
-          curve: "step"
+          index: a,
+          settings: e,
+          data: t,
+          curve: "step",
+          active: !!o
         }
       ),
-      line_slope: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        d,
+      line_slope: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        s,
         {
           dataset: r,
-          index: e,
-          settings: a,
-          data: o,
-          curve: h()
+          index: a,
+          settings: e,
+          data: t,
+          curve: x(),
+          active: !!o
         }
       ),
-      area: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        c,
+      area: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        d,
         {
           dataset: r,
-          index: e,
+          index: a,
           curve: "linear",
-          settings: a,
-          data: o
+          settings: e,
+          data: t,
+          active: !!o
         }
       ),
-      area_step: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        c,
+      area_step: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        d,
         {
           dataset: r,
-          index: e,
+          index: a,
           curve: "step",
-          settings: a,
-          data: o
+          settings: e,
+          data: t,
+          active: !!o
         }
       ),
-      area_slope: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        c,
+      area_slope: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        d,
         {
           dataset: r,
-          index: e,
-          curve: h(),
-          settings: a,
-          data: o
+          index: a,
+          curve: x(),
+          settings: e,
+          data: t,
+          active: !!o
         }
       ),
-      area_stack: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        c,
+      area_stack: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        d,
         {
           dataset: r,
-          index: e,
+          index: a,
           curve: "linear",
-          settings: a,
-          data: o
+          settings: e,
+          data: t,
+          active: !!o
         }
       ),
-      area_stack_slope: ({ dataset: r, index: e }) => /* @__PURE__ */ i.jsx(
-        c,
+      area_stack_slope: ({ dataset: r, index: a }) => /* @__PURE__ */ i.jsx(
+        d,
         {
           dataset: r,
-          index: e,
-          curve: h(),
-          settings: a,
-          data: o
+          index: a,
+          curve: x(),
+          settings: e,
+          data: t,
+          active: !!o
         }
       )
     };
     return /* @__PURE__ */ i.jsxs(
       "div",
       {
-        ref: y,
-        className: S("eds-chart", C),
+        ref: $,
+        className: G("eds-chart", _),
         style: {
-          width: a.width || "100%",
-          height: a.height
+          width: e.width || "100%",
+          height: e.height
         },
         role: "region",
-        "aria-roledescription": "interactive chart",
-        "aria-labelledby": `chart-title-${l}`,
-        "aria-describedby": `chart-description-${l}`,
+        "aria-roledescription": "chart",
+        "aria-labelledby": e.title ? `chart-title-${p}` : void 0,
+        "aria-describedby": e.description ? `chart-description-${p}` : void 0,
+        ...I,
         children: [
-          a.title && /* @__PURE__ */ i.jsx("div", { id: `chart-title-${l}`, className: "eds-sr-only", children: a.title }),
-          a.description && /* @__PURE__ */ i.jsx(
+          e.title && /* @__PURE__ */ i.jsx("div", { id: `chart-title-${p}`, className: "eds-sr-only", children: e.title }),
+          e.description && /* @__PURE__ */ i.jsx(
             "div",
             {
-              id: `chart-description-${l}`,
+              id: `chart-description-${p}`,
               className: "eds-sr-only",
-              children: a.description
+              children: e.description
             }
           ),
-          /* @__PURE__ */ i.jsx(G, { children: /* @__PURE__ */ i.jsxs(
-            I,
+          /* @__PURE__ */ i.jsx(W, { children: /* @__PURE__ */ i.jsxs(
+            X,
             {
-              width: a.width,
-              height: a.height,
-              data: o,
-              onMouseMove: s,
-              onClick: s,
-              onMouseLeave: () => m(void 0),
+              width: e.width,
+              height: e.height,
+              data: t,
+              onClick: u,
+              onTouchMove: u,
+              onMouseMove: u,
+              onMouseLeave: v,
+              onTouchEnd: v,
               margin: {
-                top: k,
-                left: j(t).includes(
+                top: M,
+                left: y(c).includes(
                   "left"
-                ) && x,
-                right: j(t).includes(
+                ) && j,
+                right: y(c).includes(
                   "right"
-                ) && x
+                ) && j
               },
-              accessibilityLayer: !0,
-              stackOffset: T(t, o) ? "sign" : "none",
+              accessibilityLayer: !1,
+              stackOffset: E(c, t) ? "sign" : "none",
               barGap: 1,
-              barCategoryGap: "15%",
+              barCategoryGap: "12%",
               children: [
-                /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx(M, { id: "outline" }) }),
+                /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx(S, { id: "outline" }) }),
                 /* @__PURE__ */ i.jsx(
-                  w,
+                  T,
                   {
-                    settings: a,
-                    datasets: t,
-                    active: p
+                    settings: e,
+                    datasets: c,
+                    active: o
                   }
                 ),
-                t.map((r, e) => {
-                  const f = A[r.type];
-                  return f ? /* @__PURE__ */ i.jsx(f, { dataset: r, index: e }, e) : null;
+                c.map((r, a) => {
+                  const n = N[r.type];
+                  return n ? /* @__PURE__ */ i.jsx(n, { dataset: r, index: a }, a) : null;
                 }),
-                a.variant !== "card" && /* @__PURE__ */ i.jsx(
-                  O,
+                e.variant !== "card" && /* @__PURE__ */ i.jsx(
+                  R,
                   {
-                    settings: a,
-                    ticks: _,
-                    tickCount: u
+                    settings: e,
+                    datasets: c,
+                    data: t
                   }
                 ),
-                b
+                k
               ]
             }
           ) })
@@ -205,7 +229,7 @@ const B = $(
     );
   }
 );
-B.displayName = "Chart";
+Y.displayName = "Chart";
 export {
-  B as default
+  Y as default
 };

package/dist/Chart/ChartArea.js

@@ -1,49 +1,51 @@
 import { j as o } from "../external/react/jsx-runtime.js";
-import { getName as l, getChartHide as p, getColor as e, getYDataKey as y } from "./utils.js";
-import c from "./ChartAnnotation.js";
+import { getName as p, getChartHide as c, getColor as e, getYAxisId as y } from "./utils.js";
+import A from "./ChartAnnotation.js";
 import { Area as u } from "../external/recharts/es6/cartesian/Area.js";
-function x({
+function k({
   dataset: r,
-  data: a,
+  data: n,
   index: t,
-  curve: n = "linear",
-  settings: m
+  curve: a = "linear",
+  settings: m,
+  active: s
 }) {
-  const s = Array.isArray(r.yDataKey) ? r.yDataKey : [r.yDataKey];
+  const f = Array.isArray(r.yDataKey) ? r.yDataKey : [r.yDataKey];
   return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-    s.map((f, i) => /* @__PURE__ */ o.jsx(
+    f.map((l, i) => /* @__PURE__ */ o.jsx(
       u,
       {
         id: `${t}-${i}`,
-        dataKey: f,
+        dataKey: l,
         yAxisId: y(r),
         stroke: e(r, i).areaStroke,
         strokeWidth: 1,
         fill: e(r, i).areaBg,
         fillOpacity: 1,
         dot: !1,
+        activeDot: s,
         isAnimationActive: !1,
-        type: n,
-        hide: p(r),
+        type: a,
+        hide: c(r),
         strokeLinejoin: "round",
         strokeLinecap: "round",
-        name: l(r, i),
+        name: p(r, i),
         unit: r.unit,
         stackId: "stack"
       },
       `${t}-${i}`
     )),
     /* @__PURE__ */ o.jsx(
-      c,
+      A,
       {
         settings: m,
         dataset: r,
-        data: a,
+        data: n,
         index: t
       }
     )
   ] });
 }
 export {
-  x as default
+  k as default
 };

package/dist/Chart/ChartAxes.js

@@ -0,0 +1,74 @@
+import { j as o } from "../external/react/jsx-runtime.js";
+import { getYAxisId as n, getYAxisOrientation as c, defaultYAxisFormatter as f } from "./utils.js";
+import { getAxes as x } from "./axes.js";
+import u from "./ChartUnit.js";
+import { CartesianGrid as y } from "../external/recharts/es6/cartesian/CartesianGrid.js";
+import { XAxis as d } from "../external/recharts/es6/cartesian/XAxis.js";
+import { YAxis as p } from "../external/recharts/es6/cartesian/YAxis.js";
+function A(s, i) {
+  const l = i.yDataKeyFlipped ? Math.abs(s) : s;
+  return i.yAxisFormatter ? i.yAxisFormatter(l) : f(l);
+}
+function S({
+  settings: s,
+  datasets: i,
+  data: l
+}) {
+  const m = x(i, l, 5);
+  return /* @__PURE__ */ o.jsxs("g", { style: { mixBlendMode: "multiply" }, children: [
+    /* @__PURE__ */ o.jsx(
+      y,
+      {
+        yAxisId: n(i[0]),
+        vertical: !1,
+        style: {
+          stroke: "var(--eds-color-static-stroke-chart-grid)",
+          strokeWidth: "var(--eds-stroke-chart-grid)"
+        }
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      d,
+      {
+        dataKey: s.xDataKey,
+        tickLine: !1,
+        axisLine: !1,
+        style: {
+          fill: "var(--eds-color-static-text-chart-tick)",
+          fontSize: "var(--eds-label-tiny-600-font-size-mobile)",
+          fontFeatureSettings: "tnum",
+          userSelect: "none"
+        }
+      }
+    ),
+    i.filter((t, a, e) => e.findIndex(
+      (r) => n(r) === n(t)
+    ) === a).map((t, a) => {
+      const e = m.find((r) => r.id === n(t));
+      return /* @__PURE__ */ o.jsx(
+        p,
+        {
+          yAxisId: n(t),
+          domain: e == null ? void 0 : e.domain,
+          ticks: e == null ? void 0 : e.ticks,
+          orientation: c(t, a),
+          tickLine: !1,
+          axisLine: !1,
+          label: (r) => t.unit && /* @__PURE__ */ o.jsx(u, { dataset: t, ...r }),
+          mirror: t.yAxisOrientation === "none",
+          style: {
+            fill: t.yAxisOrientation === "none" ? "none" : "var(--eds-color-static-text-chart-tick)",
+            fontSize: "var(--eds-label-tiny-600-font-size-mobile)",
+            fontFeatureSettings: "tnum",
+            userSelect: "none"
+          },
+          tickFormatter: (r) => A(r, t)
+        },
+        a
+      );
+    })
+  ] });
+}
+export {
+  S as default
+};