npm - @jigowatts/jigowatts-ui - Versions diffs - 1.2.2 → 2.1.0 - Mend

@jigowatts/jigowatts-ui 1.2.2 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (419) hide show

package/dist/components/CopyableBox/index.test.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),o=require("./index.cjs.js");Object.assign(navigator,{clipboard:{writeText:jest.fn(),readText:jest.fn()}});describe("CopyableBox",()=>{beforeEach(()=>{jest.clearAllMocks()}),describe("CopyIcon Component",()=>{it("renders the copy icon initially",()=>{e.render(n.jsx(o.CopyIcon,{text:"test content"}));const t=e.screen.getByRole("button");expect(t).toBeInTheDocument(),expect(t).toHaveAccessibleName("コピー")}),it("copies text to clipboard and changes icon temporarily on click",async()=>{jest.useFakeTimers(),e.render(n.jsx(o.CopyIcon,{text:"test content"}));const t=e.screen.getByRole("button");e.fireEvent.click(t),expect(navigator.clipboard.writeText).toHaveBeenCalledWith("test content"),expect(await e.screen.findByRole("button",{name:"コピー済み"})).toBeInTheDocument(),e.act(()=>{jest.advanceTimersByTime(2e3)}),expect(await e.screen.findByRole("button",{name:"コピー"})).toBeInTheDocument(),jest.useRealTimers()})}),describe("CopyableBox Component",()=>{it("renders the text and a copy button",()=>{e.render(n.jsx(o.CopyableBox,{text:"Sample Backup Code\\n123456"})),expect(e.screen.getByText(/Sample Backup Code/)).toBeInTheDocument(),expect(e.screen.getByText(/123456/)).toBeInTheDocument(),expect(e.screen.getByRole("button",{name:"コピー"})).toBeInTheDocument()})})});
2	+ //# sourceMappingURL=index.test.cjs.js.map

package/dist/components/CopyableBox/index.test.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/CopyableBox/index.test.tsx"],"sourcesContent":["import { act, fireEvent, render, screen } from \"@testing-library/react\";\n\nimport CopyableBox, { CopyIcon } from \"./index\";\n\n// Mock the clipboard properly for userEvent in JSDOM\nObject.assign(navigator, {\n clipboard: {\n writeText: jest.fn(),\n readText: jest.fn(),\n },\n});\n\ndescribe(\"CopyableBox\", () => {\n beforeEach(() => {\n jest.clearAllMocks();\n });\n\n describe(\"CopyIcon Component\", () => {\n it(\"renders the copy icon initially\", () => {\n render(<CopyIcon text=\"test content\" />);\n const iconButton = screen.getByRole(\"button\");\n expect(iconButton).toBeInTheDocument();\n // Initially, the tooltip says \"コピー\"\n expect(iconButton).toHaveAccessibleName(\"コピー\");\n });\n\n it(\"copies text to clipboard and changes icon temporarily on click\", async () => {\n jest.useFakeTimers();\n\n render(<CopyIcon text=\"test content\" />);\n const iconButton = screen.getByRole(\"button\");\n\n fireEvent.click(iconButton);\n\n expect(navigator.clipboard.writeText).toHaveBeenCalledWith(\n \"test content\",\n );\n\n // After click, the tooltip says \"コピー済み\"\n expect(\n await screen.findByRole(\"button\", { name: \"コピー済み\" }),\n ).toBeInTheDocument();\n\n // Fast-forward 2 seconds\n act(() => {\n jest.advanceTimersByTime(2000);\n });\n\n // Tooltip reverts back to \"コピー\"\n expect(\n await screen.findByRole(\"button\", { name: \"コピー\" }),\n ).toBeInTheDocument();\n\n jest.useRealTimers();\n });\n });\n\n describe(\"CopyableBox Component\", () => {\n it(\"renders the text and a copy button\", () => {\n render(<CopyableBox text=\"Sample Backup Code\\n123456\" />);\n\n // Because `HtmlRenderer` converts \\n to <br/>, the text might be split into multiple elements\n // or Testing Library might normalize the whitespace. Testing parts of it is safer.\n expect(screen.getByText(/Sample Backup Code/)).toBeInTheDocument();\n expect(screen.getByText(/123456/)).toBeInTheDocument();\n\n expect(\n screen.getByRole(\"button\", { name: \"コピー\" }),\n ).toBeInTheDocument();\n });\n });\n});\n"],"names":["render","jsx","CopyIcon","iconButton","screen","fireEvent","act","CopyableBox"],"mappings":"wHAKA,OAAO,OAAO,UAAW,CACvB,UAAW,CACT,UAAW,KAAK,GAAA,EAChB,SAAU,KAAK,GAAA,CAAG,CAEtB,CAAC,EAED,SAAS,cAAe,IAAM,CAC5B,WAAW,IAAM,CACf,KAAK,cAAA,CACP,CAAC,EAED,SAAS,qBAAsB,IAAM,CACnC,GAAG,kCAAmC,IAAM,CAC1CA,EAAAA,OAAOC,EAAAA,IAACC,EAAAA,SAAA,CAAS,KAAK,cAAA,CAAe,CAAE,EACvC,MAAMC,EAAaC,EAAAA,OAAO,UAAU,QAAQ,EAC5C,OAAOD,CAAU,EAAE,kBAAA,EAEnB,OAAOA,CAAU,EAAE,qBAAqB,KAAK,CAC/C,CAAC,EAED,GAAG,iEAAkE,SAAY,CAC/E,KAAK,cAAA,EAELH,EAAAA,OAAOC,EAAAA,IAACC,EAAAA,SAAA,CAAS,KAAK,cAAA,CAAe,CAAE,EACvC,MAAMC,EAAaC,EAAAA,OAAO,UAAU,QAAQ,EAE5CC,EAAAA,UAAU,MAAMF,CAAU,EAE1B,OAAO,UAAU,UAAU,SAAS,EAAE,qBACpC,cAAA,EAIF,OACE,MAAMC,EAAAA,OAAO,WAAW,SAAU,CAAE,KAAM,QAAS,CAAA,EACnD,kBAAA,EAGFE,EAAAA,IAAI,IAAM,CACR,KAAK,oBAAoB,GAAI,CAC/B,CAAC,EAGD,OACE,MAAMF,EAAAA,OAAO,WAAW,SAAU,CAAE,KAAM,MAAO,CAAA,EACjD,kBAAA,EAEF,KAAK,cAAA,CACP,CAAC,CACH,CAAC,EAED,SAAS,wBAAyB,IAAM,CACtC,GAAG,qCAAsC,IAAM,CAC7CJ,EAAAA,OAAOC,EAAAA,IAACM,EAAAA,YAAA,CAAY,KAAK,6BAAA,CAA6B,CAAE,EAIxD,OAAOH,EAAAA,OAAO,UAAU,oBAAoB,CAAC,EAAE,kBAAA,EAC/C,OAAOA,EAAAA,OAAO,UAAU,QAAQ,CAAC,EAAE,kBAAA,EAEnC,OACEA,EAAAA,OAAO,UAAU,SAAU,CAAE,KAAM,MAAO,CAAA,EAC1C,kBAAA,CACJ,CAAC,CACH,CAAC,CACH,CAAC"}

package/dist/components/CopyableBox/index.test.d.ts ADDED Viewed

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

package/dist/components/CopyableBox/index.test.es.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { jsx as o } from "react/jsx-runtime";
+import { r as n, s as e, f as a, b as i } from "../../react.esm-BBESb8eI.js";
+import { CopyIcon as c, CopyableBox as s } from "./index.es.js";
+Object.assign(navigator, {
+  clipboard: {
+    writeText: jest.fn(),
+    readText: jest.fn()
+  }
+});
+describe("CopyableBox", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  }), describe("CopyIcon Component", () => {
+    it("renders the copy icon initially", () => {
+      n(/* @__PURE__ */ o(c, { text: "test content" }));
+      const t = e.getByRole("button");
+      expect(t).toBeInTheDocument(), expect(t).toHaveAccessibleName("コピー");
+    }), it("copies text to clipboard and changes icon temporarily on click", async () => {
+      jest.useFakeTimers(), n(/* @__PURE__ */ o(c, { text: "test content" }));
+      const t = e.getByRole("button");
+      a.click(t), expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+        "test content"
+      ), expect(
+        await e.findByRole("button", { name: "コピー済み" })
+      ).toBeInTheDocument(), i(() => {
+        jest.advanceTimersByTime(2e3);
+      }), expect(
+        await e.findByRole("button", { name: "コピー" })
+      ).toBeInTheDocument(), jest.useRealTimers();
+    });
+  }), describe("CopyableBox Component", () => {
+    it("renders the text and a copy button", () => {
+      n(/* @__PURE__ */ o(s, { text: "Sample Backup Code\\n123456" })), expect(e.getByText(/Sample Backup Code/)).toBeInTheDocument(), expect(e.getByText(/123456/)).toBeInTheDocument(), expect(
+        e.getByRole("button", { name: "コピー" })
+      ).toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=index.test.es.js.map

package/dist/components/CopyableBox/index.test.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.test.es.js","sources":["../../../src/components/CopyableBox/index.test.tsx"],"sourcesContent":["import { act, fireEvent, render, screen } from \"@testing-library/react\";\n\nimport CopyableBox, { CopyIcon } from \"./index\";\n\n// Mock the clipboard properly for userEvent in JSDOM\nObject.assign(navigator, {\n clipboard: {\n writeText: jest.fn(),\n readText: jest.fn(),\n },\n});\n\ndescribe(\"CopyableBox\", () => {\n beforeEach(() => {\n jest.clearAllMocks();\n });\n\n describe(\"CopyIcon Component\", () => {\n it(\"renders the copy icon initially\", () => {\n render(<CopyIcon text=\"test content\" />);\n const iconButton = screen.getByRole(\"button\");\n expect(iconButton).toBeInTheDocument();\n // Initially, the tooltip says \"コピー\"\n expect(iconButton).toHaveAccessibleName(\"コピー\");\n });\n\n it(\"copies text to clipboard and changes icon temporarily on click\", async () => {\n jest.useFakeTimers();\n\n render(<CopyIcon text=\"test content\" />);\n const iconButton = screen.getByRole(\"button\");\n\n fireEvent.click(iconButton);\n\n expect(navigator.clipboard.writeText).toHaveBeenCalledWith(\n \"test content\",\n );\n\n // After click, the tooltip says \"コピー済み\"\n expect(\n await screen.findByRole(\"button\", { name: \"コピー済み\" }),\n ).toBeInTheDocument();\n\n // Fast-forward 2 seconds\n act(() => {\n jest.advanceTimersByTime(2000);\n });\n\n // Tooltip reverts back to \"コピー\"\n expect(\n await screen.findByRole(\"button\", { name: \"コピー\" }),\n ).toBeInTheDocument();\n\n jest.useRealTimers();\n });\n });\n\n describe(\"CopyableBox Component\", () => {\n it(\"renders the text and a copy button\", () => {\n render(<CopyableBox text=\"Sample Backup Code\\n123456\" />);\n\n // Because `HtmlRenderer` converts \\n to <br/>, the text might be split into multiple elements\n // or Testing Library might normalize the whitespace. Testing parts of it is safer.\n expect(screen.getByText(/Sample Backup Code/)).toBeInTheDocument();\n expect(screen.getByText(/123456/)).toBeInTheDocument();\n\n expect(\n screen.getByRole(\"button\", { name: \"コピー\" }),\n ).toBeInTheDocument();\n });\n });\n});\n"],"names":["render","jsx","CopyIcon","iconButton","screen","fireEvent","act","CopyableBox"],"mappings":";;;AAKA,OAAO,OAAO,WAAW;AAAA,EACvB,WAAW;AAAA,IACT,WAAW,KAAK,GAAA;AAAA,IAChB,UAAU,KAAK,GAAA;AAAA,EAAG;AAEtB,CAAC;AAED,SAAS,eAAe,MAAM;AAC5B,aAAW,MAAM;AACf,SAAK,cAAA;AAAA,EACP,CAAC,GAED,SAAS,sBAAsB,MAAM;AACnC,OAAG,mCAAmC,MAAM;AAC1C,MAAAA,EAAO,gBAAAC,EAACC,GAAA,EAAS,MAAK,eAAA,CAAe,CAAE;AACvC,YAAMC,IAAaC,EAAO,UAAU,QAAQ;AAC5C,aAAOD,CAAU,EAAE,kBAAA,GAEnB,OAAOA,CAAU,EAAE,qBAAqB,KAAK;AAAA,IAC/C,CAAC,GAED,GAAG,kEAAkE,YAAY;AAC/E,WAAK,cAAA,GAELH,EAAO,gBAAAC,EAACC,GAAA,EAAS,MAAK,eAAA,CAAe,CAAE;AACvC,YAAMC,IAAaC,EAAO,UAAU,QAAQ;AAE5C,MAAAC,EAAU,MAAMF,CAAU,GAE1B,OAAO,UAAU,UAAU,SAAS,EAAE;AAAA,QACpC;AAAA,MAAA,GAIF;AAAA,QACE,MAAMC,EAAO,WAAW,UAAU,EAAE,MAAM,SAAS;AAAA,MAAA,EACnD,kBAAA,GAGFE,EAAI,MAAM;AACR,aAAK,oBAAoB,GAAI;AAAA,MAC/B,CAAC,GAGD;AAAA,QACE,MAAMF,EAAO,WAAW,UAAU,EAAE,MAAM,OAAO;AAAA,MAAA,EACjD,kBAAA,GAEF,KAAK,cAAA;AAAA,IACP,CAAC;AAAA,EACH,CAAC,GAED,SAAS,yBAAyB,MAAM;AACtC,OAAG,sCAAsC,MAAM;AAC7C,MAAAJ,EAAO,gBAAAC,EAACM,GAAA,EAAY,MAAK,8BAAA,CAA6B,CAAE,GAIxD,OAAOH,EAAO,UAAU,oBAAoB,CAAC,EAAE,kBAAA,GAC/C,OAAOA,EAAO,UAAU,QAAQ,CAAC,EAAE,kBAAA,GAEnC;AAAA,QACEA,EAAO,UAAU,UAAU,EAAE,MAAM,OAAO;AAAA,MAAA,EAC1C,kBAAA;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH,CAAC;"}

package/dist/components/CustomLink/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index12.css');const u=require("react/jsx-runtime"),c=require("next/link"),a=require("classnames"),k="_link_1e6wm_1",m={link:k},e=s=>{const{children:t,href:n,isStyled:i=!1,target:l,rel:o}=s;return u.jsx(c,{href:n,className:a({[m.link]:i}),target:l,rel:o,onClick:r=>{r.stopPropagation()},children:t})};exports.CustomLink=e;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index9.css');const u=require("react/jsx-runtime"),c=require("next/link"),a=require("classnames"),k="_link_1e6wm_1",m={link:k},e=s=>{const{children:t,href:n,isStyled:i=!1,target:l,rel:o}=s;return u.jsx(c,{href:n,className:a({[m.link]:i}),target:l,rel:o,onClick:r=>{r.stopPropagation()},children:t})};exports.CustomLink=e;exports.default=e;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/CustomLink/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../src/components/CustomLink/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport Link from \"next/link\";\nimport classnames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n children: ReactNode;\n href: string;\n isStyled?: boolean;\n target?: React.HTMLAttributeAnchorTarget;\n rel?: string;\n};\n\nexport const CustomLink = (props: Props) => {\n const { children, href, isStyled = false, target, rel } = props;\n return (\n <Link\n href={href}\n className={classnames({ [styles.link]: isStyled })}\n target={target}\n rel={rel}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {children}\n </Link>\n );\n};\n\nexport default CustomLink;\n"],"names":["CustomLink","props","children","href","isStyled","target","rel","jsx","Link","classnames","styles","e"],"mappings":"6NAcaA,EAAcC,GAAiB,CAC1C,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAW,GAAO,OAAAC,EAAQ,IAAAC,GAAQL,~~EAExD~~,~~OAAAM~~,~~EAAA~~,IAACC,EAAA,CACC,KAAAL,EACA,UAAWM,EAAW,CAAE,CAACC,EAAO,IAAI,EAAGN,EAAU,EACjD,OAAAC,EACA,IAAAC,EACA,QAAUK,GAAM,CACdA,EAAE,~~gBAAgB~~,~~CACpB~~,EAEC,SAAAT,CAAA,~~CACH~~,~~CAEJ~~"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../src/components/CustomLink/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport Link from \"next/link\";\nimport classnames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n children: ReactNode;\n href: string;\n isStyled?: boolean;\n target?: React.HTMLAttributeAnchorTarget;\n rel?: string;\n};\n\nexport const CustomLink = (props: Props) => {\n const { children, href, isStyled = false, target, rel } = props;\n return (\n <Link\n href={href}\n className={classnames({ [styles.link]: isStyled })}\n target={target}\n rel={rel}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {children}\n </Link>\n );\n};\n\nexport default CustomLink;\n"],"names":["CustomLink","props","children","href","isStyled","target","rel","jsx","Link","classnames","styles","e"],"mappings":"6NAcaA,EAAcC,GAAiB,CAC1C,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAW,GAAO,OAAAC,EAAQ,IAAAC,GAAQL,EAC1D,OACEM,EAAAA,IAACC,EAAA,CACC,KAAAL,EACA,UAAWM,EAAW,CAAE,CAACC,EAAO,IAAI,EAAGN,EAAU,EACjD,OAAAC,EACA,IAAAC,EACA,QAAUK,GAAM,CACdA,EAAE,gBAAA,CACJ,EAEC,SAAAT,CAAA,CAAA,CAGP"}

package/dist/components/CustomLink/index.es.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import a from "next/link";
 import m from "classnames";
-import '../../assets/index12.css';const c = "_link_1e6wm_1", k = {
+import '../../assets/index9.css';const c = "_link_1e6wm_1", k = {
   link: c
 }, u = (s) => {
   const { children: t, href: o, isStyled: n = !1, target: r, rel: e } = s;

package/dist/components/CustomLink/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../src/components/CustomLink/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport Link from \"next/link\";\nimport classnames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n children: ReactNode;\n href: string;\n isStyled?: boolean;\n target?: React.HTMLAttributeAnchorTarget;\n rel?: string;\n};\n\nexport const CustomLink = (props: Props) => {\n const { children, href, isStyled = false, target, rel } = props;\n return (\n <Link\n href={href}\n className={classnames({ [styles.link]: isStyled })}\n target={target}\n rel={rel}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {children}\n </Link>\n );\n};\n\nexport default CustomLink;\n"],"names":["CustomLink","props","children","href","isStyled","target","rel","jsx","Link","classnames","styles","e"],"mappings":";;;;;GAcaA,IAAa,CAACC,MAAiB;AAC1C,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,UAAAC,IAAW,IAAO,QAAAC,GAAQ,KAAAC,MAAQL;~~AAExD~~,~~SAAA~~,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAL;AAAA,MACA,WAAWM,EAAW,EAAE,CAACC,EAAO,IAAI,GAAGN,GAAU;AAAA,MACjD,QAAAC;AAAA,MACA,KAAAC;AAAA,MACA,SAAS,CAACK,MAAM;AACd,QAAAA,EAAE,~~gBAAgB~~;AAAA,~~MACpB~~;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,~~EACH~~;~~AAEJ~~;"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../src/components/CustomLink/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport Link from \"next/link\";\nimport classnames from \"classnames\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n children: ReactNode;\n href: string;\n isStyled?: boolean;\n target?: React.HTMLAttributeAnchorTarget;\n rel?: string;\n};\n\nexport const CustomLink = (props: Props) => {\n const { children, href, isStyled = false, target, rel } = props;\n return (\n <Link\n href={href}\n className={classnames({ [styles.link]: isStyled })}\n target={target}\n rel={rel}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n {children}\n </Link>\n );\n};\n\nexport default CustomLink;\n"],"names":["CustomLink","props","children","href","isStyled","target","rel","jsx","Link","classnames","styles","e"],"mappings":";;;;;GAcaA,IAAa,CAACC,MAAiB;AAC1C,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,UAAAC,IAAW,IAAO,QAAAC,GAAQ,KAAAC,MAAQL;AAC1D,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAL;AAAA,MACA,WAAWM,EAAW,EAAE,CAACC,EAAO,IAAI,GAAGN,GAAU;AAAA,MACjD,QAAAC;AAAA,MACA,KAAAC;AAAA,MACA,SAAS,CAACK,MAAM;AACd,QAAAA,EAAE,gBAAA;AAAA,MACJ;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/CustomLink/index.test.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";const r=require("react/jsx-runtime"),e=require("../../react.esm-CiMn0Rnx.cjs"),a=require("../../index-BHsZ5xlA.cjs"),i=require("./index.cjs.js");describe("CustomLink component",()=>{const n="/test",s="Test Link";it("renders the link with correct href and children",async()=>{await e.act(()=>{e.render(r.jsx(i.CustomLink,{href:n,children:s}))}),await e.waitForWrapper(()=>{const t=e.screen.getByText(s);expect(t).toBeInTheDocument(),expect(t.closest("a")).toHaveAttribute("href",n)})}),it("applies the custom styles if isStyled is true",()=>{e.render(r.jsx(i.CustomLink,{href:n,isStyled:!0,children:s}));const t=e.screen.getByText(s);expect(t).toHaveClass("link")}),it("does not apply the custom styles if isStyled is false",()=>{e.render(r.jsx(i.CustomLink,{href:n,children:s}));const t=e.screen.getByText(s);expect(t).not.toHaveClass("link")}),it("renders the link with target and rel attributes if provided",()=>{const t="_blank",o="noopener noreferrer";e.render(r.jsx(i.CustomLink,{href:n,target:t,rel:o,children:s}));const c=e.screen.getByText(s);expect(c.closest("a")).toHaveAttribute("target",t),expect(c.closest("a")).toHaveAttribute("rel",o)}),it("should be accessible",async()=>{const{container:t}=e.render(r.jsx(i.CustomLink,{href:n,children:s}));await e.waitForWrapper(async()=>{const o=await a.jestAxe.axe(t);expect.extend(a.jestAxe.toHaveNoViolations),expect(o).toHaveNoViolations()})})});
+"use strict";const r=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),a=require("../../index-Ds6DK19y.cjs"),i=require("./index.cjs.js");describe("CustomLink component",()=>{const n="/test",s="Test Link";it("renders the link with correct href and children",async()=>{await e.act(()=>{e.render(r.jsx(i.CustomLink,{href:n,children:s}))}),await e.waitForWrapper(()=>{const t=e.screen.getByText(s);expect(t).toBeInTheDocument(),expect(t.closest("a")).toHaveAttribute("href",n)})}),it("applies the custom styles if isStyled is true",()=>{e.render(r.jsx(i.CustomLink,{href:n,isStyled:!0,children:s}));const t=e.screen.getByText(s);expect(t).toHaveClass("link")}),it("does not apply the custom styles if isStyled is false",()=>{e.render(r.jsx(i.CustomLink,{href:n,children:s}));const t=e.screen.getByText(s);expect(t).not.toHaveClass("link")}),it("renders the link with target and rel attributes if provided",()=>{const t="_blank",o="noopener noreferrer";e.render(r.jsx(i.CustomLink,{href:n,target:t,rel:o,children:s}));const c=e.screen.getByText(s);expect(c.closest("a")).toHaveAttribute("target",t),expect(c.closest("a")).toHaveAttribute("rel",o)}),it("should be accessible",async()=>{const{container:t}=e.render(r.jsx(i.CustomLink,{href:n,children:s}));await e.waitForWrapper(async()=>{const o=await a.jestAxe.axe(t);expect.extend(a.jestAxe.toHaveNoViolations),expect(o).toHaveNoViolations()})})});
 //# sourceMappingURL=index.test.cjs.js.map

package/dist/components/CustomLink/index.test.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/CustomLink/index.test.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from \"@testing-library/react\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\n\nimport { CustomLink } from \".\";\n\ndescribe(\"CustomLink component\", () => {\n const testHref = \"/test\";\n const testChildren = \"Test Link\";\n\n it(\"renders the link with correct href and children\", async () => {\n await act(() => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n });\n await waitFor(() => {\n const link = screen.getByText(testChildren);\n expect(link).toBeInTheDocument();\n expect(link.closest(\"a\")).toHaveAttribute(\"href\", testHref);\n });\n });\n\n it(\"applies the custom styles if isStyled is true\", () => {\n render(\n <CustomLink href={testHref} isStyled>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link).toHaveClass(\"link\");\n });\n\n it(\"does not apply the custom styles if isStyled is false\", () => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n\n const link = screen.getByText(testChildren);\n expect(link).not.toHaveClass(\"link\");\n });\n\n it(\"renders the link with target and rel attributes if provided\", () => {\n const target = \"_blank\";\n const rel = \"noopener noreferrer\";\n\n render(\n <CustomLink href={testHref} target={target} rel={rel}>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link.closest(\"a\")).toHaveAttribute(\"target\", target);\n expect(link.closest(\"a\")).toHaveAttribute(\"rel\", rel);\n });\n\n it(\"should be accessible\", async () => {\n const { container } = render(\n <CustomLink href={testHref}>{testChildren}</CustomLink>,\n );\n\n await waitFor(async () => {\n const results = await axe(container);\n\n expect.extend(toHaveNoViolations);\n expect(results).toHaveNoViolations();\n });\n });\n});\n"],"names":["testHref","testChildren","act","render","jsx","CustomLink","waitFor","link","screen","target","rel","container","results","axe","toHaveNoViolations"],"mappings":"8JAKA,SAAS,uBAAwB,IAAM,CACrC,MAAMA,EAAW,QACXC,EAAe,YAErB,GAAG,kDAAmD,SAAY,CAChE,MAAMC,~~MAAI~~,IAAM,CACdC,~~SAAQC~~,EAAAA,~~IAAAC~~,EAAAA,WAAA,CAAW,KAAML,EAAW,WAAa,CAAa,~~CAAA~~,~~CAC/D~~,EACD,MAAMM,~~iBAAQ~~,IAAM,~~CACZ~~,~~MAAAC~~,EAAOC,EAAAA,OAAO,UAAUP,CAAY,~~EACnC~~,~~OAAAM~~,CAAI,EAAE,~~kBAAkB~~,~~EAC/B~~,OAAOA,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,OAAQP,CAAQ,~~CAAA~~,~~CAC3D~~,~~CAAA~~,~~CACF~~,EAED,GAAG,gDAAiD,IAAM,CACxDG,~~EAAA~~,aACGE,EAAAA,~~WAAW~~,~~CAAA~~,KAAML,EAAU,SAAQ,GACjC,~~SACHC~~,CAAA,CAAA,~~CACF~~,~~EAEM~~,~~MAAAM,~~EAAOC,EAAAA,OAAO,UAAUP,CAAY,~~EACnC~~,~~OAAAM~~,CAAI,EAAE,YAAY,MAAM,~~CAAA~~,~~CAChC~~,EAED,GAAG,wDAAyD,IAAM,CAChEJ,~~SAAQC~~,EAAAA,~~IAAAC~~,EAAAA,WAAA,CAAW,KAAML,EAAW,WAAa,CAAa,~~EAExD~~,~~MAAAO~~,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,CAAI,EAAE,IAAI,YAAY,MAAM,~~CAAA~~,~~CACpC~~,EAED,GAAG,8DAA+D,IAAM,CACtE,MAAME,EAAS,SACTC,EAAM,sBAEZP,~~EAAA~~,aACGE,EAAAA,~~WAAW~~,~~CAAA~~,KAAML,EAAU,OAAAS,EAAgB,IAAAC,EACzC,~~SACHT~~,CAAA,CAAA,~~CACF~~,~~EAEM~~,~~MAAAM,~~EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,SAAUE,CAAM,EAC1D,OAAOF,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,MAAOG,CAAG,~~CAAA~~,~~CACrD~~,EAED,GAAG,uBAAwB,SAAY,~~CAC/B~~,~~KAAA~~,CAAE,UAAAC,GAAcR,~~EAAA~~,~~OACnBC~~,~~EAAA~~,~~IAAAC~~,~~EAAA~~,WAAA,CAAW,KAAML,EAAW,~~SAAaC~~,CAAA,CAAA,~~CAC5C~~,~~EAEA,~~MAAMK,~~iBAAQ~~,SAAY,~~CAClB~~,~~MAAAM~~,EAAU,MAAMC,~~EAAA~~,~~QAAA~~,IAAIF,CAAS,EAEnC,OAAO,OAAOG,4BAAkB,~~EACzB~~,~~OAAAF~~,CAAO,EAAE,~~mBAAmB~~,~~CAAA~~,~~CACpC~~,~~CAAA~~,~~CACF~~,CACH,CAAC"}
1	+ {"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/CustomLink/index.test.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from \"@testing-library/react\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\n\nimport { CustomLink } from \".\";\n\ndescribe(\"CustomLink component\", () => {\n const testHref = \"/test\";\n const testChildren = \"Test Link\";\n\n it(\"renders the link with correct href and children\", async () => {\n await act(() => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n });\n await waitFor(() => {\n const link = screen.getByText(testChildren);\n expect(link).toBeInTheDocument();\n expect(link.closest(\"a\")).toHaveAttribute(\"href\", testHref);\n });\n });\n\n it(\"applies the custom styles if isStyled is true\", () => {\n render(\n <CustomLink href={testHref} isStyled>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link).toHaveClass(\"link\");\n });\n\n it(\"does not apply the custom styles if isStyled is false\", () => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n\n const link = screen.getByText(testChildren);\n expect(link).not.toHaveClass(\"link\");\n });\n\n it(\"renders the link with target and rel attributes if provided\", () => {\n const target = \"_blank\";\n const rel = \"noopener noreferrer\";\n\n render(\n <CustomLink href={testHref} target={target} rel={rel}>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link.closest(\"a\")).toHaveAttribute(\"target\", target);\n expect(link.closest(\"a\")).toHaveAttribute(\"rel\", rel);\n });\n\n it(\"should be accessible\", async () => {\n const { container } = render(\n <CustomLink href={testHref}>{testChildren}</CustomLink>,\n );\n\n await waitFor(async () => {\n const results = await axe(container);\n\n expect.extend(toHaveNoViolations);\n expect(results).toHaveNoViolations();\n });\n });\n});\n"],"names":["testHref","testChildren","act","render","jsx","CustomLink","waitFor","link","screen","target","rel","container","results","axe","toHaveNoViolations"],"mappings":"8JAKA,SAAS,uBAAwB,IAAM,CACrC,MAAMA,EAAW,QACXC,EAAe,YAErB,GAAG,kDAAmD,SAAY,CAChE,MAAMC,EAAAA,IAAI,IAAM,CACdC,SAAOC,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAML,EAAW,WAAa,CAAa,CAChE,CAAC,EACD,MAAMM,EAAAA,eAAQ,IAAM,CAClB,MAAMC,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,CAAI,EAAE,kBAAA,EACb,OAAOA,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,OAAQP,CAAQ,CAC5D,CAAC,CACH,CAAC,EAED,GAAG,gDAAiD,IAAM,CACxDG,EAAAA,aACGE,EAAAA,WAAA,CAAW,KAAML,EAAU,SAAQ,GACjC,SAAAC,CAAA,CACH,CAAA,EAGF,MAAMM,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,CAAI,EAAE,YAAY,MAAM,CACjC,CAAC,EAED,GAAG,wDAAyD,IAAM,CAChEJ,SAAOC,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAML,EAAW,WAAa,CAAa,EAE9D,MAAMO,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,CAAI,EAAE,IAAI,YAAY,MAAM,CACrC,CAAC,EAED,GAAG,8DAA+D,IAAM,CACtE,MAAME,EAAS,SACTC,EAAM,sBAEZP,EAAAA,aACGE,EAAAA,WAAA,CAAW,KAAML,EAAU,OAAAS,EAAgB,IAAAC,EACzC,SAAAT,CAAA,CACH,CAAA,EAGF,MAAMM,EAAOC,EAAAA,OAAO,UAAUP,CAAY,EAC1C,OAAOM,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,SAAUE,CAAM,EAC1D,OAAOF,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,MAAOG,CAAG,CACtD,CAAC,EAED,GAAG,uBAAwB,SAAY,CACrC,KAAM,CAAE,UAAAC,GAAcR,EAAAA,OACpBC,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAML,EAAW,SAAAC,CAAA,CAAa,CAAA,EAG5C,MAAMK,EAAAA,eAAQ,SAAY,CACxB,MAAMM,EAAU,MAAMC,EAAAA,QAAAA,IAAIF,CAAS,EAEnC,OAAO,OAAOG,4BAAkB,EAChC,OAAOF,CAAO,EAAE,mBAAA,CAClB,CAAC,CACH,CAAC,CACH,CAAC"}

package/dist/components/CustomLink/index.test.es.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { b as d, r as i, w as l, s as a } from "../../react.esm-2FJSSo-S.js";
-import { j as h } from "../../index-ZP4xL6Dt.js";
+import { b as d, r as i, w as l, s as a } from "../../react.esm-BBESb8eI.js";
+import { j as h } from "../../index-DI17hZPH.js";
 import { CustomLink as o } from "./index.es.js";
 describe("CustomLink component", () => {
   const s = "/test", t = "Test Link";

package/dist/components/CustomLink/index.test.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.test.es.js","sources":["../../../src/components/CustomLink/index.test.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from \"@testing-library/react\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\n\nimport { CustomLink } from \".\";\n\ndescribe(\"CustomLink component\", () => {\n const testHref = \"/test\";\n const testChildren = \"Test Link\";\n\n it(\"renders the link with correct href and children\", async () => {\n await act(() => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n });\n await waitFor(() => {\n const link = screen.getByText(testChildren);\n expect(link).toBeInTheDocument();\n expect(link.closest(\"a\")).toHaveAttribute(\"href\", testHref);\n });\n });\n\n it(\"applies the custom styles if isStyled is true\", () => {\n render(\n <CustomLink href={testHref} isStyled>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link).toHaveClass(\"link\");\n });\n\n it(\"does not apply the custom styles if isStyled is false\", () => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n\n const link = screen.getByText(testChildren);\n expect(link).not.toHaveClass(\"link\");\n });\n\n it(\"renders the link with target and rel attributes if provided\", () => {\n const target = \"_blank\";\n const rel = \"noopener noreferrer\";\n\n render(\n <CustomLink href={testHref} target={target} rel={rel}>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link.closest(\"a\")).toHaveAttribute(\"target\", target);\n expect(link.closest(\"a\")).toHaveAttribute(\"rel\", rel);\n });\n\n it(\"should be accessible\", async () => {\n const { container } = render(\n <CustomLink href={testHref}>{testChildren}</CustomLink>,\n );\n\n await waitFor(async () => {\n const results = await axe(container);\n\n expect.extend(toHaveNoViolations);\n expect(results).toHaveNoViolations();\n });\n });\n});\n"],"names":["testHref","testChildren","act","render","jsx","CustomLink","waitFor","link","screen","target","rel","container","results","axe","toHaveNoViolations"],"mappings":";;;;AAKA,SAAS,wBAAwB,MAAM;AACrC,QAAMA,IAAW,SACXC,IAAe;AAErB,KAAG,mDAAmD,YAAY;AAChE,UAAMC,EAAI,MAAM;AACd,MAAAC,~~EAAQ~~,gBAAAC,~~EAAAC~~,GAAA,EAAW,MAAML,GAAW,aAAa,CAAa;AAAA,~~IAAA~~,~~CAC/D~~,GACD,MAAMM,EAAQ,MAAM;~~AACZ~~,~~YAAAC~~,IAAOC,EAAO,UAAUP,CAAY;~~AACnC~~,~~aAAAM~~,CAAI,EAAE,~~kBAAkB~~,~~GAC/B~~,OAAOA,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,QAAQP,CAAQ;AAAA,~~IAAA~~,~~CAC3D~~;AAAA,~~EAAA~~,~~CACF~~,GAED,GAAG,iDAAiD,MAAM;AACxD,IAAAG;AAAA,wBACGE,~~GAAW~~,~~EAAA~~,MAAML,GAAU,UAAQ,IACjC,~~UACHC~~,EAAA,~~CAAA~~;AAAA,~~IACF~~;~~AAEM~~,~~UAAAM~~,IAAOC,EAAO,UAAUP,CAAY;~~AACnC~~,~~WAAAM~~,CAAI,EAAE,YAAY,MAAM;AAAA,~~EAAA~~,~~CAChC~~,GAED,GAAG,yDAAyD,MAAM;AAChE,IAAAJ,~~EAAQ~~,gBAAAC,~~EAAAC~~,GAAA,EAAW,MAAML,GAAW,aAAa,CAAa;~~AAExD~~,~~UAAAO~~,IAAOC,EAAO,UAAUP,CAAY;AAC1C,WAAOM,CAAI,EAAE,IAAI,YAAY,MAAM;AAAA,~~EAAA~~,~~CACpC~~,GAED,GAAG,+DAA+D,MAAM;AACtE,UAAME,IAAS,UACTC,IAAM;AAEZ,IAAAP;AAAA,wBACGE,~~GAAW~~,~~EAAA~~,MAAML,GAAU,QAAAS,GAAgB,KAAAC,GACzC,~~UACHT~~,EAAA,~~CAAA~~;AAAA,~~IACF~~;~~AAEM~~,~~UAAAM~~,IAAOC,EAAO,UAAUP,CAAY;AAC1C,WAAOM,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,UAAUE,CAAM,GAC1D,OAAOF,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,OAAOG,CAAG;AAAA,~~EAAA~~,~~CACrD~~,GAED,GAAG,wBAAwB,YAAY;~~AAC/B~~,~~UAAA~~,EAAE,WAAAC,MAAcR;AAAA,~~MACnB~~,gBAAAC,~~EAAAC~~,GAAA,EAAW,MAAML,GAAW,~~UAAaC~~,EAAA,~~CAAA~~;AAAA,~~IAC5C~~;~~AAEA~~,UAAMK,EAAQ,YAAY;~~AAClB~~,~~YAAAM~~,IAAU,MAAMC,~~EAAA~~,IAAIF,CAAS;AAEnC,aAAO,OAAOG,oBAAkB,~~GACzB~~,~~OAAAF~~,CAAO,EAAE,~~mBAAmB~~;AAAA,~~IAAA~~,~~CACpC~~;AAAA,~~EAAA~~,~~CACF~~;AACH,CAAC;"}
1	+ {"version":3,"file":"index.test.es.js","sources":["../../../src/components/CustomLink/index.test.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from \"@testing-library/react\";\nimport { axe, toHaveNoViolations } from \"jest-axe\";\n\nimport { CustomLink } from \".\";\n\ndescribe(\"CustomLink component\", () => {\n const testHref = \"/test\";\n const testChildren = \"Test Link\";\n\n it(\"renders the link with correct href and children\", async () => {\n await act(() => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n });\n await waitFor(() => {\n const link = screen.getByText(testChildren);\n expect(link).toBeInTheDocument();\n expect(link.closest(\"a\")).toHaveAttribute(\"href\", testHref);\n });\n });\n\n it(\"applies the custom styles if isStyled is true\", () => {\n render(\n <CustomLink href={testHref} isStyled>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link).toHaveClass(\"link\");\n });\n\n it(\"does not apply the custom styles if isStyled is false\", () => {\n render(<CustomLink href={testHref}>{testChildren}</CustomLink>);\n\n const link = screen.getByText(testChildren);\n expect(link).not.toHaveClass(\"link\");\n });\n\n it(\"renders the link with target and rel attributes if provided\", () => {\n const target = \"_blank\";\n const rel = \"noopener noreferrer\";\n\n render(\n <CustomLink href={testHref} target={target} rel={rel}>\n {testChildren}\n </CustomLink>,\n );\n\n const link = screen.getByText(testChildren);\n expect(link.closest(\"a\")).toHaveAttribute(\"target\", target);\n expect(link.closest(\"a\")).toHaveAttribute(\"rel\", rel);\n });\n\n it(\"should be accessible\", async () => {\n const { container } = render(\n <CustomLink href={testHref}>{testChildren}</CustomLink>,\n );\n\n await waitFor(async () => {\n const results = await axe(container);\n\n expect.extend(toHaveNoViolations);\n expect(results).toHaveNoViolations();\n });\n });\n});\n"],"names":["testHref","testChildren","act","render","jsx","CustomLink","waitFor","link","screen","target","rel","container","results","axe","toHaveNoViolations"],"mappings":";;;;AAKA,SAAS,wBAAwB,MAAM;AACrC,QAAMA,IAAW,SACXC,IAAe;AAErB,KAAG,mDAAmD,YAAY;AAChE,UAAMC,EAAI,MAAM;AACd,MAAAC,EAAO,gBAAAC,EAACC,GAAA,EAAW,MAAML,GAAW,aAAa,CAAa;AAAA,IAChE,CAAC,GACD,MAAMM,EAAQ,MAAM;AAClB,YAAMC,IAAOC,EAAO,UAAUP,CAAY;AAC1C,aAAOM,CAAI,EAAE,kBAAA,GACb,OAAOA,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,QAAQP,CAAQ;AAAA,IAC5D,CAAC;AAAA,EACH,CAAC,GAED,GAAG,iDAAiD,MAAM;AACxD,IAAAG;AAAA,wBACGE,GAAA,EAAW,MAAML,GAAU,UAAQ,IACjC,UAAAC,EAAA,CACH;AAAA,IAAA;AAGF,UAAMM,IAAOC,EAAO,UAAUP,CAAY;AAC1C,WAAOM,CAAI,EAAE,YAAY,MAAM;AAAA,EACjC,CAAC,GAED,GAAG,yDAAyD,MAAM;AAChE,IAAAJ,EAAO,gBAAAC,EAACC,GAAA,EAAW,MAAML,GAAW,aAAa,CAAa;AAE9D,UAAMO,IAAOC,EAAO,UAAUP,CAAY;AAC1C,WAAOM,CAAI,EAAE,IAAI,YAAY,MAAM;AAAA,EACrC,CAAC,GAED,GAAG,+DAA+D,MAAM;AACtE,UAAME,IAAS,UACTC,IAAM;AAEZ,IAAAP;AAAA,wBACGE,GAAA,EAAW,MAAML,GAAU,QAAAS,GAAgB,KAAAC,GACzC,UAAAT,EAAA,CACH;AAAA,IAAA;AAGF,UAAMM,IAAOC,EAAO,UAAUP,CAAY;AAC1C,WAAOM,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,UAAUE,CAAM,GAC1D,OAAOF,EAAK,QAAQ,GAAG,CAAC,EAAE,gBAAgB,OAAOG,CAAG;AAAA,EACtD,CAAC,GAED,GAAG,wBAAwB,YAAY;AACrC,UAAM,EAAE,WAAAC,MAAcR;AAAA,MACpB,gBAAAC,EAACC,GAAA,EAAW,MAAML,GAAW,UAAAC,EAAA,CAAa;AAAA,IAAA;AAG5C,UAAMK,EAAQ,YAAY;AACxB,YAAMM,IAAU,MAAMC,EAAAA,IAAIF,CAAS;AAEnC,aAAO,OAAOG,oBAAkB,GAChC,OAAOF,CAAO,EAAE,mBAAA;AAAA,IAClB,CAAC;AAAA,EACH,CAAC;AACH,CAAC;"}

package/dist/components/DataTable/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index13.css');const e=require("react/jsx-runtime"),t=require("@mui/material"),l=require("classnames"),g=require("react-icons/bi"),I=require("../PageSizeSelector/index.cjs.js"),P=require("../Pagination/index.cjs.js"),B="_contentContainer_1d18f_2",q="_scrollableTableContainer_1d18f_10",y="_table_1d18f_20",z="_header_1d18f_27",R="_th_1d18f_35",D="_headerCell_1d18f_47",M="_sortIcons_1d18f_54",V="_sortIcon_1d18f_54",A="_selected_1d18f_66",F="_row_1d18f_70",H="_clickable_1d18f_78",O="_td_1d18f_82",U="_nonBorder_1d18f_90",s={contentContainer:B,scrollableTableContainer:q,table:y,header:z,th:R,headerCell:D,sortIcons:M,sortIcon:V,selected:A,row:F,clickable:H,td:O,nonBorder:U},j=m=>{const{columns:h,dataList:o,totalCount:C,currentPage:p,pageSize:c,pageSizeSelectorValues:w,keyColumn:N,sortColumn:i,sortDirection:d,isLoading:S,onClickRow:_,onChangeSort:a,onChangePage:b,onChangePageSize:u,showBorder:T}=m;if(S)return e.jsx("span",{children:"読み込み中"});if(!o)return e.jsx("span",{children:"データの取得ができませんでした。"});if((o==null?void 0:o.length)===0)return e.jsx("span",{children:"データがありません。"});const k=Math.ceil(C/c),x=p-1,f=x*c+1,v=f-1+((o==null?void 0:o.length)??0);return e.jsx(e.Fragment,{children:e.jsxs("div",{className:s.contentContainer,children:[u&&e.jsx(I.PageSizeSelector,{startRecordNum:f,endRecordNum:v,values:w,defaultValue:c,totalCount:C,onChangePageSize:u}),e.jsx("div",{className:l(s.scrollableTableContainer,{[s.nonBorder]:T===!1}),children:e.jsxs(t.Table,{className:s.table,children:[e.jsx(t.TableHead,{children:e.jsx(t.TableRow,{className:s.header,children:h.map(n=>e.jsx("th",{className:l(s.th,{[s.clickable]:n.sortColumn&&a}),children:e.jsxs("div",{className:s.headerCell,onClick:()=>{n.sortColumn&&a&&(n.sortColumn===i?a(n.sortColumn,d==="asc"?"desc":"asc"):a(n.sortColumn,"asc"))},children:[n.title,n.sortColumn&&e.jsxs("div",{className:s.sortIcons,children:[e.jsx(g.BiSolidUpArrow,{className:l(s.sortIcon,{[s.selected]:n.sortColumn===i&&d==="asc"})}),e.jsx(g.BiSolidDownArrow,{className:l(s.sortIcon,{[s.selected]:n.sortColumn===i&&d==="desc"})})]})]})},n.key))})}),e.jsx(t.TableBody,{children:o.map(n=>e.jsx(t.TableRow,{className:l(s.row,{[s.clickable]:_}),onClick:()=>{_&&_(n)},children:h.map(r=>e.jsx(t.TableCell,{className:s.td,align:r.align,sx:{width:r.width?`${r.width}px`:void 0},children:r.render(n)},r.key))},n[N]))})]})}),b&&e.jsx(P.Pagination,{pageCount:k,activePage:x,onChangePage:b})]})})};exports.DataTable=j;exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index10.css');const e=require("react/jsx-runtime"),t=require("@mui/material"),l=require("classnames"),g=require("react-icons/bi"),I=require("../PageSizeSelector/index.cjs.js"),P=require("../Pagination/index.cjs.js"),B="_contentContainer_1d18f_2",q="_scrollableTableContainer_1d18f_10",y="_table_1d18f_20",z="_header_1d18f_27",R="_th_1d18f_35",D="_headerCell_1d18f_47",M="_sortIcons_1d18f_54",V="_sortIcon_1d18f_54",A="_selected_1d18f_66",F="_row_1d18f_70",H="_clickable_1d18f_78",O="_td_1d18f_82",U="_nonBorder_1d18f_90",s={contentContainer:B,scrollableTableContainer:q,table:y,header:z,th:R,headerCell:D,sortIcons:M,sortIcon:V,selected:A,row:F,clickable:H,td:O,nonBorder:U},j=m=>{const{columns:h,dataList:o,totalCount:C,currentPage:p,pageSize:c,pageSizeSelectorValues:w,keyColumn:N,sortColumn:i,sortDirection:d,isLoading:S,onClickRow:_,onChangeSort:a,onChangePage:b,onChangePageSize:u,showBorder:T}=m;if(S)return e.jsx("span",{children:"読み込み中"});if(!o)return e.jsx("span",{children:"データの取得ができませんでした。"});if((o==null?void 0:o.length)===0)return e.jsx("span",{children:"データがありません。"});const k=Math.ceil(C/c),x=p-1,f=x*c+1,v=f-1+((o==null?void 0:o.length)??0);return e.jsx(e.Fragment,{children:e.jsxs("div",{className:s.contentContainer,children:[u&&e.jsx(I.PageSizeSelector,{startRecordNum:f,endRecordNum:v,values:w,defaultValue:c,totalCount:C,onChangePageSize:u}),e.jsx("div",{className:l(s.scrollableTableContainer,{[s.nonBorder]:T===!1}),children:e.jsxs(t.Table,{className:s.table,children:[e.jsx(t.TableHead,{children:e.jsx(t.TableRow,{className:s.header,children:h.map(n=>e.jsx("th",{className:l(s.th,{[s.clickable]:n.sortColumn&&a}),children:e.jsxs("div",{className:s.headerCell,onClick:()=>{n.sortColumn&&a&&(n.sortColumn===i?a(n.sortColumn,d==="asc"?"desc":"asc"):a(n.sortColumn,"asc"))},children:[n.title,n.sortColumn&&e.jsxs("div",{className:s.sortIcons,children:[e.jsx(g.BiSolidUpArrow,{className:l(s.sortIcon,{[s.selected]:n.sortColumn===i&&d==="asc"})}),e.jsx(g.BiSolidDownArrow,{className:l(s.sortIcon,{[s.selected]:n.sortColumn===i&&d==="desc"})})]})]})},n.key))})}),e.jsx(t.TableBody,{children:o.map(n=>e.jsx(t.TableRow,{className:l(s.row,{[s.clickable]:_}),onClick:()=>{_&&_(n)},children:h.map(r=>e.jsx(t.TableCell,{className:s.td,align:r.align,sx:{width:r.width?`${r.width}px`:void 0},children:r.render(n)},r.key))},n[N]))})]})}),b&&e.jsx(P.Pagination,{pageCount:k,activePage:x,onChangePage:b})]})})};exports.DataTable=j;exports.default=j;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/DataTable/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../src/components/DataTable/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n} from \"@mui/material\";\nimport classNames from \"classnames\";\nimport { BiSolidDownArrow, BiSolidUpArrow } from \"react-icons/bi\";\n\nimport {\n PageSelectorValue,\n PageSizeSelector,\n} from \"@/components/PageSizeSelector\";\nimport { Pagination } from \"@/components/Pagination\";\nimport styles from \"./index.module.scss\";\n\nexport type SortDirection = \"asc\" \| \"desc\";\n\nexport type ColumnAlign =\n \| \"left\"\n \| \"right\"\n \| \"center\"\n \| \"justify\"\n \| \"inherit\"\n \| undefined;\n\nexport type Column<T> = {\n key: string;\n title: string;\n sortColumn?: keyof T;\n render: (data: T) => ReactNode;\n align?: ColumnAlign;\n width?: number; //明示的に横幅を指定する場合\n};\n\n/*\n テーブルコンポーネントのプロパティ\n * @template Key テーブルのキーとして使用される型\n * @template T テーブルデータの型\n /\ntype Props<Key extends keyof T, T> = {\n /* テーブルのカラム定義 /\n columns: Column<T>[];\n\n /* テーブルのデータリスト /\n dataList?: T[];\n\n /* 総データ数 /\n totalCount: number;\n\n /* 現在のページ番号 (1始まり) /\n currentPage: number;\n\n /* 1ページあたりのデータ数 /\n pageSize: number;\n\n /* ページサイズセレクタで選択可能な値 /\n pageSizeSelectorValues?: PageSelectorValue[];\n\n /* 各行のキーとなるカラム名 /\n keyColumn: Key;\n\n /* 現在のソート対象カラム名 /\n sortColumn?: keyof T;\n\n /* 現在のソート方向 /\n sortDirection?: SortDirection;\n\n /* データがロード中かどうか /\n isLoading: boolean;\n\n /\n 行がクリックされた際に呼び出されるコールバック\n * セットがない場合は行はクリックできません。\n * @param {T} data クリックされた行のデータ\n /\n onClickRow?: (data: T) => void;\n\n /\n ソート条件が変更された際に呼び出されるコールバック\n * セットがない場合ソートは効きません。\n * @param {keyof T} sortColumn ソート対象のカラム名\n * @param {SortDirection} sortDirection ソート方向\n /\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n\n /\n ページが変更された際に呼び出されるコールバック\n * セットがない場合ページ遷移の要素そのものが表示されません。\n * @param {number} page 選択されたページ番号\n /\n onChangePage?: (page: number) => void;\n\n /\n ページサイズが変更された際に呼び出されるコールバック\n * セットがない場合ページサイズセレクター要素そのものが表示されません。\n * @param {number} pageSize 選択されたページサイズ\n /\n onChangePageSize?: (pageSize: number) => void;\n\n /* テーブルのボーダーを表示するかどうか (undefinedとfalseは同義) /\n showBorder?: boolean;\n};\n\nexport const DataTable = <\n Key extends keyof T,\n T extends Record<Key, string \| number>,\n>(\n props: Props<Key, T>,\n) => {\n const {\n columns,\n dataList,\n totalCount,\n currentPage,\n pageSize,\n pageSizeSelectorValues: pageSizeValues,\n keyColumn,\n sortColumn,\n sortDirection,\n isLoading,\n onClickRow,\n onChangeSort,\n onChangePage,\n onChangePageSize,\n showBorder,\n } = props;\n\n // TODO: この辺はあとで修正します。lintで引っかかるので一旦ダミー実装\n if (isLoading) {\n return <span>読み込み中</span>;\n }\n\n if (!dataList) {\n return <span>データの取得ができませんでした。</span>;\n }\n\n if (dataList?.length === 0) {\n return <span>データがありません。</span>;\n }\n\n const pageCount = Math.ceil(totalCount / pageSize);\n const activePage = currentPage - 1;\n const startRecordNum = activePage pageSize + 1;\n const endRecordNum = startRecordNum - 1 + (dataList?.length ?? 0);\n\n return (\n <>\n <div className={styles.contentContainer}>\n {onChangePageSize && (\n <PageSizeSelector\n startRecordNum={startRecordNum}\n endRecordNum={endRecordNum}\n values={pageSizeValues}\n defaultValue={pageSize}\n totalCount={totalCount}\n onChangePageSize={onChangePageSize}\n />\n )}\n <div\n className={classNames(styles.scrollableTableContainer, {\n [styles.nonBorder]: showBorder === false,\n })}\n >\n <Table className={styles.table}>\n <TableHead>\n <TableRow className={styles.header}>\n {columns.map((column) => (\n <th\n className={classNames(styles.th, {\n [styles.clickable]: column.sortColumn && onChangeSort,\n })}\n key={column.key}\n >\n <div\n className={styles.headerCell}\n onClick={() => {\n if (column.sortColumn && onChangeSort) {\n if (column.sortColumn === sortColumn) {\n onChangeSort(\n column.sortColumn,\n sortDirection === \"asc\" ? \"desc\" : \"asc\",\n );\n } else {\n onChangeSort(column.sortColumn, \"asc\");\n }\n }\n }}\n >\n {column.title}\n {column.sortColumn && (\n <div className={styles.sortIcons}>\n <BiSolidUpArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"asc\",\n })}\n />\n <BiSolidDownArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"desc\",\n })}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {dataList.map((data) => {\n return (\n <TableRow\n className={classNames(styles.row, {\n [styles.clickable]: onClickRow,\n })}\n key={data[keyColumn]}\n onClick={() => {\n if (onClickRow) {\n onClickRow(data);\n }\n }}\n >\n {columns.map((column) => (\n <TableCell\n className={styles.td}\n key={column.key}\n //\n // FIXME: 子オブジェクトから値を抽出したり、変換処理が入るため、一概にdata[column.key]の型だけで表示に必要な型を判定させられないのでコメントアウト\n // align={\n // column.align ??\n // typeof data[column.key as Key] === \"number\"\n // ? \"right\"\n // : undefined\n // }\n //\n align={column.align}\n sx={{\n width: column.width ? `${column.width}px` : undefined, // widthが存在する場合のみ適用\n }}\n >\n {column.render(data)}\n </TableCell>\n ))}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </div>\n {onChangePage && (\n <Pagination\n pageCount={pageCount}\n activePage={activePage}\n onChangePage={onChangePage}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTable","props","columns","dataList","totalCount","currentPage","pageSize","pageSizeValues","keyColumn","sortColumn","sortDirection","isLoading","onClickRow","onChangeSort","onChangePage","onChangePageSize","showBorder","jsx","pageCount","activePage","startRecordNum","endRecordNum","Fragment","jsxs","styles","PageSizeSelector","classNames","Table","TableHead","TableRow","column","BiSolidUpArrow","BiSolidDownArrow","TableBody","data","TableCell","Pagination"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../src/components/DataTable/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n} from \"@mui/material\";\nimport classNames from \"classnames\";\nimport { BiSolidDownArrow, BiSolidUpArrow } from \"react-icons/bi\";\n\nimport {\n PageSelectorValue,\n PageSizeSelector,\n} from \"@/components/PageSizeSelector\";\nimport { Pagination } from \"@/components/Pagination\";\nimport styles from \"./index.module.scss\";\n\nexport type SortDirection = \"asc\" \| \"desc\";\n\nexport type ColumnAlign =\n \| \"left\"\n \| \"right\"\n \| \"center\"\n \| \"justify\"\n \| \"inherit\"\n \| undefined;\n\nexport type Column<T> = {\n key: string;\n title: string;\n sortColumn?: keyof T;\n render: (data: T) => ReactNode;\n align?: ColumnAlign;\n width?: number; //明示的に横幅を指定する場合\n};\n\n/*\n テーブルコンポーネントのプロパティ\n * @template Key テーブルのキーとして使用される型\n * @template T テーブルデータの型\n /\ntype Props<Key extends keyof T, T> = {\n /* テーブルのカラム定義 /\n columns: Column<T>[];\n\n /* テーブルのデータリスト /\n dataList?: T[];\n\n /* 総データ数 /\n totalCount: number;\n\n /* 現在のページ番号 (1始まり) /\n currentPage: number;\n\n /* 1ページあたりのデータ数 /\n pageSize: number;\n\n /* ページサイズセレクタで選択可能な値 /\n pageSizeSelectorValues?: PageSelectorValue[];\n\n /* 各行のキーとなるカラム名 /\n keyColumn: Key;\n\n /* 現在のソート対象カラム名 /\n sortColumn?: keyof T;\n\n /* 現在のソート方向 /\n sortDirection?: SortDirection;\n\n /* データがロード中かどうか /\n isLoading: boolean;\n\n /\n 行がクリックされた際に呼び出されるコールバック\n * セットがない場合は行はクリックできません。\n * @param {T} data クリックされた行のデータ\n /\n onClickRow?: (data: T) => void;\n\n /\n ソート条件が変更された際に呼び出されるコールバック\n * セットがない場合ソートは効きません。\n * @param {keyof T} sortColumn ソート対象のカラム名\n * @param {SortDirection} sortDirection ソート方向\n /\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n\n /\n ページが変更された際に呼び出されるコールバック\n * セットがない場合ページ遷移の要素そのものが表示されません。\n * @param {number} page 選択されたページ番号\n /\n onChangePage?: (page: number) => void;\n\n /\n ページサイズが変更された際に呼び出されるコールバック\n * セットがない場合ページサイズセレクター要素そのものが表示されません。\n * @param {number} pageSize 選択されたページサイズ\n /\n onChangePageSize?: (pageSize: number) => void;\n\n /* テーブルのボーダーを表示するかどうか (undefinedとfalseは同義) /\n showBorder?: boolean;\n};\n\nexport const DataTable = <\n Key extends keyof T,\n T extends Record<Key, string \| number>,\n>(\n props: Props<Key, T>,\n) => {\n const {\n columns,\n dataList,\n totalCount,\n currentPage,\n pageSize,\n pageSizeSelectorValues: pageSizeValues,\n keyColumn,\n sortColumn,\n sortDirection,\n isLoading,\n onClickRow,\n onChangeSort,\n onChangePage,\n onChangePageSize,\n showBorder,\n } = props;\n\n // TODO: この辺はあとで修正します。lintで引っかかるので一旦ダミー実装\n if (isLoading) {\n return <span>読み込み中</span>;\n }\n\n if (!dataList) {\n return <span>データの取得ができませんでした。</span>;\n }\n\n if (dataList?.length === 0) {\n return <span>データがありません。</span>;\n }\n\n const pageCount = Math.ceil(totalCount / pageSize);\n const activePage = currentPage - 1;\n const startRecordNum = activePage pageSize + 1;\n const endRecordNum = startRecordNum - 1 + (dataList?.length ?? 0);\n\n return (\n <>\n <div className={styles.contentContainer}>\n {onChangePageSize && (\n <PageSizeSelector\n startRecordNum={startRecordNum}\n endRecordNum={endRecordNum}\n values={pageSizeValues}\n defaultValue={pageSize}\n totalCount={totalCount}\n onChangePageSize={onChangePageSize}\n />\n )}\n <div\n className={classNames(styles.scrollableTableContainer, {\n [styles.nonBorder]: showBorder === false,\n })}\n >\n <Table className={styles.table}>\n <TableHead>\n <TableRow className={styles.header}>\n {columns.map((column) => (\n <th\n className={classNames(styles.th, {\n [styles.clickable]: column.sortColumn && onChangeSort,\n })}\n key={column.key}\n >\n <div\n className={styles.headerCell}\n onClick={() => {\n if (column.sortColumn && onChangeSort) {\n if (column.sortColumn === sortColumn) {\n onChangeSort(\n column.sortColumn,\n sortDirection === \"asc\" ? \"desc\" : \"asc\",\n );\n } else {\n onChangeSort(column.sortColumn, \"asc\");\n }\n }\n }}\n >\n {column.title}\n {column.sortColumn && (\n <div className={styles.sortIcons}>\n <BiSolidUpArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"asc\",\n })}\n />\n <BiSolidDownArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"desc\",\n })}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {dataList.map((data) => {\n return (\n <TableRow\n className={classNames(styles.row, {\n [styles.clickable]: onClickRow,\n })}\n key={data[keyColumn]}\n onClick={() => {\n if (onClickRow) {\n onClickRow(data);\n }\n }}\n >\n {columns.map((column) => (\n <TableCell\n className={styles.td}\n key={column.key}\n //\n // FIXME: 子オブジェクトから値を抽出したり、変換処理が入るため、一概にdata[column.key]の型だけで表示に必要な型を判定させられないのでコメントアウト\n // align={\n // column.align ??\n // typeof data[column.key as Key] === \"number\"\n // ? \"right\"\n // : undefined\n // }\n //\n align={column.align}\n sx={{\n width: column.width ? `${column.width}px` : undefined, // widthが存在する場合のみ適用\n }}\n >\n {column.render(data)}\n </TableCell>\n ))}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </div>\n {onChangePage && (\n <Pagination\n pageCount={pageCount}\n activePage={activePage}\n onChangePage={onChangePage}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTable","props","columns","dataList","totalCount","currentPage","pageSize","pageSizeValues","keyColumn","sortColumn","sortDirection","isLoading","onClickRow","onChangeSort","onChangePage","onChangePageSize","showBorder","jsx","pageCount","activePage","startRecordNum","endRecordNum","Fragment","jsxs","styles","PageSizeSelector","classNames","Table","TableHead","TableRow","column","BiSolidUpArrow","BiSolidDownArrow","TableBody","data","TableCell","Pagination"],"mappings":"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"}

package/dist/components/DataTable/index.es.js CHANGED Viewed

@@ -4,7 +4,7 @@ import l from "classnames";
 import { BiSolidUpArrow as R, BiSolidDownArrow as D } from "react-icons/bi";
 import { PageSizeSelector as V } from "../PageSizeSelector/index.es.js";
 import { Pagination as j } from "../Pagination/index.es.js";
-import '../../assets/index13.css';const A = "_contentContainer_1d18f_2", F = "_scrollableTableContainer_1d18f_10", H = "_table_1d18f_20", M = "_header_1d18f_27", U = "_th_1d18f_35", $ = "_headerCell_1d18f_47", q = "_sortIcons_1d18f_54", E = "_sortIcon_1d18f_54", G = "_selected_1d18f_66", J = "_row_1d18f_70", K = "_clickable_1d18f_78", O = "_td_1d18f_82", Q = "_nonBorder_1d18f_90", e = {
+import '../../assets/index10.css';const A = "_contentContainer_1d18f_2", F = "_scrollableTableContainer_1d18f_10", H = "_table_1d18f_20", M = "_header_1d18f_27", U = "_th_1d18f_35", $ = "_headerCell_1d18f_47", q = "_sortIcons_1d18f_54", E = "_sortIcon_1d18f_54", G = "_selected_1d18f_66", J = "_row_1d18f_70", K = "_clickable_1d18f_78", O = "_td_1d18f_82", Q = "_nonBorder_1d18f_90", e = {
   contentContainer: A,
   scrollableTableContainer: F,
   table: H,

package/dist/components/DataTable/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../../../src/components/DataTable/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n} from \"@mui/material\";\nimport classNames from \"classnames\";\nimport { BiSolidDownArrow, BiSolidUpArrow } from \"react-icons/bi\";\n\nimport {\n PageSelectorValue,\n PageSizeSelector,\n} from \"@/components/PageSizeSelector\";\nimport { Pagination } from \"@/components/Pagination\";\nimport styles from \"./index.module.scss\";\n\nexport type SortDirection = \"asc\" \| \"desc\";\n\nexport type ColumnAlign =\n \| \"left\"\n \| \"right\"\n \| \"center\"\n \| \"justify\"\n \| \"inherit\"\n \| undefined;\n\nexport type Column<T> = {\n key: string;\n title: string;\n sortColumn?: keyof T;\n render: (data: T) => ReactNode;\n align?: ColumnAlign;\n width?: number; //明示的に横幅を指定する場合\n};\n\n/*\n テーブルコンポーネントのプロパティ\n * @template Key テーブルのキーとして使用される型\n * @template T テーブルデータの型\n /\ntype Props<Key extends keyof T, T> = {\n /* テーブルのカラム定義 /\n columns: Column<T>[];\n\n /* テーブルのデータリスト /\n dataList?: T[];\n\n /* 総データ数 /\n totalCount: number;\n\n /* 現在のページ番号 (1始まり) /\n currentPage: number;\n\n /* 1ページあたりのデータ数 /\n pageSize: number;\n\n /* ページサイズセレクタで選択可能な値 /\n pageSizeSelectorValues?: PageSelectorValue[];\n\n /* 各行のキーとなるカラム名 /\n keyColumn: Key;\n\n /* 現在のソート対象カラム名 /\n sortColumn?: keyof T;\n\n /* 現在のソート方向 /\n sortDirection?: SortDirection;\n\n /* データがロード中かどうか /\n isLoading: boolean;\n\n /\n 行がクリックされた際に呼び出されるコールバック\n * セットがない場合は行はクリックできません。\n * @param {T} data クリックされた行のデータ\n /\n onClickRow?: (data: T) => void;\n\n /\n ソート条件が変更された際に呼び出されるコールバック\n * セットがない場合ソートは効きません。\n * @param {keyof T} sortColumn ソート対象のカラム名\n * @param {SortDirection} sortDirection ソート方向\n /\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n\n /\n ページが変更された際に呼び出されるコールバック\n * セットがない場合ページ遷移の要素そのものが表示されません。\n * @param {number} page 選択されたページ番号\n /\n onChangePage?: (page: number) => void;\n\n /\n ページサイズが変更された際に呼び出されるコールバック\n * セットがない場合ページサイズセレクター要素そのものが表示されません。\n * @param {number} pageSize 選択されたページサイズ\n /\n onChangePageSize?: (pageSize: number) => void;\n\n /* テーブルのボーダーを表示するかどうか (undefinedとfalseは同義) /\n showBorder?: boolean;\n};\n\nexport const DataTable = <\n Key extends keyof T,\n T extends Record<Key, string \| number>,\n>(\n props: Props<Key, T>,\n) => {\n const {\n columns,\n dataList,\n totalCount,\n currentPage,\n pageSize,\n pageSizeSelectorValues: pageSizeValues,\n keyColumn,\n sortColumn,\n sortDirection,\n isLoading,\n onClickRow,\n onChangeSort,\n onChangePage,\n onChangePageSize,\n showBorder,\n } = props;\n\n // TODO: この辺はあとで修正します。lintで引っかかるので一旦ダミー実装\n if (isLoading) {\n return <span>読み込み中</span>;\n }\n\n if (!dataList) {\n return <span>データの取得ができませんでした。</span>;\n }\n\n if (dataList?.length === 0) {\n return <span>データがありません。</span>;\n }\n\n const pageCount = Math.ceil(totalCount / pageSize);\n const activePage = currentPage - 1;\n const startRecordNum = activePage pageSize + 1;\n const endRecordNum = startRecordNum - 1 + (dataList?.length ?? 0);\n\n return (\n <>\n <div className={styles.contentContainer}>\n {onChangePageSize && (\n <PageSizeSelector\n startRecordNum={startRecordNum}\n endRecordNum={endRecordNum}\n values={pageSizeValues}\n defaultValue={pageSize}\n totalCount={totalCount}\n onChangePageSize={onChangePageSize}\n />\n )}\n <div\n className={classNames(styles.scrollableTableContainer, {\n [styles.nonBorder]: showBorder === false,\n })}\n >\n <Table className={styles.table}>\n <TableHead>\n <TableRow className={styles.header}>\n {columns.map((column) => (\n <th\n className={classNames(styles.th, {\n [styles.clickable]: column.sortColumn && onChangeSort,\n })}\n key={column.key}\n >\n <div\n className={styles.headerCell}\n onClick={() => {\n if (column.sortColumn && onChangeSort) {\n if (column.sortColumn === sortColumn) {\n onChangeSort(\n column.sortColumn,\n sortDirection === \"asc\" ? \"desc\" : \"asc\",\n );\n } else {\n onChangeSort(column.sortColumn, \"asc\");\n }\n }\n }}\n >\n {column.title}\n {column.sortColumn && (\n <div className={styles.sortIcons}>\n <BiSolidUpArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"asc\",\n })}\n />\n <BiSolidDownArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"desc\",\n })}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {dataList.map((data) => {\n return (\n <TableRow\n className={classNames(styles.row, {\n [styles.clickable]: onClickRow,\n })}\n key={data[keyColumn]}\n onClick={() => {\n if (onClickRow) {\n onClickRow(data);\n }\n }}\n >\n {columns.map((column) => (\n <TableCell\n className={styles.td}\n key={column.key}\n //\n // FIXME: 子オブジェクトから値を抽出したり、変換処理が入るため、一概にdata[column.key]の型だけで表示に必要な型を判定させられないのでコメントアウト\n // align={\n // column.align ??\n // typeof data[column.key as Key] === \"number\"\n // ? \"right\"\n // : undefined\n // }\n //\n align={column.align}\n sx={{\n width: column.width ? `${column.width}px` : undefined, // widthが存在する場合のみ適用\n }}\n >\n {column.render(data)}\n </TableCell>\n ))}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </div>\n {onChangePage && (\n <Pagination\n pageCount={pageCount}\n activePage={activePage}\n onChangePage={onChangePage}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTable","props","columns","dataList","totalCount","currentPage","pageSize","pageSizeValues","keyColumn","sortColumn","sortDirection","isLoading","onClickRow","onChangeSort","onChangePage","onChangePageSize","showBorder","jsx","pageCount","activePage","startRecordNum","endRecordNum","Fragment","jsxs","styles","PageSizeSelector","classNames","Table","TableHead","TableRow","column","BiSolidUpArrow","BiSolidDownArrow","TableBody","data","TableCell","Pagination"],"mappings":"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"}
1	+ {"version":3,"file":"index.es.js","sources":["../../../src/components/DataTable/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableRow,\n} from \"@mui/material\";\nimport classNames from \"classnames\";\nimport { BiSolidDownArrow, BiSolidUpArrow } from \"react-icons/bi\";\n\nimport {\n PageSelectorValue,\n PageSizeSelector,\n} from \"@/components/PageSizeSelector\";\nimport { Pagination } from \"@/components/Pagination\";\nimport styles from \"./index.module.scss\";\n\nexport type SortDirection = \"asc\" \| \"desc\";\n\nexport type ColumnAlign =\n \| \"left\"\n \| \"right\"\n \| \"center\"\n \| \"justify\"\n \| \"inherit\"\n \| undefined;\n\nexport type Column<T> = {\n key: string;\n title: string;\n sortColumn?: keyof T;\n render: (data: T) => ReactNode;\n align?: ColumnAlign;\n width?: number; //明示的に横幅を指定する場合\n};\n\n/*\n テーブルコンポーネントのプロパティ\n * @template Key テーブルのキーとして使用される型\n * @template T テーブルデータの型\n /\ntype Props<Key extends keyof T, T> = {\n /* テーブルのカラム定義 /\n columns: Column<T>[];\n\n /* テーブルのデータリスト /\n dataList?: T[];\n\n /* 総データ数 /\n totalCount: number;\n\n /* 現在のページ番号 (1始まり) /\n currentPage: number;\n\n /* 1ページあたりのデータ数 /\n pageSize: number;\n\n /* ページサイズセレクタで選択可能な値 /\n pageSizeSelectorValues?: PageSelectorValue[];\n\n /* 各行のキーとなるカラム名 /\n keyColumn: Key;\n\n /* 現在のソート対象カラム名 /\n sortColumn?: keyof T;\n\n /* 現在のソート方向 /\n sortDirection?: SortDirection;\n\n /* データがロード中かどうか /\n isLoading: boolean;\n\n /\n 行がクリックされた際に呼び出されるコールバック\n * セットがない場合は行はクリックできません。\n * @param {T} data クリックされた行のデータ\n /\n onClickRow?: (data: T) => void;\n\n /\n ソート条件が変更された際に呼び出されるコールバック\n * セットがない場合ソートは効きません。\n * @param {keyof T} sortColumn ソート対象のカラム名\n * @param {SortDirection} sortDirection ソート方向\n /\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n\n /\n ページが変更された際に呼び出されるコールバック\n * セットがない場合ページ遷移の要素そのものが表示されません。\n * @param {number} page 選択されたページ番号\n /\n onChangePage?: (page: number) => void;\n\n /\n ページサイズが変更された際に呼び出されるコールバック\n * セットがない場合ページサイズセレクター要素そのものが表示されません。\n * @param {number} pageSize 選択されたページサイズ\n /\n onChangePageSize?: (pageSize: number) => void;\n\n /* テーブルのボーダーを表示するかどうか (undefinedとfalseは同義) /\n showBorder?: boolean;\n};\n\nexport const DataTable = <\n Key extends keyof T,\n T extends Record<Key, string \| number>,\n>(\n props: Props<Key, T>,\n) => {\n const {\n columns,\n dataList,\n totalCount,\n currentPage,\n pageSize,\n pageSizeSelectorValues: pageSizeValues,\n keyColumn,\n sortColumn,\n sortDirection,\n isLoading,\n onClickRow,\n onChangeSort,\n onChangePage,\n onChangePageSize,\n showBorder,\n } = props;\n\n // TODO: この辺はあとで修正します。lintで引っかかるので一旦ダミー実装\n if (isLoading) {\n return <span>読み込み中</span>;\n }\n\n if (!dataList) {\n return <span>データの取得ができませんでした。</span>;\n }\n\n if (dataList?.length === 0) {\n return <span>データがありません。</span>;\n }\n\n const pageCount = Math.ceil(totalCount / pageSize);\n const activePage = currentPage - 1;\n const startRecordNum = activePage pageSize + 1;\n const endRecordNum = startRecordNum - 1 + (dataList?.length ?? 0);\n\n return (\n <>\n <div className={styles.contentContainer}>\n {onChangePageSize && (\n <PageSizeSelector\n startRecordNum={startRecordNum}\n endRecordNum={endRecordNum}\n values={pageSizeValues}\n defaultValue={pageSize}\n totalCount={totalCount}\n onChangePageSize={onChangePageSize}\n />\n )}\n <div\n className={classNames(styles.scrollableTableContainer, {\n [styles.nonBorder]: showBorder === false,\n })}\n >\n <Table className={styles.table}>\n <TableHead>\n <TableRow className={styles.header}>\n {columns.map((column) => (\n <th\n className={classNames(styles.th, {\n [styles.clickable]: column.sortColumn && onChangeSort,\n })}\n key={column.key}\n >\n <div\n className={styles.headerCell}\n onClick={() => {\n if (column.sortColumn && onChangeSort) {\n if (column.sortColumn === sortColumn) {\n onChangeSort(\n column.sortColumn,\n sortDirection === \"asc\" ? \"desc\" : \"asc\",\n );\n } else {\n onChangeSort(column.sortColumn, \"asc\");\n }\n }\n }}\n >\n {column.title}\n {column.sortColumn && (\n <div className={styles.sortIcons}>\n <BiSolidUpArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"asc\",\n })}\n />\n <BiSolidDownArrow\n className={classNames(styles.sortIcon, {\n [styles.selected]:\n column.sortColumn === sortColumn &&\n sortDirection === \"desc\",\n })}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </TableRow>\n </TableHead>\n <TableBody>\n {dataList.map((data) => {\n return (\n <TableRow\n className={classNames(styles.row, {\n [styles.clickable]: onClickRow,\n })}\n key={data[keyColumn]}\n onClick={() => {\n if (onClickRow) {\n onClickRow(data);\n }\n }}\n >\n {columns.map((column) => (\n <TableCell\n className={styles.td}\n key={column.key}\n //\n // FIXME: 子オブジェクトから値を抽出したり、変換処理が入るため、一概にdata[column.key]の型だけで表示に必要な型を判定させられないのでコメントアウト\n // align={\n // column.align ??\n // typeof data[column.key as Key] === \"number\"\n // ? \"right\"\n // : undefined\n // }\n //\n align={column.align}\n sx={{\n width: column.width ? `${column.width}px` : undefined, // widthが存在する場合のみ適用\n }}\n >\n {column.render(data)}\n </TableCell>\n ))}\n </TableRow>\n );\n })}\n </TableBody>\n </Table>\n </div>\n {onChangePage && (\n <Pagination\n pageCount={pageCount}\n activePage={activePage}\n onChangePage={onChangePage}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTable","props","columns","dataList","totalCount","currentPage","pageSize","pageSizeValues","keyColumn","sortColumn","sortDirection","isLoading","onClickRow","onChangeSort","onChangePage","onChangePageSize","showBorder","jsx","pageCount","activePage","startRecordNum","endRecordNum","Fragment","jsxs","styles","PageSizeSelector","classNames","Table","TableHead","TableRow","column","BiSolidUpArrow","BiSolidDownArrow","TableBody","data","TableCell","Pagination"],"mappings":"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"}

package/dist/components/DataTable/index.test.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";const r=require("react/jsx-runtime"),e=require("../../react.esm-CiMn0Rnx.cjs"),i=require("../../index-C50NsnJO.cjs");require("../../index-BpMSrIOq.cjs");const s=require("./index.cjs.js"),h=[{id:"1",name:"Alice"},{id:"2",name:"Bob"}],x=[{key:"id",title:"ID",sortColumn:"id",render:t=>t.id,width:100},{key:"name",title:"Name",render:t=>t.name}],c={columns:x,dataList:h,totalCount:2,keyColumn:"id",currentPage:1,pageSize:10,sortColumn:"id",sortDirection:"asc",isLoading:!1,onChangePage:()=>{}};describe("Given DataTable",()=>{it("Then renders column headers",()=>{e.render(r.jsx(s.DataTable,{...c})),expect(e.screen.getByText("ID")).toBeInTheDocument(),expect(e.screen.getByText("Name")).toBeInTheDocument()}),it("Then renders data rows",()=>{e.render(r.jsx(s.DataTable,{...c})),expect(e.screen.getByText("1",{selector:"td"})).toBeInTheDocument(),expect(e.screen.getByText("Alice")).toBeInTheDocument(),expect(e.screen.getByText("2",{selector:"td"})).toBeInTheDocument(),expect(e.screen.getByText("Bob")).toBeInTheDocument()}),it("When row is clicked, Then triggers onClickRow",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onClickRow:n};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("Alice")),expect(n).toHaveBeenCalledWith(h[0])}),it("When header 'asc' is clicked, Then triggers onChangeSort with 'desc'",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onChangeSort:n};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("ID")),expect(n).toHaveBeenCalledWith("id","desc")}),it("When header 'desc' is clicked, Then triggers onChangeSort with 'asc'",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onChangeSort:n,sortDirection:"desc"};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("ID")),expect(n).toHaveBeenCalledWith("id","asc")}),it("When showBorder is true, Then table cells have borders",()=>{const t={...c,showBorder:!0},{container:n}=e.render(r.jsx(s.DataTable,{...t})),o=n.querySelectorAll("td");expect(o.length).toBeGreaterThan(0);const a=o[0],l=window.getComputedStyle(a);expect(l.border).not.toBe("none")}),it("When showBorder is false or undefined, Then table cells have no borders",()=>{const t={...c,showBorder:!1},{container:n}=e.render(r.jsx(s.DataTable,{...t})),o=n.querySelectorAll("td");expect(o.length).toBeGreaterThan(0);const a=o[0];expect(a).toHaveStyle({border:"none"});const{container:l}=e.render(r.jsx(s.DataTable,{...c})),d=l.querySelectorAll("td");expect(d.length).toBeGreaterThan(0);const u=d[0];expect(u).toHaveStyle({border:"none"})}),it("When column has width property, Then table cell has correct width style",()=>{const{container:t}=e.render(r.jsx(s.DataTable,{...c})),n=t.querySelector("td:first-child");expect(n).toBeInTheDocument(),expect(n).toHaveStyle({width:"100px"})})});
+"use strict";const r=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),i=require("../../index-BoenezD8.cjs");require("../../index-9p9q0wxE.cjs");const s=require("./index.cjs.js"),h=[{id:"1",name:"Alice"},{id:"2",name:"Bob"}],x=[{key:"id",title:"ID",sortColumn:"id",render:t=>t.id,width:100},{key:"name",title:"Name",render:t=>t.name}],c={columns:x,dataList:h,totalCount:2,keyColumn:"id",currentPage:1,pageSize:10,sortColumn:"id",sortDirection:"asc",isLoading:!1,onChangePage:()=>{}};describe("Given DataTable",()=>{it("Then renders column headers",()=>{e.render(r.jsx(s.DataTable,{...c})),expect(e.screen.getByText("ID")).toBeInTheDocument(),expect(e.screen.getByText("Name")).toBeInTheDocument()}),it("Then renders data rows",()=>{e.render(r.jsx(s.DataTable,{...c})),expect(e.screen.getByText("1",{selector:"td"})).toBeInTheDocument(),expect(e.screen.getByText("Alice")).toBeInTheDocument(),expect(e.screen.getByText("2",{selector:"td"})).toBeInTheDocument(),expect(e.screen.getByText("Bob")).toBeInTheDocument()}),it("When row is clicked, Then triggers onClickRow",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onClickRow:n};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("Alice")),expect(n).toHaveBeenCalledWith(h[0])}),it("When header 'asc' is clicked, Then triggers onChangeSort with 'desc'",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onChangeSort:n};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("ID")),expect(n).toHaveBeenCalledWith("id","desc")}),it("When header 'desc' is clicked, Then triggers onChangeSort with 'asc'",async()=>{const t=i.userEvent.setup(),n=jest.fn(),o={...c,onChangeSort:n,sortDirection:"desc"};e.render(r.jsx(s.DataTable,{...o})),await t.click(e.screen.getByText("ID")),expect(n).toHaveBeenCalledWith("id","asc")}),it("When showBorder is true, Then table cells have borders",()=>{const t={...c,showBorder:!0},{container:n}=e.render(r.jsx(s.DataTable,{...t})),o=n.querySelectorAll("td");expect(o.length).toBeGreaterThan(0);const a=o[0],l=window.getComputedStyle(a);expect(l.border).not.toBe("none")}),it("When showBorder is false or undefined, Then table cells have no borders",()=>{const t={...c,showBorder:!1},{container:n}=e.render(r.jsx(s.DataTable,{...t})),o=n.querySelectorAll("td");expect(o.length).toBeGreaterThan(0);const a=o[0];expect(a).toHaveStyle({border:"none"});const{container:l}=e.render(r.jsx(s.DataTable,{...c})),d=l.querySelectorAll("td");expect(d.length).toBeGreaterThan(0);const u=d[0];expect(u).toHaveStyle({border:"none"})}),it("When column has width property, Then table cell has correct width style",()=>{const{container:t}=e.render(r.jsx(s.DataTable,{...c})),n=t.querySelector("td:first-child");expect(n).toBeInTheDocument(),expect(n).toHaveStyle({width:"100px"})})});
 //# sourceMappingURL=index.test.cjs.js.map

package/dist/components/DataTable/index.test.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/DataTable/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { DataTable, SortDirection, type Column } from \"./index\";\n\ntype MockData = {\n id: string;\n name: string;\n};\n\ntype Props<Key extends keyof T, T> = {\n columns: Column<T>[];\n dataList?: T[];\n totalCount: number;\n currentPage: number;\n pageSize: number;\n keyColumn: Key;\n sortColumn?: keyof T;\n sortDirection?: SortDirection;\n isLoading: boolean;\n onClickRow?: (data: T) => void;\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n onChangePage: (page: number) => void;\n onChangePageSize?: (pageSize: number) => void;\n showBorder?: boolean;\n};\n\nconst mockDataList: MockData[] = [\n { id: \"1\", name: \"Alice\" },\n { id: \"2\", name: \"Bob\" },\n];\n\nconst mockColumns: Column<MockData>[] = [\n {\n key: \"id\",\n title: \"ID\",\n sortColumn: \"id\",\n render: (data) => data.id,\n width: 100,\n },\n {\n key: \"name\",\n title: \"Name\",\n render: (data) => data.name,\n },\n];\n\nconst defaultProps: Props<keyof MockData, MockData> = {\n columns: mockColumns,\n dataList: mockDataList,\n totalCount: 2,\n keyColumn: \"id\",\n currentPage: 1,\n pageSize: 10,\n sortColumn: \"id\",\n sortDirection: \"asc\",\n isLoading: false,\n onChangePage: () => {},\n};\n\ndescribe(\"Given DataTable\", () => {\n it(\"Then renders column headers\", () => {\n render(<DataTable {...defaultProps} />);\n\n expect(screen.getByText(\"ID\")).toBeInTheDocument();\n expect(screen.getByText(\"Name\")).toBeInTheDocument();\n });\n\n it(\"Then renders data rows\", () => {\n render(<DataTable {...defaultProps} />);\n\n expect(screen.getByText(\"1\", { selector: \"td\" })).toBeInTheDocument();\n expect(screen.getByText(\"Alice\")).toBeInTheDocument();\n expect(screen.getByText(\"2\", { selector: \"td\" })).toBeInTheDocument();\n expect(screen.getByText(\"Bob\")).toBeInTheDocument();\n });\n\n it(\"When row is clicked, Then triggers onClickRow\", async () => {\n const user = userEvent.setup();\n const onClickRowMock = jest.fn();\n const props = { ...defaultProps, onClickRow: onClickRowMock };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"Alice\"));\n expect(onClickRowMock).toHaveBeenCalledWith(mockDataList[0]);\n });\n\n it(\"When header 'asc' is clicked, Then triggers onChangeSort with 'desc'\", async () => {\n const user = userEvent.setup();\n const onChangeSortMock = jest.fn();\n const props = { ...defaultProps, onChangeSort: onChangeSortMock };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"ID\"));\n expect(onChangeSortMock).toHaveBeenCalledWith(\"id\", \"desc\");\n });\n\n it(\"When header 'desc' is clicked, Then triggers onChangeSort with 'asc'\", async () => {\n const user = userEvent.setup();\n const onChangeSortMock = jest.fn();\n const props: Props<keyof MockData, MockData> = {\n ...defaultProps,\n onChangeSort: onChangeSortMock,\n sortDirection: \"desc\",\n };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"ID\"));\n expect(onChangeSortMock).toHaveBeenCalledWith(\"id\", \"asc\");\n });\n\n it(\"When showBorder is true, Then table cells have borders\", () => {\n const props = { ...defaultProps, showBorder: true };\n const { container } = render(<DataTable {...props} />);\n\n const tableCells = container.querySelectorAll(\"td\");\n expect(tableCells.length).toBeGreaterThan(0);\n\n // showBorder=trueの場合、borderスタイルはundefinedになる（デフォルトのborderが適用される）\n const firstCell = tableCells[0];\n const computedStyle = window.getComputedStyle(firstCell);\n expect(computedStyle.border).not.toBe(\"none\");\n });\n\n it(\"When showBorder is false or undefined, Then table cells have no borders\", () => {\n // showBorder=falseの場合\n const propsWithFalse = { ...defaultProps, showBorder: false };\n const { container: containerFalse } = render(\n <DataTable {...propsWithFalse} />,\n );\n\n const tableCellsFalse = containerFalse.querySelectorAll(\"td\");\n expect(tableCellsFalse.length).toBeGreaterThan(0);\n\n // showBorder=falseの場合、borderスタイルは\"none\"になる\n const firstCellFalse = tableCellsFalse[0];\n expect(firstCellFalse).toHaveStyle({ border: \"none\" });\n\n // showBorder=undefinedの場合（デフォルト）\n const { container: containerUndefined } = render(\n <DataTable {...defaultProps} />,\n );\n\n const tableCellsUndefined = containerUndefined.querySelectorAll(\"td\");\n expect(tableCellsUndefined.length).toBeGreaterThan(0);\n\n // showBorder=undefinedの場合も、borderスタイルは\"none\"になる\n const firstCellUndefined = tableCellsUndefined[0];\n expect(firstCellUndefined).toHaveStyle({ border: \"none\" });\n });\n\n it(\"When column has width property, Then table cell has correct width style\", () => {\n const { container } = render(<DataTable {...defaultProps} />);\n\n const idCell = container.querySelector(\"td:first-child\");\n expect(idCell).toBeInTheDocument();\n\n expect(idCell).toHaveStyle({ width: \"100px\" });\n });\n});\n"],"names":["mockDataList","mockColumns","data","defaultProps","render","jsx","DataTable","screen","user","userEvent","onClickRowMock","props","onChangeSortMock","container","tableCells","firstCell","computedStyle","propsWithFalse","containerFalse","tableCellsFalse","firstCellFalse","containerUndefined","tableCellsUndefined","firstCellUndefined","idCell"],"mappings":"wMA6BMA,EAA2B,CAC/B,CAAE,GAAI,IAAK,KAAM,~~OAAQ~~,~~EACzB~~,CAAE,GAAI,IAAK,KAAM,~~KAAM~~,~~CACzB~~,EAEMC,EAAkC,CACtC,CACE,IAAK,KACL,MAAO,KACP,WAAY,KACZ,OAASC,GAASA,EAAK,GACvB,MAAO,~~GACT~~,~~EACA~~,CACE,IAAK,OACL,MAAO,OACP,OAASA,GAASA,EAAK,IAAA,CAE3B,EAEMC,EAAgD,CACpD,QAASF,EACT,SAAUD,EACV,WAAY,EACZ,UAAW,KACX,YAAa,EACb,SAAU,GACV,WAAY,KACZ,cAAe,MACf,UAAW,GACX,aAAc,IAAM,~~CAAA~~,~~CACtB~~,EAEA,SAAS,kBAAmB,IAAM,CAChC,GAAG,8BAA+B,IAAM,CACtCI,EAAAA,~~OAAQC~~,EAAAA,~~IAAAC~~,EAAAA,UAAA,CAAW,GAAGH,CAAc,~~CAAA,~~CAAE,EAEtC,OAAOI,EAAAA,OAAO,UAAU,IAAI,CAAC,EAAE,~~kBAAkB~~,~~EACjD~~,OAAOA,EAAAA,OAAO,UAAU,MAAM,CAAC,EAAE,~~kBAAkB~~,~~CAAA~~,~~CACpD~~,EAED,GAAG,yBAA0B,IAAM,CACjCH,EAAAA,~~OAAQC~~,EAAAA,~~IAAAC~~,EAAAA,UAAA,CAAW,GAAGH,CAAc,~~CAAA,~~CAAE,~~EAE/B~~,~~OAAAI~~,EAAAA,OAAO,UAAU,IAAK,CAAE,SAAU,~~IAAK~~,~~CAAC~~,CAAC,EAAE,~~kBAAkB~~,~~EACpE~~,OAAOA,EAAAA,OAAO,UAAU,OAAO,CAAC,EAAE,~~kBAAkB~~,~~EAC7C~~,~~OAAAA~~,EAAAA,OAAO,UAAU,IAAK,CAAE,SAAU,~~IAAK~~,~~CAAC~~,CAAC,EAAE,~~kBAAkB~~,~~EACpE~~,OAAOA,EAAAA,OAAO,UAAU,KAAK,CAAC,EAAE,~~kBAAkB~~,~~CAAA~~,~~CACnD~~,EAED,GAAG,gDAAiD,SAAY,~~CACxD~~,~~MAAAC~~,EAAOC,~~YAAU~~,~~MAAM~~,~~EACvBC~~,EAAiB,KAAK,~~GAAG~~,~~EACzBC~~,EAAQ,CAAE,GAAGR,EAAc,WAAYO,~~CAAe~~,~~EAE5DN~~,EAAAA,~~OAAQC~~,EAAAA,~~IAAAC~~,EAAAA,UAAA,CAAW,GAAGK,CAAO,~~CAAA,~~CAAE,EAE/B,MAAMH,EAAK,MAAMD,~~EAAO~~,~~OAAA~~,UAAU,OAAO,CAAC,EAC1C,OAAOG,CAAc,EAAE,qBAAqBV,EAAa,CAAC,CAAC,~~CAAA~~,~~CAC5D~~,EAED,GAAG,uEAAwE,SAAY,~~CAC/E~~,~~MAAAQ~~,EAAOC,~~YAAU~~,~~MAAM~~,~~EACvBG~~,EAAmB,KAAK,~~GAAG~~,~~EAC3BD~~,EAAQ,CAAE,GAAGR,EAAc,aAAcS,~~CAAiB~~,~~EAEhER~~,EAAAA,~~OAAQC~~,EAAAA,~~IAAAC~~,EAAAA,UAAA,CAAW,GAAGK,CAAO,~~CAAA,~~CAAE,EAE/B,MAAMH,EAAK,MAAMD,~~EAAO~~,~~OAAA~~,UAAU,IAAI,CAAC,EACvC,OAAOK,CAAgB,EAAE,qBAAqB,KAAM,MAAM,~~CAAA~~,~~CAC3D~~,EAED,GAAG,uEAAwE,SAAY,~~CAC/E~~,~~MAAAJ~~,EAAOC,~~YAAU~~,~~MAAM~~,~~EACvBG~~,EAAmB,KAAK,~~GAAG~~,~~EAC3BD~~,EAAyC,CAC7C,GAAGR,EACH,aAAcS,EACd,cAAe,~~MACjB~~,~~EAEAR~~,EAAAA,~~OAAQC~~,EAAAA,~~IAAAC~~,EAAAA,UAAA,CAAW,GAAGK,CAAO,~~CAAA,~~CAAE,EAE/B,MAAMH,EAAK,MAAMD,~~EAAO~~,~~OAAA~~,UAAU,IAAI,CAAC,EACvC,OAAOK,CAAgB,EAAE,qBAAqB,KAAM,KAAK,~~CAAA~~,~~CAC1D~~,EAED,GAAG,yDAA0D,IAAM,CACjE,MAAMD,EAAQ,CAAE,GAAGR,EAAc,WAAY,~~EAAK~~,~~EAC5C~~,CAAE,UAAAU,~~CAAc~~,~~EAAAT,~~eAAQE,EAAAA,~~UAAW~~,~~CAAA~~,GAAGK,EAAO,CAAE,EAE/CG,EAAaD,EAAU,iBAAiB,IAAI,EAClD,OAAOC,EAAW,MAAM,EAAE,gBAAgB,CAAC,~~EAGrC~~,~~MAAAC~~,EAAYD,EAAW,CAAC,EACxBE,EAAgB,OAAO,iBAAiBD,CAAS,EACvD,OAAOC,EAAc,MAAM,EAAE,IAAI,KAAK,MAAM,~~CAAA~~,~~CAC7C~~,EAED,GAAG,0EAA2E,IAAM,CAElF,MAAMC,EAAiB,CAAE,GAAGd,EAAc,WAAY,~~EAAM~~,~~EACtD~~,CAAE,UAAWe,CAAA,EAAmBd,~~EAAA~~,OACpCC,MAACC,EAAAA,~~UAAW~~,~~CAAA~~,GAAGW,CAAgB,CAAA,~~CACjC~~,~~EAEME,~~EAAkBD,EAAe,iBAAiB,IAAI,EAC5D,OAAOC,EAAgB,MAAM,EAAE,gBAAgB,CAAC,~~EAG1C~~,~~MAAAC~~,EAAiBD,EAAgB,CAAC,EACxC,OAAOC,CAAc,EAAE,YAAY,CAAE,OAAQ,OAAQ,~~EAG/C~~,~~KAAA~~,CAAE,UAAWC,CAAA,EAAuBjB,~~EAAA~~,OACxCC,MAACC,EAAAA,~~UAAW~~,~~CAAA~~,GAAGH,CAAc,CAAA,~~CAC/B~~,~~EAEMmB,~~EAAsBD,EAAmB,iBAAiB,IAAI,EACpE,OAAOC,EAAoB,MAAM,EAAE,gBAAgB,CAAC,~~EAG9C~~,~~MAAAC~~,EAAqBD,EAAoB,CAAC,EAChD,OAAOC,CAAkB,EAAE,YAAY,CAAE,OAAQ,OAAQ,~~CAAA~~,~~CAC1D~~,EAED,GAAG,0EAA2E,IAAM,~~CAC5E~~,~~KAAA~~,CAAE,UAAAV,~~CAAc~~,~~EAAAT,~~eAAQE,EAAAA,~~UAAW~~,~~CAAA~~,GAAGH,EAAc,CAAE,EAEtDqB,EAASX,EAAU,cAAc,gBAAgB,~~EAChD~~,~~OAAAW~~,CAAM,EAAE,~~kBAAkB~~,~~EAEjC~~,OAAOA,CAAM,EAAE,YAAY,CAAE,MAAO,QAAS,~~CAAA~~,~~CAC9C~~,CACH,CAAC"}
1	+ {"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/DataTable/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { DataTable, SortDirection, type Column } from \"./index\";\n\ntype MockData = {\n id: string;\n name: string;\n};\n\ntype Props<Key extends keyof T, T> = {\n columns: Column<T>[];\n dataList?: T[];\n totalCount: number;\n currentPage: number;\n pageSize: number;\n keyColumn: Key;\n sortColumn?: keyof T;\n sortDirection?: SortDirection;\n isLoading: boolean;\n onClickRow?: (data: T) => void;\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n onChangePage: (page: number) => void;\n onChangePageSize?: (pageSize: number) => void;\n showBorder?: boolean;\n};\n\nconst mockDataList: MockData[] = [\n { id: \"1\", name: \"Alice\" },\n { id: \"2\", name: \"Bob\" },\n];\n\nconst mockColumns: Column<MockData>[] = [\n {\n key: \"id\",\n title: \"ID\",\n sortColumn: \"id\",\n render: (data) => data.id,\n width: 100,\n },\n {\n key: \"name\",\n title: \"Name\",\n render: (data) => data.name,\n },\n];\n\nconst defaultProps: Props<keyof MockData, MockData> = {\n columns: mockColumns,\n dataList: mockDataList,\n totalCount: 2,\n keyColumn: \"id\",\n currentPage: 1,\n pageSize: 10,\n sortColumn: \"id\",\n sortDirection: \"asc\",\n isLoading: false,\n onChangePage: () => {},\n};\n\ndescribe(\"Given DataTable\", () => {\n it(\"Then renders column headers\", () => {\n render(<DataTable {...defaultProps} />);\n\n expect(screen.getByText(\"ID\")).toBeInTheDocument();\n expect(screen.getByText(\"Name\")).toBeInTheDocument();\n });\n\n it(\"Then renders data rows\", () => {\n render(<DataTable {...defaultProps} />);\n\n expect(screen.getByText(\"1\", { selector: \"td\" })).toBeInTheDocument();\n expect(screen.getByText(\"Alice\")).toBeInTheDocument();\n expect(screen.getByText(\"2\", { selector: \"td\" })).toBeInTheDocument();\n expect(screen.getByText(\"Bob\")).toBeInTheDocument();\n });\n\n it(\"When row is clicked, Then triggers onClickRow\", async () => {\n const user = userEvent.setup();\n const onClickRowMock = jest.fn();\n const props = { ...defaultProps, onClickRow: onClickRowMock };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"Alice\"));\n expect(onClickRowMock).toHaveBeenCalledWith(mockDataList[0]);\n });\n\n it(\"When header 'asc' is clicked, Then triggers onChangeSort with 'desc'\", async () => {\n const user = userEvent.setup();\n const onChangeSortMock = jest.fn();\n const props = { ...defaultProps, onChangeSort: onChangeSortMock };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"ID\"));\n expect(onChangeSortMock).toHaveBeenCalledWith(\"id\", \"desc\");\n });\n\n it(\"When header 'desc' is clicked, Then triggers onChangeSort with 'asc'\", async () => {\n const user = userEvent.setup();\n const onChangeSortMock = jest.fn();\n const props: Props<keyof MockData, MockData> = {\n ...defaultProps,\n onChangeSort: onChangeSortMock,\n sortDirection: \"desc\",\n };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"ID\"));\n expect(onChangeSortMock).toHaveBeenCalledWith(\"id\", \"asc\");\n });\n\n it(\"When showBorder is true, Then table cells have borders\", () => {\n const props = { ...defaultProps, showBorder: true };\n const { container } = render(<DataTable {...props} />);\n\n const tableCells = container.querySelectorAll(\"td\");\n expect(tableCells.length).toBeGreaterThan(0);\n\n // showBorder=trueの場合、borderスタイルはundefinedになる（デフォルトのborderが適用される）\n const firstCell = tableCells[0];\n const computedStyle = window.getComputedStyle(firstCell);\n expect(computedStyle.border).not.toBe(\"none\");\n });\n\n it(\"When showBorder is false or undefined, Then table cells have no borders\", () => {\n // showBorder=falseの場合\n const propsWithFalse = { ...defaultProps, showBorder: false };\n const { container: containerFalse } = render(\n <DataTable {...propsWithFalse} />,\n );\n\n const tableCellsFalse = containerFalse.querySelectorAll(\"td\");\n expect(tableCellsFalse.length).toBeGreaterThan(0);\n\n // showBorder=falseの場合、borderスタイルは\"none\"になる\n const firstCellFalse = tableCellsFalse[0];\n expect(firstCellFalse).toHaveStyle({ border: \"none\" });\n\n // showBorder=undefinedの場合（デフォルト）\n const { container: containerUndefined } = render(\n <DataTable {...defaultProps} />,\n );\n\n const tableCellsUndefined = containerUndefined.querySelectorAll(\"td\");\n expect(tableCellsUndefined.length).toBeGreaterThan(0);\n\n // showBorder=undefinedの場合も、borderスタイルは\"none\"になる\n const firstCellUndefined = tableCellsUndefined[0];\n expect(firstCellUndefined).toHaveStyle({ border: \"none\" });\n });\n\n it(\"When column has width property, Then table cell has correct width style\", () => {\n const { container } = render(<DataTable {...defaultProps} />);\n\n const idCell = container.querySelector(\"td:first-child\");\n expect(idCell).toBeInTheDocument();\n\n expect(idCell).toHaveStyle({ width: \"100px\" });\n });\n});\n"],"names":["mockDataList","mockColumns","data","defaultProps","render","jsx","DataTable","screen","user","userEvent","onClickRowMock","props","onChangeSortMock","container","tableCells","firstCell","computedStyle","propsWithFalse","containerFalse","tableCellsFalse","firstCellFalse","containerUndefined","tableCellsUndefined","firstCellUndefined","idCell"],"mappings":"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"}

package/dist/components/DataTable/index.test.es.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { r as c, s as r } from "../../react.esm-2FJSSo-S.js";
-import { u as d } from "../../index-D5b3AasF.js";
-import "../../index-DCSLk6pp.js";
+import { r as c, s as r } from "../../react.esm-BBESb8eI.js";
+import { u as d } from "../../index-sarAILcU.js";
+import "../../index-Cj9ZvtM1.js";
 import { DataTable as s } from "./index.es.js";
 const p = [
   { id: "1", name: "Alice" },

package/dist/components/DataTable/index.test.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.test.es.js","sources":["../../../src/components/DataTable/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { DataTable, SortDirection, type Column } from \"./index\";\n\ntype MockData = {\n id: string;\n name: string;\n};\n\ntype Props<Key extends keyof T, T> = {\n columns: Column<T>[];\n dataList?: T[];\n totalCount: number;\n currentPage: number;\n pageSize: number;\n keyColumn: Key;\n sortColumn?: keyof T;\n sortDirection?: SortDirection;\n isLoading: boolean;\n onClickRow?: (data: T) => void;\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n onChangePage: (page: number) => void;\n onChangePageSize?: (pageSize: number) => void;\n showBorder?: boolean;\n};\n\nconst mockDataList: MockData[] = [\n { id: \"1\", name: \"Alice\" },\n { id: \"2\", name: \"Bob\" },\n];\n\nconst mockColumns: Column<MockData>[] = [\n {\n key: \"id\",\n title: \"ID\",\n sortColumn: \"id\",\n render: (data) => data.id,\n width: 100,\n },\n {\n key: \"name\",\n title: \"Name\",\n render: (data) => data.name,\n },\n];\n\nconst defaultProps: Props<keyof MockData, MockData> = {\n columns: mockColumns,\n dataList: mockDataList,\n totalCount: 2,\n keyColumn: \"id\",\n currentPage: 1,\n pageSize: 10,\n sortColumn: \"id\",\n sortDirection: \"asc\",\n isLoading: false,\n onChangePage: () => {},\n};\n\ndescribe(\"Given DataTable\", () => {\n it(\"Then renders column headers\", () => {\n render(<DataTable {...defaultProps} />);\n\n expect(screen.getByText(\"ID\")).toBeInTheDocument();\n expect(screen.getByText(\"Name\")).toBeInTheDocument();\n });\n\n it(\"Then renders data rows\", () => {\n render(<DataTable {...defaultProps} />);\n\n expect(screen.getByText(\"1\", { selector: \"td\" })).toBeInTheDocument();\n expect(screen.getByText(\"Alice\")).toBeInTheDocument();\n expect(screen.getByText(\"2\", { selector: \"td\" })).toBeInTheDocument();\n expect(screen.getByText(\"Bob\")).toBeInTheDocument();\n });\n\n it(\"When row is clicked, Then triggers onClickRow\", async () => {\n const user = userEvent.setup();\n const onClickRowMock = jest.fn();\n const props = { ...defaultProps, onClickRow: onClickRowMock };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"Alice\"));\n expect(onClickRowMock).toHaveBeenCalledWith(mockDataList[0]);\n });\n\n it(\"When header 'asc' is clicked, Then triggers onChangeSort with 'desc'\", async () => {\n const user = userEvent.setup();\n const onChangeSortMock = jest.fn();\n const props = { ...defaultProps, onChangeSort: onChangeSortMock };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"ID\"));\n expect(onChangeSortMock).toHaveBeenCalledWith(\"id\", \"desc\");\n });\n\n it(\"When header 'desc' is clicked, Then triggers onChangeSort with 'asc'\", async () => {\n const user = userEvent.setup();\n const onChangeSortMock = jest.fn();\n const props: Props<keyof MockData, MockData> = {\n ...defaultProps,\n onChangeSort: onChangeSortMock,\n sortDirection: \"desc\",\n };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"ID\"));\n expect(onChangeSortMock).toHaveBeenCalledWith(\"id\", \"asc\");\n });\n\n it(\"When showBorder is true, Then table cells have borders\", () => {\n const props = { ...defaultProps, showBorder: true };\n const { container } = render(<DataTable {...props} />);\n\n const tableCells = container.querySelectorAll(\"td\");\n expect(tableCells.length).toBeGreaterThan(0);\n\n // showBorder=trueの場合、borderスタイルはundefinedになる（デフォルトのborderが適用される）\n const firstCell = tableCells[0];\n const computedStyle = window.getComputedStyle(firstCell);\n expect(computedStyle.border).not.toBe(\"none\");\n });\n\n it(\"When showBorder is false or undefined, Then table cells have no borders\", () => {\n // showBorder=falseの場合\n const propsWithFalse = { ...defaultProps, showBorder: false };\n const { container: containerFalse } = render(\n <DataTable {...propsWithFalse} />,\n );\n\n const tableCellsFalse = containerFalse.querySelectorAll(\"td\");\n expect(tableCellsFalse.length).toBeGreaterThan(0);\n\n // showBorder=falseの場合、borderスタイルは\"none\"になる\n const firstCellFalse = tableCellsFalse[0];\n expect(firstCellFalse).toHaveStyle({ border: \"none\" });\n\n // showBorder=undefinedの場合（デフォルト）\n const { container: containerUndefined } = render(\n <DataTable {...defaultProps} />,\n );\n\n const tableCellsUndefined = containerUndefined.querySelectorAll(\"td\");\n expect(tableCellsUndefined.length).toBeGreaterThan(0);\n\n // showBorder=undefinedの場合も、borderスタイルは\"none\"になる\n const firstCellUndefined = tableCellsUndefined[0];\n expect(firstCellUndefined).toHaveStyle({ border: \"none\" });\n });\n\n it(\"When column has width property, Then table cell has correct width style\", () => {\n const { container } = render(<DataTable {...defaultProps} />);\n\n const idCell = container.querySelector(\"td:first-child\");\n expect(idCell).toBeInTheDocument();\n\n expect(idCell).toHaveStyle({ width: \"100px\" });\n });\n});\n"],"names":["mockDataList","mockColumns","data","defaultProps","render","jsx","DataTable","screen","user","userEvent","onClickRowMock","props","onChangeSortMock","container","tableCells","firstCell","computedStyle","propsWithFalse","containerFalse","tableCellsFalse","firstCellFalse","containerUndefined","tableCellsUndefined","firstCellUndefined","idCell"],"mappings":";;;;;AA6BA,MAAMA,IAA2B;AAAA,EAC/B,EAAE,IAAI,KAAK,MAAM,~~QAAQ~~;AAAA,~~EACzB~~,EAAE,IAAI,KAAK,MAAM,~~MAAM~~;~~AACzB~~,GAEMC,IAAkC;AAAA,EACtC;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ,CAACC,MAASA,EAAK;AAAA,IACvB,OAAO;AAAA,~~EACT~~;AAAA,~~EACA~~;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ,CAACA,MAASA,EAAK;AAAA,EAAA;AAE3B,GAEMC,IAAgD;AAAA,EACpD,SAASF;AAAA,EACT,UAAUD;AAAA,EACV,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,~~EAAA~~;~~AACtB~~;AAEA,SAAS,mBAAmB,MAAM;AAChC,KAAG,+BAA+B,MAAM;AACtC,IAAAI,~~EAAQ~~,gBAAAC,~~EAAAC~~,GAAA,EAAW,GAAGH,~~EAAc~~,~~CAAA~~,CAAE,GAEtC,OAAOI,EAAO,UAAU,IAAI,CAAC,EAAE,~~kBAAkB~~,~~GACjD~~,OAAOA,EAAO,UAAU,MAAM,CAAC,EAAE,~~kBAAkB~~;AAAA,~~EAAA~~,~~CACpD~~,GAED,GAAG,0BAA0B,MAAM;AACjC,IAAAH,~~EAAQ~~,gBAAAC,~~EAAAC~~,GAAA,EAAW,GAAGH,~~EAAc~~,~~CAAA~~,CAAE,~~GAE/B~~,~~OAAAI~~,EAAO,UAAU,KAAK,EAAE,UAAU,~~KAAK~~,~~CAAC~~,CAAC,EAAE,~~kBAAkB~~,~~GACpE~~,OAAOA,EAAO,UAAU,OAAO,CAAC,EAAE,~~kBAAkB~~,~~GAC7C~~,~~OAAAA~~,EAAO,UAAU,KAAK,EAAE,UAAU,~~KAAK~~,~~CAAC~~,CAAC,EAAE,~~kBAAkB~~,~~GACpE~~,OAAOA,EAAO,UAAU,KAAK,CAAC,EAAE,~~kBAAkB~~;AAAA,~~EAAA~~,~~CACnD~~,GAED,GAAG,iDAAiD,YAAY;~~AACxD~~,~~UAAAC~~,IAAOC,EAAU,~~MAAM~~,~~GACvBC~~,IAAiB,KAAK,~~GAAG~~,~~GACzBC~~,IAAQ,EAAE,GAAGR,GAAc,YAAYO,~~EAAe~~;~~AAE5D~~,IAAAN,~~EAAQ~~,gBAAAC,~~EAAAC~~,GAAA,EAAW,GAAGK,~~EAAO~~,~~CAAA~~,CAAE,GAE/B,MAAMH,EAAK,MAAMD,EAAO,UAAU,OAAO,CAAC,GAC1C,OAAOG,CAAc,EAAE,qBAAqBV,EAAa,CAAC,CAAC;AAAA,~~EAAA~~,~~CAC5D~~,GAED,GAAG,wEAAwE,YAAY;~~AAC/E~~,~~UAAAQ~~,IAAOC,EAAU,~~MAAM~~,~~GACvBG~~,IAAmB,KAAK,~~GAAG~~,~~GAC3BD~~,IAAQ,EAAE,GAAGR,GAAc,cAAcS,~~EAAiB~~;~~AAEhE~~,IAAAR,~~EAAQ~~,gBAAAC,~~EAAAC~~,GAAA,EAAW,GAAGK,~~EAAO~~,~~CAAA~~,CAAE,GAE/B,MAAMH,EAAK,MAAMD,EAAO,UAAU,IAAI,CAAC,GACvC,OAAOK,CAAgB,EAAE,qBAAqB,MAAM,MAAM;AAAA,~~EAAA~~,~~CAC3D~~,GAED,GAAG,wEAAwE,YAAY;~~AAC/E~~,~~UAAAJ~~,IAAOC,EAAU,~~MAAM~~,~~GACvBG~~,IAAmB,KAAK,~~GAAG~~,~~GAC3BD~~,IAAyC;AAAA,MAC7C,GAAGR;AAAA,MACH,cAAcS;AAAA,MACd,eAAe;AAAA,~~IACjB~~;~~AAEA~~,IAAAR,~~EAAQ~~,gBAAAC,~~EAAAC~~,GAAA,EAAW,GAAGK,~~EAAO~~,~~CAAA~~,CAAE,GAE/B,MAAMH,EAAK,MAAMD,EAAO,UAAU,IAAI,CAAC,GACvC,OAAOK,CAAgB,EAAE,qBAAqB,MAAM,KAAK;AAAA,~~EAAA~~,~~CAC1D~~,GAED,GAAG,0DAA0D,MAAM;AACjE,UAAMD,IAAQ,EAAE,GAAGR,GAAc,YAAY,~~GAAK~~,~~GAC5C~~,EAAE,WAAAU,~~EAAc~~,~~IAAAT,~~oBAAQE,~~GAAW~~,~~EAAA~~,GAAGK,GAAO,CAAE,GAE/CG,IAAaD,EAAU,iBAAiB,IAAI;AAClD,WAAOC,EAAW,MAAM,EAAE,gBAAgB,CAAC;~~AAGrC~~,~~UAAAC~~,IAAYD,EAAW,CAAC,GACxBE,IAAgB,OAAO,iBAAiBD,CAAS;AACvD,WAAOC,EAAc,MAAM,EAAE,IAAI,KAAK,MAAM;AAAA,~~EAAA~~,~~CAC7C~~,GAED,GAAG,2EAA2E,MAAM;AAElF,UAAMC,IAAiB,EAAE,GAAGd,GAAc,YAAY,~~GAAM~~,~~GACtD~~,EAAE,WAAWe,EAAA,IAAmBd;AAAA,MACpC,gBAAAC,EAACC,~~GAAW~~,~~EAAA~~,GAAGW,~~EAAgB~~,~~CAAA~~;AAAA,~~IACjC~~,~~GAEME~~,IAAkBD,EAAe,iBAAiB,IAAI;AAC5D,WAAOC,EAAgB,MAAM,EAAE,gBAAgB,CAAC;~~AAG1C~~,~~UAAAC~~,IAAiBD,EAAgB,CAAC;AACxC,WAAOC,CAAc,EAAE,YAAY,EAAE,QAAQ,QAAQ;~~AAG/C~~,~~UAAA~~,EAAE,WAAWC,EAAA,IAAuBjB;AAAA,MACxC,gBAAAC,EAACC,~~GAAW~~,~~EAAA~~,GAAGH,~~EAAc~~,~~CAAA~~;AAAA,~~IAC/B~~,~~GAEMmB~~,IAAsBD,EAAmB,iBAAiB,IAAI;AACpE,WAAOC,EAAoB,MAAM,EAAE,gBAAgB,CAAC;~~AAG9C~~,~~UAAAC~~,IAAqBD,EAAoB,CAAC;AAChD,WAAOC,CAAkB,EAAE,YAAY,EAAE,QAAQ,QAAQ;AAAA,~~EAAA~~,~~CAC1D~~,GAED,GAAG,2EAA2E,MAAM;~~AAC5E~~,~~UAAA~~,EAAE,WAAAV,~~EAAc~~,~~IAAAT,~~oBAAQE,~~GAAW~~,~~EAAA~~,GAAGH,GAAc,CAAE,GAEtDqB,IAASX,EAAU,cAAc,gBAAgB;~~AAChD~~,~~WAAAW~~,CAAM,EAAE,~~kBAAkB~~,~~GAEjC~~,OAAOA,CAAM,EAAE,YAAY,EAAE,OAAO,SAAS;AAAA,~~EAAA~~,~~CAC9C~~;AACH,CAAC;"}
1	+ {"version":3,"file":"index.test.es.js","sources":["../../../src/components/DataTable/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { DataTable, SortDirection, type Column } from \"./index\";\n\ntype MockData = {\n id: string;\n name: string;\n};\n\ntype Props<Key extends keyof T, T> = {\n columns: Column<T>[];\n dataList?: T[];\n totalCount: number;\n currentPage: number;\n pageSize: number;\n keyColumn: Key;\n sortColumn?: keyof T;\n sortDirection?: SortDirection;\n isLoading: boolean;\n onClickRow?: (data: T) => void;\n onChangeSort?: (sortColumn: keyof T, sortDirection: SortDirection) => void;\n onChangePage: (page: number) => void;\n onChangePageSize?: (pageSize: number) => void;\n showBorder?: boolean;\n};\n\nconst mockDataList: MockData[] = [\n { id: \"1\", name: \"Alice\" },\n { id: \"2\", name: \"Bob\" },\n];\n\nconst mockColumns: Column<MockData>[] = [\n {\n key: \"id\",\n title: \"ID\",\n sortColumn: \"id\",\n render: (data) => data.id,\n width: 100,\n },\n {\n key: \"name\",\n title: \"Name\",\n render: (data) => data.name,\n },\n];\n\nconst defaultProps: Props<keyof MockData, MockData> = {\n columns: mockColumns,\n dataList: mockDataList,\n totalCount: 2,\n keyColumn: \"id\",\n currentPage: 1,\n pageSize: 10,\n sortColumn: \"id\",\n sortDirection: \"asc\",\n isLoading: false,\n onChangePage: () => {},\n};\n\ndescribe(\"Given DataTable\", () => {\n it(\"Then renders column headers\", () => {\n render(<DataTable {...defaultProps} />);\n\n expect(screen.getByText(\"ID\")).toBeInTheDocument();\n expect(screen.getByText(\"Name\")).toBeInTheDocument();\n });\n\n it(\"Then renders data rows\", () => {\n render(<DataTable {...defaultProps} />);\n\n expect(screen.getByText(\"1\", { selector: \"td\" })).toBeInTheDocument();\n expect(screen.getByText(\"Alice\")).toBeInTheDocument();\n expect(screen.getByText(\"2\", { selector: \"td\" })).toBeInTheDocument();\n expect(screen.getByText(\"Bob\")).toBeInTheDocument();\n });\n\n it(\"When row is clicked, Then triggers onClickRow\", async () => {\n const user = userEvent.setup();\n const onClickRowMock = jest.fn();\n const props = { ...defaultProps, onClickRow: onClickRowMock };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"Alice\"));\n expect(onClickRowMock).toHaveBeenCalledWith(mockDataList[0]);\n });\n\n it(\"When header 'asc' is clicked, Then triggers onChangeSort with 'desc'\", async () => {\n const user = userEvent.setup();\n const onChangeSortMock = jest.fn();\n const props = { ...defaultProps, onChangeSort: onChangeSortMock };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"ID\"));\n expect(onChangeSortMock).toHaveBeenCalledWith(\"id\", \"desc\");\n });\n\n it(\"When header 'desc' is clicked, Then triggers onChangeSort with 'asc'\", async () => {\n const user = userEvent.setup();\n const onChangeSortMock = jest.fn();\n const props: Props<keyof MockData, MockData> = {\n ...defaultProps,\n onChangeSort: onChangeSortMock,\n sortDirection: \"desc\",\n };\n\n render(<DataTable {...props} />);\n\n await user.click(screen.getByText(\"ID\"));\n expect(onChangeSortMock).toHaveBeenCalledWith(\"id\", \"asc\");\n });\n\n it(\"When showBorder is true, Then table cells have borders\", () => {\n const props = { ...defaultProps, showBorder: true };\n const { container } = render(<DataTable {...props} />);\n\n const tableCells = container.querySelectorAll(\"td\");\n expect(tableCells.length).toBeGreaterThan(0);\n\n // showBorder=trueの場合、borderスタイルはundefinedになる（デフォルトのborderが適用される）\n const firstCell = tableCells[0];\n const computedStyle = window.getComputedStyle(firstCell);\n expect(computedStyle.border).not.toBe(\"none\");\n });\n\n it(\"When showBorder is false or undefined, Then table cells have no borders\", () => {\n // showBorder=falseの場合\n const propsWithFalse = { ...defaultProps, showBorder: false };\n const { container: containerFalse } = render(\n <DataTable {...propsWithFalse} />,\n );\n\n const tableCellsFalse = containerFalse.querySelectorAll(\"td\");\n expect(tableCellsFalse.length).toBeGreaterThan(0);\n\n // showBorder=falseの場合、borderスタイルは\"none\"になる\n const firstCellFalse = tableCellsFalse[0];\n expect(firstCellFalse).toHaveStyle({ border: \"none\" });\n\n // showBorder=undefinedの場合（デフォルト）\n const { container: containerUndefined } = render(\n <DataTable {...defaultProps} />,\n );\n\n const tableCellsUndefined = containerUndefined.querySelectorAll(\"td\");\n expect(tableCellsUndefined.length).toBeGreaterThan(0);\n\n // showBorder=undefinedの場合も、borderスタイルは\"none\"になる\n const firstCellUndefined = tableCellsUndefined[0];\n expect(firstCellUndefined).toHaveStyle({ border: \"none\" });\n });\n\n it(\"When column has width property, Then table cell has correct width style\", () => {\n const { container } = render(<DataTable {...defaultProps} />);\n\n const idCell = container.querySelector(\"td:first-child\");\n expect(idCell).toBeInTheDocument();\n\n expect(idCell).toHaveStyle({ width: \"100px\" });\n });\n});\n"],"names":["mockDataList","mockColumns","data","defaultProps","render","jsx","DataTable","screen","user","userEvent","onClickRowMock","props","onChangeSortMock","container","tableCells","firstCell","computedStyle","propsWithFalse","containerFalse","tableCellsFalse","firstCellFalse","containerUndefined","tableCellsUndefined","firstCellUndefined","idCell"],"mappings":"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"}

package/dist/components/DatePickerController/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index10.css');const o=require("react/jsx-runtime"),g=require("@mui/x-date-pickers"),x=require("@mui/x-date-pickers/AdapterDateFns"),y=require("@mui/x-date-pickers/locales"),D=require("@mui/x-date-pickers/LocalizationProvider"),P=require("date-fns"),j=require("date-fns/locale/ja"),q=require("react-hook-form"),C="_rangeContainer_17n2w_1",T={rangeContainer:C},k={".MuiButtonBase-root":{padding:.5,paddingLeft:0},"& input::placeholder":{fontSize:"x-small"}},c=l=>{const{defaultValue:s,maxDateTime:u,minDateTime:d,setValue:a,dateFormat:t,...n}=l,p=e=>{const r=e?e instanceof Date?e:typeof e=="string"?P.parse(e,t,new Date):null:null;return typeof e=="string"&&a(n.name,r),r},m=e=>{a(n.name,e??s,{shouldDirty:!0})},h=(()=>{const e=[];return t.includes("yyyy")&&e.push("year"),t.includes("MM")&&e.push("month"),t.includes("dd")&&e.push("day"),t.includes("HH")&&e.push("hours"),t.includes("mm")&&e.push("minutes"),t.includes("ss")&&e.push("seconds"),e})();return o.jsx(D.LocalizationProvider,{dateAdapter:x.AdapterDateFns,adapterLocale:j,localeText:y.jaJP.components.MuiLocalizationProvider.defaultProps.localeText,children:o.jsx("div",{className:T.rangeContainer,children:o.jsx(q.Controller,{control:n.control,name:n.name,defaultValue:s,render:({field:e,fieldState:r})=>{var i;return o.jsx(g.DateTimePicker,{...e,format:t,views:h,sx:k,value:p(e.value),onChange:f=>{m(f)},slotProps:{textField:{error:!!r.error,helperText:(i=r.error)==null?void 0:i.message,fullWidth:!0},actionBar:{actions:["clear","accept"]}},maxDateTime:u,minDateTime:d})}})})})};exports.DatePickerController=c;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index7.css');const o=require("react/jsx-runtime"),g=require("@mui/x-date-pickers"),x=require("@mui/x-date-pickers/AdapterDateFns"),y=require("@mui/x-date-pickers/locales"),D=require("@mui/x-date-pickers/LocalizationProvider"),P=require("date-fns"),j=require("date-fns/locale/ja"),q=require("react-hook-form"),C="_rangeContainer_17n2w_1",T={rangeContainer:C},k={".MuiButtonBase-root":{padding:.5,paddingLeft:0},"& input::placeholder":{fontSize:"x-small"}},c=l=>{const{defaultValue:s,maxDateTime:u,minDateTime:d,setValue:a,dateFormat:t,...n}=l,p=e=>{const r=e?e instanceof Date?e:typeof e=="string"?P.parse(e,t,new Date):null:null;return typeof e=="string"&&a(n.name,r),r},m=e=>{a(n.name,e??s,{shouldDirty:!0})},h=(()=>{const e=[];return t.includes("yyyy")&&e.push("year"),t.includes("MM")&&e.push("month"),t.includes("dd")&&e.push("day"),t.includes("HH")&&e.push("hours"),t.includes("mm")&&e.push("minutes"),t.includes("ss")&&e.push("seconds"),e})();return o.jsx(D.LocalizationProvider,{dateAdapter:x.AdapterDateFns,adapterLocale:j,localeText:y.jaJP.components.MuiLocalizationProvider.defaultProps.localeText,children:o.jsx("div",{className:T.rangeContainer,children:o.jsx(q.Controller,{control:n.control,name:n.name,defaultValue:s,render:({field:e,fieldState:r})=>{var i;return o.jsx(g.DateTimePicker,{...e,format:t,views:h,sx:k,value:p(e.value),onChange:f=>{m(f)},slotProps:{textField:{error:!!r.error,helperText:(i=r.error)==null?void 0:i.message,fullWidth:!0},actionBar:{actions:["clear","accept"]}},maxDateTime:u,minDateTime:d})}})})})};exports.DatePickerController=c;exports.default=c;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/DatePickerController/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../src/components/DatePickerController/index.tsx"],"sourcesContent":["import { DateTimePicker, type DateOrTimeView } 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 } from \"date-fns\";\nimport ja from \"date-fns/locale/ja\";\nimport {\n Controller,\n FieldPath,\n UseControllerProps,\n type FieldValues,\n type UseFormSetValue,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = UseControllerProps<TFieldValues, TName> & {\n setValue: UseFormSetValue<TFieldValues>;\n dateFormat: string;\n maxDateTime?: Date;\n minDateTime?: Date;\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\n/*\n Date,DateTimeをを選択できるコンポーネント\n * dateFormatに合わせてpickerViewを生成します。\n * @param props\n * @returns\n /\nexport const DatePickerController: <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(\n props: Props<TFieldValues, TName>,\n) => JSX.Element = (props) => {\n const {\n defaultValue,\n maxDateTime,\n minDateTime,\n setValue,\n dateFormat,\n ...others\n } = props;\n\n /\n 受信した値を適切な日付またはnullに変換します。\n * @param value ユーザーによる値、呼び出し側からセットされた値\n * @param pickerInfo 紐づくpickerの情報\n * @returns\n */\n const convertValue = (value: string \| Date \| null): 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(others.name, newValue as never);\n }\n return newValue;\n };\n\n const handleOnchange = (value: Date \| null) => {\n setValue(others.name, (value ?? defaultValue) as never, {\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={others.control}\n name={others.name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <DateTimePicker\n {...field}\n format={dateFormat}\n views={views}\n sx={pickerStyles}\n value={convertValue(field.value)}\n onChange={(newDate) => {\n handleOnchange(newDate);\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: [\"clear\", \"accept\"] },\n }}\n maxDateTime={maxDateTime}\n minDateTime={minDateTime}\n />\n )}\n />\n </div>\n </LocalizationProvider>\n );\n};\n\nexport default DatePickerController;\n"],"names":["pickerStyles","DatePickerController","props","defaultValue","maxDateTime","minDateTime","setValue","dateFormat","others","convertValue","value","newValue","parse","handleOnchange","views","v","jsx","LocalizationProvider","AdapterDateFns","ja","jaJP","styles","Controller","field","fieldState","DateTimePicker","newDate","_a"],"mappings":"~~qcA0BMA~~,EAAe,CACnB,sBAAuB,CACrB,QAAS,GACT,YAAa,~~CACf~~,~~EACA~~,uBAAwB,CACtB,SAAU,SAAA,CAEd,EAQaC,EAKOC,GAAU,~~CACtB~~,~~KAAA~~,CACJ,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,WAAAC,EACA,GAAGC,CAAA,EACDN,EAQEO,EAAgBC,GAA6C,CACjE,MAAMC,EAAWD,EACbA,aAAiB,KACfA,EACA,OAAOA,GAAU,SACfE,~~EAAA~~,MAAMF,EAAOH,EAAY,IAAI,IAAM,EACnC,KACJ,~~KAEA~~,~~OAAA~~,OAAOG,GAAU,~~UACVJ~~,~~EAAAE~~,EAAO,KAAMG,CAAiB,EAElCA,CACT,EAEME,EAAkBH,GAAuB,~~CACpCJ~~,~~EAAAE~~,EAAO,KAAOE,GAASP,EAAwB,CACtD,YAAa,EAAA,CACd,CACH,EAEMW,GAA2B,IAAM,CACrC,MAAMC,EAAsB,~~CAAC~~,~~EAEzB~~,~~OAAAR~~,EAAW,SAAS,MAAM,GAC5BQ,EAAE,KAAK,MAAM,EAEXR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,OAAO,EAEZR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,KAAK,EAEVR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,OAAO,EAEZR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,SAAS,EAEdR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,SAAS,EAEXA,~~CAAA~~,~~GACN~~,~~EAGD~~,~~OAAAC~~,~~EAAA~~,IAACC,~~EAAA~~,qBAAA,CACC,YAAaC,~~EAAA~~,eACb,cAAeC,EACf,WACEC,EAAAA,KAAK,WAAW,wBAAwB,aAAa,WAGvD,~~SAACJ~~,~~EAAA~~,~~IAAA~~,MAAA,CAAI,UAAWK,EAAO,eACrB,SAAAL,~~EAAA~~,IAACM,~~EAAA~~,WAAA,CACC,QAASd,EAAO,QAChB,KAAMA,EAAO,KACb,aAAAL,EACA,OAAQ,CAAC,CAAE,MAAAoB,EAAO,WAAAC,~~CAChB~~,~~IAAA~~,~~OAAAR,~~OAAAA,~~EAAA~~,IAACS,~~EAAA~~,eAAA,CACE,GAAGF,EACJ,OAAQhB,EACR,MAAAO,EACA,GAAId,EACJ,MAAOS,EAAac,EAAM,KAAK,EAC/B,SAAWG,GAAY,CACrBb,EAAea,CAAO,CACxB,EACA,UAAW,CACT,UAAW,CACT,MAAO,CAAC,CAACF,EAAW,MACpB,YAAYG,EAAAH,EAAW,QAAX,YAAAG,EAAkB,QAC9B,UAAW,~~EACb~~,~~EAKA~~,UAAW,CAAE,QAAS,CAAC,QAAS,QAAQ,CAAE,~~CAC5C~~,~~EACA,~~YAAAvB,EACA,YAAAC,CAAA,CAAA,EACF,CAAA,~~CAGN~~,CAAA,CAAA,~~CACF,CAEJ~~"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../src/components/DatePickerController/index.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { DateTimePicker, type DateOrTimeView } 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 } from \"date-fns\";\nimport ja from \"date-fns/locale/ja\";\nimport {\n Controller,\n FieldPath,\n UseControllerProps,\n type FieldValues,\n type UseFormSetValue,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = UseControllerProps<TFieldValues, TName> & {\n setValue: UseFormSetValue<TFieldValues>;\n dateFormat: string;\n maxDateTime?: Date;\n minDateTime?: Date;\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\n/*\n Date,DateTimeをを選択できるコンポーネント\n * dateFormatに合わせてpickerViewを生成します。\n * @param props\n * @returns\n /\nexport const DatePickerController: <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(\n props: Props<TFieldValues, TName>,\n) => JSX.Element = (props) => {\n const {\n defaultValue,\n maxDateTime,\n minDateTime,\n setValue,\n dateFormat,\n ...others\n } = props;\n\n /\n 受信した値を適切な日付またはnullに変換します。\n * @param value ユーザーによる値、呼び出し側からセットされた値\n * @param pickerInfo 紐づくpickerの情報\n * @returns\n */\n const convertValue = (value: string \| Date \| null): 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(others.name, newValue as never);\n }\n return newValue;\n };\n\n const handleOnchange = (value: Date \| null) => {\n setValue(others.name, (value ?? defaultValue) as never, {\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={others.control}\n name={others.name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <DateTimePicker\n {...field}\n format={dateFormat}\n views={views}\n sx={pickerStyles}\n value={convertValue(field.value)}\n onChange={(newDate) => {\n handleOnchange(newDate);\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: [\"clear\", \"accept\"] },\n }}\n maxDateTime={maxDateTime}\n minDateTime={minDateTime}\n />\n )}\n />\n </div>\n </LocalizationProvider>\n );\n};\n\nexport default DatePickerController;\n"],"names":["pickerStyles","DatePickerController","props","defaultValue","maxDateTime","minDateTime","setValue","dateFormat","others","convertValue","value","newValue","parse","handleOnchange","views","v","jsx","LocalizationProvider","AdapterDateFns","ja","jaJP","styles","Controller","field","fieldState","DateTimePicker","newDate","_a"],"mappings":"qcA2BMA,EAAe,CACnB,sBAAuB,CACrB,QAAS,GACT,YAAa,CAAA,EAEf,uBAAwB,CACtB,SAAU,SAAA,CAEd,EAQaC,EAKOC,GAAU,CAC5B,KAAM,CACJ,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,SAAAC,EACA,WAAAC,EACA,GAAGC,CAAA,EACDN,EAQEO,EAAgBC,GAA6C,CACjE,MAAMC,EAAWD,EACbA,aAAiB,KACfA,EACA,OAAOA,GAAU,SACfE,EAAAA,MAAMF,EAAOH,EAAY,IAAI,IAAM,EACnC,KACJ,KAEJ,OAAI,OAAOG,GAAU,UACnBJ,EAASE,EAAO,KAAMG,CAAiB,EAElCA,CACT,EAEME,EAAkBH,GAAuB,CAC7CJ,EAASE,EAAO,KAAOE,GAASP,EAAwB,CACtD,YAAa,EAAA,CACd,CACH,EAEMW,GAA2B,IAAM,CACrC,MAAMC,EAAsB,CAAA,EAE5B,OAAIR,EAAW,SAAS,MAAM,GAC5BQ,EAAE,KAAK,MAAM,EAEXR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,OAAO,EAEZR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,KAAK,EAEVR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,OAAO,EAEZR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,SAAS,EAEdR,EAAW,SAAS,IAAI,GAC1BQ,EAAE,KAAK,SAAS,EAEXA,CACT,GAAA,EAEA,OACEC,EAAAA,IAACC,EAAAA,qBAAA,CACC,YAAaC,EAAAA,eACb,cAAeC,EACf,WACEC,EAAAA,KAAK,WAAW,wBAAwB,aAAa,WAGvD,SAAAJ,EAAAA,IAAC,MAAA,CAAI,UAAWK,EAAO,eACrB,SAAAL,EAAAA,IAACM,EAAAA,WAAA,CACC,QAASd,EAAO,QAChB,KAAMA,EAAO,KACb,aAAAL,EACA,OAAQ,CAAC,CAAE,MAAAoB,EAAO,WAAAC,KAAW,OAC3BR,OAAAA,EAAAA,IAACS,EAAAA,eAAA,CACE,GAAGF,EACJ,OAAQhB,EACR,MAAAO,EACA,GAAId,EACJ,MAAOS,EAAac,EAAM,KAAK,EAC/B,SAAWG,GAAY,CACrBb,EAAea,CAAO,CACxB,EACA,UAAW,CACT,UAAW,CACT,MAAO,CAAC,CAACF,EAAW,MACpB,YAAYG,EAAAH,EAAW,QAAX,YAAAG,EAAkB,QAC9B,UAAW,EAAA,EAMb,UAAW,CAAE,QAAS,CAAC,QAAS,QAAQ,CAAA,CAAE,EAE5C,YAAAvB,EACA,YAAAC,CAAA,CAAA,EACF,CAAA,CAEJ,CACF,CAAA,CAAA,CAGN"}

package/dist/components/DatePickerController/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { FieldPath, UseControllerProps, FieldValues, UseFormSetValue } from 'react-hook-form';
 type Props<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = UseControllerProps<TFieldValues, TName> & {

package/dist/components/DatePickerController/index.es.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { LocalizationProvider as x } from "@mui/x-date-pickers/LocalizationProvi
 import { parse as D } from "date-fns";
 import C from "date-fns/locale/ja";
 import { Controller as P } from "react-hook-form";
-import '../../assets/index10.css';const T = "_rangeContainer_17n2w_1", w = {
+import '../../assets/index7.css';const T = "_rangeContainer_17n2w_1", w = {
   rangeContainer: T
 }, L = {
   ".MuiButtonBase-root": {