1mpacto-react-ui 2.0.20 → 2.0.21

package/dist/components/Calendar/CalendarRange.mjs

@@ -1,22 +1,21 @@
-import { jsx as t, jsxs as l, Fragment as Y } from "react/jsx-runtime";
-import o, { useEffect as Z, isValidElement as h } from "react";
-import { createCalendar as _, getWeeksInMonth as q, getLocalTimeZone as Q } from "@internationalized/date";
-import { useDateRangePicker as U, useLocale as X, useRangeCalendar as $, useCalendarGrid as p } from "react-aria";
-import { useDateRangePickerState as ee, useRangeCalendarState as te } from "react-stately";
-import A from "./CalendarButton.mjs";
-import r from "./style.module.scss.mjs";
-import ae from "./CalendarCell.mjs";
-import B from "../Button/Button.mjs";
-import ne from "./CalendarMonth.mjs";
-import ie, { ChevronDownIcon as E } from "./CalendarYear.mjs";
-import { CustomTimeCalendar as L } from "./Calendar.mjs";
-const le = (e) => {
-  var g, R, y, D, x, k, S, I, T, N, w, P;
-  const u = o.useRef(null), { locale: d } = X(), i = te({
+import { jsx as t, jsxs as r, Fragment as E } from "react/jsx-runtime";
+import u, { useEffect as L, isValidElement as s } from "react";
+import { createCalendar as M, getWeeksInMonth as j, getLocalTimeZone as z } from "@internationalized/date";
+import { useDateRangePicker as J, useLocale as W, useRangeCalendar as F, useCalendarGrid as G } from "react-aria";
+import { useDateRangePickerState as H, useRangeCalendarState as K } from "react-stately";
+import v from "./CalendarButton.mjs";
+import d from "./style.module.scss.mjs";
+import O from "./CalendarCell.mjs";
+import R from "../Button/Button.mjs";
+import V from "./CalendarMonth.mjs";
+import Y, { ChevronDownIcon as y } from "./CalendarYear.mjs";
+import { CustomTimeCalendar as D } from "./Calendar.mjs";
+const Z = (e) => {
+  const o = u.useRef(null), { locale: l } = W(), i = K({
     ...e,
-    locale: d,
-    createCalendar: _
-  }), M = (n) => {
+    locale: l,
+    createCalendar: M
+  }), x = (n) => {
     let a = "";
     switch (n) {
       case 0:
@@ -42,70 +41,69 @@ const le = (e) => {
         break;
     }
     return a;
-  }, { calendarProps: j, prevButtonProps: z, nextButtonProps: J, title: b } = $(e, i, u), { gridProps: W, headerProps: F, weekDays: G } = p({}, i), H = q(i.visibleRange.start, d), [s, f] = o.useState("date"), [c, C] = o.useState({ start: void 0, end: void 0 }), K = ((R = (g = c.start) == null ? void 0 : g.hour) == null ? void 0 : R.toString()) && ((D = (y = c == null ? void 0 : c.start) == null ? void 0 : y.minut) == null ? void 0 : D.toString()) && ((I = (x = e.value) == null ? void 0 : x.start) == null ? void 0 : I.toDate(Q()).setHours((k = c.start) == null ? void 0 : k.hour, (S = c.start) == null ? void 0 : S.minut)) || e.minDate, O = e.maxDate, v = (n, a) => {
-    const m = {
-      ...c,
+  }, { calendarProps: k, prevButtonProps: S, nextButtonProps: I, title: b } = F(e, i, o), { gridProps: T, headerProps: N, weekDays: w } = G({}, i), P = j(i.visibleRange.start, l), [h, f] = u.useState("date"), [m, C] = u.useState({ start: void 0, end: void 0 }), A = m.start?.hour?.toString() && m?.start?.minut?.toString() && e.value?.start?.toDate(z()).setHours(m.start?.hour, m.start?.minut) || e.minDate, B = e.maxDate, g = (n, a) => {
+    const c = {
+      ...m,
       [a]: n
     };
-    C(m), typeof (e == null ? void 0 : e.handlerChangeTimeRange) == "function" && e.handlerChangeTimeRange(m);
+    C(c), typeof e?.handlerChangeTimeRange == "function" && e.handlerChangeTimeRange(c);
   };
-  return Z(() => {
-    var n, a;
-    if ((n = e.time) != null && n.start && ((a = e.time) != null && a.end)) {
-      const m = e.time.start, V = e.time.end;
-      C({ start: m, end: V });
+  return L(() => {
+    if (e.time?.start && e.time?.end) {
+      const n = e.time.start, a = e.time.end;
+      C({ start: n, end: a });
     }
-  }, [JSON.stringify(e.time)]), /* @__PURE__ */ l("div", { className: "iru-text-laba-base-sr", children: [
-    s === "date" && /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t("div", { ...j, ref: u, children: /* @__PURE__ */ l("div", { className: r["container-calendar"], children: [
-      /* @__PURE__ */ l("div", { className: "iru-flex iru-gap-2", children: [
-        /* @__PURE__ */ l("div", { children: [
-          /* @__PURE__ */ l("div", { className: r["header-calendar"], children: [
-            /* @__PURE__ */ t(A, { ...z, children: typeof (e == null ? void 0 : e.prevIcon) == "function" || h(e == null ? void 0 : e.prevIcon) ? h(e.prevIcon) ? e.prevIcon : e.prevIcon() : /* @__PURE__ */ t(E, { className: "iru-rotate-90" }) }),
-            /* @__PURE__ */ t("div", { className: r["header-button-calendar"], onClick: () => f("month"), children: b }),
-            /* @__PURE__ */ t(A, { ...J, children: typeof (e == null ? void 0 : e.nextIcon) == "function" || h(e == null ? void 0 : e.nextIcon) ? h(e.nextIcon) ? e.nextIcon : e.nextIcon() : /* @__PURE__ */ t(E, { className: "-iru-rotate-90" }) })
+  }, [JSON.stringify(e.time)]), /* @__PURE__ */ r("div", { className: "iru-text-laba-base-sr", children: [
+    h === "date" && /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t("div", { ...k, ref: o, children: /* @__PURE__ */ r("div", { className: d["container-calendar"], children: [
+      /* @__PURE__ */ r("div", { className: "iru-flex iru-gap-2", children: [
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ r("div", { className: d["header-calendar"], children: [
+            /* @__PURE__ */ t(v, { ...S, children: typeof e?.prevIcon == "function" || s(e?.prevIcon) ? s(e.prevIcon) ? e.prevIcon : e.prevIcon() : /* @__PURE__ */ t(y, { className: "iru-rotate-90" }) }),
+            /* @__PURE__ */ t("div", { className: d["header-button-calendar"], onClick: () => f("month"), children: b }),
+            /* @__PURE__ */ t(v, { ...I, children: typeof e?.nextIcon == "function" || s(e?.nextIcon) ? s(e.nextIcon) ? e.nextIcon : e.nextIcon() : /* @__PURE__ */ t(y, { className: "-iru-rotate-90" }) })
           ] }),
-          /* @__PURE__ */ l("table", { ...W, cellPadding: "0", className: "flex-1", children: [
-            /* @__PURE__ */ t("thead", { ...F, className: "text-gray-600", children: /* @__PURE__ */ t("tr", { children: G.map((n, a) => /* @__PURE__ */ t("th", { className: r["days-calendar"], children: M(a) }, a)) }) }),
-            /* @__PURE__ */ t("tbody", { children: [...new Array(H).keys()].map((n) => /* @__PURE__ */ t("tr", { children: i.getDatesInWeek(n).map(
-              (a, m) => a ? /* @__PURE__ */ t(ae, { state: i, date: a }, m) : /* @__PURE__ */ t("td", {}, m)
+          /* @__PURE__ */ r("table", { ...T, cellPadding: "0", className: "flex-1", children: [
+            /* @__PURE__ */ t("thead", { ...N, className: "text-gray-600", children: /* @__PURE__ */ t("tr", { children: w.map((n, a) => /* @__PURE__ */ t("th", { className: d["days-calendar"], children: x(a) }, a)) }) }),
+            /* @__PURE__ */ t("tbody", { children: [...new Array(P).keys()].map((n) => /* @__PURE__ */ t("tr", { children: i.getDatesInWeek(n).map(
+              (a, c) => a ? /* @__PURE__ */ t(O, { state: i, date: a }, c) : /* @__PURE__ */ t("td", {}, c)
             ) }, n)) })
           ] })
         ] }),
-        (e == null ? void 0 : e.isCustomTime) && /* @__PURE__ */ l("div", { className: "iru-flex", children: [
+        e?.isCustomTime && /* @__PURE__ */ r("div", { className: "iru-flex", children: [
           /* @__PURE__ */ t(
-            L,
+            D,
             {
               minDate: e.minDate,
               maxDate: e.maxDate,
-              time: (T = e.time) == null ? void 0 : T.start,
-              value: (N = e.value) == null ? void 0 : N.start,
+              time: e.time?.start,
+              value: e.value?.start,
               timeLabel: "Awal",
               type: "start",
-              handlerChangeTime: (n) => v(n, "start")
+              handlerChangeTime: (n) => g(n, "start")
             }
           ),
           /* @__PURE__ */ t(
-            L,
+            D,
             {
-              minDate: K,
-              maxDate: O,
-              time: (w = e.time) == null ? void 0 : w.end,
-              value: (P = e.value) == null ? void 0 : P.end,
+              minDate: A,
+              maxDate: B,
+              time: e.time?.end,
+              value: e.value?.end,
               timeLabel: "Akhir",
               type: "end",
-              handlerChangeTime: (n) => v(n, "end")
+              handlerChangeTime: (n) => g(n, "end")
             }
           )
         ] })
       ] }),
-      e.withConfirm && /* @__PURE__ */ l("div", { className: r["footer-calendar"], children: [
-        typeof (e == null ? void 0 : e.buttonReset) == "function" ? /* @__PURE__ */ t("div", { onClick: () => e.handlerReset(i), children: e.buttonReset() }) : /* @__PURE__ */ t(B, { variants: "nude-laba-blue-10", size: "small", onClick: () => e.handlerReset(i), children: "Reset" }),
-        typeof (e == null ? void 0 : e.buttonSubmit) == "function" ? /* @__PURE__ */ t("div", { onClick: e.handlerSubmit, children: e.buttonSubmit() }) : /* @__PURE__ */ t(B, { size: "small", onClick: e.handlerSubmit, children: "Terapkan" })
+      e.withConfirm && /* @__PURE__ */ r("div", { className: d["footer-calendar"], children: [
+        typeof e?.buttonReset == "function" ? /* @__PURE__ */ t("div", { onClick: () => e.handlerReset(i), children: e.buttonReset() }) : /* @__PURE__ */ t(R, { variants: "nude-laba-blue-10", size: "small", onClick: () => e.handlerReset(i), children: "Reset" }),
+        typeof e?.buttonSubmit == "function" ? /* @__PURE__ */ t("div", { onClick: e.handlerSubmit, children: e.buttonSubmit() }) : /* @__PURE__ */ t(R, { size: "small", onClick: e.handlerSubmit, children: "Terapkan" })
       ] })
     ] }) }) }),
-    s === "month" && /* @__PURE__ */ t(ne, { state: i, setActiveTypeCalendar: f, type: ["date", "month", "year"] }),
-    s === "year" && /* @__PURE__ */ t(
-      ie,
+    h === "month" && /* @__PURE__ */ t(V, { state: i, setActiveTypeCalendar: f, type: ["date", "month", "year"] }),
+    h === "year" && /* @__PURE__ */ t(
+      Y,
       {
         state: i,
         setActiveTypeCalendar: f,
@@ -114,10 +112,10 @@ const le = (e) => {
       }
     )
   ] });
-}, ge = (e) => {
-  const u = ee(e), d = o.useRef(null), { calendarProps: i } = U(e, u, d);
-  return /* @__PURE__ */ t("div", { ref: d, children: /* @__PURE__ */ t(
-    le,
+}, re = (e) => {
+  const o = H(e), l = u.useRef(null), { calendarProps: i } = J(e, o, l);
+  return /* @__PURE__ */ t("div", { ref: l, children: /* @__PURE__ */ t(
+    Z,
     {
       handlerReset: e.handlerReset,
       handlerSubmit: e.handlerSubmit,
@@ -136,5 +134,5 @@ const le = (e) => {
   ) });
 };
 export {
-  ge as default
+  re as default
 };

package/dist/components/Calendar/CalendarYear.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),w=require("react"),d=require("./style.module.scss.cjs"),x=({className:u})=>l.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",className:`iru-h-4 iru-w-4 iru-text-blue-700 ${u??""}`,viewBox:"0 0 512 512",children:l.jsx("path",{d:`M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 \r
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),y=require("react"),c=require("./style.module.scss.cjs"),m=({className:o})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",className:`iru-h-4 iru-w-4 iru-text-blue-700 ${o??""}`,viewBox:"0 0 512 512",children:n.jsx("path",{d:`M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 \r
       0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 \r
-      0s-12.5 32.8 0 45.3l192 192z`})}),$=({title:u,state:e,type:a,setUpYear:i={startYear:1970,endAfterThisYear:20},hiddenHeader:g,setActiveTypeCalendar:s,onChangeYear:f})=>{const y=(n,r)=>{const c=e.focusedDate.set({year:n});r?(s("month"),e.setFocusedDate(c)):!r&&typeof f=="function"&&f(c)},b=(n,r,c)=>Array.from({length:(r-n)/c+1},(m,o)=>n+o*c);return w.useEffect(()=>{const n=document.getElementById(`calendar-year-${e.focusedDate.year}`),r=document.getElementById("wrapper-calendar-year");n&&r&&r.scrollTo({behavior:"instant",top:n.offsetTop-93})},[]),l.jsxs("div",{className:`iru-w-[296px] ${d.default["container-calendar"]}`,children:[!g&&l.jsx("div",{className:`${d.default["header-calendar"]} iru-my-2`,children:l.jsxs("div",{className:`${d.default["header-button-calendar"]} ${a.includes("date")||a.includes("month")?"":d.default.disabled}`,onClick:()=>{a.includes("date")?s("date"):a.includes("month")&&s("month")},children:[u," ",(a.includes("date")||a.includes("month"))&&l.jsx(x,{})]})}),l.jsx("div",{id:"wrapper-calendar-year",className:d.default["year-calendar"],children:b(i==null?void 0:i.startYear,new Date().getFullYear()+i.endAfterThisYear,1).map(n=>{var h,t;const r=Number(n),c=e!=null&&e.minValue?r<((h=e==null?void 0:e.minValue)==null?void 0:h.year):!1,m=e!=null&&e.maxValue?r>((t=e==null?void 0:e.maxValue)==null?void 0:t.year):!1,o=c||m;return l.jsx("div",{id:`calendar-year-${n}`,onClick:()=>{o||y(r,a.includes("month"))},className:`${d.default["cell-year"]} ${e.focusedDate.year===r&&!o?d.default.selected:""} ${e.focusedDate.year!==r&&!o?"hover:iru-bg-laba-blue-01":""} ${o?"iru-text-gray-400":"iru-cursor-pointer"}`,children:n},n)})})]})};exports.ChevronDownIcon=x;exports.default=$;
+      0s-12.5 32.8 0 45.3l192 192z`})}),b=({title:o,state:a,type:l,setUpYear:t={startYear:1970,endAfterThisYear:20},hiddenHeader:h,setActiveTypeCalendar:i,onChangeYear:u})=>{const x=(r,e)=>{const s=a.focusedDate.set({year:r});e?(i("month"),a.setFocusedDate(s)):!e&&typeof u=="function"&&u(s)},g=(r,e,s)=>Array.from({length:(e-r)/s+1},(f,d)=>r+d*s);return y.useEffect(()=>{const r=document.getElementById(`calendar-year-${a.focusedDate.year}`),e=document.getElementById("wrapper-calendar-year");r&&e&&e.scrollTo({behavior:"instant",top:r.offsetTop-93})},[]),n.jsxs("div",{className:`iru-w-[296px] ${c.default["container-calendar"]}`,children:[!h&&n.jsx("div",{className:`${c.default["header-calendar"]} iru-my-2`,children:n.jsxs("div",{className:`${c.default["header-button-calendar"]} ${l.includes("date")||l.includes("month")?"":c.default.disabled}`,onClick:()=>{l.includes("date")?i("date"):l.includes("month")&&i("month")},children:[o," ",(l.includes("date")||l.includes("month"))&&n.jsx(m,{})]})}),n.jsx("div",{id:"wrapper-calendar-year",className:c.default["year-calendar"],children:g(t?.startYear,new Date().getFullYear()+t.endAfterThisYear,1).map(r=>{const e=Number(r),s=a?.minValue?e<a?.minValue?.year:!1,f=a?.maxValue?e>a?.maxValue?.year:!1,d=s||f;return n.jsx("div",{id:`calendar-year-${r}`,onClick:()=>{d||x(e,l.includes("month"))},className:`${c.default["cell-year"]} ${a.focusedDate.year===e&&!d?c.default.selected:""} ${a.focusedDate.year!==e&&!d?"hover:iru-bg-laba-blue-01":""} ${d?"iru-text-gray-400":"iru-cursor-pointer"}`,children:r},r)})})]})};exports.ChevronDownIcon=m;exports.default=b;

package/dist/components/Calendar/CalendarYear.mjs

@@ -1,14 +1,14 @@
-import { jsxs as g, jsx as d } from "react/jsx-runtime";
-import x from "react";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import w from "react";
 import l from "./style.module.scss.mjs";
-const D = ({ className: u }) => /* @__PURE__ */ d(
+const $ = ({ className: d }) => /* @__PURE__ */ o(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
-    className: `iru-h-4 iru-w-4 iru-text-blue-700 ${u ?? ""}`,
+    className: `iru-h-4 iru-w-4 iru-text-blue-700 ${d ?? ""}`,
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ d(
+    children: /* @__PURE__ */ o(
       "path",
       {
         d: `M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 \r
@@ -17,58 +17,57 @@ const D = ({ className: u }) => /* @__PURE__ */ d(
       }
     )
   }
-), p = ({
-  title: u,
-  state: e,
-  type: c,
-  setUpYear: i = { startYear: 1970, endAfterThisYear: 20 },
-  hiddenHeader: w,
-  setActiveTypeCalendar: s,
-  onChangeYear: m
+), D = ({
+  title: d,
+  state: a,
+  type: n,
+  setUpYear: t = { startYear: 1970, endAfterThisYear: 20 },
+  hiddenHeader: h,
+  setActiveTypeCalendar: i,
+  onChangeYear: u
 }) => {
-  const $ = (n, r) => {
-    const a = e.focusedDate.set({ year: n });
-    r ? (s("month"), e.setFocusedDate(a)) : !r && typeof m == "function" && m(a);
-  }, b = (n, r, a) => Array.from({ length: (r - n) / a + 1 }, (f, o) => n + o * a);
-  return x.useEffect(() => {
-    const n = document.getElementById(`calendar-year-${e.focusedDate.year}`), r = document.getElementById("wrapper-calendar-year");
-    n && r && r.scrollTo({ behavior: "instant", top: n.offsetTop - 93 });
-  }, []), /* @__PURE__ */ g("div", { className: `iru-w-[296px] ${l["container-calendar"]}`, children: [
-    !w && /* @__PURE__ */ d("div", { className: `${l["header-calendar"]} iru-my-2`, children: /* @__PURE__ */ g(
+  const y = (r, e) => {
+    const c = a.focusedDate.set({ year: r });
+    e ? (i("month"), a.setFocusedDate(c)) : !e && typeof u == "function" && u(c);
+  }, g = (r, e, c) => Array.from({ length: (e - r) / c + 1 }, (m, s) => r + s * c);
+  return w.useEffect(() => {
+    const r = document.getElementById(`calendar-year-${a.focusedDate.year}`), e = document.getElementById("wrapper-calendar-year");
+    r && e && e.scrollTo({ behavior: "instant", top: r.offsetTop - 93 });
+  }, []), /* @__PURE__ */ f("div", { className: `iru-w-[296px] ${l["container-calendar"]}`, children: [
+    !h && /* @__PURE__ */ o("div", { className: `${l["header-calendar"]} iru-my-2`, children: /* @__PURE__ */ f(
       "div",
       {
-        className: `${l["header-button-calendar"]} ${c.includes("date") || c.includes("month") ? "" : l.disabled}`,
+        className: `${l["header-button-calendar"]} ${n.includes("date") || n.includes("month") ? "" : l.disabled}`,
         onClick: () => {
-          c.includes("date") ? s("date") : c.includes("month") && s("month");
+          n.includes("date") ? i("date") : n.includes("month") && i("month");
         },
         children: [
-          u,
+          d,
           " ",
-          (c.includes("date") || c.includes("month")) && /* @__PURE__ */ d(D, {})
+          (n.includes("date") || n.includes("month")) && /* @__PURE__ */ o($, {})
         ]
       }
     ) }),
-    /* @__PURE__ */ d("div", { id: "wrapper-calendar-year", className: l["year-calendar"], children: b(i == null ? void 0 : i.startYear, (/* @__PURE__ */ new Date()).getFullYear() + i.endAfterThisYear, 1).map(
-      (n) => {
-        var h, y;
-        const r = Number(n), a = e != null && e.minValue ? r < ((h = e == null ? void 0 : e.minValue) == null ? void 0 : h.year) : !1, f = e != null && e.maxValue ? r > ((y = e == null ? void 0 : e.maxValue) == null ? void 0 : y.year) : !1, o = a || f;
-        return /* @__PURE__ */ d(
+    /* @__PURE__ */ o("div", { id: "wrapper-calendar-year", className: l["year-calendar"], children: g(t?.startYear, (/* @__PURE__ */ new Date()).getFullYear() + t.endAfterThisYear, 1).map(
+      (r) => {
+        const e = Number(r), c = a?.minValue ? e < a?.minValue?.year : !1, m = a?.maxValue ? e > a?.maxValue?.year : !1, s = c || m;
+        return /* @__PURE__ */ o(
           "div",
           {
-            id: `calendar-year-${n}`,
+            id: `calendar-year-${r}`,
             onClick: () => {
-              o || $(r, c.includes("month"));
+              s || y(e, n.includes("month"));
             },
-            className: `${l["cell-year"]} ${e.focusedDate.year === r && !o ? l.selected : ""} ${e.focusedDate.year !== r && !o ? "hover:iru-bg-laba-blue-01" : ""} ${o ? "iru-text-gray-400" : "iru-cursor-pointer"}`,
-            children: n
+            className: `${l["cell-year"]} ${a.focusedDate.year === e && !s ? l.selected : ""} ${a.focusedDate.year !== e && !s ? "hover:iru-bg-laba-blue-01" : ""} ${s ? "iru-text-gray-400" : "iru-cursor-pointer"}`,
+            children: r
           },
-          n
+          r
         );
       }
     ) })
   ] });
 };
 export {
-  D as ChevronDownIcon,
-  p as default
+  $ as ChevronDownIcon,
+  D as default
 };

package/dist/components/Chart/DoughnutChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const z=require("react/jsx-runtime"),A=require("react-chartjs-2"),f=require("chart.js");f.Chart.register(f.CategoryScale,f.LinearScale,f.PointElement,f.LineElement,f.ArcElement,f.Title,f.Tooltip,f.Legend);const H=(p,n)=>{var m,D,w,x;const C=p.getVisibleDatasetCount(),h=p.getDatasetMeta(C-1).data.at(0);if(h){const{innerRadius:E}=h.getProps(["innerRadius"]),{ctx:s}=p,v=()=>{var g;const c=[].concat(n),d=c.length,o=s.font;let r=0,u=0,l;for(l=0;l<d;++l)s.font=c[l].font,r=Math.max(s.measureText(c[l].text).width,r),u+=(g=c[l].font)==null?void 0:g.lineHeight;return s.font=o,{height:u,width:r}},b=(c,d)=>{let o=document.createElement("div");document.body.appendChild(o),o.style.fontSize=`${d}px`,o.style.position="absolute",o.style.left="-10",o.style.top="-10",o.textContent=c;const r={width:o.clientWidth,height:o.clientHeight};return document.body.removeChild(o),o=null,r},$=v(),j=parseFloat(parseFloat(E).toFixed(2));s.textAlign="center",s.textBaseline="middle";const I=(p.chartArea.left+p.chartArea.right)/2,e=(p.chartArea.top+p.chartArea.bottom)/2-$.height/2;let t;const T=n.length;let S=0;for(t=0;t<T;++t){let c=(m=n[t].font)==null?void 0:m.size,d=(D=n[t].font)==null?void 0:D.lineHeight;const o=typeof n[t].text=="number"?n[t].text.toString():n[t].text;for(;b(o,c).width>j+(n[t].id==="value"?50:0);)c-=1,d=b(o,c).height;o.length>22&&d<14&&(d=18);const r=e+d/2+S,u=typeof n[t].text=="number"?new Intl.NumberFormat("id-ID",{style:"currency",currency:"IDR"}).format(n[t].text):n[t].text;let l=n[t].urlIconDesc?"    ":"";if(n[t].percentage!==void 0?l+=`${n[t].percentage}% ${n[t].text}`:l+=u,s.fillStyle=n[t].color,s.font=`${c<10?10:c}px sans-serif`,S+=d,n[t].percentage!==void 0&&n[t].urlIconDesc){const y=((x=(w=n[t])==null?void 0:w.percentage)==null?void 0:x.length)??0,g=new Image;g.src=n[t].urlIconDesc,s.drawImage(g,45-(y>6?y+2:y-2.5),r-8,16,14)}s.fillText(l,I,r)}s.restore(),s.save()}},M=({labels:p,data:n,backgroundColor:C,options:h={},redraw:m,widthInnerDoughnut:D,innerLabels:w,open:x=!0,keyRemoveDataOpen:E="gap",keyLabel:s="title",keyValue:v="originalValue",keyBackground:b="backgroundColor",className:$})=>{const j={labels:p||n.map(i=>i[s]),datasets:[{data:n.map(i=>i[v]),backgroundColor:C||n.map(i=>i[b])}]},I={cutout:D,animation:{duration:m?400:0},plugins:{legend:{display:!1},tooltip:{external(i){let e=document.getElementById("chartjs-tooltip");e||(e=document.createElement("div"),e.id="chartjs-tooltip",e.innerHTML="<table></table>",document.body.appendChild(e));const t=i.tooltip;if(t.opacity===0){e.style.opacity="0";return}e.classList.remove("above","below","no-transform"),t.yAlign?e.classList.add(t.yAlign):e.classList.add("no-transform");const T=n.filter(r=>!r[s]),S=n.filter(r=>r[v]>0&&r[v]<1);if(T.length===1&&S.length===1)return;function c(r){return r.lines}if(t.body){const r=t.title||[];let u=t.body.map(c),l="<thead>";r.forEach(g=>{let a="";a+="display: flex",a+="; justify-content: center",a+="; font-weight: 600",a+="; font-size: 12px",a+="; padding: 0px 14px",l+=`<tr><span style="${a}">${g}</span></tr>`}),l+="</thead><tbody>",u.length>1&&u[0][0]===u[1][0]&&(u=[u[0]]),u.forEach(g=>{let a="";a+="display: flex",a+="; justify-content: center",a+="; color: #0163C8",a+="; padding: 0px 14px",a+="; font-size: 12px";const L=`<span style="${a}">${g}</span>`;l+=`<tr><td>${L}</td></tr>`}),l+="</tbody>";const y=e.querySelector("table");y&&(y.innerHTML=l)}const d=i.chart.canvas.getBoundingClientRect(),o=d.top+window.pageYOffset+t.caretY;e.style.opacity="1",e.style.border="solid 1px #0163C8",e.style.background="white",e.style.height="fit-content",e.style.borderRadius="10px",e.style.position="absolute",e.style.zIndex="10",e.style.padding="4px 0",e.style.left=`${d.left+window.pageXOffset+t.caretX-80}px`,e.style.top=`${o>300&&!x?280:o}px`,e.style.pointerEvents="none"},displayColors:!0,enabled:!1,callbacks:{title(i){const e=n[i[0].dataIndex];return e==null?void 0:e[s]},label(i){const e=n==null?void 0:n[i.dataIndex];let t="Nilai: ";return e&&(t+=e.value),t}}}},elements:{arc:{borderWidth:0}}};return z.jsxs("div",{className:$??"",children:[!x&&z.jsx(A.Doughnut,{data:j,redraw:m,plugins:[{id:"draw",beforeDraw(i){H(i,w)}}],options:Object.keys(h).length>1?h:I}),x&&z.jsx(A.Doughnut,{data:j,redraw:m,plugins:[{id:"draw",beforeDraw(i){H(i,w.filter(e=>e.id!==E))}}],options:Object.keys(h).length>1?h:I})]})};exports.default=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("react/jsx-runtime"),A=require("react-chartjs-2"),p=require("chart.js");p.Chart.register(p.CategoryScale,p.LinearScale,p.PointElement,p.LineElement,p.ArcElement,p.Title,p.Tooltip,p.Legend);const B=(d,e)=>{const D=d.getVisibleDatasetCount(),g=d.getDatasetMeta(D-1).data.at(0);if(g){const{innerRadius:m}=g.getProps(["innerRadius"]),{ctx:s}=d,I=()=>{const t=[].concat(e),o=t.length,r=s.font;let u=0,y=0,l;for(l=0;l<o;++l)s.font=t[l].font,u=Math.max(s.measureText(t[l].text).width,u),y+=t[l].font?.lineHeight;return s.font=r,{height:y,width:u}},h=(t,o)=>{let r=document.createElement("div");document.body.appendChild(r),r.style.fontSize=`${o}px`,r.style.position="absolute",r.style.left="-10",r.style.top="-10",r.textContent=t;const u={width:r.clientWidth,height:r.clientHeight};return document.body.removeChild(r),r=null,u},j=I(),w=parseFloat(parseFloat(m).toFixed(2));s.textAlign="center",s.textBaseline="middle";const v=(d.chartArea.left+d.chartArea.right)/2,S=(d.chartArea.top+d.chartArea.bottom)/2-j.height/2;let n;const b=e.length;let i=0;for(n=0;n<b;++n){let t=e[n].font?.size,o=e[n].font?.lineHeight;const r=typeof e[n].text=="number"?e[n].text.toString():e[n].text;for(;h(r,t).width>w+(e[n].id==="value"?50:0);)t-=1,o=h(r,t).height;r.length>22&&o<14&&(o=18);const u=S+o/2+i,y=typeof e[n].text=="number"?new Intl.NumberFormat("id-ID",{style:"currency",currency:"IDR"}).format(e[n].text):e[n].text;let l=e[n].urlIconDesc?"    ":"";if(e[n].percentage!==void 0?l+=`${e[n].percentage}% ${e[n].text}`:l+=y,s.fillStyle=e[n].color,s.font=`${t<10?10:t}px sans-serif`,i+=o,e[n].percentage!==void 0&&e[n].urlIconDesc){const f=e[n]?.percentage?.length??0,a=new Image;a.src=e[n].urlIconDesc,s.drawImage(a,45-(f>6?f+2:f-2.5),u-8,16,14)}s.fillText(l,v,u)}s.restore(),s.save()}},L=({labels:d,data:e,backgroundColor:D,options:g={},redraw:m,widthInnerDoughnut:s,innerLabels:I,open:h=!0,keyRemoveDataOpen:j="gap",keyLabel:w="title",keyValue:v="originalValue",keyBackground:T="backgroundColor",className:S})=>{const n={labels:d||e.map(i=>i[w]),datasets:[{data:e.map(i=>i[v]),backgroundColor:D||e.map(i=>i[T])}]},b={cutout:s,animation:{duration:m?400:0},plugins:{legend:{display:!1},tooltip:{external(i){let t=document.getElementById("chartjs-tooltip");t||(t=document.createElement("div"),t.id="chartjs-tooltip",t.innerHTML="<table></table>",document.body.appendChild(t));const o=i.tooltip;if(o.opacity===0){t.style.opacity="0";return}t.classList.remove("above","below","no-transform"),o.yAlign?t.classList.add(o.yAlign):t.classList.add("no-transform");const r=e.filter(a=>!a[w]),u=e.filter(a=>a[v]>0&&a[v]<1);if(r.length===1&&u.length===1)return;function y(a){return a.lines}if(o.body){const a=o.title||[];let x=o.body.map(y),C="<thead>";a.forEach(E=>{let c="";c+="display: flex",c+="; justify-content: center",c+="; font-weight: 600",c+="; font-size: 12px",c+="; padding: 0px 14px",C+=`<tr><span style="${c}">${E}</span></tr>`}),C+="</thead><tbody>",x.length>1&&x[0][0]===x[1][0]&&(x=[x[0]]),x.forEach(E=>{let c="";c+="display: flex",c+="; justify-content: center",c+="; color: #0163C8",c+="; padding: 0px 14px",c+="; font-size: 12px";const H=`<span style="${c}">${E}</span>`;C+=`<tr><td>${H}</td></tr>`}),C+="</tbody>";const z=t.querySelector("table");z&&(z.innerHTML=C)}const l=i.chart.canvas.getBoundingClientRect(),f=l.top+window.pageYOffset+o.caretY;t.style.opacity="1",t.style.border="solid 1px #0163C8",t.style.background="white",t.style.height="fit-content",t.style.borderRadius="10px",t.style.position="absolute",t.style.zIndex="10",t.style.padding="4px 0",t.style.left=`${l.left+window.pageXOffset+o.caretX-80}px`,t.style.top=`${f>300&&!h?280:f}px`,t.style.pointerEvents="none"},displayColors:!0,enabled:!1,callbacks:{title(i){return e[i[0].dataIndex]?.[w]},label(i){const t=e?.[i.dataIndex];let o="Nilai: ";return t&&(o+=t.value),o}}}},elements:{arc:{borderWidth:0}}};return $.jsxs("div",{className:S??"",children:[!h&&$.jsx(A.Doughnut,{data:n,redraw:m,plugins:[{id:"draw",beforeDraw(i){B(i,I)}}],options:Object.keys(g).length>1?g:b}),h&&$.jsx(A.Doughnut,{data:n,redraw:m,plugins:[{id:"draw",beforeDraw(i){B(i,I.filter(t=>t.id!==j))}}],options:Object.keys(g).length>1?g:b})]})};exports.default=L;

package/dist/components/Chart/DoughnutChart.mjs

@@ -1,125 +1,122 @@
-import { jsxs as L, jsx as A } from "react/jsx-runtime";
+import { jsxs as H, jsx as A } from "react/jsx-runtime";
 import { Doughnut as T } from "react-chartjs-2";
-import { Chart as R, CategoryScale as F, LinearScale as M, PointElement as Y, LineElement as B, ArcElement as O, Title as k, Tooltip as N, Legend as P } from "chart.js";
-R.register(F, M, Y, B, O, k, N, P);
-const j = (f, n) => {
-  var m, v, x, y;
-  const C = f.getVisibleDatasetCount(), g = f.getDatasetMeta(C - 1).data.at(0);
-  if (g) {
-    const { innerRadius: $ } = g.getProps(["innerRadius"]), { ctx: s } = f, w = () => {
-      var u;
-      const c = [].concat(n), d = c.length, o = s.font;
-      let r = 0, p = 0, l;
-      for (l = 0; l < d; ++l)
-        s.font = c[l].font, r = Math.max(s.measureText(c[l].text).width, r), p += (u = c[l].font) == null ? void 0 : u.lineHeight;
-      return s.font = o, {
-        height: p,
-        width: r
+import { Chart as L, CategoryScale as R, LinearScale as F, PointElement as M, LineElement as Y, ArcElement as O, Title as k, Tooltip as N, Legend as P } from "chart.js";
+L.register(R, F, M, Y, O, k, N, P);
+const j = (d, e) => {
+  const I = d.getVisibleDatasetCount(), f = d.getDatasetMeta(I - 1).data.at(0);
+  if (f) {
+    const { innerRadius: m } = f.getProps(["innerRadius"]), { ctx: s } = d, v = () => {
+      const t = [].concat(e), o = t.length, r = s.font;
+      let p = 0, h = 0, l;
+      for (l = 0; l < o; ++l)
+        s.font = t[l].font, p = Math.max(s.measureText(t[l].text).width, p), h += t[l].font?.lineHeight;
+      return s.font = r, {
+        height: h,
+        width: p
       };
-    }, D = (c, d) => {
-      let o = document.createElement("div");
-      document.body.appendChild(o), o.style.fontSize = `${d}px`, o.style.position = "absolute", o.style.left = "-10", o.style.top = "-10", o.textContent = c;
-      const r = {
-        width: o.clientWidth,
-        height: o.clientHeight
+    }, g = (t, o) => {
+      let r = document.createElement("div");
+      document.body.appendChild(r), r.style.fontSize = `${o}px`, r.style.position = "absolute", r.style.left = "-10", r.style.top = "-10", r.textContent = t;
+      const p = {
+        width: r.clientWidth,
+        height: r.clientHeight
       };
-      return document.body.removeChild(o), o = null, r;
-    }, S = w(), b = parseFloat(parseFloat($).toFixed(2));
+      return document.body.removeChild(r), r = null, p;
+    }, b = v(), x = parseFloat(parseFloat(m).toFixed(2));
     s.textAlign = "center", s.textBaseline = "middle";
-    const I = (f.chartArea.left + f.chartArea.right) / 2, e = (f.chartArea.top + f.chartArea.bottom) / 2 - S.height / 2;
-    let t;
-    const z = n.length;
-    let E = 0;
-    for (t = 0; t < z; ++t) {
-      let c = (m = n[t].font) == null ? void 0 : m.size, d = (v = n[t].font) == null ? void 0 : v.lineHeight;
-      const o = typeof n[t].text == "number" ? n[t].text.toString() : n[t].text;
-      for (; D(o, c).width > b + (n[t].id === "value" ? 50 : 0); )
-        c -= 1, d = D(o, c).height;
-      o.length > 22 && d < 14 && (d = 18);
-      const r = e + d / 2 + E, p = typeof n[t].text == "number" ? new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(
-        n[t].text
-      ) : n[t].text;
-      let l = n[t].urlIconDesc ? "    " : "";
-      if (n[t].percentage !== void 0 ? l += `${n[t].percentage}% ${n[t].text}` : l += p, s.fillStyle = n[t].color, s.font = `${c < 10 ? 10 : c}px sans-serif`, E += d, n[t].percentage !== void 0 && n[t].urlIconDesc) {
-        const h = ((y = (x = n[t]) == null ? void 0 : x.percentage) == null ? void 0 : y.length) ?? 0, u = new Image();
-        u.src = n[t].urlIconDesc, s.drawImage(u, 45 - (h > 6 ? h + 2 : h - 2.5), r - 8, 16, 14);
+    const w = (d.chartArea.left + d.chartArea.right) / 2, E = (d.chartArea.top + d.chartArea.bottom) / 2 - b.height / 2;
+    let n;
+    const D = e.length;
+    let i = 0;
+    for (n = 0; n < D; ++n) {
+      let t = e[n].font?.size, o = e[n].font?.lineHeight;
+      const r = typeof e[n].text == "number" ? e[n].text.toString() : e[n].text;
+      for (; g(r, t).width > x + (e[n].id === "value" ? 50 : 0); )
+        t -= 1, o = g(r, t).height;
+      r.length > 22 && o < 14 && (o = 18);
+      const p = E + o / 2 + i, h = typeof e[n].text == "number" ? new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(
+        e[n].text
+      ) : e[n].text;
+      let l = e[n].urlIconDesc ? "    " : "";
+      if (e[n].percentage !== void 0 ? l += `${e[n].percentage}% ${e[n].text}` : l += h, s.fillStyle = e[n].color, s.font = `${t < 10 ? 10 : t}px sans-serif`, i += o, e[n].percentage !== void 0 && e[n].urlIconDesc) {
+        const u = e[n]?.percentage?.length ?? 0, c = new Image();
+        c.src = e[n].urlIconDesc, s.drawImage(c, 45 - (u > 6 ? u + 2 : u - 2.5), p - 8, 16, 14);
       }
-      s.fillText(l, I, r);
+      s.fillText(l, w, p);
     }
     s.restore(), s.save();
   }
 }, V = ({
-  labels: f,
-  data: n,
-  backgroundColor: C,
-  options: g = {},
+  labels: d,
+  data: e,
+  backgroundColor: I,
+  options: f = {},
   redraw: m,
-  widthInnerDoughnut: v,
-  innerLabels: x,
-  open: y = !0,
-  keyRemoveDataOpen: $ = "gap",
-  keyLabel: s = "title",
+  widthInnerDoughnut: s,
+  innerLabels: v,
+  open: g = !0,
+  keyRemoveDataOpen: b = "gap",
+  keyLabel: x = "title",
   keyValue: w = "originalValue",
-  keyBackground: D = "backgroundColor",
-  className: S
+  keyBackground: S = "backgroundColor",
+  className: E
 }) => {
-  const b = {
-    labels: f || n.map((i) => i[s]),
+  const n = {
+    labels: d || e.map((i) => i[x]),
     datasets: [
       {
-        data: n.map((i) => i[w]),
-        backgroundColor: C || n.map((i) => i[D])
+        data: e.map((i) => i[w]),
+        backgroundColor: I || e.map((i) => i[S])
       }
     ]
-  }, I = {
-    cutout: v,
+  }, D = {
+    cutout: s,
     animation: { duration: m ? 400 : 0 },
     plugins: {
       legend: { display: !1 },
       tooltip: {
         external(i) {
-          let e = document.getElementById("chartjs-tooltip");
-          e || (e = document.createElement("div"), e.id = "chartjs-tooltip", e.innerHTML = "<table></table>", document.body.appendChild(e));
-          const t = i.tooltip;
-          if (t.opacity === 0) {
-            e.style.opacity = "0";
+          let t = document.getElementById("chartjs-tooltip");
+          t || (t = document.createElement("div"), t.id = "chartjs-tooltip", t.innerHTML = "<table></table>", document.body.appendChild(t));
+          const o = i.tooltip;
+          if (o.opacity === 0) {
+            t.style.opacity = "0";
             return;
           }
-          e.classList.remove("above", "below", "no-transform"), t.yAlign ? e.classList.add(t.yAlign) : e.classList.add("no-transform");
-          const z = n.filter((r) => !r[s]), E = n.filter((r) => r[w] > 0 && r[w] < 1);
-          if (z.length === 1 && E.length === 1) return;
-          function c(r) {
-            return r.lines;
+          t.classList.remove("above", "below", "no-transform"), o.yAlign ? t.classList.add(o.yAlign) : t.classList.add("no-transform");
+          const r = e.filter((c) => !c[x]), p = e.filter((c) => c[w] > 0 && c[w] < 1);
+          if (r.length === 1 && p.length === 1) return;
+          function h(c) {
+            return c.lines;
           }
-          if (t.body) {
-            const r = t.title || [];
-            let p = t.body.map(c), l = "<thead>";
-            r.forEach((u) => {
+          if (o.body) {
+            const c = o.title || [];
+            let y = o.body.map(h), C = "<thead>";
+            c.forEach(($) => {
               let a = "";
-              a += "display: flex", a += "; justify-content: center", a += "; font-weight: 600", a += "; font-size: 12px", a += "; padding: 0px 14px", l += `<tr><span style="${a}">${u}</span></tr>`;
-            }), l += "</thead><tbody>", p.length > 1 && p[0][0] === p[1][0] && (p = [p[0]]), p.forEach((u) => {
+              a += "display: flex", a += "; justify-content: center", a += "; font-weight: 600", a += "; font-size: 12px", a += "; padding: 0px 14px", C += `<tr><span style="${a}">${$}</span></tr>`;
+            }), C += "</thead><tbody>", y.length > 1 && y[0][0] === y[1][0] && (y = [y[0]]), y.forEach(($) => {
               let a = "";
               a += "display: flex", a += "; justify-content: center", a += "; color: #0163C8", a += "; padding: 0px 14px", a += "; font-size: 12px";
-              const H = `<span style="${a}">${u}</span>`;
-              l += `<tr><td>${H}</td></tr>`;
-            }), l += "</tbody>";
-            const h = e.querySelector("table");
-            h && (h.innerHTML = l);
+              const B = `<span style="${a}">${$}</span>`;
+              C += `<tr><td>${B}</td></tr>`;
+            }), C += "</tbody>";
+            const z = t.querySelector("table");
+            z && (z.innerHTML = C);
           }
-          const d = i.chart.canvas.getBoundingClientRect(), o = d.top + window.pageYOffset + t.caretY;
-          e.style.opacity = "1", e.style.border = "solid 1px #0163C8", e.style.background = "white", e.style.height = "fit-content", e.style.borderRadius = "10px", e.style.position = "absolute", e.style.zIndex = "10", e.style.padding = "4px 0", e.style.left = `${d.left + window.pageXOffset + t.caretX - 80}px`, e.style.top = `${o > 300 && !y ? 280 : o}px`, e.style.pointerEvents = "none";
+          const l = i.chart.canvas.getBoundingClientRect(), u = l.top + window.pageYOffset + o.caretY;
+          t.style.opacity = "1", t.style.border = "solid 1px #0163C8", t.style.background = "white", t.style.height = "fit-content", t.style.borderRadius = "10px", t.style.position = "absolute", t.style.zIndex = "10", t.style.padding = "4px 0", t.style.left = `${l.left + window.pageXOffset + o.caretX - 80}px`, t.style.top = `${u > 300 && !g ? 280 : u}px`, t.style.pointerEvents = "none";
         },
         displayColors: !0,
         enabled: !1,
         callbacks: {
           title(i) {
-            const e = n[i[0].dataIndex];
-            return e == null ? void 0 : e[s];
+            return e[i[0].dataIndex]?.[x];
           },
           label(i) {
-            const e = n == null ? void 0 : n[i.dataIndex];
-            let t = "Nilai: ";
-            return e && (t += e.value), t;
+            const t = e?.[i.dataIndex];
+            let o = "Nilai: ";
+            return t && (o += t.value), o;
           }
         }
       }
@@ -130,27 +127,27 @@ const j = (f, n) => {
       }
     }
   };
-  return /* @__PURE__ */ L("div", { className: S ?? "", children: [
-    !y && /* @__PURE__ */ A(
+  return /* @__PURE__ */ H("div", { className: E ?? "", children: [
+    !g && /* @__PURE__ */ A(
       T,
       {
-        data: b,
+        data: n,
         redraw: m,
         plugins: [
           {
             id: "draw",
             beforeDraw(i) {
-              j(i, x);
+              j(i, v);
             }
           }
         ],
-        options: Object.keys(g).length > 1 ? g : I
+        options: Object.keys(f).length > 1 ? f : D
       }
     ),
-    y && /* @__PURE__ */ A(
+    g && /* @__PURE__ */ A(
       T,
       {
-        data: b,
+        data: n,
         redraw: m,
         plugins: [
           {
@@ -158,12 +155,12 @@ const j = (f, n) => {
             beforeDraw(i) {
               j(
                 i,
-                x.filter((e) => e.id !== $)
+                v.filter((t) => t.id !== b)
               );
             }
           }
         ],
-        options: Object.keys(g).length > 1 ? g : I
+        options: Object.keys(f).length > 1 ? f : D
       }
     )
   ] });