@jigowatts/jigowatts-ui 1.2.0 → 1.2.2

package/dist/assets/index8.css

@@ -1 +1 @@
-._reportChart_l9ziq_1{width:100%;min-height:min(20vh,25vw)}._reportChart_l9ziq_1 ._title_l9ziq_5{font-size:larger;font-weight:700;padding:1em}._reportChart_l9ziq_1 ._chart_l9ziq_10{padding:1.5em;width:100%;height:min(40vh,50vw)}._reportChart_l9ziq_1 ._report_l9ziq_1{width:100%;height:min(40vh,50vw)}._reportChart_l9ziq_1 ._reportBox_l9ziq_19{min-height:min(40vh,50vw)}._nodata_l9ziq_23{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}._rechartsDefaultTooltip_l9ziq_31{margin:0;padding:10px;background-color:#fff;border:1px solid rgb(204,204,204);white-space:nowrap}._rechartsTooltipLabel_l9ziq_39{margin:0}._rechartsTooltipItemList_l9ziq_43{padding:0;margin:0}._rechartsTooltipItem_l9ziq_43{display:block;padding-top:4px;padding-bottom:4px;color:#0d74be}
+._chart_15x7v_1{padding:1.5em;width:100%;height:min(40vh,50vw)}._reportBox_15x7v_7{min-height:min(40vh,50vw)}._nodata_15x7v_11{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}._rechartsDefaultTooltip_15x7v_19{margin:0;padding:10px;background-color:#fff;border:1px solid rgb(204,204,204);white-space:nowrap}._rechartsTooltipLabel_15x7v_27{margin:0}._rechartsTooltipItemList_15x7v_31{padding:0;margin:0}._rechartsTooltipItem_15x7v_31{display:block;padding-top:4px;padding-bottom:4px;color:#0d74be}

package/dist/components/CardWithTitle/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index32.css');const e=require("react/jsx-runtime"),n=require("@mui/material"),a=require("../Title/index.cjs.js"),l="_card_1i7he_1",d="_content_1i7he_5",s={card:l,content:d},i=r=>{const{title:t,children:c,spacingFromTitle:o=32}=r;return e.jsx(n.Card,{className:s.card,children:e.jsxs(n.CardContent,{children:[t&&e.jsx(a.Title,{title:t}),e.jsx("div",{className:s.content,style:{paddingTop:`${o}px`},children:c})]})})};exports.CardWithTitle=i;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index32.css');const e=require("react/jsx-runtime"),s=require("@mui/material"),u=require("../Title/index.cjs.js"),m="_card_1i7he_1",_="_content_1i7he_5",n={card:m,content:_},a=r=>{const{title:t,children:c,spacingFromTitle:i=32,cardClassName:l,titleClassName:o,childrenWrapperClassName:d}=r;return e.jsx(s.Card,{className:`${n.card} ${l??""}`,children:e.jsxs(s.CardContent,{children:[t&&e.jsx(u.Title,{title:t,className:o??""}),e.jsx("div",{className:`${n.content} ${d??""}`,style:{paddingTop:`${i}px`},children:c})]})})};exports.CardWithTitle=a;exports.default=a;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/CardWithTitle/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** カードのタイトル */\n  title?: string;\n  /** カードの中身 */\n  children: ReactNode;\n  /** タイトルからのスペース */\n  spacingFromTitle?: number;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n  const { title, children, spacingFromTitle = 32 } = props;\n  return (\n    <Card className={styles.card}>\n      <CardContent>\n        {title && <Title title={title} />}\n        <div\n          className={styles.content}\n          style={{ paddingTop: `${spacingFromTitle}px` }}\n        >\n          {children}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","Card","styles","CardContent","jsx","Title"],"mappings":"2QAmBaA,EAAiBC,GAAiB,CAC7C,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,iBAAAC,EAAmB,EAAO,EAAAH,EACnD,aACGI,EAAAA,KAAK,CAAA,UAAWC,EAAO,KACtB,gBAACC,cACE,CAAA,SAAA,CAASL,GAAAM,EAAA,IAACC,SAAM,MAAAP,CAAc,CAAA,EAC/BM,EAAA,IAAC,MAAA,CACC,UAAWF,EAAO,QAClB,MAAO,CAAE,WAAY,GAAGF,CAAgB,IAAK,EAE5C,SAAAD,CAAA,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAEJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** カードのタイトル */\n  title?: string;\n  /** カードの中身 */\n  children: ReactNode;\n  /** タイトルからのスペース */\n  spacingFromTitle?: number;\n  /** カードのクラス名 */\n  cardClassName?: string;\n  /** タイトルのクラス名 */\n  titleClassName?: string;\n  /**チルドレンラッパーのクラス名 */\n  childrenWrapperClassName?: string;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n  const {\n    title,\n    children,\n    spacingFromTitle = 32,\n    cardClassName,\n    titleClassName,\n    childrenWrapperClassName,\n  } = props;\n  return (\n    <Card className={`${styles.card} ${cardClassName ?? \"\"}`}>\n      <CardContent>\n        {title && <Title title={title} className={titleClassName ?? \"\"} />}\n        <div\n          className={`${styles.content} ${childrenWrapperClassName ?? \"\"}`}\n          style={{ paddingTop: `${spacingFromTitle}px` }}\n        >\n          {children}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","cardClassName","titleClassName","childrenWrapperClassName","jsx","Card","styles","jsxs","CardContent","Title"],"mappings":"2QAyBaA,EAAiBC,GAAiB,CACvC,KAAA,CACJ,MAAAC,EACA,SAAAC,EACA,iBAAAC,EAAmB,GACnB,cAAAC,EACA,eAAAC,EACA,yBAAAC,CAAA,EACEN,EAEF,OAAAO,EAAAA,IAACC,EAAAA,KAAK,CAAA,UAAW,GAAGC,EAAO,IAAI,IAAIL,GAAiB,EAAE,GACpD,SAAAM,EAAAA,KAACC,EAAAA,YACE,CAAA,SAAA,CAAAV,GAAUM,EAAA,IAAAK,QAAA,CAAM,MAAAX,EAAc,UAAWI,GAAkB,GAAI,EAChEE,EAAA,IAAC,MAAA,CACC,UAAW,GAAGE,EAAO,OAAO,IAAIH,GAA4B,EAAE,GAC9D,MAAO,CAAE,WAAY,GAAGH,CAAgB,IAAK,EAE5C,SAAAD,CAAA,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAEJ"}

package/dist/components/CardWithTitle/index.d.ts

@@ -7,6 +7,12 @@ type Props = {
     children: ReactNode;
     /** タイトルからのスペース */
     spacingFromTitle?: number;
+    /** カードのクラス名 */
+    cardClassName?: string;
+    /** タイトルのクラス名 */
+    titleClassName?: string;
+    /**チルドレンラッパーのクラス名 */
+    childrenWrapperClassName?: string;
 };
 /**
  * タイトル付きカードコンポーネント

package/dist/components/CardWithTitle/index.es.js

@@ -1,19 +1,26 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { Card as i, CardContent as a } from "@mui/material";
-import { Title as d } from "../Title/index.es.js";
-import '../../assets/index32.css';const l = "_card_1i7he_1", m = "_content_1i7he_5", n = {
-  card: l,
-  content: m
-}, f = (r) => {
-  const { title: e, children: c, spacingFromTitle: o = 32 } = r;
-  return /* @__PURE__ */ t(i, { className: n.card, children: /* @__PURE__ */ s(a, { children: [
-    e && /* @__PURE__ */ t(d, { title: e }),
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Card as d, CardContent as m } from "@mui/material";
+import { Title as p } from "../Title/index.es.js";
+import '../../assets/index32.css';const h = "_card_1i7he_1", C = "_content_1i7he_5", a = {
+  card: h,
+  content: C
+}, f = (s) => {
+  const {
+    title: e,
+    children: r,
+    spacingFromTitle: c = 32,
+    cardClassName: n,
+    titleClassName: o,
+    childrenWrapperClassName: i
+  } = s;
+  return /* @__PURE__ */ t(d, { className: `${a.card} ${n ?? ""}`, children: /* @__PURE__ */ l(m, { children: [
+    e && /* @__PURE__ */ t(p, { title: e, className: o ?? "" }),
     /* @__PURE__ */ t(
       "div",
       {
-        className: n.content,
-        style: { paddingTop: `${o}px` },
-        children: c
+        className: `${a.content} ${i ?? ""}`,
+        style: { paddingTop: `${c}px` },
+        children: r
       }
     )
   ] }) });

package/dist/components/CardWithTitle/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** カードのタイトル */\n  title?: string;\n  /** カードの中身 */\n  children: ReactNode;\n  /** タイトルからのスペース */\n  spacingFromTitle?: number;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n  const { title, children, spacingFromTitle = 32 } = props;\n  return (\n    <Card className={styles.card}>\n      <CardContent>\n        {title && <Title title={title} />}\n        <div\n          className={styles.content}\n          style={{ paddingTop: `${spacingFromTitle}px` }}\n        >\n          {children}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","Card","styles","CardContent","jsx","Title"],"mappings":";;;;;;GAmBaA,IAAgB,CAACC,MAAiB;AAC7C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,kBAAAC,IAAmB,GAAO,IAAAH;AACnD,2BACGI,GAAK,EAAA,WAAWC,EAAO,MACtB,4BAACC,GACE,EAAA,UAAA;AAAA,IAASL,KAAA,gBAAAM,EAACC,KAAM,OAAAP,EAAc,CAAA;AAAA,IAC/B,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWF,EAAO;AAAA,QAClB,OAAO,EAAE,YAAY,GAAGF,CAAgB,KAAK;AAAA,QAE5C,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EAAA,CACF,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** カードのタイトル */\n  title?: string;\n  /** カードの中身 */\n  children: ReactNode;\n  /** タイトルからのスペース */\n  spacingFromTitle?: number;\n  /** カードのクラス名 */\n  cardClassName?: string;\n  /** タイトルのクラス名 */\n  titleClassName?: string;\n  /**チルドレンラッパーのクラス名 */\n  childrenWrapperClassName?: string;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n  const {\n    title,\n    children,\n    spacingFromTitle = 32,\n    cardClassName,\n    titleClassName,\n    childrenWrapperClassName,\n  } = props;\n  return (\n    <Card className={`${styles.card} ${cardClassName ?? \"\"}`}>\n      <CardContent>\n        {title && <Title title={title} className={titleClassName ?? \"\"} />}\n        <div\n          className={`${styles.content} ${childrenWrapperClassName ?? \"\"}`}\n          style={{ paddingTop: `${spacingFromTitle}px` }}\n        >\n          {children}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","cardClassName","titleClassName","childrenWrapperClassName","jsx","Card","styles","jsxs","CardContent","Title"],"mappings":";;;;;;GAyBaA,IAAgB,CAACC,MAAiB;AACvC,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,0BAAAC;AAAA,EAAA,IACEN;AAEF,SAAA,gBAAAO,EAACC,GAAK,EAAA,WAAW,GAAGC,EAAO,IAAI,IAAIL,KAAiB,EAAE,IACpD,UAAA,gBAAAM,EAACC,GACE,EAAA,UAAA;AAAA,IAAAV,KAAU,gBAAAM,EAAAK,GAAA,EAAM,OAAAX,GAAc,WAAWI,KAAkB,IAAI;AAAA,IAChE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAGE,EAAO,OAAO,IAAIH,KAA4B,EAAE;AAAA,QAC9D,OAAO,EAAE,YAAY,GAAGH,CAAgB,KAAK;AAAA,QAE5C,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EAAA,CACF,EACF,CAAA;AAEJ;"}

package/dist/components/ReportChart/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index8.css');const r=require("react/jsx-runtime"),j=require("react"),_=require("@mui/material"),e=require("chart.js"),v=require("react-chartjs-2"),C="_chart_l9ziq_10",q="_reportBox_l9ziq_19",L="_nodata_l9ziq_23",n={chart:C,reportBox:q,nodata:L};e.Chart.register(e.CategoryScale,e.LinearScale,e.PointElement,e.LineElement,e.Title,e.Tooltip,e.Legend);const d=u=>{const{dataList:a,xLabel:p="",yLabel:h="",labelKey:l,valueKey:i,borderColor:c="#ff6384",chartMargin:o={top:0,right:20,bottom:20,left:10},tooltipFormatter:f=(t,s)=>[String(t),String(s)],isLoading:b}=u,g=j.useRef(null),m={responsive:!0,aspectRatio:2,maintainAspectRatio:!1,animation:{delay:200},transitions:{resize:{animations:{x:{from:0},y:{from:0}}},show:{animations:{x:{from:0},y:{from:0}}}},layout:{padding:{left:o.left,right:o.right,top:o.top,bottom:o.bottom}},plugins:{legend:{display:!1,position:"top"},title:{display:!1},tooltip:{callbacks:{label:t=>{const s=t.dataset.label||"";return f(t.parsed.y,s).reverse().join("")}}}},scales:{x:{title:{display:!0,text:p}},y:{beginAtZero:!0,title:{display:!0,text:h}}}},y={labels:a.map(t=>{if(typeof t=="object"&&t!==null&&l in t)return t[l];throw new Error("Invalid data structure")}),datasets:[{label:"",data:a.map(t=>{if(typeof t=="object"&&t!==null&&i in t)return t[i];throw new Error("Invalid data structure")}),borderColor:c,backgroundColor:c,tension:.4},{label:"",data:a.map(()=>[70,70,70,70,70,70,70]),borderColor:"red",backgroundColor:"red",tension:.4}]},x=()=>b?r.jsx("div",{className:n.nodata,children:"loading..."}):a.length===0?r.jsx("div",{className:n.nodata,children:"NO DATA"}):r.jsx(v.Line,{ref:g,options:m,data:y});return r.jsx(_.Box,{className:n.reportBox,children:r.jsx("div",{className:n.chart,children:r.jsx(x,{})})})};exports.ReportChart=d;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index8.css');const a=require("react/jsx-runtime"),j=require("react"),v=require("@mui/material"),e=require("chart.js"),_=require("react-chartjs-2"),C="_chart_15x7v_1",L="_reportBox_15x7v_7",R="_nodata_15x7v_11",o={chart:C,reportBox:L,nodata:R};e.Chart.register(e.CategoryScale,e.LinearScale,e.PointElement,e.LineElement,e.Title,e.Tooltip,e.Legend);const d=u=>{const{dataList:s,xLabel:p="",yLabel:h="",labelKey:l,valueKey:i,borderColor:c="#ff6384",chartMargin:r={top:0,right:20,bottom:20,left:10},tooltipFormatter:f=(t,n)=>[String(t),String(n)],isLoading:x}=u,b=j.useRef(null),g={responsive:!0,aspectRatio:2,maintainAspectRatio:!1,animation:{delay:200},transitions:{resize:{animations:{x:{from:0},y:{from:0}}},show:{animations:{x:{from:0},y:{from:0}}}},layout:{padding:{left:r.left,right:r.right,top:r.top,bottom:r.bottom}},plugins:{legend:{display:!1,position:"top"},title:{display:!1},tooltip:{callbacks:{label:t=>{const n=t.dataset.label||"";return f(t.parsed.y,n).reverse().join("")}}}},scales:{x:{title:{display:!0,text:p}},y:{beginAtZero:!0,title:{display:!0,text:h}}}},y={labels:s.map(t=>{if(typeof t=="object"&&t!==null&&l in t)return t[l];throw new Error("Invalid data structure")}),datasets:[{label:"",data:s.map(t=>{if(typeof t=="object"&&t!==null&&i in t)return t[i];throw new Error("Invalid data structure")}),borderColor:c,backgroundColor:c,tension:.4}]},m=()=>x?a.jsx("div",{className:o.nodata,children:"loading..."}):s.length===0?a.jsx("div",{className:o.nodata,children:"NO DATA"}):a.jsx(_.Line,{ref:b,options:g,data:y});return a.jsx(v.Box,{className:o.reportBox,children:a.jsx("div",{className:o.chart,children:a.jsx(m,{})})})};exports.ReportChart=d;exports.default=d;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/ReportChart/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ReportChart/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  dataList: unknown[];\n  xLabel: string;\n  yLabel: string;\n  labelKey: string;\n  valueKey: string;\n  borderColor: string;\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n};\n\ntype ChartMargin = {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n};\n\ntype CustomToolTipFormatter = (value: unknown, label: string) => string[];\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  ChartJSTooltip,\n  Legend,\n);\n\nexport const ReportChart = (props: Props) => {\n  const {\n    dataList,\n    xLabel = \"\",\n    yLabel = \"\",\n    labelKey,\n    valueKey,\n    borderColor = \"#ff6384\",\n    chartMargin = { top: 0, right: 20, bottom: 20, left: 10 },\n    tooltipFormatter = (value: unknown, label: string) => [\n      String(value),\n      String(label),\n    ],\n    isLoading,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  const options = {\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: {\n      delay: 200,\n    },\n    transitions: {\n      resize: {\n        animations: {\n          x: {\n            from: 0,\n          },\n          y: {\n            from: 0,\n          },\n        },\n      },\n      show: {\n        animations: {\n          x: {\n            from: 0,\n          },\n          y: {\n            from: 0,\n          },\n        },\n      },\n    },\n    layout: {\n      padding: {\n        left: chartMargin.left,\n        right: chartMargin.right,\n        top: chartMargin.top,\n        bottom: chartMargin.bottom,\n      },\n    },\n    plugins: {\n      legend: {\n        display: false,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            const label = context.dataset.label || \"\";\n            const ar = tooltipFormatter(context.parsed.y, label);\n            const str = ar.reverse().join(\"\");\n            return str;\n          },\n        },\n      },\n    },\n    scales: {\n      x: {\n        title: {\n          display: true,\n          text: xLabel,\n          // font: {\n          //   family: \"\", // フォントファミリーを指定\n          //   size: 30, // フォントサイズを指定\n          // },\n        },\n        // ticks: {\n        //   font: {\n        //     family: \"Arial\", // フォントファミリーを指定\n        //     size: 25, // フォントサイズを指定\n        //   },\n        // },\n      },\n      y: {\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n          // font: {\n          //   family: \"\", // フォントファミリーを指定\n          //   size: 30, // フォントサイズを指定\n          // },\n        },\n        // ticks: {\n        //   font: {\n        //     family: \"Arial\", // フォントファミリーを指定\n        //     size: styles.y.fontsize, // フォントサイズを指定\n        //   },\n        // },\n      },\n    },\n  };\n\n  const chartJsData = {\n    labels: dataList.map((item) => {\n      if (typeof item === \"object\" && item !== null && labelKey in item) {\n        return (item as { [key: string]: unknown })[labelKey];\n      }\n      throw new Error(\"Invalid data structure\");\n    }),\n    datasets: [\n      {\n        label: \"\",\n        data: dataList.map((item) => {\n          if (typeof item === \"object\" && item !== null && valueKey in item) {\n            return (item as { [key: string]: unknown })[valueKey];\n          }\n          throw new Error(\"Invalid data structure\");\n        }),\n        borderColor: borderColor,\n        backgroundColor: borderColor,\n        tension: 0.4,\n      },\n      {\n        label: \"\",\n        data: dataList.map(() => {\n          return [70, 70, 70, 70, 70, 70, 70];\n        }),\n        borderColor: \"red\",\n        backgroundColor: \"red\",\n        tension: 0.4,\n      },\n    ],\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (dataList.length === 0) {\n      return <div className={styles.nodata}>NO DATA</div>;\n    } else {\n      return (\n        <LineChartJS ref={chartRef} options={options} data={chartJsData} />\n      );\n    }\n  };\n\n  return (\n    <Box className={styles.reportBox}>\n      <div className={styles.chart}>\n        <ChartData />\n      </div>\n    </Box>\n  );\n};\n\nexport default ReportChart;\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Title","ChartJSTooltip","Legend","ReportChart","props","dataList","xLabel","yLabel","labelKey","valueKey","borderColor","chartMargin","tooltipFormatter","value","label","isLoading","chartRef","useRef","options","context","chartJsData","item","ChartData","jsx","styles","LineChartJS","Box"],"mappings":"oVAsCAA,EAAAA,MAAQ,SACNC,EAAA,cACAC,EAAA,YACAC,EAAA,aACAC,EAAA,YACAC,EAAA,MACAC,EAAA,QACAC,EAAAA,MACF,EAEa,MAAAC,EAAeC,GAAiB,CACrC,KAAA,CACJ,SAAAC,EACA,OAAAC,EAAS,GACT,OAAAC,EAAS,GACT,SAAAC,EACA,SAAAC,EACA,YAAAC,EAAc,UACd,YAAAC,EAAc,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,GAAI,KAAM,EAAG,EACxD,iBAAAC,EAAmB,CAACC,EAAgBC,IAAkB,CACpD,OAAOD,CAAK,EACZ,OAAOC,CAAK,CACd,EACA,UAAAC,CAAA,EACEX,EAEEY,EAAWC,SAAO,IAAI,EAEtBC,EAAU,CACd,WAAY,GACZ,YAAa,EACb,oBAAqB,GACrB,UAAW,CACT,MAAO,GACT,EACA,YAAa,CACX,OAAQ,CACN,WAAY,CACV,EAAG,CACD,KAAM,CACR,EACA,EAAG,CACD,KAAM,CAAA,CACR,CAEJ,EACA,KAAM,CACJ,WAAY,CACV,EAAG,CACD,KAAM,CACR,EACA,EAAG,CACD,KAAM,CAAA,CACR,CACF,CAEJ,EACA,OAAQ,CACN,QAAS,CACP,KAAMP,EAAY,KAClB,MAAOA,EAAY,MACnB,IAAKA,EAAY,IACjB,OAAQA,EAAY,MAAA,CAExB,EACA,QAAS,CACP,OAAQ,CACN,QAAS,GACT,SAAU,KACZ,EACA,MAAO,CACL,QAAS,EACX,EACA,QAAS,CACP,UAAW,CACT,MAAQQ,GAAiC,CACjC,MAAAL,EAAQK,EAAQ,QAAQ,OAAS,GAGhC,OAFIP,EAAiBO,EAAQ,OAAO,EAAGL,CAAK,EACpC,QAAQ,EAAE,KAAK,EAAE,CACzB,CACT,CACF,CAEJ,EACA,OAAQ,CACN,EAAG,CACD,MAAO,CACL,QAAS,GACT,KAAMR,CAAA,CAYV,EACA,EAAG,CACD,YAAa,GACb,MAAO,CACL,QAAS,GACT,KAAMC,CAAA,CAKR,CAOF,CAEJ,EAEMa,EAAc,CAClB,OAAQf,EAAS,IAAKgB,GAAS,CAC7B,GAAI,OAAOA,GAAS,UAAYA,IAAS,MAAQb,KAAYa,EAC3D,OAAQA,EAAoCb,CAAQ,EAEhD,MAAA,IAAI,MAAM,wBAAwB,CAAA,CACzC,EACD,SAAU,CACR,CACE,MAAO,GACP,KAAMH,EAAS,IAAKgB,GAAS,CAC3B,GAAI,OAAOA,GAAS,UAAYA,IAAS,MAAQZ,KAAYY,EAC3D,OAAQA,EAAoCZ,CAAQ,EAEhD,MAAA,IAAI,MAAM,wBAAwB,CAAA,CACzC,EACD,YAAAC,EACA,gBAAiBA,EACjB,QAAS,EACX,EACA,CACE,MAAO,GACP,KAAML,EAAS,IAAI,IACV,CAAC,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,EAAE,CACnC,EACD,YAAa,MACb,gBAAiB,MACjB,QAAS,EAAA,CACX,CAEJ,EAEMiB,EAAY,IACZP,EACMQ,EAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAU,aAAA,EACvCnB,EAAS,SAAW,EACrBkB,EAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAO,UAAA,QAG1CC,EAAY,KAAA,CAAA,IAAKT,EAAU,QAAAE,EAAkB,KAAME,EAAa,EAKvE,OACGG,EAAA,IAAAG,EAAA,IAAA,CAAI,UAAWF,EAAO,UACrB,SAAAD,EAAAA,IAAC,MAAI,CAAA,UAAWC,EAAO,MACrB,SAACD,EAAAA,IAAAD,EAAA,CAAU,CAAA,CACb,CAAA,EACF,CAEJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ReportChart/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  dataList: unknown[];\n  xLabel: string;\n  yLabel: string;\n  labelKey: string;\n  valueKey: string;\n  borderColor: string;\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n};\n\ntype ChartMargin = {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n};\n\ntype CustomToolTipFormatter = (value: unknown, label: string) => string[];\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  ChartJSTooltip,\n  Legend,\n);\n\nexport const ReportChart = (props: Props) => {\n  const {\n    dataList,\n    xLabel = \"\",\n    yLabel = \"\",\n    labelKey,\n    valueKey,\n    borderColor = \"#ff6384\",\n    chartMargin = { top: 0, right: 20, bottom: 20, left: 10 },\n    tooltipFormatter = (value: unknown, label: string) => [\n      String(value),\n      String(label),\n    ],\n    isLoading,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  const options = {\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: {\n      delay: 200,\n    },\n    transitions: {\n      resize: {\n        animations: {\n          x: {\n            from: 0,\n          },\n          y: {\n            from: 0,\n          },\n        },\n      },\n      show: {\n        animations: {\n          x: {\n            from: 0,\n          },\n          y: {\n            from: 0,\n          },\n        },\n      },\n    },\n    layout: {\n      padding: {\n        left: chartMargin.left,\n        right: chartMargin.right,\n        top: chartMargin.top,\n        bottom: chartMargin.bottom,\n      },\n    },\n    plugins: {\n      legend: {\n        display: false,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            const label = context.dataset.label || \"\";\n            const ar = tooltipFormatter(context.parsed.y, label);\n            const str = ar.reverse().join(\"\");\n            return str;\n          },\n        },\n      },\n    },\n    scales: {\n      x: {\n        title: {\n          display: true,\n          text: xLabel,\n          // font: {\n          //   family: \"\", // フォントファミリーを指定\n          //   size: 30, // フォントサイズを指定\n          // },\n        },\n        // ticks: {\n        //   font: {\n        //     family: \"Arial\", // フォントファミリーを指定\n        //     size: 25, // フォントサイズを指定\n        //   },\n        // },\n      },\n      y: {\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n          // font: {\n          //   family: \"\", // フォントファミリーを指定\n          //   size: 30, // フォントサイズを指定\n          // },\n        },\n        // ticks: {\n        //   font: {\n        //     family: \"Arial\", // フォントファミリーを指定\n        //     size: styles.y.fontsize, // フォントサイズを指定\n        //   },\n        // },\n      },\n    },\n  };\n\n  const chartJsData = {\n    labels: dataList.map((item) => {\n      if (typeof item === \"object\" && item !== null && labelKey in item) {\n        return (item as { [key: string]: unknown })[labelKey];\n      }\n      throw new Error(\"Invalid data structure\");\n    }),\n    datasets: [\n      {\n        label: \"\",\n        data: dataList.map((item) => {\n          if (typeof item === \"object\" && item !== null && valueKey in item) {\n            return (item as { [key: string]: unknown })[valueKey];\n          }\n          throw new Error(\"Invalid data structure\");\n        }),\n        borderColor: borderColor,\n        backgroundColor: borderColor,\n        tension: 0.4,\n      },\n    ],\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (dataList.length === 0) {\n      return <div className={styles.nodata}>NO DATA</div>;\n    } else {\n      return (\n        <LineChartJS ref={chartRef} options={options} data={chartJsData} />\n      );\n    }\n  };\n\n  return (\n    <Box className={styles.reportBox}>\n      <div className={styles.chart}>\n        <ChartData />\n      </div>\n    </Box>\n  );\n};\n\nexport default ReportChart;\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Title","ChartJSTooltip","Legend","ReportChart","props","dataList","xLabel","yLabel","labelKey","valueKey","borderColor","chartMargin","tooltipFormatter","value","label","isLoading","chartRef","useRef","options","context","chartJsData","item","ChartData","jsx","styles","LineChartJS","Box"],"mappings":"kVAsCAA,EAAAA,MAAQ,SACNC,EAAA,cACAC,EAAA,YACAC,EAAA,aACAC,EAAA,YACAC,EAAA,MACAC,EAAA,QACAC,EAAAA,MACF,EAEa,MAAAC,EAAeC,GAAiB,CACrC,KAAA,CACJ,SAAAC,EACA,OAAAC,EAAS,GACT,OAAAC,EAAS,GACT,SAAAC,EACA,SAAAC,EACA,YAAAC,EAAc,UACd,YAAAC,EAAc,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,GAAI,KAAM,EAAG,EACxD,iBAAAC,EAAmB,CAACC,EAAgBC,IAAkB,CACpD,OAAOD,CAAK,EACZ,OAAOC,CAAK,CACd,EACA,UAAAC,CAAA,EACEX,EAEEY,EAAWC,SAAO,IAAI,EAEtBC,EAAU,CACd,WAAY,GACZ,YAAa,EACb,oBAAqB,GACrB,UAAW,CACT,MAAO,GACT,EACA,YAAa,CACX,OAAQ,CACN,WAAY,CACV,EAAG,CACD,KAAM,CACR,EACA,EAAG,CACD,KAAM,CAAA,CACR,CAEJ,EACA,KAAM,CACJ,WAAY,CACV,EAAG,CACD,KAAM,CACR,EACA,EAAG,CACD,KAAM,CAAA,CACR,CACF,CAEJ,EACA,OAAQ,CACN,QAAS,CACP,KAAMP,EAAY,KAClB,MAAOA,EAAY,MACnB,IAAKA,EAAY,IACjB,OAAQA,EAAY,MAAA,CAExB,EACA,QAAS,CACP,OAAQ,CACN,QAAS,GACT,SAAU,KACZ,EACA,MAAO,CACL,QAAS,EACX,EACA,QAAS,CACP,UAAW,CACT,MAAQQ,GAAiC,CACjC,MAAAL,EAAQK,EAAQ,QAAQ,OAAS,GAGhC,OAFIP,EAAiBO,EAAQ,OAAO,EAAGL,CAAK,EACpC,QAAQ,EAAE,KAAK,EAAE,CACzB,CACT,CACF,CAEJ,EACA,OAAQ,CACN,EAAG,CACD,MAAO,CACL,QAAS,GACT,KAAMR,CAAA,CAYV,EACA,EAAG,CACD,YAAa,GACb,MAAO,CACL,QAAS,GACT,KAAMC,CAAA,CAKR,CAOF,CAEJ,EAEMa,EAAc,CAClB,OAAQf,EAAS,IAAKgB,GAAS,CAC7B,GAAI,OAAOA,GAAS,UAAYA,IAAS,MAAQb,KAAYa,EAC3D,OAAQA,EAAoCb,CAAQ,EAEhD,MAAA,IAAI,MAAM,wBAAwB,CAAA,CACzC,EACD,SAAU,CACR,CACE,MAAO,GACP,KAAMH,EAAS,IAAKgB,GAAS,CAC3B,GAAI,OAAOA,GAAS,UAAYA,IAAS,MAAQZ,KAAYY,EAC3D,OAAQA,EAAoCZ,CAAQ,EAEhD,MAAA,IAAI,MAAM,wBAAwB,CAAA,CACzC,EACD,YAAAC,EACA,gBAAiBA,EACjB,QAAS,EAAA,CACX,CAEJ,EAEMY,EAAY,IACZP,EACMQ,EAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAU,aAAA,EACvCnB,EAAS,SAAW,EACrBkB,EAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAO,UAAA,QAG1CC,EAAY,KAAA,CAAA,IAAKT,EAAU,QAAAE,EAAkB,KAAME,EAAa,EAKvE,OACGG,EAAA,IAAAG,EAAA,IAAA,CAAI,UAAWF,EAAO,UACrB,SAAAD,EAAAA,IAAC,MAAI,CAAA,UAAWC,EAAO,MACrB,SAACD,EAAAA,IAAAD,EAAA,CAAU,CAAA,CACb,CAAA,EACF,CAEJ"}

package/dist/components/ReportChart/index.es.js

@@ -1,37 +1,37 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { useRef as y } from "react";
 import { Box as x } from "@mui/material";
-import { Chart as _, CategoryScale as v, LinearScale as C, PointElement as L, LineElement as w, Title as B, Tooltip as N, Legend as R } from "chart.js";
+import { Chart as v, CategoryScale as _, LinearScale as L, PointElement as C, LineElement as w, Title as B, Tooltip as N, Legend as R } from "chart.js";
 import { Line as j } from "react-chartjs-2";
-import '../../assets/index8.css';const z = "_chart_l9ziq_10", A = "_reportBox_l9ziq_19", E = "_nodata_l9ziq_23", o = {
-  chart: z,
-  reportBox: A,
-  nodata: E
+import '../../assets/index8.css';const A = "_chart_15x7v_1", E = "_reportBox_15x7v_7", S = "_nodata_15x7v_11", e = {
+  chart: A,
+  reportBox: E,
+  nodata: S
 };
-_.register(
-  v,
-  C,
+v.register(
+  _,
   L,
+  C,
   w,
   B,
   N,
   R
 );
-const F = (d) => {
+const J = (c) => {
   const {
-    dataList: a,
-    xLabel: c = "",
+    dataList: o,
+    xLabel: d = "",
     yLabel: p = "",
     labelKey: l,
     valueKey: s,
     borderColor: i = "#ff6384",
-    chartMargin: e = { top: 0, right: 20, bottom: 20, left: 10 },
+    chartMargin: r = { top: 0, right: 20, bottom: 20, left: 10 },
     tooltipFormatter: f = (t, n) => [
       String(t),
       String(n)
     ],
-    isLoading: u
-  } = d, m = y(null), h = {
+    isLoading: m
+  } = c, u = y(null), h = {
     responsive: !0,
     aspectRatio: 2,
     maintainAspectRatio: !1,
@@ -62,10 +62,10 @@ const F = (d) => {
     },
     layout: {
       padding: {
-        left: e.left,
-        right: e.right,
-        top: e.top,
-        bottom: e.bottom
+        left: r.left,
+        right: r.right,
+        top: r.top,
+        bottom: r.bottom
       }
     },
     plugins: {
@@ -89,7 +89,7 @@ const F = (d) => {
       x: {
         title: {
           display: !0,
-          text: c
+          text: d
           // font: {
           //   family: "", // フォントファミリーを指定
           //   size: 30, // フォントサイズを指定
@@ -121,7 +121,7 @@ const F = (d) => {
       }
     }
   }, b = {
-    labels: a.map((t) => {
+    labels: o.map((t) => {
       if (typeof t == "object" && t !== null && l in t)
         return t[l];
       throw new Error("Invalid data structure");
@@ -129,7 +129,7 @@ const F = (d) => {
     datasets: [
       {
         label: "",
-        data: a.map((t) => {
+        data: o.map((t) => {
           if (typeof t == "object" && t !== null && s in t)
             return t[s];
           throw new Error("Invalid data structure");
@@ -137,20 +137,13 @@ const F = (d) => {
         borderColor: i,
         backgroundColor: i,
         tension: 0.4
-      },
-      {
-        label: "",
-        data: a.map(() => [70, 70, 70, 70, 70, 70, 70]),
-        borderColor: "red",
-        backgroundColor: "red",
-        tension: 0.4
       }
     ]
-  }, g = () => u ? /* @__PURE__ */ r("div", { className: o.nodata, children: "loading..." }) : a.length === 0 ? /* @__PURE__ */ r("div", { className: o.nodata, children: "NO DATA" }) : /* @__PURE__ */ r(j, { ref: m, options: h, data: b });
-  return /* @__PURE__ */ r(x, { className: o.reportBox, children: /* @__PURE__ */ r("div", { className: o.chart, children: /* @__PURE__ */ r(g, {}) }) });
+  }, g = () => m ? /* @__PURE__ */ a("div", { className: e.nodata, children: "loading..." }) : o.length === 0 ? /* @__PURE__ */ a("div", { className: e.nodata, children: "NO DATA" }) : /* @__PURE__ */ a(j, { ref: u, options: h, data: b });
+  return /* @__PURE__ */ a(x, { className: e.reportBox, children: /* @__PURE__ */ a("div", { className: e.chart, children: /* @__PURE__ */ a(g, {}) }) });
 };
 export {
-  F as ReportChart,
-  F as default
+  J as ReportChart,
+  J as default
 };
 //# sourceMappingURL=index.es.js.map

package/dist/components/ReportChart/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/ReportChart/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  dataList: unknown[];\n  xLabel: string;\n  yLabel: string;\n  labelKey: string;\n  valueKey: string;\n  borderColor: string;\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n};\n\ntype ChartMargin = {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n};\n\ntype CustomToolTipFormatter = (value: unknown, label: string) => string[];\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  ChartJSTooltip,\n  Legend,\n);\n\nexport const ReportChart = (props: Props) => {\n  const {\n    dataList,\n    xLabel = \"\",\n    yLabel = \"\",\n    labelKey,\n    valueKey,\n    borderColor = \"#ff6384\",\n    chartMargin = { top: 0, right: 20, bottom: 20, left: 10 },\n    tooltipFormatter = (value: unknown, label: string) => [\n      String(value),\n      String(label),\n    ],\n    isLoading,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  const options = {\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: {\n      delay: 200,\n    },\n    transitions: {\n      resize: {\n        animations: {\n          x: {\n            from: 0,\n          },\n          y: {\n            from: 0,\n          },\n        },\n      },\n      show: {\n        animations: {\n          x: {\n            from: 0,\n          },\n          y: {\n            from: 0,\n          },\n        },\n      },\n    },\n    layout: {\n      padding: {\n        left: chartMargin.left,\n        right: chartMargin.right,\n        top: chartMargin.top,\n        bottom: chartMargin.bottom,\n      },\n    },\n    plugins: {\n      legend: {\n        display: false,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            const label = context.dataset.label || \"\";\n            const ar = tooltipFormatter(context.parsed.y, label);\n            const str = ar.reverse().join(\"\");\n            return str;\n          },\n        },\n      },\n    },\n    scales: {\n      x: {\n        title: {\n          display: true,\n          text: xLabel,\n          // font: {\n          //   family: \"\", // フォントファミリーを指定\n          //   size: 30, // フォントサイズを指定\n          // },\n        },\n        // ticks: {\n        //   font: {\n        //     family: \"Arial\", // フォントファミリーを指定\n        //     size: 25, // フォントサイズを指定\n        //   },\n        // },\n      },\n      y: {\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n          // font: {\n          //   family: \"\", // フォントファミリーを指定\n          //   size: 30, // フォントサイズを指定\n          // },\n        },\n        // ticks: {\n        //   font: {\n        //     family: \"Arial\", // フォントファミリーを指定\n        //     size: styles.y.fontsize, // フォントサイズを指定\n        //   },\n        // },\n      },\n    },\n  };\n\n  const chartJsData = {\n    labels: dataList.map((item) => {\n      if (typeof item === \"object\" && item !== null && labelKey in item) {\n        return (item as { [key: string]: unknown })[labelKey];\n      }\n      throw new Error(\"Invalid data structure\");\n    }),\n    datasets: [\n      {\n        label: \"\",\n        data: dataList.map((item) => {\n          if (typeof item === \"object\" && item !== null && valueKey in item) {\n            return (item as { [key: string]: unknown })[valueKey];\n          }\n          throw new Error(\"Invalid data structure\");\n        }),\n        borderColor: borderColor,\n        backgroundColor: borderColor,\n        tension: 0.4,\n      },\n      {\n        label: \"\",\n        data: dataList.map(() => {\n          return [70, 70, 70, 70, 70, 70, 70];\n        }),\n        borderColor: \"red\",\n        backgroundColor: \"red\",\n        tension: 0.4,\n      },\n    ],\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (dataList.length === 0) {\n      return <div className={styles.nodata}>NO DATA</div>;\n    } else {\n      return (\n        <LineChartJS ref={chartRef} options={options} data={chartJsData} />\n      );\n    }\n  };\n\n  return (\n    <Box className={styles.reportBox}>\n      <div className={styles.chart}>\n        <ChartData />\n      </div>\n    </Box>\n  );\n};\n\nexport default ReportChart;\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Title","ChartJSTooltip","Legend","ReportChart","props","dataList","xLabel","yLabel","labelKey","valueKey","borderColor","chartMargin","tooltipFormatter","value","label","isLoading","chartRef","useRef","options","context","chartJsData","item","ChartData","jsx","styles","LineChartJS","Box"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/ReportChart/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  dataList: unknown[];\n  xLabel: string;\n  yLabel: string;\n  labelKey: string;\n  valueKey: string;\n  borderColor: string;\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n};\n\ntype ChartMargin = {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n};\n\ntype CustomToolTipFormatter = (value: unknown, label: string) => string[];\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  PointElement,\n  LineElement,\n  Title,\n  ChartJSTooltip,\n  Legend,\n);\n\nexport const ReportChart = (props: Props) => {\n  const {\n    dataList,\n    xLabel = \"\",\n    yLabel = \"\",\n    labelKey,\n    valueKey,\n    borderColor = \"#ff6384\",\n    chartMargin = { top: 0, right: 20, bottom: 20, left: 10 },\n    tooltipFormatter = (value: unknown, label: string) => [\n      String(value),\n      String(label),\n    ],\n    isLoading,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  const options = {\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: {\n      delay: 200,\n    },\n    transitions: {\n      resize: {\n        animations: {\n          x: {\n            from: 0,\n          },\n          y: {\n            from: 0,\n          },\n        },\n      },\n      show: {\n        animations: {\n          x: {\n            from: 0,\n          },\n          y: {\n            from: 0,\n          },\n        },\n      },\n    },\n    layout: {\n      padding: {\n        left: chartMargin.left,\n        right: chartMargin.right,\n        top: chartMargin.top,\n        bottom: chartMargin.bottom,\n      },\n    },\n    plugins: {\n      legend: {\n        display: false,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            const label = context.dataset.label || \"\";\n            const ar = tooltipFormatter(context.parsed.y, label);\n            const str = ar.reverse().join(\"\");\n            return str;\n          },\n        },\n      },\n    },\n    scales: {\n      x: {\n        title: {\n          display: true,\n          text: xLabel,\n          // font: {\n          //   family: \"\", // フォントファミリーを指定\n          //   size: 30, // フォントサイズを指定\n          // },\n        },\n        // ticks: {\n        //   font: {\n        //     family: \"Arial\", // フォントファミリーを指定\n        //     size: 25, // フォントサイズを指定\n        //   },\n        // },\n      },\n      y: {\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n          // font: {\n          //   family: \"\", // フォントファミリーを指定\n          //   size: 30, // フォントサイズを指定\n          // },\n        },\n        // ticks: {\n        //   font: {\n        //     family: \"Arial\", // フォントファミリーを指定\n        //     size: styles.y.fontsize, // フォントサイズを指定\n        //   },\n        // },\n      },\n    },\n  };\n\n  const chartJsData = {\n    labels: dataList.map((item) => {\n      if (typeof item === \"object\" && item !== null && labelKey in item) {\n        return (item as { [key: string]: unknown })[labelKey];\n      }\n      throw new Error(\"Invalid data structure\");\n    }),\n    datasets: [\n      {\n        label: \"\",\n        data: dataList.map((item) => {\n          if (typeof item === \"object\" && item !== null && valueKey in item) {\n            return (item as { [key: string]: unknown })[valueKey];\n          }\n          throw new Error(\"Invalid data structure\");\n        }),\n        borderColor: borderColor,\n        backgroundColor: borderColor,\n        tension: 0.4,\n      },\n    ],\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (dataList.length === 0) {\n      return <div className={styles.nodata}>NO DATA</div>;\n    } else {\n      return (\n        <LineChartJS ref={chartRef} options={options} data={chartJsData} />\n      );\n    }\n  };\n\n  return (\n    <Box className={styles.reportBox}>\n      <div className={styles.chart}>\n        <ChartData />\n      </div>\n    </Box>\n  );\n};\n\nexport default ReportChart;\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Title","ChartJSTooltip","Legend","ReportChart","props","dataList","xLabel","yLabel","labelKey","valueKey","borderColor","chartMargin","tooltipFormatter","value","label","isLoading","chartRef","useRef","options","context","chartJsData","item","ChartData","jsx","styles","LineChartJS","Box"],"mappings":"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"}

package/dist/components/SelectBoxController/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index5.css');const l=require("react/jsx-runtime"),f=require("@mui/icons-material"),n=require("@mui/material"),A=require("react-hook-form"),B="_placeholder_egyvt_6",_={placeholder:B},x=g=>{const{control:y,name:v,options:i,defaultValue:j,isMulti:t,placeholder:b,emptyValue:a=t?[]:"",onChange:s,onClear:u,inputProps:M}=g,c=r=>Array.isArray(r)&&r.length||!t&&r;return l.jsx(n.Box,{display:"grid",children:l.jsx(A.Controller,{control:y,name:v,defaultValue:j,render:({field:r,fieldState:p})=>{var d;return l.jsxs(n.FormControl,{error:p.invalid,children:[l.jsx(n.Select,{...r,onChange:(e,o)=>{!t&&e.target.value===""?r.onChange(void 0):r.onChange(e),s==null||s(e,o)},multiple:t,size:"small",value:a,displayEmpty:!0,inputProps:{...M},renderValue:()=>{var o;const e=r.value;if(t&&Array.isArray(e)){if(e.length)return e.map(C=>{var h;return(h=i.find(S=>S.value===C))==null?void 0:h.label}).join(", ")}else if(e&&(typeof e=="string"||typeof e=="number"))return(o=i.find(m=>m.value===e))==null?void 0:o.label;return l.jsx("span",{className:_.placeholder,children:b})},endAdornment:l.jsx(n.IconButton,{sx:{visibility:c(r.value)?"visible":"hidden"},onClick:e=>{r.onChange(t?[]:a===""?void 0:a),u==null||u(e)},children:l.jsx(f.Clear,{})}),sx:{"& .MuiSelect-iconOutlined":{display:c(r.value)?"none":""},"&.Mui-focused .MuiIconButton-root":{color:"primary.main"},"& .MuiSelect-select ":{whiteSpace:"break-spaces !important",paddingRight:"4px !important",fontSize:{xs:"1rem",sm:"0.875rem"},paddingLeft:"9.5px"},paddingRight:"4px !important"},children:i.map(e=>l.jsxs(n.MenuItem,{value:e.value,children:[" ",e.label," "]},e.value))}),l.jsx(n.FormHelperText,{children:(d=p.error)==null?void 0:d.message})]})}})})};exports.SelectBoxController=x;exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index5.css');const l=require("react/jsx-runtime"),f=require("@mui/icons-material"),n=require("@mui/material"),A=require("react-hook-form"),B="_placeholder_egyvt_6",_={placeholder:B},x=g=>{const{control:v,name:y,options:a,defaultValue:j,isMulti:t,placeholder:b,emptyValue:i=t?[]:"",onChange:s,onClear:u,inputProps:M}=g,c=r=>Array.isArray(r)&&r.length||!t&&r;return l.jsx(n.Box,{display:"grid",children:l.jsx(A.Controller,{control:v,name:y,defaultValue:j,render:({field:r,fieldState:p})=>{var d;return l.jsxs(n.FormControl,{error:p.invalid,children:[l.jsx(n.Select,{...r,onChange:(e,o)=>{!t&&e.target.value===""?r.onChange(void 0):r.onChange(e),s==null||s(e,o)},multiple:t,size:"small",value:r.value??i,displayEmpty:!0,inputProps:{...M},renderValue:()=>{var o;const e=r.value;if(t&&Array.isArray(e)){if(e.length)return e.map(C=>{var h;return(h=a.find(S=>S.value===C))==null?void 0:h.label}).join(", ")}else if(e&&(typeof e=="string"||typeof e=="number"))return(o=a.find(m=>m.value===e))==null?void 0:o.label;return l.jsx("span",{className:_.placeholder,children:b})},endAdornment:l.jsx(n.IconButton,{sx:{visibility:c(r.value)?"visible":"hidden"},onClick:e=>{r.onChange(t?[]:i===""?void 0:i),u==null||u(e)},children:l.jsx(f.Clear,{})}),sx:{"& .MuiSelect-iconOutlined":{display:c(r.value)?"none":""},"&.Mui-focused .MuiIconButton-root":{color:"primary.main"},"& .MuiSelect-select ":{whiteSpace:"break-spaces !important",paddingRight:"4px !important",fontSize:{xs:"1rem",sm:"0.875rem"},paddingLeft:"9.5px"},paddingRight:"4px !important"},children:a.map(e=>l.jsxs(n.MenuItem,{value:e.value,children:[" ",e.label," "]},e.value))}),l.jsx(n.FormHelperText,{children:(d=p.error)==null?void 0:d.message})]})}})})};exports.SelectBoxController=x;exports.default=x;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/SelectBoxController/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputBaseComponentProps,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  Controller,\n  FieldPath,\n  FieldValues,\n  PathValue,\n  type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n  readonly label: string;\n  readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n  control: Control<T>;\n  name: FieldPath<T>;\n  options: SelectBoxOption[];\n  defaultValue?: PathValue<T, FieldPath<T>>;\n  emptyValue?: [] | string | null | undefined;\n  isMulti: boolean;\n  placeholder?: string;\n  onChange?: (\n    event: SelectChangeEvent<unknown>,\n    child: React.ReactNode,\n  ) => void;\n  onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n  inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n  const {\n    control,\n    name,\n    options,\n    defaultValue,\n    isMulti,\n    placeholder,\n    emptyValue = isMulti ? [] : \"\",\n    onChange,\n    onClear,\n    inputProps,\n  } = props;\n\n  const existValue = (\n    value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n  ) => {\n    return (Array.isArray(value) && value.length) || (!isMulti && value);\n  };\n\n  return (\n    <Box display={\"grid\"}>\n      <Controller\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) => (\n          <FormControl error={fieldState.invalid}>\n            <Select\n              {...field}\n              onChange={(event, child) => {\n                if (!isMulti && event.target.value === \"\") {\n                  field.onChange(undefined);\n                } else {\n                  field.onChange(event);\n                }\n                onChange?.(event, child);\n              }}\n              multiple={isMulti}\n              size=\"small\"\n              value={emptyValue}\n              displayEmpty\n              inputProps={{ ...inputProps }}\n              renderValue={() => {\n                const value = field.value;\n                if (isMulti && Array.isArray(value)) {\n                  if (value.length) {\n                    const labels = value.map(\n                      (val: SelectBoxOption[\"value\"]) =>\n                        options.find((option) => option.value === val)?.label,\n                    );\n                    return labels.join(\", \");\n                  }\n                } else if (\n                  value &&\n                  (typeof value === \"string\" || typeof value === \"number\")\n                ) {\n                  return options.find((option) => option.value === value)\n                    ?.label;\n                }\n                return (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                );\n              }}\n              endAdornment={\n                <IconButton\n                  sx={{\n                    visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n                  }}\n                  onClick={(event) => {\n                    field.onChange(\n                      isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n                    );\n                    onClear?.(event);\n                  }}\n                >\n                  <Clear />\n                </IconButton>\n              }\n              sx={{\n                \"& .MuiSelect-iconOutlined\": {\n                  display: existValue(field.value) ? \"none\" : \"\",\n                },\n                \"&.Mui-focused .MuiIconButton-root\": {\n                  color: \"primary.main\",\n                },\n                \"& .MuiSelect-select \": {\n                  whiteSpace: \"break-spaces !important\",\n                  paddingRight: \"4px !important\",\n                  fontSize: {\n                    xs: \"1rem\",\n                    sm: \"0.875rem\",\n                  },\n                  paddingLeft: \"9.5px\",\n                },\n                paddingRight: \"4px !important\",\n              }}\n            >\n              {options.map((m) => (\n                <MenuItem value={m.value} key={m.value}>\n                  {\" \"}\n                  {m.label}{\" \"}\n                </MenuItem>\n              ))}\n            </Select>\n            <FormHelperText>{fieldState.error?.message}</FormHelperText>\n          </FormControl>\n        )}\n      />\n    </Box>\n  );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"qRA2CaA,EAA8CC,GAAoB,CACvE,KAAA,CACJ,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,QAAAC,EACA,YAAAC,EACA,WAAAC,EAAaF,EAAU,CAAA,EAAK,GAC5B,SAAAG,EACA,QAAAC,EACA,WAAAC,CAAA,EACEV,EAEEW,EACJC,GAEQ,MAAM,QAAQA,CAAK,GAAKA,EAAM,QAAY,CAACP,GAAWO,EAI9D,OAAAC,EAAAA,IAACC,EAAAA,IAAI,CAAA,QAAS,OACZ,SAAAD,EAAA,IAACE,EAAA,WAAA,CACC,QAAAd,EACA,KAAAC,EACA,aAAAE,EACA,OAAQ,CAAC,CAAE,MAAAY,EAAO,WAAAC,KACfC,OAAAA,OAAAA,EAAAA,KAAAC,EAAA,YAAA,CAAY,MAAOF,EAAW,QAC7B,SAAA,CAAAJ,EAAA,IAACO,EAAA,OAAA,CACE,GAAGJ,EACJ,SAAU,CAACK,EAAOC,IAAU,CACtB,CAACjB,GAAWgB,EAAM,OAAO,QAAU,GACrCL,EAAM,SAAS,MAAS,EAExBA,EAAM,SAASK,CAAK,EAEtBb,GAAA,MAAAA,EAAWa,EAAOC,EACpB,EACA,SAAUjB,EACV,KAAK,QACL,MAAOE,EACP,aAAY,GACZ,WAAY,CAAE,GAAGG,CAAW,EAC5B,YAAa,IAAM,OACjB,MAAME,EAAQI,EAAM,MACpB,GAAIX,GAAW,MAAM,QAAQO,CAAK,GAChC,GAAIA,EAAM,OAKD,OAJQA,EAAM,IAClBW,UACC,OAAAC,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUF,CAAG,IAA7C,YAAAC,EAAgD,MACpD,EACc,KAAK,IAAI,UAGzBZ,IACC,OAAOA,GAAU,UAAY,OAAOA,GAAU,UAE/C,OAAOY,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUb,CAAK,IAA/C,YAAAY,EACH,MAEN,OACGX,EAAA,IAAA,OAAA,CAAK,UAAWa,EAAO,YAAc,SAAYpB,EAAA,CAEtD,EACA,aACEO,EAAA,IAACc,EAAA,WAAA,CACC,GAAI,CACF,WAAYhB,EAAWK,EAAM,KAAK,EAAI,UAAY,QACpD,EACA,QAAUK,GAAU,CACZL,EAAA,SACJX,EAAU,CAAK,EAAAE,IAAe,GAAK,OAAYA,CACjD,EACAE,GAAA,MAAAA,EAAUY,EACZ,EAEA,eAACO,EAAAA,MAAM,CAAA,CAAA,CAAA,CACT,EAEF,GAAI,CACF,4BAA6B,CAC3B,QAASjB,EAAWK,EAAM,KAAK,EAAI,OAAS,EAC9C,EACA,oCAAqC,CACnC,MAAO,cACT,EACA,uBAAwB,CACtB,WAAY,0BACZ,aAAc,iBACd,SAAU,CACR,GAAI,OACJ,GAAI,UACN,EACA,YAAa,OACf,EACA,aAAc,gBAChB,EAEC,SAAAb,EAAQ,IAAK0B,UACXC,EAAS,SAAA,CAAA,MAAOD,EAAE,MAChB,SAAA,CAAA,IACAA,EAAE,MAAO,GAAA,CAFmB,EAAAA,EAAE,KAGjC,CACD,CAAA,CACH,EACChB,EAAA,IAAAkB,EAAA,eAAA,CAAgB,UAAWP,EAAAP,EAAA,QAAA,YAAAO,EAAO,OAAQ,CAAA,CAAA,CAC7C,CAAA,EAAA,CAAA,EAGN,CAEJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputBaseComponentProps,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  Controller,\n  FieldPath,\n  FieldValues,\n  PathValue,\n  type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n  readonly label: string;\n  readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n  control: Control<T>;\n  name: FieldPath<T>;\n  options: SelectBoxOption[];\n  defaultValue?: PathValue<T, FieldPath<T>>;\n  emptyValue?: [] | string | null | undefined;\n  isMulti: boolean;\n  placeholder?: string;\n  onChange?: (\n    event: SelectChangeEvent<unknown>,\n    child: React.ReactNode,\n  ) => void;\n  onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n  inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n  const {\n    control,\n    name,\n    options,\n    defaultValue,\n    isMulti,\n    placeholder,\n    emptyValue = isMulti ? [] : \"\",\n    onChange,\n    onClear,\n    inputProps,\n  } = props;\n\n  const existValue = (\n    value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n  ) => {\n    return (Array.isArray(value) && value.length) || (!isMulti && value);\n  };\n\n  return (\n    <Box display={\"grid\"}>\n      <Controller\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) => (\n          <FormControl error={fieldState.invalid}>\n            <Select\n              {...field}\n              onChange={(event, child) => {\n                if (!isMulti && event.target.value === \"\") {\n                  field.onChange(undefined);\n                } else {\n                  field.onChange(event);\n                }\n                onChange?.(event, child);\n              }}\n              multiple={isMulti}\n              size=\"small\"\n              value={field.value ?? emptyValue}\n              displayEmpty\n              inputProps={{ ...inputProps }}\n              renderValue={() => {\n                const value = field.value;\n                if (isMulti && Array.isArray(value)) {\n                  if (value.length) {\n                    const labels = value.map(\n                      (val: SelectBoxOption[\"value\"]) =>\n                        options.find((option) => option.value === val)?.label,\n                    );\n                    return labels.join(\", \");\n                  }\n                } else if (\n                  value &&\n                  (typeof value === \"string\" || typeof value === \"number\")\n                ) {\n                  return options.find((option) => option.value === value)\n                    ?.label;\n                }\n                return (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                );\n              }}\n              endAdornment={\n                <IconButton\n                  sx={{\n                    visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n                  }}\n                  onClick={(event) => {\n                    field.onChange(\n                      isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n                    );\n                    onClear?.(event);\n                  }}\n                >\n                  <Clear />\n                </IconButton>\n              }\n              sx={{\n                \"& .MuiSelect-iconOutlined\": {\n                  display: existValue(field.value) ? \"none\" : \"\",\n                },\n                \"&.Mui-focused .MuiIconButton-root\": {\n                  color: \"primary.main\",\n                },\n                \"& .MuiSelect-select \": {\n                  whiteSpace: \"break-spaces !important\",\n                  paddingRight: \"4px !important\",\n                  fontSize: {\n                    xs: \"1rem\",\n                    sm: \"0.875rem\",\n                  },\n                  paddingLeft: \"9.5px\",\n                },\n                paddingRight: \"4px !important\",\n              }}\n            >\n              {options.map((m) => (\n                <MenuItem value={m.value} key={m.value}>\n                  {\" \"}\n                  {m.label}{\" \"}\n                </MenuItem>\n              ))}\n            </Select>\n            <FormHelperText>{fieldState.error?.message}</FormHelperText>\n          </FormControl>\n        )}\n      />\n    </Box>\n  );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"qRA2CaA,EAA8CC,GAAoB,CACvE,KAAA,CACJ,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,QAAAC,EACA,YAAAC,EACA,WAAAC,EAAaF,EAAU,CAAA,EAAK,GAC5B,SAAAG,EACA,QAAAC,EACA,WAAAC,CAAA,EACEV,EAEEW,EACJC,GAEQ,MAAM,QAAQA,CAAK,GAAKA,EAAM,QAAY,CAACP,GAAWO,EAI9D,OAAAC,EAAAA,IAACC,EAAAA,IAAI,CAAA,QAAS,OACZ,SAAAD,EAAA,IAACE,EAAA,WAAA,CACC,QAAAd,EACA,KAAAC,EACA,aAAAE,EACA,OAAQ,CAAC,CAAE,MAAAY,EAAO,WAAAC,KACfC,OAAAA,OAAAA,EAAAA,KAAAC,EAAA,YAAA,CAAY,MAAOF,EAAW,QAC7B,SAAA,CAAAJ,EAAA,IAACO,EAAA,OAAA,CACE,GAAGJ,EACJ,SAAU,CAACK,EAAOC,IAAU,CACtB,CAACjB,GAAWgB,EAAM,OAAO,QAAU,GACrCL,EAAM,SAAS,MAAS,EAExBA,EAAM,SAASK,CAAK,EAEtBb,GAAA,MAAAA,EAAWa,EAAOC,EACpB,EACA,SAAUjB,EACV,KAAK,QACL,MAAOW,EAAM,OAAST,EACtB,aAAY,GACZ,WAAY,CAAE,GAAGG,CAAW,EAC5B,YAAa,IAAM,OACjB,MAAME,EAAQI,EAAM,MACpB,GAAIX,GAAW,MAAM,QAAQO,CAAK,GAChC,GAAIA,EAAM,OAKD,OAJQA,EAAM,IAClBW,UACC,OAAAC,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUF,CAAG,IAA7C,YAAAC,EAAgD,MACpD,EACc,KAAK,IAAI,UAGzBZ,IACC,OAAOA,GAAU,UAAY,OAAOA,GAAU,UAE/C,OAAOY,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUb,CAAK,IAA/C,YAAAY,EACH,MAEN,OACGX,EAAA,IAAA,OAAA,CAAK,UAAWa,EAAO,YAAc,SAAYpB,EAAA,CAEtD,EACA,aACEO,EAAA,IAACc,EAAA,WAAA,CACC,GAAI,CACF,WAAYhB,EAAWK,EAAM,KAAK,EAAI,UAAY,QACpD,EACA,QAAUK,GAAU,CACZL,EAAA,SACJX,EAAU,CAAK,EAAAE,IAAe,GAAK,OAAYA,CACjD,EACAE,GAAA,MAAAA,EAAUY,EACZ,EAEA,eAACO,EAAAA,MAAM,CAAA,CAAA,CAAA,CACT,EAEF,GAAI,CACF,4BAA6B,CAC3B,QAASjB,EAAWK,EAAM,KAAK,EAAI,OAAS,EAC9C,EACA,oCAAqC,CACnC,MAAO,cACT,EACA,uBAAwB,CACtB,WAAY,0BACZ,aAAc,iBACd,SAAU,CACR,GAAI,OACJ,GAAI,UACN,EACA,YAAa,OACf,EACA,aAAc,gBAChB,EAEC,SAAAb,EAAQ,IAAK0B,UACXC,EAAS,SAAA,CAAA,MAAOD,EAAE,MAChB,SAAA,CAAA,IACAA,EAAE,MAAO,GAAA,CAFmB,EAAAA,EAAE,KAGjC,CACD,CAAA,CACH,EACChB,EAAA,IAAAkB,EAAA,eAAA,CAAgB,UAAWP,EAAAP,EAAA,QAAA,YAAAO,EAAO,OAAQ,CAAA,CAAA,CAC7C,CAAA,EAAA,CAAA,EAGN,CAEJ"}

package/dist/components/SelectBoxController/index.es.js

@@ -11,11 +11,11 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
     options: t,
     defaultValue: x,
     isMulti: n,
-    placeholder: f,
+    placeholder: b,
     emptyValue: a = n ? [] : "",
     onChange: i,
     onClear: s,
-    inputProps: b
+    inputProps: f
   } = g, p = (r) => Array.isArray(r) && r.length || !n && r;
   return /* @__PURE__ */ l(S, { display: "grid", children: /* @__PURE__ */ l(
     k,
@@ -35,9 +35,9 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
               },
               multiple: n,
               size: "small",
-              value: a,
+              value: r.value ?? a,
               displayEmpty: !0,
-              inputProps: { ...b },
+              inputProps: { ...f },
               renderValue: () => {
                 var o;
                 const e = r.value;
@@ -51,7 +51,7 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
                     ).join(", ");
                 } else if (e && (typeof e == "string" || typeof e == "number"))
                   return (o = t.find((d) => d.value === e)) == null ? void 0 : o.label;
-                return /* @__PURE__ */ l("span", { className: F.placeholder, children: f });
+                return /* @__PURE__ */ l("span", { className: F.placeholder, children: b });
               },
               endAdornment: /* @__PURE__ */ l(
                 I,

package/dist/components/SelectBoxController/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputBaseComponentProps,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  Controller,\n  FieldPath,\n  FieldValues,\n  PathValue,\n  type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n  readonly label: string;\n  readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n  control: Control<T>;\n  name: FieldPath<T>;\n  options: SelectBoxOption[];\n  defaultValue?: PathValue<T, FieldPath<T>>;\n  emptyValue?: [] | string | null | undefined;\n  isMulti: boolean;\n  placeholder?: string;\n  onChange?: (\n    event: SelectChangeEvent<unknown>,\n    child: React.ReactNode,\n  ) => void;\n  onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n  inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n  const {\n    control,\n    name,\n    options,\n    defaultValue,\n    isMulti,\n    placeholder,\n    emptyValue = isMulti ? [] : \"\",\n    onChange,\n    onClear,\n    inputProps,\n  } = props;\n\n  const existValue = (\n    value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n  ) => {\n    return (Array.isArray(value) && value.length) || (!isMulti && value);\n  };\n\n  return (\n    <Box display={\"grid\"}>\n      <Controller\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) => (\n          <FormControl error={fieldState.invalid}>\n            <Select\n              {...field}\n              onChange={(event, child) => {\n                if (!isMulti && event.target.value === \"\") {\n                  field.onChange(undefined);\n                } else {\n                  field.onChange(event);\n                }\n                onChange?.(event, child);\n              }}\n              multiple={isMulti}\n              size=\"small\"\n              value={emptyValue}\n              displayEmpty\n              inputProps={{ ...inputProps }}\n              renderValue={() => {\n                const value = field.value;\n                if (isMulti && Array.isArray(value)) {\n                  if (value.length) {\n                    const labels = value.map(\n                      (val: SelectBoxOption[\"value\"]) =>\n                        options.find((option) => option.value === val)?.label,\n                    );\n                    return labels.join(\", \");\n                  }\n                } else if (\n                  value &&\n                  (typeof value === \"string\" || typeof value === \"number\")\n                ) {\n                  return options.find((option) => option.value === value)\n                    ?.label;\n                }\n                return (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                );\n              }}\n              endAdornment={\n                <IconButton\n                  sx={{\n                    visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n                  }}\n                  onClick={(event) => {\n                    field.onChange(\n                      isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n                    );\n                    onClear?.(event);\n                  }}\n                >\n                  <Clear />\n                </IconButton>\n              }\n              sx={{\n                \"& .MuiSelect-iconOutlined\": {\n                  display: existValue(field.value) ? \"none\" : \"\",\n                },\n                \"&.Mui-focused .MuiIconButton-root\": {\n                  color: \"primary.main\",\n                },\n                \"& .MuiSelect-select \": {\n                  whiteSpace: \"break-spaces !important\",\n                  paddingRight: \"4px !important\",\n                  fontSize: {\n                    xs: \"1rem\",\n                    sm: \"0.875rem\",\n                  },\n                  paddingLeft: \"9.5px\",\n                },\n                paddingRight: \"4px !important\",\n              }}\n            >\n              {options.map((m) => (\n                <MenuItem value={m.value} key={m.value}>\n                  {\" \"}\n                  {m.label}{\" \"}\n                </MenuItem>\n              ))}\n            </Select>\n            <FormHelperText>{fieldState.error?.message}</FormHelperText>\n          </FormControl>\n        )}\n      />\n    </Box>\n  );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputBaseComponentProps,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  Controller,\n  FieldPath,\n  FieldValues,\n  PathValue,\n  type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n  readonly label: string;\n  readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n  control: Control<T>;\n  name: FieldPath<T>;\n  options: SelectBoxOption[];\n  defaultValue?: PathValue<T, FieldPath<T>>;\n  emptyValue?: [] | string | null | undefined;\n  isMulti: boolean;\n  placeholder?: string;\n  onChange?: (\n    event: SelectChangeEvent<unknown>,\n    child: React.ReactNode,\n  ) => void;\n  onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n  inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n  const {\n    control,\n    name,\n    options,\n    defaultValue,\n    isMulti,\n    placeholder,\n    emptyValue = isMulti ? [] : \"\",\n    onChange,\n    onClear,\n    inputProps,\n  } = props;\n\n  const existValue = (\n    value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n  ) => {\n    return (Array.isArray(value) && value.length) || (!isMulti && value);\n  };\n\n  return (\n    <Box display={\"grid\"}>\n      <Controller\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) => (\n          <FormControl error={fieldState.invalid}>\n            <Select\n              {...field}\n              onChange={(event, child) => {\n                if (!isMulti && event.target.value === \"\") {\n                  field.onChange(undefined);\n                } else {\n                  field.onChange(event);\n                }\n                onChange?.(event, child);\n              }}\n              multiple={isMulti}\n              size=\"small\"\n              value={field.value ?? emptyValue}\n              displayEmpty\n              inputProps={{ ...inputProps }}\n              renderValue={() => {\n                const value = field.value;\n                if (isMulti && Array.isArray(value)) {\n                  if (value.length) {\n                    const labels = value.map(\n                      (val: SelectBoxOption[\"value\"]) =>\n                        options.find((option) => option.value === val)?.label,\n                    );\n                    return labels.join(\", \");\n                  }\n                } else if (\n                  value &&\n                  (typeof value === \"string\" || typeof value === \"number\")\n                ) {\n                  return options.find((option) => option.value === value)\n                    ?.label;\n                }\n                return (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                );\n              }}\n              endAdornment={\n                <IconButton\n                  sx={{\n                    visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n                  }}\n                  onClick={(event) => {\n                    field.onChange(\n                      isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n                    );\n                    onClear?.(event);\n                  }}\n                >\n                  <Clear />\n                </IconButton>\n              }\n              sx={{\n                \"& .MuiSelect-iconOutlined\": {\n                  display: existValue(field.value) ? \"none\" : \"\",\n                },\n                \"&.Mui-focused .MuiIconButton-root\": {\n                  color: \"primary.main\",\n                },\n                \"& .MuiSelect-select \": {\n                  whiteSpace: \"break-spaces !important\",\n                  paddingRight: \"4px !important\",\n                  fontSize: {\n                    xs: \"1rem\",\n                    sm: \"0.875rem\",\n                  },\n                  paddingLeft: \"9.5px\",\n                },\n                paddingRight: \"4px !important\",\n              }}\n            >\n              {options.map((m) => (\n                <MenuItem value={m.value} key={m.value}>\n                  {\" \"}\n                  {m.label}{\" \"}\n                </MenuItem>\n              ))}\n            </Select>\n            <FormHelperText>{fieldState.error?.message}</FormHelperText>\n          </FormControl>\n        )}\n      />\n    </Box>\n  );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"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"}

package/dist/components/Title/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index31.css');const l=require("react/jsx-runtime"),s=require("@mui/material"),r="_title_1p2hj_1",o={title:r},t=e=>{const{title:i}=e;return l.jsx(s.Typography,{className:o.title,fontWeight:600,children:i})};exports.Title=t;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index31.css');const i=require("react/jsx-runtime"),r=require("@mui/material"),o="_title_1p2hj_1",n={title:o},e=t=>{const{title:l,className:s}=t;return i.jsx(r.Typography,{className:`${n.title} ${s??""}`,fontWeight:600,children:l})};exports.Title=e;exports.default=e;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/Title/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Title/index.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** タイトルテキスト */\n  title: string;\n};\n\n/**\n * タイトルを表示するコンポーネント\n * フォントサイズ16pxで太字のテキストを表示します\n */\nexport const Title = (props: Props) => {\n  const { title } = props;\n  return (\n    <Typography className={styles.title} fontWeight={600}>\n      {title}\n    </Typography>\n  );\n};\n\nexport default Title;\n"],"names":["Title","props","title","Typography","styles"],"mappings":"2MAaaA,EAASC,GAAiB,CAC/B,KAAA,CAAE,MAAAC,GAAUD,EAClB,aACGE,EAAAA,WAAW,CAAA,UAAWC,EAAO,MAAO,WAAY,IAC9C,SACHF,EAAA,CAEJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Title/index.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** タイトルテキスト */\n  title: string;\n  /** タイトルのクラス名 */\n  className?: string;\n};\n\n/**\n * タイトルを表示するコンポーネント\n * フォントサイズ16pxで太字のテキストを表示します\n */\nexport const Title = (props: Props) => {\n  const { title, className } = props;\n  return (\n    <Typography className={`${styles.title} ${className ?? \"\"}`} fontWeight={600}>\n      {title}\n    </Typography>\n  );\n};\n\nexport default Title;\n"],"names":["Title","props","title","className","jsx","Typography","styles"],"mappings":"2MAeaA,EAASC,GAAiB,CAC/B,KAAA,CAAE,MAAAC,EAAO,UAAAC,CAAA,EAAcF,EAC7B,OACGG,EAAAA,IAAAC,EAAAA,WAAA,CAAW,UAAW,GAAGC,EAAO,KAAK,IAAIH,GAAa,EAAE,GAAI,WAAY,IACtE,SACHD,EAAA,CAEJ"}

package/dist/components/Title/index.d.ts

@@ -1,6 +1,8 @@
 type Props = {
     /** タイトルテキスト */
     title: string;
+    /** タイトルのクラス名 */
+    className?: string;
 };
 /**
  * タイトルを表示するコンポーネント

package/dist/components/Title/index.es.js

@@ -1,13 +1,13 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Typography as i } from "@mui/material";
-import '../../assets/index31.css';const l = "_title_1p2hj_1", s = {
-  title: l
-}, c = (t) => {
-  const { title: e } = t;
-  return /* @__PURE__ */ o(i, { className: s.title, fontWeight: 600, children: e });
+import { jsx as l } from "react/jsx-runtime";
+import { Typography as o } from "@mui/material";
+import '../../assets/index31.css';const i = "_title_1p2hj_1", r = {
+  title: i
+}, n = (t) => {
+  const { title: e, className: s } = t;
+  return /* @__PURE__ */ l(o, { className: `${r.title} ${s ?? ""}`, fontWeight: 600, children: e });
 };
 export {
-  c as Title,
-  c as default
+  n as Title,
+  n as default
 };
 //# sourceMappingURL=index.es.js.map

package/dist/components/Title/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/Title/index.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** タイトルテキスト */\n  title: string;\n};\n\n/**\n * タイトルを表示するコンポーネント\n * フォントサイズ16pxで太字のテキストを表示します\n */\nexport const Title = (props: Props) => {\n  const { title } = props;\n  return (\n    <Typography className={styles.title} fontWeight={600}>\n      {title}\n    </Typography>\n  );\n};\n\nexport default Title;\n"],"names":["Title","props","title","Typography","styles"],"mappings":";;;;GAaaA,IAAQ,CAACC,MAAiB;AAC/B,QAAA,EAAE,OAAAC,MAAUD;AAClB,2BACGE,GAAW,EAAA,WAAWC,EAAO,OAAO,YAAY,KAC9C,UACHF,GAAA;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/Title/index.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** タイトルテキスト */\n  title: string;\n  /** タイトルのクラス名 */\n  className?: string;\n};\n\n/**\n * タイトルを表示するコンポーネント\n * フォントサイズ16pxで太字のテキストを表示します\n */\nexport const Title = (props: Props) => {\n  const { title, className } = props;\n  return (\n    <Typography className={`${styles.title} ${className ?? \"\"}`} fontWeight={600}>\n      {title}\n    </Typography>\n  );\n};\n\nexport default Title;\n"],"names":["Title","props","title","className","jsx","Typography","styles"],"mappings":";;;;GAeaA,IAAQ,CAACC,MAAiB;AAC/B,QAAA,EAAE,OAAAC,GAAO,WAAAC,EAAA,IAAcF;AAC7B,SACG,gBAAAG,EAAAC,GAAA,EAAW,WAAW,GAAGC,EAAO,KAAK,IAAIH,KAAa,EAAE,IAAI,YAAY,KACtE,UACHD,GAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jigowatts/jigowatts-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "",
   "type": "module",
   "main": "dist/index.cjs.js",