@bonprix-ds/react-wrapper-collapsible 1.1.1 → 1.1.2
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.
- package/dist/src/Collapsible.js +28 -28
- package/dist/src/Collapsible.js.map +1 -1
- package/package.json +6 -3
package/dist/src/Collapsible.js
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useImperativeHandle as e, useRef as t } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { useEventListener as n, useInitialInView as r } from "@bonprix-ds/utils";
|
|
4
|
+
import { warnDeprecated as i } from "@bonprix-ds/utils/deprecation";
|
|
4
5
|
import "#styles";
|
|
5
|
-
import { jsx as
|
|
6
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
6
7
|
//#region src/Collapsible.tsx
|
|
7
8
|
typeof window < "u" && import("@bonprix-ds/bpds-collapsible").then(({ Collapsible: e }) => {
|
|
8
9
|
customElements.get("bpds-collapsible") || customElements.define("bpds-collapsible", e);
|
|
9
10
|
});
|
|
10
|
-
var
|
|
11
|
-
(
|
|
12
|
-
let
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
var s = ({ title: s, children: c, initiallyExpanded: l, initiallyOpened: u, rootRef: d, imperativeRef: f, id: p, onExpand: m, onCollapse: h, onOpen: g, onClose: _, onInitialInView: v }) => {
|
|
12
|
+
(u !== void 0 || g || _) && i("collapsible-expanded-props");
|
|
13
|
+
let y = l ?? u ?? !1, b = r(d, v), x = t(null);
|
|
14
|
+
n(b, "bpds-collapsible-expand", m ?? g), n(b, "bpds-collapsible-collapse", h ?? _);
|
|
15
|
+
let S = () => {
|
|
16
|
+
x.current && (x.current.open = !0);
|
|
17
|
+
}, C = () => {
|
|
18
|
+
x.current && (x.current.open = !1);
|
|
16
19
|
};
|
|
17
|
-
return e(
|
|
18
|
-
expand:
|
|
19
|
-
collapse:
|
|
20
|
+
return e(f, () => ({
|
|
21
|
+
expand: S,
|
|
22
|
+
collapse: C,
|
|
20
23
|
open: () => {
|
|
21
|
-
|
|
24
|
+
i("collapsible-expanded-props"), S();
|
|
22
25
|
},
|
|
23
26
|
close: () => {
|
|
24
|
-
|
|
27
|
+
i("collapsible-expanded-props"), C();
|
|
25
28
|
}
|
|
26
|
-
})), /* @__PURE__ */
|
|
27
|
-
"initially-expanded":
|
|
28
|
-
ref:
|
|
29
|
-
id:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
ref: v,
|
|
35
|
-
open: _,
|
|
36
|
-
children: [/* @__PURE__ */ i("summary", { children: [a, /* @__PURE__ */ r("svg", {
|
|
29
|
+
})), /* @__PURE__ */ a("bpds-collapsible", {
|
|
30
|
+
"initially-expanded": y ? "true" : void 0,
|
|
31
|
+
ref: b,
|
|
32
|
+
id: p,
|
|
33
|
+
children: /* @__PURE__ */ o("details", {
|
|
34
|
+
ref: x,
|
|
35
|
+
open: y,
|
|
36
|
+
children: [/* @__PURE__ */ o("summary", { children: [s, /* @__PURE__ */ a("svg", {
|
|
37
37
|
xmlns: "http://www.w3.org/2000/svg",
|
|
38
38
|
className: "icon",
|
|
39
39
|
viewBox: "0 0 24 24",
|
|
40
|
-
children: /* @__PURE__ */
|
|
41
|
-
})] }), /* @__PURE__ */
|
|
40
|
+
children: /* @__PURE__ */ a("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" })
|
|
41
|
+
})] }), /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a("div", { children: c }) })]
|
|
42
42
|
})
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
|
-
|
|
45
|
+
s.displayName = "Collapsible";
|
|
46
46
|
//#endregion
|
|
47
|
-
export {
|
|
47
|
+
export { s as default };
|
|
48
48
|
|
|
49
49
|
//# sourceMappingURL=Collapsible.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsible.js","names":["Collapsible","initiallyExpandedProp","initiallyOpened","onOpen","onClose","warnDeprecated","initiallyExpanded","
|
|
1
|
+
{"version":3,"file":"Collapsible.js","names":["Collapsible","initiallyExpandedProp","initiallyOpened","onOpen","onClose","warnDeprecated","initiallyExpanded","ref","useInitialInView","rootRef","onInitialInView","detailsRef","useRef","useEventListener","onExpand","onCollapse","expand","collapse","useImperativeHandle","imperativeRef","title"],"sources":["../../src/Collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useImperativeHandle, useRef } from \"react\";\n\nimport type { CollapsibleProps } from \"@bonprix-ds/react-collapsible\";\nimport { useEventListener, useInitialInView } from \"@bonprix-ds/utils\";\nimport { warnDeprecated } from \"@bonprix-ds/utils/deprecation\";\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 = ({\n title,\n children,\n initiallyExpanded: initiallyExpandedProp,\n initiallyOpened,\n rootRef,\n imperativeRef,\n id,\n onExpand,\n onCollapse,\n onOpen,\n onClose,\n onInitialInView,\n}: Props) => {\n if (initiallyOpened !== undefined || onOpen || onClose) warnDeprecated(\"collapsible-expanded-props\");\n const initiallyExpanded = initiallyExpandedProp ?? initiallyOpened ?? false;\n const ref = useInitialInView(rootRef, onInitialInView);\n const detailsRef = useRef<HTMLDetailsElement>(null);\n\n useEventListener(ref, \"bpds-collapsible-expand\", onExpand ?? onOpen);\n useEventListener(ref, \"bpds-collapsible-collapse\", onCollapse ?? onClose);\n\n const expand = () => {\n if (detailsRef.current) detailsRef.current.open = true;\n };\n\n const collapse = () => {\n if (detailsRef.current) detailsRef.current.open = false;\n };\n\n useImperativeHandle(imperativeRef, () => ({\n expand,\n collapse,\n open: () => {\n warnDeprecated(\"collapsible-expanded-props\");\n expand();\n },\n close: () => {\n warnDeprecated(\"collapsible-expanded-props\");\n collapse();\n },\n }));\n\n return (\n <bpds-collapsible initially-expanded={initiallyExpanded ? \"true\" : undefined} ref={ref} id={id}>\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={initiallyExpanded}>\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":";;;;;;;AAiBI,OAAO,SAAW,OACpB,OAAY,+BAA+B,CAAC,MAAM,EAAE,qBAAkB;CACpE,AAAK,eAAe,IAAI,kBAAkB,KAAG,eAAe,OAAO,oBAAoBA,CAAW;AACpG,CAAC;AAKH,IAAMA,KAAe,EACnB,UACA,aACA,mBAAmBC,GACnB,oBACA,YACA,kBACA,OACA,aACA,eACA,WACA,YACA,yBACW;CACX,CAAIC,MAAoB,KAAA,KAAaC,KAAUC,MAASC,EAAe,4BAA4B;CACnG,IAAMC,IAAoBL,KAAyBC,KAAmB,IAChEK,IAAMC,EAAiBC,GAASC,CAAe,GAC/CC,IAAaC,EAA2B,IAAI;CAGlD,AADAC,EAAiBN,GAAK,2BAA2BO,KAAYX,CAAM,GACnEU,EAAiBN,GAAK,6BAA6BQ,KAAcX,CAAO;CAExE,IAAMY,UAAe;EACnB,AAAIL,EAAW,YAAS,EAAW,QAAQ,OAAO;CACpD,GAEMM,UAAiB;EACrB,AAAIN,EAAW,YAAS,EAAW,QAAQ,OAAO;CACpD;CAeA,OAbAO,EAAoBC,UAAsB;EACxC;EACA;EACA,YAAY;GAEV,AADAd,EAAe,4BAA4B,GAC3CW,EAAO;EACT;EACA,aAAa;GAEX,AADAX,EAAe,4BAA4B,GAC3CY,EAAS;EACX;CACF,EAAE,GAGA,kBAAC,oBAAD;EAAkB,sBAAoBX,IAAoB,SAAS,KAAA;EAAgB;EAAS;EAG1F,UAAA,kBAAC,WAAD;GAAS,KAAKK;GAAY,MAAML;GAAhC,UAAA,CACE,kBAAC,WAAD,EAAA,UAAA,CACGc,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-wrapper-collapsible",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Collapsible component, implemented as a React wrapper around bpds-collapsible, for the Bonprix Design System.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -42,12 +42,15 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@bonprix-ds/bpds-collapsible": "1.1.0",
|
|
45
|
-
"@bonprix-ds/react-collapsible": "1.1.
|
|
46
|
-
"@bonprix-ds/utils": "0.
|
|
45
|
+
"@bonprix-ds/react-collapsible": "1.1.2",
|
|
46
|
+
"@bonprix-ds/utils": "0.5.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
+
"@testing-library/dom": "10.4.2",
|
|
50
|
+
"@testing-library/react": "16.3.3",
|
|
49
51
|
"@types/react": "19.3.0",
|
|
50
52
|
"vite": "8.3.2",
|
|
53
|
+
"vitest": "5.0.5",
|
|
51
54
|
"@bonprix-ds/vite-config": "0.0.0"
|
|
52
55
|
},
|
|
53
56
|
"peerDependencies": {
|