@jigowatts/jigowatts-ui 1.1.9 → 1.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/RangeDatePickerController/index.tsx"],"sourcesContent":["import { DateTimePicker, jaJP, type DateOrTimeView } from \"@mui/x-date-pickers\";\nimport { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nimport { LocalizationProvider } from \"@mui/x-date-pickers/LocalizationProvider\";\nimport { parse, set } from \"date-fns\";\nimport ja from \"date-fns/locale/ja\";\nimport {\n  Controller,\n  type Control,\n  type FieldValues,\n  type UseFormSetValue,\n} from \"react-hook-form\";\n\nimport { DATETIME_FORMAT } from \"@/constants/datetime\";\nimport styles from \"./index.module.scss\";\n\nexport type RangeDatePickerControllerInfo = {\n  name: string;\n  defaultValue?: string | undefined | null;\n};\n\ntype Props = {\n  control: Control;\n  fromDateInfo: RangeDatePickerControllerInfo;\n  toDateInfo: RangeDatePickerControllerInfo;\n  dateFormat: string;\n  setValue: UseFormSetValue<FieldValues>;\n};\n\n/**\n * Date,DateTimeをを選択できるコンポーネント\n * dateFormatに合わせてpickerViewを生成します。\n * @param props\n * @returns\n */\nexport const RangeDatePickerController = (props: Props) => {\n  const { control, fromDateInfo, toDateInfo, dateFormat, setValue } = props;\n\n  /**\n   * 受信した値を適切な日付またはnullに変換します。\n   * @param value ユーザーによる値、呼び出し側からセットされた値\n   * @param pickerInfo 紐づくpickerの情報\n   * @returns\n   */\n  const convertValue = (\n    value: string | Date | null,\n    pickerInfo: RangeDatePickerControllerInfo,\n  ): Date | null => {\n    const newValue = value\n      ? value instanceof Date\n        ? value\n        : typeof value === \"string\"\n          ? parse(value, dateFormat, new Date())\n          : null\n      : null;\n    // NOTE:呼び出し側からはstringがセットされる可能性が高いため、変換後controlに紐付けvalueも置き換えます。\n    if (typeof value === \"string\") {\n      setValue(pickerInfo.name, newValue);\n    }\n    return newValue;\n  };\n\n  const handleOnchange = (\n    value: Date | null,\n    pickerInfo: RangeDatePickerControllerInfo,\n  ) => {\n    setValue(pickerInfo.name, value ?? pickerInfo.defaultValue, {\n      shouldDirty: true,\n    });\n  };\n\n  const views: DateOrTimeView[] = (() => {\n    const v: DateOrTimeView[] = [];\n\n    if (dateFormat.includes(\"yyyy\")) {\n      v.push(\"year\");\n    }\n    if (dateFormat.includes(\"MM\")) {\n      v.push(\"month\");\n    }\n    if (dateFormat.includes(\"dd\")) {\n      v.push(\"day\");\n    }\n    if (dateFormat.includes(\"HH\")) {\n      v.push(\"hours\");\n    }\n    if (dateFormat.includes(\"mm\")) {\n      v.push(\"minutes\");\n    }\n    if (dateFormat.includes(\"ss\")) {\n      v.push(\"seconds\");\n    }\n    return v;\n  })();\n\n  return (\n    <LocalizationProvider\n      dateAdapter={AdapterDateFns}\n      adapterLocale={ja}\n      localeText={\n        jaJP.components.MuiLocalizationProvider.defaultProps.localeText\n      }\n    >\n      <div className={styles.rangeContainer}>\n        <Controller\n          control={control}\n          name={fromDateInfo.name}\n          defaultValue={fromDateInfo.defaultValue}\n          render={({ field, fieldState }) => (\n            <DateTimePicker\n              {...field}\n              format={dateFormat}\n              views={views}\n              sx={{\n                \".MuiButtonBase-root\": {\n                  padding: 0.5,\n                },\n              }}\n              value={convertValue(field.value, fromDateInfo)}\n              onChange={(newDate) => {\n                handleOnchange(newDate, fromDateInfo);\n              }}\n              slotProps={{\n                textField: {\n                  error: !!fieldState.error,\n                  helperText: fieldState.error?.message,\n                },\n                // NOTE: clearボタンが文字を隠していまうのでとりあえずcalendar内のもので代用\n                // field: {\n                //   clearable: true,\n                // },\n                actionBar: { actions: [\"clear\"] },\n              }}\n            />\n          )}\n        />\n        ~\n        <Controller\n          control={control}\n          name={toDateInfo.name}\n          defaultValue={toDateInfo.defaultValue}\n          render={({ field, fieldState }) => (\n            <DateTimePicker\n              {...field}\n              format={dateFormat}\n              views={views}\n              sx={{\n                \".MuiButtonBase-root\": {\n                  padding: 0.5,\n                },\n              }}\n              value={convertValue(field.value, toDateInfo)}\n              onChange={(newDate) => {\n                // NOTE: 値がない状態からh日付をを入力した場合に限りto入力部だけデフォルトで23:59:59が入るようにします。\n                if (\n                  dateFormat === DATETIME_FORMAT &&\n                  newDate !== null &&\n                  !field.value\n                ) {\n                  newDate = set(newDate, {\n                    hours: 23,\n                    minutes: 59,\n                    seconds: 59,\n                  });\n                }\n                handleOnchange(newDate, toDateInfo);\n              }}\n              slotProps={{\n                textField: {\n                  error: !!fieldState.error,\n                  helperText: fieldState.error?.message,\n                },\n                // NOTE: clearボタンが文字を隠していまうのでとりあえずcalendar内のもので代用\n                // field: {\n                //   clearable: true,\n                // },\n                actionBar: { actions: [\"clear\"] },\n              }}\n            />\n          )}\n        />\n      </div>\n    </LocalizationProvider>\n  );\n};\n\nexport default RangeDatePickerController;\n"],"names":["RangeDatePickerController","props","control","fromDateInfo","toDateInfo","dateFormat","setValue","convertValue","value","pickerInfo","newValue","parse","handleOnchange","views","v","jsx","LocalizationProvider","AdapterDateFns","ja","jaJP","jsxs","styles","Controller","field","fieldState","DateTimePicker","newDate","_a","DATETIME_FORMAT","set"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/RangeDatePickerController/index.tsx"],"sourcesContent":["import { Grid } from \"@mui/material\";\nimport {\n  DateTimePicker,\n  PickersActionBarAction,\n  type DateOrTimeView,\n} from \"@mui/x-date-pickers\";\nimport { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nimport { jaJP } from \"@mui/x-date-pickers/locales\";\nimport { LocalizationProvider } from \"@mui/x-date-pickers/LocalizationProvider\";\nimport { parse, set } from \"date-fns\";\nimport ja from \"date-fns/locale/ja\";\nimport {\n  Controller,\n  type Control,\n  type FieldValues,\n  type UseFormSetValue,\n} from \"react-hook-form\";\n\nimport { DATETIME_FORMAT } from \"@/constants/datetime\";\n\nexport type PickerInfo = {\n  name: string;\n  defaultValue?: string | undefined | null;\n};\n\ntype Props = {\n  control: Control;\n  fromDateInfo: PickerInfo;\n  toDateInfo: PickerInfo;\n  dateFormat: string;\n  setValue: UseFormSetValue<FieldValues>;\n};\n\nconst pickerStyles = {\n  \".MuiButtonBase-root\": {\n    padding: 0.5,\n    paddingLeft: 0,\n  },\n  \"& input::placeholder\": {\n    fontSize: \"x-small\",\n  },\n};\n\nconst pickerActions: PickersActionBarAction[] = [\"clear\", \"accept\"];\n\n/**\n * Date,DateTimeをを選択できるコンポーネント\n * dateFormatに合わせてpickerViewを生成します。\n * @param props\n * @returns\n */\nexport const RangeDatePickerController = (props: Props) => {\n  const { control, fromDateInfo, toDateInfo, dateFormat, setValue } = props;\n\n  /**\n   * 受信した値を適切な日付またはnullに変換します。\n   * @param value ユーザーによる値、呼び出し側からセットされた値\n   * @param pickerInfo 紐づくpickerの情報\n   * @returns\n   */\n  const convertValue = (\n    value: string | Date | null,\n    pickerInfo: PickerInfo,\n  ): Date | null => {\n    const newValue = value\n      ? value instanceof Date\n        ? value\n        : typeof value === \"string\"\n          ? parse(value, dateFormat, new Date())\n          : null\n      : null;\n    // NOTE:呼び出し側からはstringがセットされる可能性が高いため、変換後controlに紐付けvalueも置き換えます。\n    if (typeof value === \"string\") {\n      setValue(pickerInfo.name, newValue);\n    }\n    return newValue;\n  };\n\n  const handleOnchange = (value: Date | null, pickerInfo: PickerInfo) => {\n    setValue(pickerInfo.name, value ?? pickerInfo.defaultValue, {\n      shouldDirty: true,\n    });\n  };\n\n  const views: DateOrTimeView[] = (() => {\n    const v: DateOrTimeView[] = [];\n\n    if (dateFormat.includes(\"yyyy\")) {\n      v.push(\"year\");\n    }\n    if (dateFormat.includes(\"MM\")) {\n      v.push(\"month\");\n    }\n    if (dateFormat.includes(\"dd\")) {\n      v.push(\"day\");\n    }\n    if (dateFormat.includes(\"HH\")) {\n      v.push(\"hours\");\n    }\n    if (dateFormat.includes(\"mm\")) {\n      v.push(\"minutes\");\n    }\n    if (dateFormat.includes(\"ss\")) {\n      v.push(\"seconds\");\n    }\n    return v;\n  })();\n\n  return (\n    <LocalizationProvider\n      dateAdapter={AdapterDateFns}\n      adapterLocale={ja}\n      localeText={\n        jaJP.components.MuiLocalizationProvider.defaultProps.localeText\n      }\n    >\n      <Grid container alignItems=\"center\" rowSpacing={1} columnSpacing={1}>\n        <Grid item xs={11.4} sm={5.7} md={11.4} xl={5.7}>\n          <Controller\n            control={control}\n            name={fromDateInfo.name}\n            defaultValue={fromDateInfo.defaultValue}\n            render={({ field, fieldState }) => (\n              <DateTimePicker\n                {...field}\n                format={dateFormat}\n                views={views}\n                sx={pickerStyles}\n                value={convertValue(field.value, fromDateInfo)}\n                onChange={(newDate) => {\n                  handleOnchange(newDate, fromDateInfo);\n                }}\n                slotProps={{\n                  textField: {\n                    error: !!fieldState.error,\n                    helperText: fieldState.error?.message,\n                    fullWidth: true,\n                  },\n                  // NOTE: clearボタンが文字を隠していまうのでとりあえずcalendar内のもので代用\n                  // field: {\n                  //   clearable: true,\n                  // },\n                  actionBar: { actions: pickerActions },\n                }}\n              />\n            )}\n          />\n        </Grid>\n        <Grid item xs={0.6} sm={0.6} md={0.6} lg={0.6} textAlign=\"center\">\n          ~\n        </Grid>\n        {/* <Grid item xs={1} sm={0} lg={0}>\n          <></>\n        </Grid> */}\n        <Grid item xs={11.4} sm={5.7} md={11.4} xl={5.7}>\n          <Controller\n            control={control}\n            name={toDateInfo.name}\n            defaultValue={toDateInfo.defaultValue}\n            render={({ field, fieldState }) => (\n              <DateTimePicker\n                {...field}\n                format={dateFormat}\n                views={views}\n                sx={pickerStyles}\n                value={convertValue(field.value, toDateInfo)}\n                onChange={(newDate) => {\n                  // NOTE: 値がない状態からh日付をを入力した場合に限りto入力部だけデフォルトで23:59:59が入るようにします。\n                  if (\n                    dateFormat === DATETIME_FORMAT &&\n                    newDate !== null &&\n                    !field.value\n                  ) {\n                    newDate = set(newDate, {\n                      hours: 23,\n                      minutes: 59,\n                      seconds: 59,\n                    });\n                  }\n                  handleOnchange(newDate, toDateInfo);\n                }}\n                slotProps={{\n                  textField: {\n                    error: !!fieldState.error,\n                    helperText: fieldState.error?.message,\n                    fullWidth: true,\n                  },\n                  // NOTE: clearボタンが文字を隠していまうのでとりあえずcalendar内のもので代用\n                  // field: {\n                  //   clearable: true,\n                  // },\n                  actionBar: { actions: pickerActions },\n                }}\n              />\n            )}\n          />\n        </Grid>\n      </Grid>\n    </LocalizationProvider>\n  );\n};\n\nexport default RangeDatePickerController;"],"names":["pickerStyles","pickerActions","RangeDatePickerController","props","control","fromDateInfo","toDateInfo","dateFormat","setValue","convertValue","value","pickerInfo","newValue","parse","handleOnchange","views","v","jsx","LocalizationProvider","AdapterDateFns","ja","jaJP","jsxs","Grid","Controller","field","fieldState","DateTimePicker","newDate","_a","DATETIME_FORMAT","set"],"mappings":";;;;;;;;;;AAiCA,MAAMA,IAAe;AAAA,EACnB,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,wBAAwB;AAAA,IACtB,UAAU;AAAA,EAAA;AAEd,GAEMC,IAA0C,CAAC,SAAS,QAAQ,GAQrDC,IAA4B,CAACC,MAAiB;AACzD,QAAM,EAAE,SAAAC,GAAS,cAAAC,GAAc,YAAAC,GAAY,YAAAC,GAAY,UAAAC,MAAaL,GAQ9DM,IAAe,CACnBC,GACAC,MACgB;AAChB,UAAMC,IAAWF,IACbA,aAAiB,OACfA,IACA,OAAOA,KAAU,WACfG,EAAMH,GAAOH,GAAY,oBAAI,KAAM,CAAA,IACnC,OACJ;AAEA,WAAA,OAAOG,KAAU,YACVF,EAAAG,EAAW,MAAMC,CAAQ,GAE7BA;AAAA,EACT,GAEME,IAAiB,CAACJ,GAAoBC,MAA2B;AACrE,IAAAH,EAASG,EAAW,MAAMD,KAASC,EAAW,cAAc;AAAA,MAC1D,aAAa;AAAA,IAAA,CACd;AAAA,EACH,GAEMI,KAA2B,MAAM;AACrC,UAAMC,IAAsB,CAAC;AAEzB,WAAAT,EAAW,SAAS,MAAM,KAC5BS,EAAE,KAAK,MAAM,GAEXT,EAAW,SAAS,IAAI,KAC1BS,EAAE,KAAK,OAAO,GAEZT,EAAW,SAAS,IAAI,KAC1BS,EAAE,KAAK,KAAK,GAEVT,EAAW,SAAS,IAAI,KAC1BS,EAAE,KAAK,OAAO,GAEZT,EAAW,SAAS,IAAI,KAC1BS,EAAE,KAAK,SAAS,GAEdT,EAAW,SAAS,IAAI,KAC1BS,EAAE,KAAK,SAAS,GAEXA;AAAA,EAAA,GACN;AAGD,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAaC;AAAA,MACb,eAAeC;AAAA,MACf,YACEC,EAAK,WAAW,wBAAwB,aAAa;AAAA,MAGvD,UAAA,gBAAAC,EAACC,KAAK,WAAS,IAAC,YAAW,UAAS,YAAY,GAAG,eAAe,GAChE,UAAA;AAAA,QAAC,gBAAAN,EAAAM,GAAA,EAAK,MAAI,IAAC,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,IAAI,KAC1C,UAAA,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,SAAApB;AAAA,YACA,MAAMC,EAAa;AAAA,YACnB,cAAcA,EAAa;AAAA,YAC3B,QAAQ,CAAC,EAAE,OAAAoB,GAAO,YAAAC,EAChB,MAAA;;AAAA,qCAAAT;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBACE,GAAGF;AAAA,kBACJ,QAAQlB;AAAA,kBACR,OAAAQ;AAAA,kBACA,IAAIf;AAAA,kBACJ,OAAOS,EAAagB,EAAM,OAAOpB,CAAY;AAAA,kBAC7C,UAAU,CAACuB,MAAY;AACrB,oBAAAd,EAAec,GAASvB,CAAY;AAAA,kBACtC;AAAA,kBACA,WAAW;AAAA,oBACT,WAAW;AAAA,sBACT,OAAO,CAAC,CAACqB,EAAW;AAAA,sBACpB,aAAYG,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,sBAC9B,WAAW;AAAA,oBACb;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKA,WAAW,EAAE,SAAS5B,EAAc;AAAA,kBAAA;AAAA,gBACtC;AAAA,cAAA;AAAA;AAAA,UACF;AAAA,QAAA,GAGN;AAAA,QACC,gBAAAgB,EAAAM,GAAA,EAAK,MAAI,IAAC,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,WAAU,UAAS,UAElE,KAAA;AAAA,QAIA,gBAAAN,EAACM,GAAK,EAAA,MAAI,IAAC,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,IAAI,KAC1C,UAAA,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,SAAApB;AAAA,YACA,MAAME,EAAW;AAAA,YACjB,cAAcA,EAAW;AAAA,YACzB,QAAQ,CAAC,EAAE,OAAAmB,GAAO,YAAAC,EAChB,MAAA;;AAAA,qCAAAT;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBACE,GAAGF;AAAA,kBACJ,QAAQlB;AAAA,kBACR,OAAAQ;AAAA,kBACA,IAAIf;AAAA,kBACJ,OAAOS,EAAagB,EAAM,OAAOnB,CAAU;AAAA,kBAC3C,UAAU,CAACsB,MAAY;AAErB,oBACErB,MAAeuB,KACfF,MAAY,QACZ,CAACH,EAAM,UAEPG,IAAUG,EAAIH,GAAS;AAAA,sBACrB,OAAO;AAAA,sBACP,SAAS;AAAA,sBACT,SAAS;AAAA,oBAAA,CACV,IAEHd,EAAec,GAAStB,CAAU;AAAA,kBACpC;AAAA,kBACA,WAAW;AAAA,oBACT,WAAW;AAAA,sBACT,OAAO,CAAC,CAACoB,EAAW;AAAA,sBACpB,aAAYG,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,sBAC9B,WAAW;AAAA,oBACb;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKA,WAAW,EAAE,SAAS5B,EAAc;AAAA,kBAAA;AAAA,gBACtC;AAAA,cAAA;AAAA;AAAA,UACF;AAAA,QAAA,EAGN,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/RangeDatePickerController/index.test.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("react/jsx-runtime"),e=require("../../react.esm-CiMn0Rnx.cjs"),c=require("react-hook-form"),s=require("./index.cjs.js");describe("RangeDatePickerController component",()=>{it("renders date pickers with correct default values",()=>{const{result:t}=e.renderHook(()=>c.useForm()),r=t.current.control;e.render(a.jsx(s.RangeDatePickerController,{control:r,fromDateInfo:{name:"fromDate",defaultValue:"2024-03-01"},toDateInfo:{name:"toDate",defaultValue:"2024-03-15"},dateFormat:"yyyy-MM-dd",setValue:()=>{}}));const o=e.screen.getByDisplayValue("2024-03-01"),n=e.screen.getByDisplayValue("2024-03-15");expect(o).toBeInTheDocument(),expect(n).toBeInTheDocument()})});
+"use strict";const o=require("react/jsx-runtime"),e=require("../../react.esm-CiMn0Rnx.cjs"),n=require("react-hook-form"),c=require("./index.cjs.js");describe("RangeDatePickerController component",()=>{it("renders date pickers with correct default values (date-only format)",async()=>{const{result:t}=e.renderHook(()=>n.useForm()),{control:a,setValue:r}=t.current;e.render(o.jsx(c.RangeDatePickerController,{control:a,fromDateInfo:{name:"fromDate",defaultValue:"2024-03-01"},toDateInfo:{name:"toDate",defaultValue:"2024-03-15"},dateFormat:"yyyy-MM-dd",setValue:r}));const s=await e.screen.findByDisplayValue("2024-03-01"),u=await e.screen.findByDisplayValue("2024-03-15");expect(s).toBeInTheDocument(),expect(u).toBeInTheDocument()}),it("renders date pickers with correct default values (datetime format)",async()=>{const{result:t}=e.renderHook(()=>n.useForm()),{control:a,setValue:r}=t.current;e.render(o.jsx(c.RangeDatePickerController,{control:a,fromDateInfo:{name:"fromDate",defaultValue:"2024/03/01 00:00:00"},toDateInfo:{name:"toDate",defaultValue:"2024/03/15 23:59:59"},dateFormat:"yyyy/MM/dd HH:mm:ss",setValue:r})),expect(await e.screen.findByDisplayValue("2024/03/01 00:00:00")).toBeInTheDocument(),expect(await e.screen.findByDisplayValue("2024/03/15 23:59:59")).toBeInTheDocument()})});
 //# sourceMappingURL=index.test.cjs.js.map

package/dist/components/RangeDatePickerController/index.test.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/RangeDatePickerController/index.test.tsx"],"sourcesContent":["import { render, renderHook, screen } from \"@testing-library/react\";\nimport { useForm } from \"react-hook-form\";\n\nimport { RangeDatePickerController } from \".\";\n\ndescribe(\"RangeDatePickerController component\", () => {\n  it(\"renders date pickers with correct default values\", () => {\n    const { result } = renderHook(() => useForm());\n    const control = result.current.control;\n\n    render(\n      <RangeDatePickerController\n        control={control}\n        fromDateInfo={{ name: \"fromDate\", defaultValue: \"2024-03-01\" }}\n        toDateInfo={{ name: \"toDate\", defaultValue: \"2024-03-15\" }}\n        dateFormat=\"yyyy-MM-dd\"\n        setValue={() => {}}\n      />,\n    );\n\n    const fromDateInput = screen.getByDisplayValue(\"2024-03-01\");\n    const toDateInput = screen.getByDisplayValue(\"2024-03-15\");\n\n    expect(fromDateInput).toBeInTheDocument();\n    expect(toDateInput).toBeInTheDocument();\n  });\n});\n"],"names":["result","renderHook","useForm","control","render","jsx","RangeDatePickerController","fromDateInput","screen","toDateInput"],"mappings":"qJAKA,SAAS,sCAAuC,IAAM,CACpD,GAAG,mDAAoD,IAAM,CAC3D,KAAM,CAAE,OAAAA,CAAO,EAAIC,aAAW,IAAMC,WAAS,EACvCC,EAAUH,EAAO,QAAQ,QAE/BI,EAAA,OACEC,EAAA,IAACC,EAAA,0BAAA,CACC,QAAAH,EACA,aAAc,CAAE,KAAM,WAAY,aAAc,YAAa,EAC7D,WAAY,CAAE,KAAM,SAAU,aAAc,YAAa,EACzD,WAAW,aACX,SAAU,IAAM,CAAA,CAAC,CAAA,CAErB,EAEM,MAAAI,EAAgBC,EAAAA,OAAO,kBAAkB,YAAY,EACrDC,EAAcD,EAAAA,OAAO,kBAAkB,YAAY,EAElD,OAAAD,CAAa,EAAE,kBAAkB,EACjC,OAAAE,CAAW,EAAE,kBAAkB,CAAA,CACvC,CACH,CAAC"}
+{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/RangeDatePickerController/index.test.tsx"],"sourcesContent":["import { render, renderHook, screen } from \"@testing-library/react\";\nimport { useForm } from \"react-hook-form\";\n\nimport { RangeDatePickerController } from \".\";\n\ndescribe(\"RangeDatePickerController component\", () => {\n  it(\"renders date pickers with correct default values (date-only format)\", async () => {\n    const { result } = renderHook(() => useForm());\n    const { control, setValue } = result.current;\n\n    render(\n      <RangeDatePickerController\n        control={control}\n        fromDateInfo={{ name: \"fromDate\", defaultValue: \"2024-03-01\" }}\n        toDateInfo={{ name: \"toDate\", defaultValue: \"2024-03-15\" }}\n        dateFormat=\"yyyy-MM-dd\"\n        setValue={setValue}\n      />,\n    );\n\n    const fromDateInput = await screen.findByDisplayValue(\"2024-03-01\");\n    const toDateInput = await screen.findByDisplayValue(\"2024-03-15\");\n\n    expect(fromDateInput).toBeInTheDocument();\n    expect(toDateInput).toBeInTheDocument();\n  });\n\n  it(\"renders date pickers with correct default values (datetime format)\", async () => {\n    const { result } = renderHook(() => useForm());\n    const { control, setValue } = result.current;\n\n    render(\n      <RangeDatePickerController\n        control={control}\n        fromDateInfo={{\n          name: \"fromDate\",\n          defaultValue: \"2024/03/01 00:00:00\",\n        }}\n        toDateInfo={{\n          name: \"toDate\",\n          defaultValue: \"2024/03/15 23:59:59\",\n        }}\n        dateFormat=\"yyyy/MM/dd HH:mm:ss\"\n        setValue={setValue}\n      />,\n    );\n\n    expect(\n      await screen.findByDisplayValue(\"2024/03/01 00:00:00\"),\n    ).toBeInTheDocument();\n    expect(\n      await screen.findByDisplayValue(\"2024/03/15 23:59:59\"),\n    ).toBeInTheDocument();\n  });\n});\n"],"names":["result","renderHook","useForm","control","setValue","render","jsx","RangeDatePickerController","fromDateInput","screen","toDateInput"],"mappings":"qJAKA,SAAS,sCAAuC,IAAM,CACpD,GAAG,sEAAuE,SAAY,CACpF,KAAM,CAAE,OAAAA,CAAO,EAAIC,aAAW,IAAMC,WAAS,EACvC,CAAE,QAAAC,EAAS,SAAAC,CAAS,EAAIJ,EAAO,QAErCK,EAAA,OACEC,EAAA,IAACC,EAAA,0BAAA,CACC,QAAAJ,EACA,aAAc,CAAE,KAAM,WAAY,aAAc,YAAa,EAC7D,WAAY,CAAE,KAAM,SAAU,aAAc,YAAa,EACzD,WAAW,aACX,SAAAC,CAAA,CAAA,CAEJ,EAEA,MAAMI,EAAgB,MAAMC,SAAO,mBAAmB,YAAY,EAC5DC,EAAc,MAAMD,SAAO,mBAAmB,YAAY,EAEzD,OAAAD,CAAa,EAAE,kBAAkB,EACjC,OAAAE,CAAW,EAAE,kBAAkB,CAAA,CACvC,EAED,GAAG,qEAAsE,SAAY,CACnF,KAAM,CAAE,OAAAV,CAAO,EAAIC,aAAW,IAAMC,WAAS,EACvC,CAAE,QAAAC,EAAS,SAAAC,CAAS,EAAIJ,EAAO,QAErCK,EAAA,OACEC,EAAA,IAACC,EAAA,0BAAA,CACC,QAAAJ,EACA,aAAc,CACZ,KAAM,WACN,aAAc,qBAChB,EACA,WAAY,CACV,KAAM,SACN,aAAc,qBAChB,EACA,WAAW,sBACX,SAAAC,CAAA,CAAA,CAEJ,EAEA,OACE,MAAMK,EAAAA,OAAO,mBAAmB,qBAAqB,GACrD,kBAAkB,EACpB,OACE,MAAMA,EAAAA,OAAO,mBAAmB,qBAAqB,GACrD,kBAAkB,CAAA,CACrB,CACH,CAAC"}

package/dist/components/RangeDatePickerController/index.test.es.js

@@ -1,25 +1,48 @@
-import { jsx as n } from "react/jsx-runtime";
-import { a as c, r as s, s as e } from "../../react.esm-2FJSSo-S.js";
-import { useForm as l } from "react-hook-form";
-import { RangeDatePickerController as m } from "./index.es.js";
+import { jsx as r } from "react/jsx-runtime";
+import { a as n, r as s, s as e } from "../../react.esm-2FJSSo-S.js";
+import { useForm as c } from "react-hook-form";
+import { RangeDatePickerController as l } from "./index.es.js";
 describe("RangeDatePickerController component", () => {
-  it("renders date pickers with correct default values", () => {
-    const { result: t } = c(() => l()), o = t.current.control;
+  it("renders date pickers with correct default values (date-only format)", async () => {
+    const { result: t } = n(() => c()), { control: a, setValue: o } = t.current;
     s(
-      /* @__PURE__ */ n(
-        m,
+      /* @__PURE__ */ r(
+        l,
         {
-          control: o,
+          control: a,
           fromDateInfo: { name: "fromDate", defaultValue: "2024-03-01" },
           toDateInfo: { name: "toDate", defaultValue: "2024-03-15" },
           dateFormat: "yyyy-MM-dd",
-          setValue: () => {
-          }
+          setValue: o
         }
       )
     );
-    const r = e.getByDisplayValue("2024-03-01"), a = e.getByDisplayValue("2024-03-15");
-    expect(r).toBeInTheDocument(), expect(a).toBeInTheDocument();
+    const m = await e.findByDisplayValue("2024-03-01"), u = await e.findByDisplayValue("2024-03-15");
+    expect(m).toBeInTheDocument(), expect(u).toBeInTheDocument();
+  }), it("renders date pickers with correct default values (datetime format)", async () => {
+    const { result: t } = n(() => c()), { control: a, setValue: o } = t.current;
+    s(
+      /* @__PURE__ */ r(
+        l,
+        {
+          control: a,
+          fromDateInfo: {
+            name: "fromDate",
+            defaultValue: "2024/03/01 00:00:00"
+          },
+          toDateInfo: {
+            name: "toDate",
+            defaultValue: "2024/03/15 23:59:59"
+          },
+          dateFormat: "yyyy/MM/dd HH:mm:ss",
+          setValue: o
+        }
+      )
+    ), expect(
+      await e.findByDisplayValue("2024/03/01 00:00:00")
+    ).toBeInTheDocument(), expect(
+      await e.findByDisplayValue("2024/03/15 23:59:59")
+    ).toBeInTheDocument();
   });
 });
 //# sourceMappingURL=index.test.es.js.map

package/dist/components/RangeDatePickerController/index.test.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.es.js","sources":["../../../src/components/RangeDatePickerController/index.test.tsx"],"sourcesContent":["import { render, renderHook, screen } from \"@testing-library/react\";\nimport { useForm } from \"react-hook-form\";\n\nimport { RangeDatePickerController } from \".\";\n\ndescribe(\"RangeDatePickerController component\", () => {\n  it(\"renders date pickers with correct default values\", () => {\n    const { result } = renderHook(() => useForm());\n    const control = result.current.control;\n\n    render(\n      <RangeDatePickerController\n        control={control}\n        fromDateInfo={{ name: \"fromDate\", defaultValue: \"2024-03-01\" }}\n        toDateInfo={{ name: \"toDate\", defaultValue: \"2024-03-15\" }}\n        dateFormat=\"yyyy-MM-dd\"\n        setValue={() => {}}\n      />,\n    );\n\n    const fromDateInput = screen.getByDisplayValue(\"2024-03-01\");\n    const toDateInput = screen.getByDisplayValue(\"2024-03-15\");\n\n    expect(fromDateInput).toBeInTheDocument();\n    expect(toDateInput).toBeInTheDocument();\n  });\n});\n"],"names":["result","renderHook","useForm","control","render","jsx","RangeDatePickerController","fromDateInput","screen","toDateInput"],"mappings":";;;;AAKA,SAAS,uCAAuC,MAAM;AACpD,KAAG,oDAAoD,MAAM;AAC3D,UAAM,EAAE,QAAAA,EAAO,IAAIC,EAAW,MAAMC,GAAS,GACvCC,IAAUH,EAAO,QAAQ;AAE/B,IAAAI;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAAH;AAAA,UACA,cAAc,EAAE,MAAM,YAAY,cAAc,aAAa;AAAA,UAC7D,YAAY,EAAE,MAAM,UAAU,cAAc,aAAa;AAAA,UACzD,YAAW;AAAA,UACX,UAAU,MAAM;AAAA,UAAA;AAAA,QAAC;AAAA,MAAA;AAAA,IAErB;AAEM,UAAAI,IAAgBC,EAAO,kBAAkB,YAAY,GACrDC,IAAcD,EAAO,kBAAkB,YAAY;AAElD,WAAAD,CAAa,EAAE,kBAAkB,GACjC,OAAAE,CAAW,EAAE,kBAAkB;AAAA,EAAA,CACvC;AACH,CAAC;"}
+{"version":3,"file":"index.test.es.js","sources":["../../../src/components/RangeDatePickerController/index.test.tsx"],"sourcesContent":["import { render, renderHook, screen } from \"@testing-library/react\";\nimport { useForm } from \"react-hook-form\";\n\nimport { RangeDatePickerController } from \".\";\n\ndescribe(\"RangeDatePickerController component\", () => {\n  it(\"renders date pickers with correct default values (date-only format)\", async () => {\n    const { result } = renderHook(() => useForm());\n    const { control, setValue } = result.current;\n\n    render(\n      <RangeDatePickerController\n        control={control}\n        fromDateInfo={{ name: \"fromDate\", defaultValue: \"2024-03-01\" }}\n        toDateInfo={{ name: \"toDate\", defaultValue: \"2024-03-15\" }}\n        dateFormat=\"yyyy-MM-dd\"\n        setValue={setValue}\n      />,\n    );\n\n    const fromDateInput = await screen.findByDisplayValue(\"2024-03-01\");\n    const toDateInput = await screen.findByDisplayValue(\"2024-03-15\");\n\n    expect(fromDateInput).toBeInTheDocument();\n    expect(toDateInput).toBeInTheDocument();\n  });\n\n  it(\"renders date pickers with correct default values (datetime format)\", async () => {\n    const { result } = renderHook(() => useForm());\n    const { control, setValue } = result.current;\n\n    render(\n      <RangeDatePickerController\n        control={control}\n        fromDateInfo={{\n          name: \"fromDate\",\n          defaultValue: \"2024/03/01 00:00:00\",\n        }}\n        toDateInfo={{\n          name: \"toDate\",\n          defaultValue: \"2024/03/15 23:59:59\",\n        }}\n        dateFormat=\"yyyy/MM/dd HH:mm:ss\"\n        setValue={setValue}\n      />,\n    );\n\n    expect(\n      await screen.findByDisplayValue(\"2024/03/01 00:00:00\"),\n    ).toBeInTheDocument();\n    expect(\n      await screen.findByDisplayValue(\"2024/03/15 23:59:59\"),\n    ).toBeInTheDocument();\n  });\n});\n"],"names":["result","renderHook","useForm","control","setValue","render","jsx","RangeDatePickerController","fromDateInput","screen","toDateInput"],"mappings":";;;;AAKA,SAAS,uCAAuC,MAAM;AACpD,KAAG,uEAAuE,YAAY;AACpF,UAAM,EAAE,QAAAA,EAAO,IAAIC,EAAW,MAAMC,GAAS,GACvC,EAAE,SAAAC,GAAS,UAAAC,EAAS,IAAIJ,EAAO;AAErC,IAAAK;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAAJ;AAAA,UACA,cAAc,EAAE,MAAM,YAAY,cAAc,aAAa;AAAA,UAC7D,YAAY,EAAE,MAAM,UAAU,cAAc,aAAa;AAAA,UACzD,YAAW;AAAA,UACX,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAEA,UAAMI,IAAgB,MAAMC,EAAO,mBAAmB,YAAY,GAC5DC,IAAc,MAAMD,EAAO,mBAAmB,YAAY;AAEzD,WAAAD,CAAa,EAAE,kBAAkB,GACjC,OAAAE,CAAW,EAAE,kBAAkB;AAAA,EAAA,CACvC,GAED,GAAG,sEAAsE,YAAY;AACnF,UAAM,EAAE,QAAAV,EAAO,IAAIC,EAAW,MAAMC,GAAS,GACvC,EAAE,SAAAC,GAAS,UAAAC,EAAS,IAAIJ,EAAO;AAErC,IAAAK;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAAJ;AAAA,UACA,cAAc;AAAA,YACZ,MAAM;AAAA,YACN,cAAc;AAAA,UAChB;AAAA,UACA,YAAY;AAAA,YACV,MAAM;AAAA,YACN,cAAc;AAAA,UAChB;AAAA,UACA,YAAW;AAAA,UACX,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ,GAEA;AAAA,MACE,MAAMK,EAAO,mBAAmB,qBAAqB;AAAA,MACrD,kBAAkB,GACpB;AAAA,MACE,MAAMA,EAAO,mBAAmB,qBAAqB;AAAA,MACrD,kBAAkB;AAAA,EAAA,CACrB;AACH,CAAC;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index7.css');const o=require("react/jsx-runtime"),L=require("react"),H=require("@mui/material"),a=require("chart.js");require("chartjs-adapter-date-fns");const c=require("date-fns"),M=require("react-chartjs-2"),R=require("../CardWithTitle/index.cjs.js"),q="_reportChart_t9sla_1",N="_chart_t9sla_10",O="_reportBox_t9sla_15",F="_nodata_t9sla_19",n={reportChart:q,chart:N,reportBox:O,nodata:F};a.Chart.register(a.CategoryScale,a.LinearScale,a.PointElement,a.LineElement,a.Filler,a.LineController,a.Title,a.Tooltip,a.Legend,a.TimeScale);const B={red:"rgb(255, 99, 132)",orange:"rgb(255, 184, 76)",yellow:"rgb(255, 205, 86)",green:"rgb(102, 187, 106)",blue:"rgb(41, 182, 246)",purple:"rgb(153, 102, 255)",grey:"rgb(201, 203, 207)",redTransparent:"rgba(255, 99, 132, 0.5)",orangeTransparent:"rgba(255, 184, 76, 0.5)",yellowTransparent:"rgba(255, 205, 86, 0.5)",greenTransparent:"rgba(102, 187, 106, 0.5)",blueTransparent:"rgba(41, 182, 246, 0.5)",purpleTransparent:"rgba(153, 102, 255, 0.5)",greyTransparent:"rgba(201, 203, 207, 0.5)"},E=m=>{const{datasets:s,xLabel:d="",yLabel:g="",xType:p="day",dataIntervalMin:b=5,chartMargin:i={top:0,right:20,bottom:20,left:10},tooltipFormatter:h=(t,e)=>[String(t),String(e)],isLoading:f,title:y,precision:x}=m,D=L.useRef(null),T=s.some(t=>t.stack!==void 0);if(p==="day"){const t=c.format(c.startOfDay(new Date),"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),e=c.format(c.endOfDay(new Date),"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),r=[{date:t,value:0},{date:e,value:0}];s.unshift({label:"",data:r,borderColor:"rgba(0, 0, 0, 0)"})}const C={type:"time",time:{unit:"minute",displayFormats:{minute:"HH:mm"},tooltipFormat:"HH:mm"},title:{display:!0,text:d},ticks:{source:"auto",autoSkip:!0,maxTicksLimit:24,callback:function(t){return`${(typeof t=="string"?new Date(t):new Date(t)).getHours()}時`}}},k={title:{display:!0,text:d}},S={interaction:{intersect:!1},responsive:!0,aspectRatio:2,maintainAspectRatio:!1,animation:!1,transitions:{resize:{animations:{x:{from:0},y:{from:0}}},show:{animations:{x:{from:0},y:{from:0}}}},layout:{padding:{left:i.left,right:i.right,top:i.top,bottom:i.bottom}},plugins:{legend:{display:!0,position:"top"},title:{display:!1},tooltip:{callbacks:{label:t=>{if(t.dataset.label==="")return"";const e=t.dataset.label?`${t.dataset.label}`:"";return h(t.parsed.y,e).reverse().join(":")}}}},scales:{x:p==="day"?C:k,y:{stacked:T,beginAtZero:!0,title:{display:!0,text:g},ticks:{precision:x}}}},u=(t,e)=>t.p0.skip||t.p1.skip?e:void 0,v=(t,e)=>t.p0.parsed.y>t.p1.parsed.y?e:void 0,_=t=>{const e=[...t];if(t.length>1){const r=new Date(t[t.length-1].date).getTime(),l=new Date(t[t.length-2].date).getTime();(r-l)/(1e3*60)>b&&e.splice(e.length-1,0,{date:new Date(l+1).toISOString(),value:NaN})}return e},j={datasets:s.map(t=>{const e=t.skipEmptyData?_(t.data):t.data;return{label:t.label,data:e.map(r=>({x:new Date(r.date),y:r.value})),borderColor:t.borderColor,backgroundColor:t.backgroundColor||t.borderColor,tension:.4,borderWidth:t.borderWidth||void 0,fill:t.fill||!1,stack:t.stack||void 0,pointRadius:0,spanGaps:!!t.skipEmptyData,segment:t.skipEmptyData?{borderColor:r=>u(r,"rgba(0,0,0,0.2)")||v(r,t.borderColor),borderDash:r=>u(r,[6,6])}:void 0}})},w=()=>f?o.jsx("div",{className:n.nodata,children:"loading..."}):s.length===0||s.length===1&&s[0].label===""?o.jsx("div",{className:n.nodata,children:"NO DATA"}):o.jsx(M.Line,{ref:D,options:S,data:j});return o.jsx("div",{className:n.reportChart,children:o.jsx(R.CardWithTitle,{title:y,spacingFromTitle:0,children:o.jsx(H.Box,{className:n.reportBox,children:o.jsx("div",{className:n.chart,children:o.jsx(w,{})})})})})};exports.ReportChartMulti=E;exports.chartColors=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index7.css');const o=require("react/jsx-runtime"),M=require("react"),H=require("@mui/material"),a=require("chart.js");require("chartjs-adapter-date-fns");const c=require("date-fns"),R=require("react-chartjs-2"),q=require("../CardWithTitle/index.cjs.js"),N="_reportChart_t9sla_1",O="_chart_t9sla_10",F="_reportBox_t9sla_15",B="_nodata_t9sla_19",n={reportChart:N,chart:O,reportBox:F,nodata:B};a.Chart.register(a.CategoryScale,a.LinearScale,a.PointElement,a.LineElement,a.Filler,a.LineController,a.Title,a.Tooltip,a.Legend,a.TimeScale);const E={red:"rgb(255, 99, 132)",orange:"rgb(255, 184, 76)",yellow:"rgb(255, 205, 86)",green:"rgb(102, 187, 106)",blue:"rgb(41, 182, 246)",purple:"rgb(153, 102, 255)",grey:"rgb(201, 203, 207)",redTransparent:"rgba(255, 99, 132, 0.5)",orangeTransparent:"rgba(255, 184, 76, 0.5)",yellowTransparent:"rgba(255, 205, 86, 0.5)",greenTransparent:"rgba(102, 187, 106, 0.5)",blueTransparent:"rgba(41, 182, 246, 0.5)",purpleTransparent:"rgba(153, 102, 255, 0.5)",greyTransparent:"rgba(201, 203, 207, 0.5)"},m=g=>{const{datasets:s,xLabel:d="",yLabel:b="",xType:p="day",dataIntervalMin:h=5,chartMargin:i={top:0,right:20,bottom:20,left:10},tooltipFormatter:f=(e,t)=>[String(e),String(t)],isLoading:y,title:x,precision:D}=g,T=M.useRef(null),C=s.some(e=>e.stack!==void 0);if(p==="day"){const e=c.format(c.startOfDay(new Date),"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),t=c.format(c.endOfDay(new Date),"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),r=[{date:e,value:0},{date:t,value:0}];s.unshift({label:"",data:r,borderColor:"rgba(0, 0, 0, 0)"})}const k={type:"time",time:{unit:"minute",displayFormats:{minute:"HH:mm"},tooltipFormat:"HH:mm"},title:{display:!0,text:d},ticks:{source:"auto",autoSkip:!0,maxTicksLimit:24,callback:function(e){return`${(typeof e=="string"?new Date(e):new Date(e)).getHours()}時`}}},S={title:{display:!0,text:d}},v={interaction:{intersect:!1},responsive:!0,aspectRatio:2,maintainAspectRatio:!1,animation:!1,transitions:{resize:{animations:{x:{from:0},y:{from:0}}},show:{animations:{x:{from:0},y:{from:0}}}},layout:{padding:{left:i.left,right:i.right,top:i.top,bottom:i.bottom}},plugins:{legend:{display:!0,position:"top"},title:{display:!1},tooltip:{callbacks:{label:e=>{if(e.dataset.label==="")return"";const t=e.dataset.label?`${e.dataset.label}`:"";return f(e.parsed.y,t).reverse().join(":")}}}},scales:{x:p==="day"?k:S,y:{stacked:C,beginAtZero:!0,title:{display:!0,text:b},ticks:{precision:D}}}},u=(e,t)=>e.p0.skip||e.p1.skip?t:void 0,_=(e,t)=>e.p0.parsed.y>e.p1.parsed.y?t:void 0,j=e=>{const t=[...e];if(e.length>1){const r=new Date(e[e.length-1].date).getTime(),l=new Date(e[e.length-2].date).getTime();(r-l)/(1e3*60)>h&&t.splice(t.length-1,0,{date:new Date(l+1).toISOString(),value:NaN})}return t},w={datasets:s.map(e=>{const t=e.skipEmptyData?j(e.data):e.data;return{label:e.label,data:t.map(r=>({x:new Date(r.date),y:r.value})),borderColor:e.borderColor,backgroundColor:e.backgroundColor||e.borderColor,tension:.4,borderWidth:e.borderWidth||void 0,fill:e.fill||!1,stack:e.stack||void 0,pointRadius:0,spanGaps:!!e.skipEmptyData,segment:e.skipEmptyData?{borderColor:r=>u(r,"rgba(0,0,0,0.2)")||_(r,e.borderColor),borderDash:r=>u(r,[6,6])}:void 0}})},L=()=>y?o.jsx("div",{className:n.nodata,children:"loading..."}):s.length===0||s.length===1&&s[0].label===""?o.jsx("div",{className:n.nodata,children:"NO DATA"}):o.jsx(R.Line,{ref:T,options:v,data:w});return o.jsx("div",{className:n.reportChart,children:o.jsx(q.CardWithTitle,{title:x,spacingFromTitle:0,children:o.jsx(H.Box,{className:n.reportBox,children:o.jsx("div",{className:n.chart,children:o.jsx(L,{})})})})})};exports.ReportChartMulti=m;exports.chartColors=E;exports.default=m;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ReportChartMulti/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  ChartOptions,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\n\nimport \"chartjs-adapter-date-fns\";\n\nimport { endOfDay, format, startOfDay } from \"date-fns\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport { CardWithTitle } from \"../CardWithTitle\";\nimport styles from \"./index.module.scss\";\n\nexport type datasetType = {\n  label: string;\n  data: { date: string; value: number }[];\n  borderColor: string;\n  backgroundColor?: string;\n  borderWidth?: number;\n  fill?: boolean | number | string;\n  stack?: string;\n  skipEmptyData?: boolean;\n};\n\ntype Props = {\n  datasets: datasetType[];\n  xLabel: string;\n  yLabel: string;\n  dataIntervalMin?: number;\n  xType: \"day\" | \"week\" | \"month\" | \"year\";\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n  title: string; // Add title prop\n  precision?: number; // Y軸の小数点以下の桁数を指定\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  Filler,\n  LineController,\n  Title,\n  ChartJSTooltip,\n  Legend,\n  TimeScale, // TimeScaleを登録\n);\n\n// グラフで利用する標準色を定義\nexport const chartColors = {\n  red: \"rgb(255, 99, 132)\",\n  orange: \"rgb(255, 184, 76)\",\n  yellow: \"rgb(255, 205, 86)\",\n  green: \"rgb(102, 187, 106)\",\n  blue: \"rgb(41, 182, 246)\",\n  purple: \"rgb(153, 102, 255)\",\n  grey: \"rgb(201, 203, 207)\",\n  // 透過色（塗りつぶしに利用）\n  redTransparent: \"rgba(255, 99, 132, 0.5)\",\n  orangeTransparent: \"rgba(255, 184, 76, 0.5)\",\n  yellowTransparent: \"rgba(255, 205, 86, 0.5)\",\n  greenTransparent: \"rgba(102, 187, 106, 0.5)\",\n  blueTransparent: \"rgba(41, 182, 246, 0.5)\",\n  purpleTransparent: \"rgba(153, 102, 255, 0.5)\",\n  greyTransparent: \"rgba(201, 203, 207, 0.5)\",\n};\n\nexport const ReportChartMulti = (props: Props) => {\n  const {\n    datasets,\n    xLabel = \"\",\n    yLabel = \"\",\n    xType = \"day\",\n    dataIntervalMin = 5,\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    title, // Destructure title from props\n    precision,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  // stackにグループを追加している場合は、積み上げグラフとなる\n  const isStacked = datasets.some((dataset) => dataset.stack !== undefined);\n\n  // 時間の範囲を描画する基準として利用するダミーデータをdatasetsに追加\n  // TODO:現状はxTypeがdayの場合のみ対応している\n  if (xType === \"day\") {\n    const startDate = format(\n      startOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n    const endDate = format(\n      endOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n\n    const rangeOfDate = [\n      { date: startDate, value: 0 },\n      { date: endDate, value: 0 },\n    ];\n\n    datasets.unshift({\n      label: \"\",\n      data: rangeOfDate,\n      borderColor: \"rgba(0, 0, 0, 0)\", // 透明色\n    });\n  }\n\n  const dayScaleOptions = {\n    type: \"time\",\n    time: {\n      unit: \"minute\",\n      displayFormats: {\n        minute: \"HH:mm\",\n      },\n      tooltipFormat: \"HH:mm\",\n    },\n    title: {\n      display: true,\n      text: xLabel,\n    },\n    ticks: {\n      source: \"auto\",\n      autoSkip: true,\n      maxTicksLimit: 24,\n      callback: function (value: string | number): string {\n        const dateValue =\n          typeof value === \"string\" ? new Date(value) : new Date(value);\n        const hours = dateValue.getHours();\n        return `${hours}時`;\n      },\n    },\n  };\n\n  const otherScaleOptions = {\n    title: {\n      display: true,\n      text: xLabel,\n    },\n  };\n\n  const options: ChartOptions<\"line\"> = {\n    interaction: {\n      intersect: false,\n    },\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: false,\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: true,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            // 時間基準データはツールチップに表示させない\n            if (context.dataset.label === \"\") {\n              return \"\";\n            }\n            const label = context.dataset.label\n              ? `${context.dataset.label}`\n              : \"\";\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: xType === \"day\" ? dayScaleOptions : otherScaleOptions, // 実際使うTypeが増えたらここを改修\n      y: {\n        stacked: isStacked,\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n        },\n        ticks: {\n          precision: precision,\n        },\n      },\n    },\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const skipped = (ctx: any, value: any): any =>\n    ctx.p0.skip || ctx.p1.skip ? value : undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const down = (ctx: any, value: any): any =>\n    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;\n\n  const fillGaps = (data: { date: string; value: number | null }[]) => {\n    const filledData: { date: string; value: number | null }[] = [...data];\n\n    if (data.length > 1) {\n      const lastTime = new Date(data[data.length - 1].date).getTime();\n      const secondLastTime = new Date(data[data.length - 2].date).getTime();\n      const finalTimeDifference = (lastTime - secondLastTime) / (1000 * 60);\n\n      // 最後のデータポイントが大きなギャップを持つ場合にNaNを挿入\n      if (finalTimeDifference > dataIntervalMin) {\n        filledData.splice(filledData.length - 1, 0, {\n          date: new Date(secondLastTime + 1).toISOString(),\n          value: NaN,\n        });\n      }\n    }\n    return filledData;\n  };\n\n  // データセットの整形\n  const formattedDatasets = datasets.map((dataset) => {\n    const dataWithGaps = dataset.skipEmptyData\n      ? fillGaps(dataset.data)\n      : dataset.data;\n    return {\n      label: dataset.label,\n      data: dataWithGaps.map((item) => {\n        const date = new Date(item.date);\n        return { x: date, y: item.value };\n      }),\n      borderColor: dataset.borderColor,\n      backgroundColor: dataset.backgroundColor || dataset.borderColor,\n      tension: 0.4,\n      borderWidth: dataset.borderWidth || undefined,\n      fill: dataset.fill || false,\n      stack: dataset.stack || undefined,\n      pointRadius: 0,\n      spanGaps: dataset.skipEmptyData ? true : false,\n      segment: dataset.skipEmptyData\n        ? {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderColor: (ctx: any) =>\n              skipped(ctx, \"rgba(0,0,0,0.2)\") || down(ctx, dataset.borderColor),\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderDash: (ctx: any) => skipped(ctx, [6, 6]),\n          }\n        : undefined,\n    };\n  });\n\n  const chartJsData = {\n    datasets: formattedDatasets,\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (\n      datasets.length === 0 ||\n      (datasets.length === 1 && datasets[0].label === \"\")\n    ) {\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    <div className={styles.reportChart}>\n      <CardWithTitle title={title} spacingFromTitle={0}>\n        <Box className={styles.reportBox}>\n          <div className={styles.chart}>\n            <ChartData />\n          </div>\n        </Box>\n      </CardWithTitle>\n    </div>\n  );\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Filler","LineController","Title","ChartJSTooltip","Legend","TimeScale","chartColors","ReportChartMulti","props","datasets","xLabel","yLabel","xType","dataIntervalMin","chartMargin","tooltipFormatter","value","label","isLoading","title","precision","chartRef","useRef","isStacked","dataset","startDate","format","startOfDay","endDate","endOfDay","rangeOfDate","dayScaleOptions","otherScaleOptions","options","context","skipped","ctx","down","fillGaps","data","filledData","lastTime","secondLastTime","chartJsData","dataWithGaps","item","ChartData","jsx","styles","LineChartJS","CardWithTitle","Box"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ReportChartMulti/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  ChartOptions,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\n\nimport \"chartjs-adapter-date-fns\";\n\nimport { endOfDay, format, startOfDay } from \"date-fns\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport { CardWithTitle } from \"../CardWithTitle\";\nimport styles from \"./index.module.scss\";\n\nexport type datasetType = {\n  label: string;\n  data: { date: string; value: number }[];\n  borderColor: string;\n  backgroundColor?: string;\n  borderWidth?: number;\n  fill?: boolean | number | string;\n  stack?: string;\n  skipEmptyData?: boolean;\n};\n\ntype Props = {\n  datasets: datasetType[];\n  xLabel: string;\n  yLabel: string;\n  dataIntervalMin?: number;\n  xType: \"day\" | \"week\" | \"month\" | \"year\";\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n  title: string; // Add title prop\n  precision?: number; // Y軸の小数点以下の桁数を指定\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  Filler,\n  LineController,\n  Title,\n  ChartJSTooltip,\n  Legend,\n  TimeScale, // TimeScaleを登録\n);\n\n// グラフで利用する標準色を定義\nexport const chartColors = {\n  red: \"rgb(255, 99, 132)\",\n  orange: \"rgb(255, 184, 76)\",\n  yellow: \"rgb(255, 205, 86)\",\n  green: \"rgb(102, 187, 106)\",\n  blue: \"rgb(41, 182, 246)\",\n  purple: \"rgb(153, 102, 255)\",\n  grey: \"rgb(201, 203, 207)\",\n  // 透過色（塗りつぶしに利用）\n  redTransparent: \"rgba(255, 99, 132, 0.5)\",\n  orangeTransparent: \"rgba(255, 184, 76, 0.5)\",\n  yellowTransparent: \"rgba(255, 205, 86, 0.5)\",\n  greenTransparent: \"rgba(102, 187, 106, 0.5)\",\n  blueTransparent: \"rgba(41, 182, 246, 0.5)\",\n  purpleTransparent: \"rgba(153, 102, 255, 0.5)\",\n  greyTransparent: \"rgba(201, 203, 207, 0.5)\",\n};\n\nexport const ReportChartMulti = (props: Props) => {\n  const {\n    datasets,\n    xLabel = \"\",\n    yLabel = \"\",\n    xType = \"day\",\n    dataIntervalMin = 5,\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    title, // Destructure title from props\n    precision,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  // stackにグループを追加している場合は、積み上げグラフとなる\n  const isStacked = datasets.some((dataset) => dataset.stack !== undefined);\n\n  // 時間の範囲を描画する基準として利用するダミーデータをdatasetsに追加\n  // TODO:現状はxTypeがdayの場合のみ対応している\n  if (xType === \"day\") {\n    const startDate = format(\n      startOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n    const endDate = format(\n      endOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n\n    const rangeOfDate = [\n      { date: startDate, value: 0 },\n      { date: endDate, value: 0 },\n    ];\n\n    datasets.unshift({\n      label: \"\",\n      data: rangeOfDate,\n      borderColor: \"rgba(0, 0, 0, 0)\", // 透明色\n    });\n  }\n\n  const dayScaleOptions = {\n    type: \"time\",\n    time: {\n      unit: \"minute\",\n      displayFormats: {\n        minute: \"HH:mm\",\n      },\n      tooltipFormat: \"HH:mm\",\n    },\n    title: {\n      display: true,\n      text: xLabel,\n    },\n    ticks: {\n      source: \"auto\",\n      autoSkip: true,\n      maxTicksLimit: 24,\n      callback: function (value: string | number): string {\n        const dateValue =\n          typeof value === \"string\" ? new Date(value) : new Date(value);\n        const hours = dateValue.getHours();\n        return `${hours}時`;\n      },\n    },\n  };\n\n  const otherScaleOptions = {\n    title: {\n      display: true,\n      text: xLabel,\n    },\n  };\n\n  const options: ChartOptions<\"line\"> = {\n    interaction: {\n      intersect: false,\n    },\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: false,\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: true,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            // 時間基準データはツールチップに表示させない\n            if (context.dataset.label === \"\") {\n              return \"\";\n            }\n            const label = context.dataset.label\n              ? `${context.dataset.label}`\n              : \"\";\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: xType === \"day\" ? dayScaleOptions : otherScaleOptions, // 実際使うTypeが増えたらここを改修\n      y: {\n        stacked: isStacked,\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n        },\n        ticks: {\n          precision: precision,\n        },\n      },\n    },\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const skipped = (ctx: any, value: any): any =>\n    ctx.p0.skip || ctx.p1.skip ? value : undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const down = (ctx: any, value: any): any =>\n    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;\n\n  const fillGaps = (data: { date: string; value: number | null }[]) => {\n    const filledData: { date: string; value: number | null }[] = [...data];\n\n    if (data.length > 1) {\n      const lastTime = new Date(data[data.length - 1].date).getTime();\n      const secondLastTime = new Date(data[data.length - 2].date).getTime();\n      const finalTimeDifference = (lastTime - secondLastTime) / (1000 * 60);\n\n      // 最後のデータポイントが大きなギャップを持つ場合にNaNを挿入\n      if (finalTimeDifference > dataIntervalMin) {\n        filledData.splice(filledData.length - 1, 0, {\n          date: new Date(secondLastTime + 1).toISOString(),\n          value: NaN,\n        });\n      }\n    }\n    return filledData;\n  };\n\n  // データセットの整形\n  const formattedDatasets = datasets.map((dataset) => {\n    const dataWithGaps = dataset.skipEmptyData\n      ? fillGaps(dataset.data)\n      : dataset.data;\n    return {\n      label: dataset.label,\n      data: dataWithGaps.map((item) => {\n        const date = new Date(item.date);\n        return { x: date, y: item.value };\n      }),\n      borderColor: dataset.borderColor,\n      backgroundColor: dataset.backgroundColor || dataset.borderColor,\n      tension: 0.4,\n      borderWidth: dataset.borderWidth || undefined,\n      fill: dataset.fill || false,\n      stack: dataset.stack || undefined,\n      pointRadius: 0,\n      spanGaps: dataset.skipEmptyData ? true : false,\n      segment: dataset.skipEmptyData\n        ? {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderColor: (ctx: any) =>\n              skipped(ctx, \"rgba(0,0,0,0.2)\") || down(ctx, dataset.borderColor),\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderDash: (ctx: any) => skipped(ctx, [6, 6]),\n          }\n        : undefined,\n    };\n  });\n\n  const chartJsData = {\n    datasets: formattedDatasets,\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (\n      datasets.length === 0 ||\n      (datasets.length === 1 && datasets[0].label === \"\")\n    ) {\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    <div className={styles.reportChart}>\n      <CardWithTitle title={title} spacingFromTitle={0}>\n        <Box className={styles.reportBox}>\n          <div className={styles.chart}>\n            <ChartData />\n          </div>\n        </Box>\n      </CardWithTitle>\n    </div>\n  );\n};\n\nexport default ReportChartMulti;"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Filler","LineController","Title","ChartJSTooltip","Legend","TimeScale","chartColors","ReportChartMulti","props","datasets","xLabel","yLabel","xType","dataIntervalMin","chartMargin","tooltipFormatter","value","label","isLoading","title","precision","chartRef","useRef","isStacked","dataset","startDate","format","startOfDay","endDate","endOfDay","rangeOfDate","dayScaleOptions","otherScaleOptions","options","context","skipped","ctx","down","fillGaps","data","filledData","lastTime","secondLastTime","chartJsData","dataWithGaps","item","ChartData","jsx","styles","LineChartJS","CardWithTitle","Box"],"mappings":"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"}

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

@@ -48,4 +48,4 @@ export declare const chartColors: {
     greyTransparent: string;
 };
 export declare const ReportChartMulti: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+export default ReportChartMulti;

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

@@ -211,6 +211,7 @@ const nt = {
 };
 export {
   st as ReportChartMulti,
-  nt as chartColors
+  nt as chartColors,
+  st as default
 };
 //# sourceMappingURL=index.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/ReportChartMulti/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  ChartOptions,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\n\nimport \"chartjs-adapter-date-fns\";\n\nimport { endOfDay, format, startOfDay } from \"date-fns\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport { CardWithTitle } from \"../CardWithTitle\";\nimport styles from \"./index.module.scss\";\n\nexport type datasetType = {\n  label: string;\n  data: { date: string; value: number }[];\n  borderColor: string;\n  backgroundColor?: string;\n  borderWidth?: number;\n  fill?: boolean | number | string;\n  stack?: string;\n  skipEmptyData?: boolean;\n};\n\ntype Props = {\n  datasets: datasetType[];\n  xLabel: string;\n  yLabel: string;\n  dataIntervalMin?: number;\n  xType: \"day\" | \"week\" | \"month\" | \"year\";\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n  title: string; // Add title prop\n  precision?: number; // Y軸の小数点以下の桁数を指定\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  Filler,\n  LineController,\n  Title,\n  ChartJSTooltip,\n  Legend,\n  TimeScale, // TimeScaleを登録\n);\n\n// グラフで利用する標準色を定義\nexport const chartColors = {\n  red: \"rgb(255, 99, 132)\",\n  orange: \"rgb(255, 184, 76)\",\n  yellow: \"rgb(255, 205, 86)\",\n  green: \"rgb(102, 187, 106)\",\n  blue: \"rgb(41, 182, 246)\",\n  purple: \"rgb(153, 102, 255)\",\n  grey: \"rgb(201, 203, 207)\",\n  // 透過色（塗りつぶしに利用）\n  redTransparent: \"rgba(255, 99, 132, 0.5)\",\n  orangeTransparent: \"rgba(255, 184, 76, 0.5)\",\n  yellowTransparent: \"rgba(255, 205, 86, 0.5)\",\n  greenTransparent: \"rgba(102, 187, 106, 0.5)\",\n  blueTransparent: \"rgba(41, 182, 246, 0.5)\",\n  purpleTransparent: \"rgba(153, 102, 255, 0.5)\",\n  greyTransparent: \"rgba(201, 203, 207, 0.5)\",\n};\n\nexport const ReportChartMulti = (props: Props) => {\n  const {\n    datasets,\n    xLabel = \"\",\n    yLabel = \"\",\n    xType = \"day\",\n    dataIntervalMin = 5,\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    title, // Destructure title from props\n    precision,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  // stackにグループを追加している場合は、積み上げグラフとなる\n  const isStacked = datasets.some((dataset) => dataset.stack !== undefined);\n\n  // 時間の範囲を描画する基準として利用するダミーデータをdatasetsに追加\n  // TODO:現状はxTypeがdayの場合のみ対応している\n  if (xType === \"day\") {\n    const startDate = format(\n      startOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n    const endDate = format(\n      endOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n\n    const rangeOfDate = [\n      { date: startDate, value: 0 },\n      { date: endDate, value: 0 },\n    ];\n\n    datasets.unshift({\n      label: \"\",\n      data: rangeOfDate,\n      borderColor: \"rgba(0, 0, 0, 0)\", // 透明色\n    });\n  }\n\n  const dayScaleOptions = {\n    type: \"time\",\n    time: {\n      unit: \"minute\",\n      displayFormats: {\n        minute: \"HH:mm\",\n      },\n      tooltipFormat: \"HH:mm\",\n    },\n    title: {\n      display: true,\n      text: xLabel,\n    },\n    ticks: {\n      source: \"auto\",\n      autoSkip: true,\n      maxTicksLimit: 24,\n      callback: function (value: string | number): string {\n        const dateValue =\n          typeof value === \"string\" ? new Date(value) : new Date(value);\n        const hours = dateValue.getHours();\n        return `${hours}時`;\n      },\n    },\n  };\n\n  const otherScaleOptions = {\n    title: {\n      display: true,\n      text: xLabel,\n    },\n  };\n\n  const options: ChartOptions<\"line\"> = {\n    interaction: {\n      intersect: false,\n    },\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: false,\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: true,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            // 時間基準データはツールチップに表示させない\n            if (context.dataset.label === \"\") {\n              return \"\";\n            }\n            const label = context.dataset.label\n              ? `${context.dataset.label}`\n              : \"\";\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: xType === \"day\" ? dayScaleOptions : otherScaleOptions, // 実際使うTypeが増えたらここを改修\n      y: {\n        stacked: isStacked,\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n        },\n        ticks: {\n          precision: precision,\n        },\n      },\n    },\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const skipped = (ctx: any, value: any): any =>\n    ctx.p0.skip || ctx.p1.skip ? value : undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const down = (ctx: any, value: any): any =>\n    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;\n\n  const fillGaps = (data: { date: string; value: number | null }[]) => {\n    const filledData: { date: string; value: number | null }[] = [...data];\n\n    if (data.length > 1) {\n      const lastTime = new Date(data[data.length - 1].date).getTime();\n      const secondLastTime = new Date(data[data.length - 2].date).getTime();\n      const finalTimeDifference = (lastTime - secondLastTime) / (1000 * 60);\n\n      // 最後のデータポイントが大きなギャップを持つ場合にNaNを挿入\n      if (finalTimeDifference > dataIntervalMin) {\n        filledData.splice(filledData.length - 1, 0, {\n          date: new Date(secondLastTime + 1).toISOString(),\n          value: NaN,\n        });\n      }\n    }\n    return filledData;\n  };\n\n  // データセットの整形\n  const formattedDatasets = datasets.map((dataset) => {\n    const dataWithGaps = dataset.skipEmptyData\n      ? fillGaps(dataset.data)\n      : dataset.data;\n    return {\n      label: dataset.label,\n      data: dataWithGaps.map((item) => {\n        const date = new Date(item.date);\n        return { x: date, y: item.value };\n      }),\n      borderColor: dataset.borderColor,\n      backgroundColor: dataset.backgroundColor || dataset.borderColor,\n      tension: 0.4,\n      borderWidth: dataset.borderWidth || undefined,\n      fill: dataset.fill || false,\n      stack: dataset.stack || undefined,\n      pointRadius: 0,\n      spanGaps: dataset.skipEmptyData ? true : false,\n      segment: dataset.skipEmptyData\n        ? {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderColor: (ctx: any) =>\n              skipped(ctx, \"rgba(0,0,0,0.2)\") || down(ctx, dataset.borderColor),\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderDash: (ctx: any) => skipped(ctx, [6, 6]),\n          }\n        : undefined,\n    };\n  });\n\n  const chartJsData = {\n    datasets: formattedDatasets,\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (\n      datasets.length === 0 ||\n      (datasets.length === 1 && datasets[0].label === \"\")\n    ) {\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    <div className={styles.reportChart}>\n      <CardWithTitle title={title} spacingFromTitle={0}>\n        <Box className={styles.reportBox}>\n          <div className={styles.chart}>\n            <ChartData />\n          </div>\n        </Box>\n      </CardWithTitle>\n    </div>\n  );\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Filler","LineController","Title","ChartJSTooltip","Legend","TimeScale","chartColors","ReportChartMulti","props","datasets","xLabel","yLabel","xType","dataIntervalMin","chartMargin","tooltipFormatter","value","label","isLoading","title","precision","chartRef","useRef","isStacked","dataset","startDate","format","startOfDay","endDate","endOfDay","rangeOfDate","dayScaleOptions","otherScaleOptions","options","context","skipped","ctx","down","fillGaps","data","filledData","lastTime","secondLastTime","chartJsData","dataWithGaps","item","ChartData","jsx","styles","LineChartJS","CardWithTitle","Box"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/ReportChartMulti/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  ChartOptions,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\n\nimport \"chartjs-adapter-date-fns\";\n\nimport { endOfDay, format, startOfDay } from \"date-fns\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport { CardWithTitle } from \"../CardWithTitle\";\nimport styles from \"./index.module.scss\";\n\nexport type datasetType = {\n  label: string;\n  data: { date: string; value: number }[];\n  borderColor: string;\n  backgroundColor?: string;\n  borderWidth?: number;\n  fill?: boolean | number | string;\n  stack?: string;\n  skipEmptyData?: boolean;\n};\n\ntype Props = {\n  datasets: datasetType[];\n  xLabel: string;\n  yLabel: string;\n  dataIntervalMin?: number;\n  xType: \"day\" | \"week\" | \"month\" | \"year\";\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n  title: string; // Add title prop\n  precision?: number; // Y軸の小数点以下の桁数を指定\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  Filler,\n  LineController,\n  Title,\n  ChartJSTooltip,\n  Legend,\n  TimeScale, // TimeScaleを登録\n);\n\n// グラフで利用する標準色を定義\nexport const chartColors = {\n  red: \"rgb(255, 99, 132)\",\n  orange: \"rgb(255, 184, 76)\",\n  yellow: \"rgb(255, 205, 86)\",\n  green: \"rgb(102, 187, 106)\",\n  blue: \"rgb(41, 182, 246)\",\n  purple: \"rgb(153, 102, 255)\",\n  grey: \"rgb(201, 203, 207)\",\n  // 透過色（塗りつぶしに利用）\n  redTransparent: \"rgba(255, 99, 132, 0.5)\",\n  orangeTransparent: \"rgba(255, 184, 76, 0.5)\",\n  yellowTransparent: \"rgba(255, 205, 86, 0.5)\",\n  greenTransparent: \"rgba(102, 187, 106, 0.5)\",\n  blueTransparent: \"rgba(41, 182, 246, 0.5)\",\n  purpleTransparent: \"rgba(153, 102, 255, 0.5)\",\n  greyTransparent: \"rgba(201, 203, 207, 0.5)\",\n};\n\nexport const ReportChartMulti = (props: Props) => {\n  const {\n    datasets,\n    xLabel = \"\",\n    yLabel = \"\",\n    xType = \"day\",\n    dataIntervalMin = 5,\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    title, // Destructure title from props\n    precision,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  // stackにグループを追加している場合は、積み上げグラフとなる\n  const isStacked = datasets.some((dataset) => dataset.stack !== undefined);\n\n  // 時間の範囲を描画する基準として利用するダミーデータをdatasetsに追加\n  // TODO:現状はxTypeがdayの場合のみ対応している\n  if (xType === \"day\") {\n    const startDate = format(\n      startOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n    const endDate = format(\n      endOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n\n    const rangeOfDate = [\n      { date: startDate, value: 0 },\n      { date: endDate, value: 0 },\n    ];\n\n    datasets.unshift({\n      label: \"\",\n      data: rangeOfDate,\n      borderColor: \"rgba(0, 0, 0, 0)\", // 透明色\n    });\n  }\n\n  const dayScaleOptions = {\n    type: \"time\",\n    time: {\n      unit: \"minute\",\n      displayFormats: {\n        minute: \"HH:mm\",\n      },\n      tooltipFormat: \"HH:mm\",\n    },\n    title: {\n      display: true,\n      text: xLabel,\n    },\n    ticks: {\n      source: \"auto\",\n      autoSkip: true,\n      maxTicksLimit: 24,\n      callback: function (value: string | number): string {\n        const dateValue =\n          typeof value === \"string\" ? new Date(value) : new Date(value);\n        const hours = dateValue.getHours();\n        return `${hours}時`;\n      },\n    },\n  };\n\n  const otherScaleOptions = {\n    title: {\n      display: true,\n      text: xLabel,\n    },\n  };\n\n  const options: ChartOptions<\"line\"> = {\n    interaction: {\n      intersect: false,\n    },\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: false,\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: true,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            // 時間基準データはツールチップに表示させない\n            if (context.dataset.label === \"\") {\n              return \"\";\n            }\n            const label = context.dataset.label\n              ? `${context.dataset.label}`\n              : \"\";\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: xType === \"day\" ? dayScaleOptions : otherScaleOptions, // 実際使うTypeが増えたらここを改修\n      y: {\n        stacked: isStacked,\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n        },\n        ticks: {\n          precision: precision,\n        },\n      },\n    },\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const skipped = (ctx: any, value: any): any =>\n    ctx.p0.skip || ctx.p1.skip ? value : undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const down = (ctx: any, value: any): any =>\n    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;\n\n  const fillGaps = (data: { date: string; value: number | null }[]) => {\n    const filledData: { date: string; value: number | null }[] = [...data];\n\n    if (data.length > 1) {\n      const lastTime = new Date(data[data.length - 1].date).getTime();\n      const secondLastTime = new Date(data[data.length - 2].date).getTime();\n      const finalTimeDifference = (lastTime - secondLastTime) / (1000 * 60);\n\n      // 最後のデータポイントが大きなギャップを持つ場合にNaNを挿入\n      if (finalTimeDifference > dataIntervalMin) {\n        filledData.splice(filledData.length - 1, 0, {\n          date: new Date(secondLastTime + 1).toISOString(),\n          value: NaN,\n        });\n      }\n    }\n    return filledData;\n  };\n\n  // データセットの整形\n  const formattedDatasets = datasets.map((dataset) => {\n    const dataWithGaps = dataset.skipEmptyData\n      ? fillGaps(dataset.data)\n      : dataset.data;\n    return {\n      label: dataset.label,\n      data: dataWithGaps.map((item) => {\n        const date = new Date(item.date);\n        return { x: date, y: item.value };\n      }),\n      borderColor: dataset.borderColor,\n      backgroundColor: dataset.backgroundColor || dataset.borderColor,\n      tension: 0.4,\n      borderWidth: dataset.borderWidth || undefined,\n      fill: dataset.fill || false,\n      stack: dataset.stack || undefined,\n      pointRadius: 0,\n      spanGaps: dataset.skipEmptyData ? true : false,\n      segment: dataset.skipEmptyData\n        ? {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderColor: (ctx: any) =>\n              skipped(ctx, \"rgba(0,0,0,0.2)\") || down(ctx, dataset.borderColor),\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderDash: (ctx: any) => skipped(ctx, [6, 6]),\n          }\n        : undefined,\n    };\n  });\n\n  const chartJsData = {\n    datasets: formattedDatasets,\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (\n      datasets.length === 0 ||\n      (datasets.length === 1 && datasets[0].label === \"\")\n    ) {\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    <div className={styles.reportChart}>\n      <CardWithTitle title={title} spacingFromTitle={0}>\n        <Box className={styles.reportBox}>\n          <div className={styles.chart}>\n            <ChartData />\n          </div>\n        </Box>\n      </CardWithTitle>\n    </div>\n  );\n};\n\nexport default ReportChartMulti;"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Filler","LineController","Title","ChartJSTooltip","Legend","TimeScale","chartColors","ReportChartMulti","props","datasets","xLabel","yLabel","xType","dataIntervalMin","chartMargin","tooltipFormatter","value","label","isLoading","title","precision","chartRef","useRef","isStacked","dataset","startDate","format","startOfDay","endDate","endOfDay","rangeOfDate","dayScaleOptions","otherScaleOptions","options","context","skipped","ctx","down","fillGaps","data","filledData","lastTime","secondLastTime","chartJsData","dataWithGaps","item","ChartData","jsx","styles","LineChartJS","CardWithTitle","Box"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index6.css');const e=require("react/jsx-runtime"),h=require("@mui/icons-material/ExpandMore"),x=require("@mui/icons-material/Search"),n=require("@mui/material"),_=require("../FlexButtons/index.cjs.js"),p="_container_89suu_1",j="_header_89suu_6",b="_mainContent_89suu_19",F="_searchForm_89suu_27",I="_inputItems_89suu_33",t={container:p,header:j,mainContent:b,searchForm:F,inputItems:I},s=({headerTitle:r,children:c,defaultExpanded:a,handleSubmit:i,onSubmitSearch:u,onClickClear:o})=>{const d=()=>{o&&o()},l=i(m=>{u(m)});return e.jsxs(n.Accordion,{defaultExpanded:a,className:t.container,children:[e.jsx(n.AccordionSummary,{className:t.header,"aria-controls":"panel-content",expandIcon:e.jsx(h,{}),children:r||"絞り込み"}),e.jsx(n.AccordionDetails,{className:t.mainContent,children:e.jsxs("form",{className:t.searchForm,onSubmit:l,children:[e.jsx("div",{className:t.inputItems,children:c}),e.jsxs(_.FlexButtons,{position:"flex-end",children:[e.jsx(n.Button,{onClick:d,variant:"outlined",sx:{p:1,background:"white",color:"#6672e8",borderBlockColor:"#6672e8",width:"128px"},children:"クリア"}),e.jsx(n.Button,{type:"submit",variant:"contained",startIcon:e.jsx(x,{}),sx:{background:"#6672e8",color:"white",":hover":{background:"#6672e8"},width:"128px"},children:"検索"})]})]})})]})};exports.SearchForm=s;exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index6.css');const e=require("react/jsx-runtime"),s=require("@mui/icons-material"),n=require("@mui/material"),x=require("../FlexButtons/index.cjs.js"),_="_container_89suu_1",p="_header_89suu_6",j="_mainContent_89suu_19",b="_searchForm_89suu_27",F="_inputItems_89suu_33",t={container:_,header:p,mainContent:j,searchForm:b,inputItems:F},r=({headerTitle:c,children:a,defaultExpanded:i,handleSubmit:u,onSubmitSearch:l,onClickClear:o})=>{const d=()=>{o&&o()},m=u(h=>{l(h)});return e.jsxs(n.Accordion,{defaultExpanded:i,className:t.container,children:[e.jsx(n.AccordionSummary,{className:t.header,"aria-controls":"panel-content",expandIcon:e.jsx(s.ExpandMore,{}),children:c||"絞り込み"}),e.jsx(n.AccordionDetails,{className:t.mainContent,children:e.jsxs("form",{className:t.searchForm,onSubmit:m,children:[e.jsx("div",{className:t.inputItems,children:a}),e.jsxs(x.FlexButtons,{position:"flex-end",children:[e.jsx(n.Button,{onClick:d,variant:"outlined",sx:{p:1,background:"white",color:"#6672e8",borderBlockColor:"#6672e8",width:"128px"},children:"クリア"}),e.jsx(n.Button,{type:"submit",variant:"contained",startIcon:e.jsx(s.Search,{}),sx:{background:"#6672e8",color:"white",":hover":{background:"#6672e8"},width:"128px"},children:"検索"})]})]})})]})};exports.SearchForm=r;exports.default=r;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/SearchForm/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Button,\n} from \"@mui/material\";\nimport { type FieldValues, type useForm } from \"react-hook-form\";\n\nimport { FlexButtons } from \"../FlexButtons\";\nimport styles from \"./index.module.scss\";\n\ntype Props<T extends FieldValues = FieldValues> = {\n  headerTitle?: string;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  handleSubmit: ReturnType<typeof useForm<T>>[\"handleSubmit\"];\n  onSubmitSearch: (data: T) => void;\n  onClickClear?: () => void;\n};\n\nexport const SearchForm = <T extends FieldValues = FieldValues>({\n  headerTitle,\n  children,\n  defaultExpanded,\n  handleSubmit,\n  onSubmitSearch,\n  onClickClear,\n}: Props<T>) => {\n  const handleClear = () => {\n    if (onClickClear) {\n      onClickClear();\n    }\n  };\n\n  const handle = handleSubmit((data) => {\n    onSubmitSearch(data);\n  });\n\n  return (\n    <Accordion defaultExpanded={defaultExpanded} className={styles.container}>\n      <AccordionSummary\n        className={styles.header}\n        aria-controls=\"panel-content\"\n        expandIcon={<ExpandMoreIcon />}\n      >\n        {headerTitle || \"絞り込み\"}\n      </AccordionSummary>\n      <AccordionDetails className={styles.mainContent}>\n        <form className={styles.searchForm} onSubmit={handle}>\n          <div className={styles.inputItems}>{children}</div>\n          <FlexButtons position=\"flex-end\">\n            <Button\n              onClick={handleClear}\n              variant=\"outlined\"\n              sx={{\n                p: 1,\n                background: \"white\",\n                color: \"#6672e8\",\n                borderBlockColor: \"#6672e8\",\n                width: \"128px\",\n              }}\n            >\n              クリア\n            </Button>\n            <Button\n              type=\"submit\"\n              variant=\"contained\"\n              startIcon={<SearchIcon />}\n              sx={{\n                background: \"#6672e8\",\n                color: \"white\",\n                \":hover\": { background: \"#6672e8\" },\n                width: \"128px\",\n              }}\n            >\n              検索\n            </Button>\n          </FlexButtons>\n        </form>\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n\nexport default SearchForm;\n"],"names":["SearchForm","headerTitle","children","defaultExpanded","handleSubmit","onSubmitSearch","onClickClear","handleClear","handle","data","jsxs","Accordion","styles","jsx","AccordionSummary","ExpandMoreIcon","AccordionDetails","FlexButtons","Button","SearchIcon"],"mappings":"ieAuBaA,EAAa,CAAsC,CAC9D,YAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,eAAAC,EACA,aAAAC,CACF,IAAgB,CACd,MAAMC,EAAc,IAAM,CACpBD,GACWA,EAAA,CAEjB,EAEME,EAASJ,EAAcK,GAAS,CACpCJ,EAAeI,CAAI,CAAA,CACpB,EAED,OACGC,EAAAA,KAAAC,EAAAA,UAAA,CAAU,gBAAAR,EAAkC,UAAWS,EAAO,UAC7D,SAAA,CAAAC,EAAA,IAACC,EAAA,iBAAA,CACC,UAAWF,EAAO,OAClB,gBAAc,gBACd,iBAAaG,EAAe,EAAA,EAE3B,SAAed,GAAA,MAAA,CAClB,EACAY,EAAA,IAACG,EAAiB,iBAAA,CAAA,UAAWJ,EAAO,YAClC,SAACF,EAAAA,KAAA,OAAA,CAAK,UAAWE,EAAO,WAAY,SAAUJ,EAC5C,SAAA,CAAAK,EAAA,IAAC,MAAI,CAAA,UAAWD,EAAO,WAAa,SAAAV,EAAS,EAC7CQ,EAAAA,KAACO,EAAAA,YAAY,CAAA,SAAS,WACpB,SAAA,CAAAJ,EAAA,IAACK,EAAA,OAAA,CACC,QAASX,EACT,QAAQ,WACR,GAAI,CACF,EAAG,EACH,WAAY,QACZ,MAAO,UACP,iBAAkB,UAClB,MAAO,OACT,EACD,SAAA,KAAA,CAED,EACAM,EAAA,IAACK,EAAA,OAAA,CACC,KAAK,SACL,QAAQ,YACR,gBAAYC,EAAW,EAAA,EACvB,GAAI,CACF,WAAY,UACZ,MAAO,QACP,SAAU,CAAE,WAAY,SAAU,EAClC,MAAO,OACT,EACD,SAAA,IAAA,CAAA,CAED,CACF,CAAA,CAAA,CAAA,CACF,CACF,CAAA,CAAA,EACF,CAEJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/SearchForm/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { ExpandMore, Search } from \"@mui/icons-material\";\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Button,\n} from \"@mui/material\";\nimport { type FieldValues, type useForm } from \"react-hook-form\";\n\nimport { FlexButtons } from \"../FlexButtons\";\nimport styles from \"./index.module.scss\";\n\ntype Props<T extends FieldValues = FieldValues> = {\n  headerTitle?: string;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  handleSubmit: ReturnType<typeof useForm<T>>[\"handleSubmit\"];\n  onSubmitSearch: (data: T) => void;\n  onClickClear?: () => void;\n};\n\nexport const SearchForm = <T extends FieldValues = FieldValues>({\n  headerTitle,\n  children,\n  defaultExpanded,\n  handleSubmit,\n  onSubmitSearch,\n  onClickClear,\n}: Props<T>) => {\n  const handleClear = () => {\n    if (onClickClear) {\n      onClickClear();\n    }\n  };\n\n  const handle = handleSubmit((data) => {\n    onSubmitSearch(data);\n  });\n\n  return (\n    <Accordion defaultExpanded={defaultExpanded} className={styles.container}>\n      <AccordionSummary\n        className={styles.header}\n        aria-controls=\"panel-content\"\n        expandIcon={<ExpandMore />}\n      >\n        {headerTitle || \"絞り込み\"}\n      </AccordionSummary>\n      <AccordionDetails className={styles.mainContent}>\n        <form className={styles.searchForm} onSubmit={handle}>\n          <div className={styles.inputItems}>{children}</div>\n          <FlexButtons position=\"flex-end\">\n            <Button\n              onClick={handleClear}\n              variant=\"outlined\"\n              sx={{\n                p: 1,\n                background: \"white\",\n                color: \"#6672e8\",\n                borderBlockColor: \"#6672e8\",\n                width: \"128px\",\n              }}\n            >\n              クリア\n            </Button>\n            <Button\n              type=\"submit\"\n              variant=\"contained\"\n              startIcon={<Search />}\n              sx={{\n                background: \"#6672e8\",\n                color: \"white\",\n                \":hover\": { background: \"#6672e8\" },\n                width: \"128px\",\n              }}\n            >\n              検索\n            </Button>\n          </FlexButtons>\n        </form>\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n\nexport default SearchForm;\n"],"names":["SearchForm","headerTitle","children","defaultExpanded","handleSubmit","onSubmitSearch","onClickClear","handleClear","handle","data","jsxs","Accordion","styles","jsx","AccordionSummary","ExpandMore","AccordionDetails","FlexButtons","Button","Search"],"mappings":"8aAsBaA,EAAa,CAAsC,CAC9D,YAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,eAAAC,EACA,aAAAC,CACF,IAAgB,CACd,MAAMC,EAAc,IAAM,CACpBD,GACWA,EAAA,CAEjB,EAEME,EAASJ,EAAcK,GAAS,CACpCJ,EAAeI,CAAI,CAAA,CACpB,EAED,OACGC,EAAAA,KAAAC,EAAAA,UAAA,CAAU,gBAAAR,EAAkC,UAAWS,EAAO,UAC7D,SAAA,CAAAC,EAAA,IAACC,EAAA,iBAAA,CACC,UAAWF,EAAO,OAClB,gBAAc,gBACd,iBAAaG,EAAW,WAAA,EAAA,EAEvB,SAAed,GAAA,MAAA,CAClB,EACAY,EAAA,IAACG,EAAiB,iBAAA,CAAA,UAAWJ,EAAO,YAClC,SAACF,EAAAA,KAAA,OAAA,CAAK,UAAWE,EAAO,WAAY,SAAUJ,EAC5C,SAAA,CAAAK,EAAA,IAAC,MAAI,CAAA,UAAWD,EAAO,WAAa,SAAAV,EAAS,EAC7CQ,EAAAA,KAACO,EAAAA,YAAY,CAAA,SAAS,WACpB,SAAA,CAAAJ,EAAA,IAACK,EAAA,OAAA,CACC,QAASX,EACT,QAAQ,WACR,GAAI,CACF,EAAG,EACH,WAAY,QACZ,MAAO,UACP,iBAAkB,UAClB,MAAO,OACT,EACD,SAAA,KAAA,CAED,EACAM,EAAA,IAACK,EAAA,OAAA,CACC,KAAK,SACL,QAAQ,YACR,gBAAYC,EAAO,OAAA,EAAA,EACnB,GAAI,CACF,WAAY,UACZ,MAAO,QACP,SAAU,CAAE,WAAY,SAAU,EAClC,MAAO,OACT,EACD,SAAA,IAAA,CAAA,CAED,CACF,CAAA,CAAA,CAAA,CACF,CACF,CAAA,CAAA,EACF,CAEJ"}

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

@@ -1,17 +1,16 @@
-import { jsxs as e, jsx as n } from "react/jsx-runtime";
-import h from "@mui/icons-material/ExpandMore";
-import p from "@mui/icons-material/Search";
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { ExpandMore as h, Search as p } from "@mui/icons-material";
 import { Accordion as _, AccordionSummary as x, AccordionDetails as f, Button as r } from "@mui/material";
-import { FlexButtons as I } from "../FlexButtons/index.es.js";
-import '../../assets/index6.css';const b = "_container_89suu_1", F = "_header_89suu_6", C = "_mainContent_89suu_19", N = "_searchForm_89suu_27", k = "_inputItems_89suu_33", o = {
-  container: b,
-  header: F,
+import { FlexButtons as b } from "../FlexButtons/index.es.js";
+import '../../assets/index6.css';const F = "_container_89suu_1", I = "_header_89suu_6", C = "_mainContent_89suu_19", N = "_searchForm_89suu_27", k = "_inputItems_89suu_33", e = {
+  container: F,
+  header: I,
   mainContent: C,
   searchForm: N,
   inputItems: k
-}, A = ({
-  headerTitle: c,
-  children: a,
+}, y = ({
+  headerTitle: a,
+  children: c,
   defaultExpanded: s,
   handleSubmit: i,
   onSubmitSearch: m,
@@ -22,19 +21,19 @@ import '../../assets/index6.css';const b = "_container_89suu_1", F = "_header_89
   }, l = i((u) => {
     m(u);
   });
-  return /* @__PURE__ */ e(_, { defaultExpanded: s, className: o.container, children: [
+  return /* @__PURE__ */ o(_, { defaultExpanded: s, className: e.container, children: [
     /* @__PURE__ */ n(
       x,
       {
-        className: o.header,
+        className: e.header,
         "aria-controls": "panel-content",
         expandIcon: /* @__PURE__ */ n(h, {}),
-        children: c || "絞り込み"
+        children: a || "絞り込み"
       }
     ),
-    /* @__PURE__ */ n(f, { className: o.mainContent, children: /* @__PURE__ */ e("form", { className: o.searchForm, onSubmit: l, children: [
-      /* @__PURE__ */ n("div", { className: o.inputItems, children: a }),
-      /* @__PURE__ */ e(I, { position: "flex-end", children: [
+    /* @__PURE__ */ n(f, { className: e.mainContent, children: /* @__PURE__ */ o("form", { className: e.searchForm, onSubmit: l, children: [
+      /* @__PURE__ */ n("div", { className: e.inputItems, children: c }),
+      /* @__PURE__ */ o(b, { position: "flex-end", children: [
         /* @__PURE__ */ n(
           r,
           {
@@ -70,7 +69,7 @@ import '../../assets/index6.css';const b = "_container_89suu_1", F = "_header_89
   ] });
 };
 export {
-  A as SearchForm,
-  A as default
+  y as SearchForm,
+  y as default
 };
 //# sourceMappingURL=index.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/SearchForm/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Button,\n} from \"@mui/material\";\nimport { type FieldValues, type useForm } from \"react-hook-form\";\n\nimport { FlexButtons } from \"../FlexButtons\";\nimport styles from \"./index.module.scss\";\n\ntype Props<T extends FieldValues = FieldValues> = {\n  headerTitle?: string;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  handleSubmit: ReturnType<typeof useForm<T>>[\"handleSubmit\"];\n  onSubmitSearch: (data: T) => void;\n  onClickClear?: () => void;\n};\n\nexport const SearchForm = <T extends FieldValues = FieldValues>({\n  headerTitle,\n  children,\n  defaultExpanded,\n  handleSubmit,\n  onSubmitSearch,\n  onClickClear,\n}: Props<T>) => {\n  const handleClear = () => {\n    if (onClickClear) {\n      onClickClear();\n    }\n  };\n\n  const handle = handleSubmit((data) => {\n    onSubmitSearch(data);\n  });\n\n  return (\n    <Accordion defaultExpanded={defaultExpanded} className={styles.container}>\n      <AccordionSummary\n        className={styles.header}\n        aria-controls=\"panel-content\"\n        expandIcon={<ExpandMoreIcon />}\n      >\n        {headerTitle || \"絞り込み\"}\n      </AccordionSummary>\n      <AccordionDetails className={styles.mainContent}>\n        <form className={styles.searchForm} onSubmit={handle}>\n          <div className={styles.inputItems}>{children}</div>\n          <FlexButtons position=\"flex-end\">\n            <Button\n              onClick={handleClear}\n              variant=\"outlined\"\n              sx={{\n                p: 1,\n                background: \"white\",\n                color: \"#6672e8\",\n                borderBlockColor: \"#6672e8\",\n                width: \"128px\",\n              }}\n            >\n              クリア\n            </Button>\n            <Button\n              type=\"submit\"\n              variant=\"contained\"\n              startIcon={<SearchIcon />}\n              sx={{\n                background: \"#6672e8\",\n                color: \"white\",\n                \":hover\": { background: \"#6672e8\" },\n                width: \"128px\",\n              }}\n            >\n              検索\n            </Button>\n          </FlexButtons>\n        </form>\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n\nexport default SearchForm;\n"],"names":["SearchForm","headerTitle","children","defaultExpanded","handleSubmit","onSubmitSearch","onClickClear","handleClear","handle","data","jsxs","Accordion","styles","jsx","AccordionSummary","ExpandMoreIcon","AccordionDetails","FlexButtons","Button","SearchIcon"],"mappings":";;;;;;;;;;;GAuBaA,IAAa,CAAsC;AAAA,EAC9D,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AACF,MAAgB;AACd,QAAMC,IAAc,MAAM;AACxB,IAAID,KACWA,EAAA;AAAA,EAEjB,GAEME,IAASJ,EAAa,CAACK,MAAS;AACpC,IAAAJ,EAAeI,CAAI;AAAA,EAAA,CACpB;AAED,SACG,gBAAAC,EAAAC,GAAA,EAAU,iBAAAR,GAAkC,WAAWS,EAAO,WAC7D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWF,EAAO;AAAA,QAClB,iBAAc;AAAA,QACd,8BAAaG,GAAe,EAAA;AAAA,QAE3B,UAAed,KAAA;AAAA,MAAA;AAAA,IAClB;AAAA,IACA,gBAAAY,EAACG,GAAiB,EAAA,WAAWJ,EAAO,aAClC,UAAC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,YAAY,UAAUJ,GAC5C,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAI,EAAA,WAAWD,EAAO,YAAa,UAAAV,GAAS;AAAA,MAC7C,gBAAAQ,EAACO,GAAY,EAAA,UAAS,YACpB,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAASX;AAAA,YACT,SAAQ;AAAA,YACR,IAAI;AAAA,cACF,GAAG;AAAA,cACH,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,kBAAkB;AAAA,cAClB,OAAO;AAAA,YACT;AAAA,YACD,UAAA;AAAA,UAAA;AAAA,QAED;AAAA,QACA,gBAAAM;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,6BAAYC,GAAW,EAAA;AAAA,YACvB,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU,EAAE,YAAY,UAAU;AAAA,cAClC,OAAO;AAAA,YACT;AAAA,YACD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,EACF,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/SearchForm/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { ExpandMore, Search } from \"@mui/icons-material\";\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Button,\n} from \"@mui/material\";\nimport { type FieldValues, type useForm } from \"react-hook-form\";\n\nimport { FlexButtons } from \"../FlexButtons\";\nimport styles from \"./index.module.scss\";\n\ntype Props<T extends FieldValues = FieldValues> = {\n  headerTitle?: string;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  handleSubmit: ReturnType<typeof useForm<T>>[\"handleSubmit\"];\n  onSubmitSearch: (data: T) => void;\n  onClickClear?: () => void;\n};\n\nexport const SearchForm = <T extends FieldValues = FieldValues>({\n  headerTitle,\n  children,\n  defaultExpanded,\n  handleSubmit,\n  onSubmitSearch,\n  onClickClear,\n}: Props<T>) => {\n  const handleClear = () => {\n    if (onClickClear) {\n      onClickClear();\n    }\n  };\n\n  const handle = handleSubmit((data) => {\n    onSubmitSearch(data);\n  });\n\n  return (\n    <Accordion defaultExpanded={defaultExpanded} className={styles.container}>\n      <AccordionSummary\n        className={styles.header}\n        aria-controls=\"panel-content\"\n        expandIcon={<ExpandMore />}\n      >\n        {headerTitle || \"絞り込み\"}\n      </AccordionSummary>\n      <AccordionDetails className={styles.mainContent}>\n        <form className={styles.searchForm} onSubmit={handle}>\n          <div className={styles.inputItems}>{children}</div>\n          <FlexButtons position=\"flex-end\">\n            <Button\n              onClick={handleClear}\n              variant=\"outlined\"\n              sx={{\n                p: 1,\n                background: \"white\",\n                color: \"#6672e8\",\n                borderBlockColor: \"#6672e8\",\n                width: \"128px\",\n              }}\n            >\n              クリア\n            </Button>\n            <Button\n              type=\"submit\"\n              variant=\"contained\"\n              startIcon={<Search />}\n              sx={{\n                background: \"#6672e8\",\n                color: \"white\",\n                \":hover\": { background: \"#6672e8\" },\n                width: \"128px\",\n              }}\n            >\n              検索\n            </Button>\n          </FlexButtons>\n        </form>\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n\nexport default SearchForm;\n"],"names":["SearchForm","headerTitle","children","defaultExpanded","handleSubmit","onSubmitSearch","onClickClear","handleClear","handle","data","jsxs","Accordion","styles","jsx","AccordionSummary","ExpandMore","AccordionDetails","FlexButtons","Button","Search"],"mappings":";;;;;;;;;;GAsBaA,IAAa,CAAsC;AAAA,EAC9D,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AACF,MAAgB;AACd,QAAMC,IAAc,MAAM;AACxB,IAAID,KACWA,EAAA;AAAA,EAEjB,GAEME,IAASJ,EAAa,CAACK,MAAS;AACpC,IAAAJ,EAAeI,CAAI;AAAA,EAAA,CACpB;AAED,SACG,gBAAAC,EAAAC,GAAA,EAAU,iBAAAR,GAAkC,WAAWS,EAAO,WAC7D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWF,EAAO;AAAA,QAClB,iBAAc;AAAA,QACd,8BAAaG,GAAW,EAAA;AAAA,QAEvB,UAAed,KAAA;AAAA,MAAA;AAAA,IAClB;AAAA,IACA,gBAAAY,EAACG,GAAiB,EAAA,WAAWJ,EAAO,aAClC,UAAC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,YAAY,UAAUJ,GAC5C,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAI,EAAA,WAAWD,EAAO,YAAa,UAAAV,GAAS;AAAA,MAC7C,gBAAAQ,EAACO,GAAY,EAAA,UAAS,YACpB,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAASX;AAAA,YACT,SAAQ;AAAA,YACR,IAAI;AAAA,cACF,GAAG;AAAA,cACH,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,kBAAkB;AAAA,cAClB,OAAO;AAAA,YACT;AAAA,YACD,UAAA;AAAA,UAAA;AAAA,QAED;AAAA,QACA,gBAAAM;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,6BAAYC,GAAO,EAAA;AAAA,YACnB,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU,EAAE,YAAY,UAAU;AAAA,cAClC,OAAO;AAAA,YACT;AAAA,YACD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,EACF,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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/Clear"),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:C}=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:{...C},renderValue:()=>{var o;const e=r.value;if(t&&Array.isArray(e)){if(e.length)return e.map(M=>{var h;return(h=i.find(S=>S.value===M))==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,{})}),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 ClearIcon from \"@mui/icons-material/Clear\";\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                  <ClearIcon />\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","ClearIcon","m","MenuItem","FormHelperText"],"mappings":"2RA2CaA,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,EAAU,CAAA,CAAA,CAAA,CACb,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"}