@bonprix-ds/react-wrapper-collapsible 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import { CollapsibleImperativeHandle } from '@bonprix-ds/react-collapsible';
+import { CollapsibleProps as CollapsibleProps_2 } from '@bonprix-ds/react-collapsible';
+import { default as default_2 } from 'react';
+
+declare const Collapsible: {
+    ({ title, children, initiallyOpened, rootRef, imperativeRef, id, onOpen, onClose, onInitialInView }: CollapsibleProps): default_2.JSX.Element;
+    displayName: string;
+};
+export default Collapsible;
+
+export { CollapsibleImperativeHandle }
+
+export declare type CollapsibleProps = CollapsibleProps_2;
+
+export { }
+
+
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "bpds-collapsible": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement> & {
+          "initially-opened"?: string;
+          "onbpds-collapsible-open"?: (
+            event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-open"],
+          ) => void;
+          "onbpds-collapsible-close"?: (
+            event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-close"],
+          ) => void;
+          "onbpds-collapsible-initial-in-view"?: (
+            event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-initial-in-view"],
+          ) => void;
+        },
+        HTMLElement
+      >;
+    }
+  }
+}

package/dist/index.js

@@ -0,0 +1,2 @@
+import e from "./src/Collapsible.js";
+export { e as default };

package/dist/src/Collapsible.js

@@ -0,0 +1,41 @@
+"use client";
+import { useImperativeHandle as e, useRef as t } from "react";
+import "@bonprix-ds/bpds-collapsible/collapsible.css";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/Collapsible.tsx
+typeof window < "u" && import("@bonprix-ds/bpds-collapsible").then(({ Collapsible: e }) => {
+	customElements.get("bpds-collapsible") || customElements.define("bpds-collapsible", e);
+});
+var i = ({ title: i, children: a, initiallyOpened: o = !1, rootRef: s, imperativeRef: c, id: l, onOpen: u, onClose: d, onInitialInView: f }) => {
+	let p = t(null);
+	return e(c, () => ({
+		open: () => {
+			p.current && (p.current.open = !0);
+		},
+		close: () => {
+			p.current && (p.current.open = !1);
+		}
+	})), /* @__PURE__ */ n("bpds-collapsible", {
+		"initially-opened": o ? "true" : void 0,
+		ref: s,
+		id: l,
+		"onbpds-collapsible-open": u,
+		"onbpds-collapsible-close": d,
+		"onbpds-collapsible-initial-in-view": f,
+		children: /* @__PURE__ */ r("details", {
+			ref: p,
+			open: o,
+			children: [/* @__PURE__ */ r("summary", { children: [i, /* @__PURE__ */ n("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				className: "icon",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ n("path", { d: "m12.046 14.424 6.12-6.121a1.2 1.2 0 0 1 1.698 0 .3.3 0 0 1 0 .424l-6.97 6.97a1.2 1.2 0 0 1-1.697 0l-6.97-6.97a.3.3 0 0 1 0-.424 1.2 1.2 0 0 1 1.697 0l6.122 6.121Z" })
+			})] }), /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n("div", { children: a }) })]
+		})
+	});
+};
+i.displayName = "Collapsible";
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=Collapsible.js.map

package/dist/src/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","names":[],"sources":["../../src/Collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CollapsibleProps } from \"@bonprix-ds/react-collapsible\";\nimport React, { useImperativeHandle, useRef } from \"react\";\n\nimport \"@bonprix-ds/bpds-collapsible/collapsible.css\";\n\n// The element class is loaded lazily and only in the browser: `class X extends HTMLElement` is\n// evaluated at module scope, and `HTMLElement` does not exist in Node, so a static import would\n// throw while the server renders this component. Registering before the markup arrives is not\n// possible either way; the JSX below renders the open state itself, so the component works without\n// JavaScript and the upgrade only adds the animation and the custom events.\n// The registry check has to sit inside the callback, not beside the window guard: the tag can be\n// registered during the await - `defineCustomElements` from the umbrella does exactly that - and\n// `define` throws `NotSupportedError` on a name that is already taken.\nif (typeof window !== \"undefined\") {\n  void import(\"@bonprix-ds/bpds-collapsible\").then(({ Collapsible }) => {\n    if (!customElements.get(\"bpds-collapsible\")) customElements.define(\"bpds-collapsible\", Collapsible);\n  });\n}\n\nexport type Props = CollapsibleProps;\n\nconst Collapsible = ({ title, children, initiallyOpened = false, rootRef, imperativeRef, id, onOpen, onClose, onInitialInView }: Props) => {\n  const detailsRef = useRef<HTMLDetailsElement>(null);\n\n  useImperativeHandle(imperativeRef, () => ({\n    open: () => {\n      if (detailsRef.current) detailsRef.current.open = true;\n    },\n    close: () => {\n      if (detailsRef.current) detailsRef.current.open = false;\n    },\n  }));\n\n  return (\n    <bpds-collapsible\n      initially-opened={initiallyOpened ? \"true\" : undefined}\n      ref={rootRef}\n      id={id}\n      onbpds-collapsible-open={onOpen}\n      onbpds-collapsible-close={onClose}\n      onbpds-collapsible-initial-in-view={onInitialInView}\n    >\n      {/* `open` is rendered here rather than left to the element's connectedCallback so the markup\n          is already correct without JavaScript, and hydration finds the DOM it rendered. */}\n      <details ref={detailsRef} open={initiallyOpened}>\n        <summary>\n          {title}\n          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"icon\" viewBox=\"0 0 24 24\">\n            <path d=\"m12.046 14.424 6.12-6.121a1.2 1.2 0 0 1 1.698 0 .3.3 0 0 1 0 .424l-6.97 6.97a1.2 1.2 0 0 1-1.697 0l-6.97-6.97a.3.3 0 0 1 0-.424 1.2 1.2 0 0 1 1.697 0l6.122 6.121Z\" />\n          </svg>\n        </summary>\n        <div>\n          <div>{children}</div>\n        </div>\n      </details>\n    </bpds-collapsible>\n  );\n};\n\nCollapsible.displayName = \"Collapsible\";\n\nexport default Collapsible;\n"],"mappings":";;;;;AAeI,OAAO,SAAW,OACpB,OAAY,+BAA+B,CAAC,MAAM,EAAE,qBAAkB;CACpE,AAAK,eAAe,IAAI,kBAAkB,KAAG,eAAe,OAAO,oBAAoB,CAAW;AACpG,CAAC;AAKH,IAAM,KAAe,EAAE,UAAO,aAAU,qBAAkB,IAAO,YAAS,kBAAe,OAAI,WAAQ,YAAS,yBAA6B;CACzI,IAAM,IAAa,EAA2B,IAAI;CAWlD,OATA,EAAoB,UAAsB;EACxC,YAAY;GACV,AAAI,EAAW,YAAS,EAAW,QAAQ,OAAO;EACpD;EACA,aAAa;GACX,AAAI,EAAW,YAAS,EAAW,QAAQ,OAAO;EACpD;CACF,EAAE,GAGA,kBAAC,oBAAD;EACE,oBAAkB,IAAkB,SAAS,KAAA;EAC7C,KAAK;EACD;EACJ,2BAAyB;EACzB,4BAA0B;EAC1B,sCAAoC;EAIpC,UAAA,kBAAC,WAAD;GAAS,KAAK;GAAY,MAAM;GAAhC,UAAA,CACE,kBAAC,WAAD,EAAA,UAAA,CACG,GACD,kBAAC,OAAD;IAAK,OAAM;IAA6B,WAAU;IAAO,SAAQ;IAC/D,UAAA,kBAAC,QAAD,EAAM,GAAE,qKAAsK,CAAA;GAC3K,CAAA,CACE,EAAA,CAAA,GACT,kBAAC,OAAD,EAAA,UACE,kBAAC,OAAD,EAAM,YAAc,CAAA,EACjB,CAAA,CACE;;CACO,CAAA;AAEtB;AAEA,EAAY,cAAc"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@bonprix-ds/react-wrapper-collapsible",
+  "version": "1.0.0",
+  "description": "Collapsible component, implemented as a React wrapper around bpds-collapsible, for the Bonprix Design System.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "module": "./dist/index.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bonprix/design-system.git",
+    "directory": "packages/react-wrappers/collapsible"
+  },
+  "dependencies": {
+    "@bonprix-ds/bpds-collapsible": "1.0.0",
+    "@bonprix-ds/react-collapsible": "1.0.6"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "vite": "8.2.2",
+    "@types/react": "19.2.18",
+    "@vitejs/plugin-react": "6.1.1",
+    "rollup-preserve-directives": "1.1.3",
+    "unplugin-dts": "1.1.0",
+    "@microsoft/api-extractor": "7.59.1"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}