@bonprix-ds/react-modal 1.0.2 → 1.1.0

package/dist/src/Modal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+/** @deprecated [modal-component] Use Dialog, SideSheet or BottomSheet instead. */
 export interface Props {
     /** Toggles the visibility of the modal. Should be used in conjunction with the `onClose` property. */
     isOpen: boolean;
@@ -9,5 +10,6 @@ export interface Props {
     /** The z-index of the modal. */
     zIndex?: number;
 }
+/** @deprecated [modal-component] Use Dialog, SideSheet or BottomSheet instead. */
 declare const Modal: ({ children, isOpen, onClose, zIndex }: Props) => React.JSX.Element | null;
 export default Modal;

package/dist/src/Modal.js

@@ -5,24 +5,26 @@ import { createPortal as t } from "react-dom";
 import { tv as n } from "tailwind-variants";
 import { backdrop as r, fadeAnimation as i } from "@bonprix-ds/internal-components";
 import { useIsClient as a, usePrefersReducedMotion as o } from "@bonprix-ds/utils";
-import { Fragment as s, jsx as c } from "react/jsx-runtime";
+import { warnDeprecated as s } from "@bonprix-ds/utils/deprecation";
+import { Fragment as c, jsx as l } from "react/jsx-runtime";
 //#region src/Modal.tsx
-var l = n({
+var u = n({
 	slots: { backdrop: r() },
 	variants: { prefersReducedMotion: { false: { backdrop: i() } } }
-}), u = ({ children: n, isOpen: r, onClose: i = () => null, zIndex: u = 1 }) => {
-	let { backdrop: d } = l({ prefersReducedMotion: o() }), { shouldRender: f, handleAnimationEnd: p } = e(r);
-	return a() ? /* @__PURE__ */ c(s, { children: t(f ? /* @__PURE__ */ c("div", {
-		className: d(),
+}), d = ({ children: n, isOpen: r, onClose: i = () => null, zIndex: d = 1 }) => {
+	s("modal-component");
+	let { backdrop: f } = u({ prefersReducedMotion: o() }), { shouldRender: p, handleAnimationEnd: m } = e(r);
+	return a() ? /* @__PURE__ */ l(c, { children: t(p ? /* @__PURE__ */ l("div", {
+		className: f(),
 		onClick: i,
 		"data-state": r ? "open" : "closed",
-		onAnimationEnd: p,
-		style: { zIndex: u },
+		onAnimationEnd: m,
+		style: { zIndex: d },
 		"data-bpds": "modal",
 		children: n
 	}) : null, document.body) }) : null;
 };
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=Modal.js.map

package/dist/src/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":[],"sources":["../../src/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { tv } from \"tailwind-variants\";\n\nimport { backdrop, fadeAnimation } from \"@bonprix-ds/internal-components\";\nimport { useIsClient, usePrefersReducedMotion } from \"@bonprix-ds/utils\";\n\nimport useAnimation from \"./useAnimation\";\n\nconst generateClasses = tv({\n  slots: {\n    backdrop: backdrop(),\n  },\n  variants: {\n    prefersReducedMotion: {\n      false: {\n        backdrop: fadeAnimation(),\n      },\n    },\n  },\n});\n\nexport interface Props {\n  /** Toggles the visibility of the modal. Should be used in conjunction with the `onClose` property. */\n  isOpen: boolean;\n  /** The content to be displayed inside the modal. */\n  children?: React.ReactNode;\n  /** Callback function to be called when the modal is closed. Should be used in conjunction with the `isOpen` property. */\n  onClose?: () => void;\n  /** The z-index of the modal. */\n  zIndex?: number;\n}\n\nconst Modal = ({ children, isOpen, onClose = () => null, zIndex = 1 }: Props) => {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { backdrop } = generateClasses({ prefersReducedMotion });\n  const { shouldRender, handleAnimationEnd } = useAnimation(isOpen);\n\n  const isClient = useIsClient();\n  if (!isClient) return null;\n\n  return (\n    <>\n      {createPortal(\n        shouldRender ? (\n          <div\n            className={backdrop()}\n            onClick={onClose}\n            data-state={isOpen ? \"open\" : \"closed\"}\n            onAnimationEnd={handleAnimationEnd}\n            style={{ zIndex }}\n            data-bpds=\"modal\"\n          >\n            {children}\n          </div>\n        ) : null,\n        document.body,\n      )}\n    </>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAkB,EAAG;CACzB,OAAO,EACL,UAAU,EAAS,EACrB;CACA,UAAU,EACR,sBAAsB,EACpB,OAAO,EACL,UAAU,EAAc,EAC1B,EACF,EACF;AACF,CAAC,GAaK,KAAS,EAAE,aAAU,WAAQ,mBAAgB,MAAM,YAAS,QAAe;CAE/E,IAAM,EAAE,gBAAa,EAAgB,EAAE,sBADV,EACU,EAAqB,CAAC,GACvD,EAAE,iBAAc,0BAAuB,EAAa,CAAM;CAKhE,OAHiB,EACZ,IAGH,kBAAA,GAAA,EAAA,UACG,EACC,IACE,kBAAC,OAAD;EACE,WAAW,EAAS;EACpB,SAAS;EACT,cAAY,IAAS,SAAS;EAC9B,gBAAgB;EAChB,OAAO,EAAE,UAAO;EAChB,aAAU;EAET;CACE,CAAA,IACH,MACJ,SAAS,IACX,EACA,CAAA,IAnBkB;AAqBxB"}
+{"version":3,"file":"Modal.js","names":["_Fragment","useAnimation","generateClasses","tv","backdrop","fadeAnimation","Modal","usePrefersReducedMotion","isOpen","useIsClient","Fragment","createPortal","shouldRender","onClose","handleAnimationEnd"],"sources":["../../src/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { tv } from \"tailwind-variants\";\n\nimport { backdrop, fadeAnimation } from \"@bonprix-ds/internal-components\";\nimport { useIsClient, usePrefersReducedMotion } from \"@bonprix-ds/utils\";\nimport { warnDeprecated } from \"@bonprix-ds/utils/deprecation\";\n\nimport useAnimation from \"./useAnimation\";\n\nconst generateClasses = tv({\n  slots: {\n    backdrop: backdrop(),\n  },\n  variants: {\n    prefersReducedMotion: {\n      false: {\n        backdrop: fadeAnimation(),\n      },\n    },\n  },\n});\n\n/** @deprecated [modal-component] Use Dialog, SideSheet or BottomSheet instead. */\nexport interface Props {\n  /** Toggles the visibility of the modal. Should be used in conjunction with the `onClose` property. */\n  isOpen: boolean;\n  /** The content to be displayed inside the modal. */\n  children?: React.ReactNode;\n  /** Callback function to be called when the modal is closed. Should be used in conjunction with the `isOpen` property. */\n  onClose?: () => void;\n  /** The z-index of the modal. */\n  zIndex?: number;\n}\n\n/** @deprecated [modal-component] Use Dialog, SideSheet or BottomSheet instead. */\nconst Modal = ({ children, isOpen, onClose = () => null, zIndex = 1 }: Props) => {\n  warnDeprecated(\"modal-component\");\n\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { backdrop } = generateClasses({ prefersReducedMotion });\n  const { shouldRender, handleAnimationEnd } = useAnimation(isOpen);\n\n  const isClient = useIsClient();\n  if (!isClient) return null;\n\n  return (\n    <>\n      {createPortal(\n        shouldRender ? (\n          <div\n            className={backdrop()}\n            onClick={onClose}\n            data-state={isOpen ? \"open\" : \"closed\"}\n            onAnimationEnd={handleAnimationEnd}\n            style={{ zIndex }}\n            data-bpds=\"modal\"\n          >\n            {children}\n          </div>\n        ) : null,\n        document.body,\n      )}\n    </>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;AAYA,IAAME,IAAkBC,EAAG;CACzB,OAAO,EACL,UAAUC,EAAS,EACrB;CACA,UAAU,EACR,sBAAsB,EACpB,OAAO,EACL,UAAUC,EAAc,EAC1B,EACF,EACF;AACF,CAAC,GAeKC,KAAS,EAAE,aAAU,WAAQ,mBAAgB,MAAM,YAAS,QAAe;CAC/E,EAAe,iBAAiB;CAGhC,IAAM,EAAE,gBAAaJ,EAAgB,EAAE,sBADVK,EACU,EAAqB,CAAC,GACvD,EAAE,iBAAc,0BAAuBN,EAAaO,CAAM;CAKhE,OAHiBC,EACZ,IAGH,kBAAAT,GAAA,EAAA,UACGW,EACCC,IACE,kBAAC,OAAD;EACE,WAAWR,EAAS;EACpB,SAASS;EACT,cAAYL,IAAS,SAAS;EAC9B,gBAAgBM;EAChB,OAAO,EAAE,UAAO;EAChB,aAAU;EAET;CACE,CAAA,IACH,MACJ,SAAS,IACX,EACA,CAAA,IAnBkB;AAqBxB"}

package/dist/src/useAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimation.js","names":[],"sources":["../../src/useAnimation.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nconst useAnimation = (prop: boolean) => {\n  const [shouldRender, setShouldRender] = useState(prop);\n\n  useEffect(() => {\n    if (prop) {\n      // oxlint-disable-next-line react-hooks/set-state-in-effect\n      setShouldRender(true);\n    }\n  }, [prop]);\n\n  const handleAnimationEnd = () => {\n    if (!prop) {\n      setShouldRender(false);\n    }\n  };\n\n  return { shouldRender, handleAnimationEnd };\n};\n\nexport default useAnimation;\n"],"mappings":";;AAEA,IAAM,KAAgB,MAAkB;CACtC,IAAM,CAAC,GAAc,KAAmB,EAAS,CAAI;CAerD,OAbA,QAAgB;EACd,AAAI,KAEF,EAAgB,EAAI;CAExB,GAAG,CAAC,CAAI,CAAC,GAQF;EAAE;EAAc,0BANU;GAC/B,AAAK,KACH,EAAgB,EAAK;EAEzB;CAE0C;AAC5C"}
+{"version":3,"file":"useAnimation.js","names":["useAnimation","shouldRender","setShouldRender","useState","prop","useEffect"],"sources":["../../src/useAnimation.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nconst useAnimation = (prop: boolean) => {\n  const [shouldRender, setShouldRender] = useState(prop);\n\n  useEffect(() => {\n    if (prop) {\n      // oxlint-disable-next-line react-hooks/set-state-in-effect\n      setShouldRender(true);\n    }\n  }, [prop]);\n\n  const handleAnimationEnd = () => {\n    if (!prop) {\n      setShouldRender(false);\n    }\n  };\n\n  return { shouldRender, handleAnimationEnd };\n};\n\nexport default useAnimation;\n"],"mappings":";;AAEA,IAAMA,KAAgB,MAAkB;CACtC,IAAM,CAACC,GAAcC,KAAmBC,EAASC,CAAI;CAerD,OAbAC,QAAgB;EACd,AAAID,KAEFF,EAAgB,EAAI;CAExB,GAAG,CAACE,CAAI,CAAC,GAQF;EAAE;EAAc,0BANU;GAC/B,AAAKA,KACHF,EAAgB,EAAK;EAEzB;CAE0C;AAC5C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonprix-ds/react-modal",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Modal component, implemented in React, for the Bonprix Design System.",
   "keywords": [],
   "license": "UNLICENSED",
@@ -32,22 +32,21 @@
     "provenance": true
   },
   "dependencies": {
-    "@bonprix-ds/internal-components": "0.2.1",
-    "@bonprix-ds/utils": "0.2.2"
+    "@bonprix-ds/internal-components": "0.2.2",
+    "@bonprix-ds/utils": "0.3.0"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@vitejs/plugin-react": "6.1.1",
-    "rollup-preserve-directives": "1.1.3",
-    "vite": "8.3.0",
-    "vitest": "4.1.11"
+    "vite": "8.3.2",
+    "vitest": "4.1.11",
+    "@bonprix-ds/vite-config": "0.0.0"
   },
   "peerDependencies": {
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "^19",
+    "react-dom": "^19",
     "tailwind-variants": "0.3.1"
   },
   "scripts": {