@jigowatts/jigowatts-ui 0.0.1-12

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

@@ -0,0 +1,19 @@
+import { DialogProps as MuiDialogProps } from '@mui/material';
+import { ReactNode } from 'react';
+
+export type ConfirmDialogResult = "confirm" | "cancel";
+type Props = {
+    /** ダイアログのタイトル */
+    dialogTitle: ReactNode;
+    /** ダイアログの内容 */
+    dialogContent: ReactNode;
+    /** ダイアログの処理ボタン（複数可） */
+    dialogActions: ReactNode;
+    /** ダイアログの表示状態 */
+    open: boolean;
+    /** 閉じた時のhandler */
+    onCloseDialog: (result: ConfirmDialogResult) => void;
+} & MuiDialogProps;
+/** MuiDialogを継承したコンテントのスクロール可能なDialogです。 */
+export declare const ScrollableDialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default ScrollableDialog;

package/dist/components/ScrollableDialog/index.js

@@ -0,0 +1,42 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { Dialog as d, DialogTitle as c, DialogContent as g, DialogContentText as p, DialogActions as x } from "@mui/material";
+const h = (o) => {
+  const {
+    dialogTitle: i,
+    dialogContent: e,
+    dialogActions: a,
+    open: r,
+    onCloseDialog: t,
+    ...n
+  } = o;
+  return /* @__PURE__ */ s(
+    d,
+    {
+      ...n,
+      open: r,
+      onClose: () => t("cancel"),
+      scroll: "paper",
+      "aria-labelledby": "scroll-dialog-title",
+      "aria-describedby": "scroll-dialog-description",
+      children: [
+        /* @__PURE__ */ l(
+          c,
+          {
+            sx: {
+              display: "flex",
+              gap: "5px",
+              alignItems: "center"
+            },
+            children: i
+          }
+        ),
+        /* @__PURE__ */ l(g, { dividers: !0, children: /* @__PURE__ */ l(p, { tabIndex: -1, children: e }) }),
+        /* @__PURE__ */ l(x, { sx: { gap: "10px" }, children: a })
+      ]
+    }
+  );
+};
+export {
+  h as ScrollableDialog,
+  h as default
+};

package/dist/components/ScrollableDialog/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ScrollableDialog/index.test.js

@@ -0,0 +1,59 @@
+import { jsx as e, jsxs as r, Fragment as d } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { a as c, s as n, f as a } from "../../react.esm-C8amP77L.js";
+import { ScrollableDialog as s } from "./index.js";
+describe("ScrollableDialog", () => {
+  it("renders correctly", () => {
+    const t = "Test Title", o = "Test Content", i = /* @__PURE__ */ e("button", { children: "Test Action" }), { getByText: l } = c(
+      /* @__PURE__ */ e(
+        s,
+        {
+          dialogTitle: t,
+          dialogContent: o,
+          dialogActions: i,
+          open: !0,
+          onCloseDialog: () => {
+          }
+        }
+      )
+    );
+    expect(l(t)).toBeInTheDocument(), expect(l(o)).toBeInTheDocument(), expect(l("Test Action")).toBeInTheDocument();
+  }), it('calls onClose with "cancel" when the dialog is closed', () => {
+    const t = jest.fn();
+    c(
+      /* @__PURE__ */ e(
+        s,
+        {
+          open: !0,
+          dialogTitle: "Test Dialog",
+          dialogContent: "This is a test dialog.",
+          dialogActions: /* @__PURE__ */ e("button", { onClick: () => t("cancel"), children: "Cancel" }),
+          onCloseDialog: t
+        }
+      )
+    );
+    const o = n.getByRole("button", { name: /cancel/i });
+    a.click(o), expect(t).toHaveBeenCalledWith("cancel");
+  }), it("displays the dialog when the open button is clicked", () => {
+    c(/* @__PURE__ */ e(() => {
+      const [o, i] = g(!1);
+      return /* @__PURE__ */ r(d, { children: [
+        /* @__PURE__ */ e("button", { onClick: () => i(!0), children: "Open!" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            open: o,
+            dialogTitle: "Test Dialog",
+            dialogContent: "This is a test dialog.",
+            dialogActions: /* @__PURE__ */ e("button", { onClick: () => {
+            }, children: "Close" }),
+            onCloseDialog: () => {
+            }
+          }
+        )
+      ] });
+    }, {})), expect(
+      n.queryByText("This is a test dialog.")
+    ).not.toBeInTheDocument(), a.click(n.getByText("Open!")), expect(n.getByText("This is a test dialog.")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { FieldValues, useForm } from 'react-hook-form';
+import { ReactNode } from 'react';
+
+type Props = {
+    headerTitle?: string;
+    children: ReactNode;
+    defaultExpanded?: boolean;
+    handleSubmit: ReturnType<typeof useForm>["handleSubmit"];
+    onSubmitSearch: (data: FieldValues) => void;
+    onClickClear?: () => void;
+};
+export declare const SearchForm: ({ headerTitle, children, defaultExpanded, handleSubmit, onSubmitSearch, onClickClear, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SearchForm;

package/dist/components/SearchForm/index.js

@@ -0,0 +1,86 @@
+import p, { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { A as f, a as v, d as x, b } from "../../AccordionSummary-B4zooGpd.js";
+import { i as B } from "../../styled-CWju4EfZ.js";
+import { r as S } from "../../createSvgIcon-Dj8zNxRS.js";
+import { Button as a } from "@mui/material";
+import { FlexButtons as C } from "../FlexButtons/index.js";
+import '../../assets/index21.css';var o = {}, I = B;
+Object.defineProperty(o, "__esModule", {
+  value: !0
+});
+var s = o.default = void 0, F = I(S()), g = p;
+s = o.default = (0, F.default)(/* @__PURE__ */ (0, g.jsx)("path", {
+  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+}), "Search");
+const j = "_container_89suu_1", N = "_header_89suu_6", k = "_mainContent_89suu_19", q = "_searchForm_89suu_27", w = "_inputItems_89suu_33", y = "_clearButton_89suu_39", A = "_submitButton_89suu_48", t = {
+  container: j,
+  header: N,
+  mainContent: k,
+  searchForm: q,
+  inputItems: w,
+  clearButton: y,
+  submitButton: A
+}, L = ({
+  headerTitle: c,
+  children: i,
+  defaultExpanded: u,
+  handleSubmit: l,
+  onSubmitSearch: m,
+  onClickClear: n
+}) => {
+  const d = () => {
+    n && n();
+  }, _ = l((h) => {
+    m(h);
+  });
+  return /* @__PURE__ */ r(f, { defaultExpanded: u, className: t.container, children: [
+    /* @__PURE__ */ e(
+      v,
+      {
+        className: t.header,
+        "aria-controls": "panel-content",
+        expandIcon: /* @__PURE__ */ e(x, {}),
+        children: c || "絞り込み"
+      }
+    ),
+    /* @__PURE__ */ e(b, { className: t.mainContent, children: /* @__PURE__ */ r("form", { className: t.searchForm, onSubmit: _, children: [
+      /* @__PURE__ */ e("div", { className: t.inputItems, children: i }),
+      /* @__PURE__ */ r(C, { position: "flex-end", children: [
+        /* @__PURE__ */ e(
+          a,
+          {
+            onClick: d,
+            variant: "outlined",
+            sx: {
+              p: 1,
+              background: "white",
+              color: "#6672e8",
+              borderBlockColor: "#6672e8",
+              width: "128px"
+            },
+            children: "クリア"
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            type: "submit",
+            variant: "contained",
+            startIcon: /* @__PURE__ */ e(s, {}),
+            sx: {
+              background: "#6672e8",
+              color: "white",
+              ":hover": { background: "#6672e8" },
+              width: "128px"
+            },
+            children: "検索"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  L as SearchForm,
+  L as default
+};

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

@@ -0,0 +1,18 @@
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+export type SelectBoxValue = {
+    label: string;
+    value: string | number;
+};
+type Props = {
+    id?: string;
+    name?: string;
+    values: SelectBoxValue[];
+    register?: UseFormRegisterReturn;
+    errorMessage?: string;
+    placeholder?: string;
+    defaultValue?: SelectBoxValue["value"];
+    onChange?: (selectedOption: SelectBoxValue) => void;
+};
+export declare const SelectBox: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default SelectBox;

package/dist/components/SelectBox/index.js

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import "../../index-DWRHnq8_.js";
+import { S as a, S as m } from "../../index-CQDJfJT1.js";
+export {
+  a as SelectBox,
+  m as default
+};

package/dist/components/SelectBox/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SelectBox/index.test.js

@@ -0,0 +1,34 @@
+import { jsx as s } from "react/jsx-runtime";
+import { a as n, s as t } from "../../react.esm-C8amP77L.js";
+import { s as p, S as c } from "../../index-CQDJfJT1.js";
+describe("SelectBox component", () => {
+  const o = [
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" }
+  ], a = "test-selectbox", i = "test-name";
+  it("renders the select box with correct options", () => {
+    n(/* @__PURE__ */ s(c, { id: a, name: i, values: o }));
+    const e = t.getByRole("combobox");
+    expect(e).toHaveAttribute("id", a), expect(e).toHaveAttribute("name", i), o.forEach(({ label: r, value: x }) => {
+      const l = t.getByText(r);
+      expect(l).toBeInTheDocument(), expect(l).toHaveAttribute("value", x);
+    });
+  }), it("shows error message when provided", () => {
+    const e = "Error message";
+    n(/* @__PURE__ */ s(c, { values: o, errorMessage: e }));
+    const r = t.getByText(e);
+    expect(r).toBeInTheDocument();
+  }), it("does not show error message when not provided", () => {
+    n(/* @__PURE__ */ s(c, { values: o }));
+    const e = t.queryByText(/Error message/i);
+    expect(e).not.toBeInTheDocument();
+  }), it("applies the error class to select box when errorMessage is provided", () => {
+    n(/* @__PURE__ */ s(c, { values: o, errorMessage: "Error message" }));
+    const r = t.getByRole("combobox");
+    expect(r).toHaveClass(p.error);
+  }), it("does not apply the error class to select box when errorMessage is not provided", () => {
+    n(/* @__PURE__ */ s(c, { values: o }));
+    const e = t.getByRole("combobox");
+    expect(e).not.toHaveClass(p.error);
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Control } from 'react-hook-form';
+import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
+
+export type SelectBoxOption = {
+    readonly label: string;
+    readonly value: string | number;
+};
+type Props = {
+    control: Control;
+    name: string;
+    options: SelectBoxOption[];
+    defaultValue?: SelectBoxOption["value"][] | (SelectBoxOption["value"] | null);
+    emptyValue?: [] | null | undefined;
+    isMulti: boolean;
+    placeholder?: string;
+    onChange?: (event: SelectChangeEvent<unknown>, child: React.ReactNode) => void;
+    onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+};
+export declare const SelectBoxController: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default SelectBoxController;

package/dist/components/SelectBoxController/index.js

@@ -0,0 +1,87 @@
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { FormControl as I, Select as V, IconButton as j, MenuItem as v, FormHelperText as A } from "@mui/material";
+import { C as B } from "../../index.esm-ChwJSgnF.js";
+import { C as _ } from "../../index-kvi6aotO.js";
+import '../../assets/index2.css';const F = "_placeholder_egyvt_6", S = {
+  placeholder: F
+}, N = (h) => {
+  const {
+    control: y,
+    name: x,
+    options: t,
+    defaultValue: C,
+    isMulti: o,
+    placeholder: b,
+    emptyValue: f,
+    onChange: a,
+    onClear: i
+  } = h, s = (r) => Array.isArray(r) && r.length || !o && r;
+  return /* @__PURE__ */ l(
+    B,
+    {
+      control: y,
+      name: x,
+      defaultValue: C,
+      render: ({ field: r, fieldState: c }) => {
+        var u;
+        return /* @__PURE__ */ d(I, { error: c.invalid, children: [
+          /* @__PURE__ */ l(
+            V,
+            {
+              ...r,
+              onChange: (e, n) => {
+                r.onChange(e, n), a == null || a(e, n);
+              },
+              multiple: o,
+              size: "small",
+              value: r.value ?? null,
+              displayEmpty: !0,
+              renderValue: (e) => {
+                var n;
+                if (o) {
+                  if (e != null && e.length)
+                    return e.map(
+                      (g) => {
+                        var p;
+                        return (p = t.find((M) => M.value === g)) == null ? void 0 : p.label;
+                      }
+                    ).join(", ");
+                } else if (e)
+                  return (n = t.find((m) => m.value === e)) == null ? void 0 : n.label;
+                return /* @__PURE__ */ l("span", { className: S.placeholder, children: b });
+              },
+              endAdornment: /* @__PURE__ */ l(
+                j,
+                {
+                  sx: {
+                    visibility: s(r.value) ? "visible" : "hidden"
+                  },
+                  onClick: (e) => {
+                    r.onChange(o ? [] : f), i == null || i(e);
+                  },
+                  children: /* @__PURE__ */ l(_, {})
+                }
+              ),
+              sx: {
+                "& .MuiSelect-iconOutlined": {
+                  display: s(r.value) ? "none" : ""
+                },
+                "&.Mui-focused .MuiIconButton-root": { color: "primary.main" }
+              },
+              children: t.map((e) => /* @__PURE__ */ d(v, { value: e.value, children: [
+                " ",
+                e.label,
+                " "
+              ] }, e.value))
+            }
+          ),
+          /* @__PURE__ */ l(A, { children: (u = c.error) == null ? void 0 : u.message })
+        ] });
+      }
+    }
+  );
+};
+export {
+  N as SelectBoxController,
+  N as default
+};

package/dist/components/SelectBoxController/index.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,52 @@
+import { jsx as r } from "react/jsx-runtime";
+import { r as p, a as u, s as d } from "../../react.esm-C8amP77L.js";
+import { u as m } from "../../index.esm-ChwJSgnF.js";
+import { SelectBoxController as f } from "./index.js";
+describe("SelectBoxController component", () => {
+  it("renders select box with options and correct default value", () => {
+    const { result: n } = p(() => m()), { control: l } = n.current, s = "TestSelect", o = "Select an option", e = [
+      { label: "Option 1", value: "option1" },
+      { label: "Option 2", value: "option2" },
+      { label: "Option 3", value: "option3" }
+    ], i = ["option2"];
+    u(
+      /* @__PURE__ */ r(
+        f,
+        {
+          control: l,
+          name: s,
+          options: e,
+          defaultValue: i,
+          isMulti: !0,
+          placeholder: o
+        }
+      )
+    ), i.forEach((t) => {
+      const c = e.find((b) => b.value === t);
+      c && expect(d.getByText(c.label)).toBeInTheDocument();
+    });
+  }), it("renders select box with options and correct default value for single select", () => {
+    const { result: n } = p(() => m()), { control: l } = n.current, s = "TestSelect", o = [
+      { label: "Option 1", value: "option1" },
+      { label: "Option 2", value: "option2" },
+      { label: "Option 3", value: "option3" }
+    ], e = "option2";
+    u(
+      /* @__PURE__ */ r(
+        f,
+        {
+          control: l,
+          name: s,
+          options: o,
+          defaultValue: e,
+          isMulti: !1
+        }
+      )
+    );
+    const a = o.find((t) => t.value === e);
+    if (a) {
+      const t = d.getByText(a.label);
+      expect(t).toBeInTheDocument();
+    }
+  });
+});

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+type MenuItemType = {
+    /** 操作メニューのアイコン */
+    icon: React.ReactNode;
+    /** 操作メニュー名 */
+    title: string;
+    /** ショートカットキー */
+    shortcut?: string;
+    /** メニュー下の区切り線有無 */
+    separatorLine?: boolean;
+    /** クリックした時の動作 */
+    onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    /** クリックした時に閉じるか否か。指定がない場合はクリック時メニューが自動的に閉じます*/
+    closeWhenClick?: boolean;
+};
+type Props = {
+    menuItems: MenuItemType[];
+    buttonElement: ReactNode;
+};
+export declare const SubMenu: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default SubMenu;