@bonprix-ds/react-wrapper-collapsible 1.0.1 → 1.0.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/index.d.ts +4 -39
- package/dist/src/Collapsible.d.ts +9 -0
- package/dist/src/Collapsible.js.map +1 -1
- package/dist/src/jsx.d.ts +13 -0
- package/package.json +27 -26
package/dist/index.d.ts
CHANGED
|
@@ -1,39 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
declare const Collapsible: {
|
|
6
|
-
({ title, children, initiallyOpened, rootRef, imperativeRef, id, onOpen, onClose, onInitialInView }: CollapsibleProps): default_2.JSX.Element;
|
|
7
|
-
displayName: string;
|
|
8
|
-
};
|
|
9
|
-
export default Collapsible;
|
|
10
|
-
|
|
11
|
-
export { CollapsibleImperativeHandle }
|
|
12
|
-
|
|
13
|
-
export declare type CollapsibleProps = CollapsibleProps_2;
|
|
14
|
-
|
|
15
|
-
export { }
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
declare module "react" {
|
|
20
|
-
namespace JSX {
|
|
21
|
-
interface IntrinsicElements {
|
|
22
|
-
"bpds-collapsible": React.DetailedHTMLProps<
|
|
23
|
-
React.HTMLAttributes<HTMLElement> & {
|
|
24
|
-
"initially-opened"?: string;
|
|
25
|
-
"onbpds-collapsible-open"?: (
|
|
26
|
-
event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-open"],
|
|
27
|
-
) => void;
|
|
28
|
-
"onbpds-collapsible-close"?: (
|
|
29
|
-
event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-close"],
|
|
30
|
-
) => void;
|
|
31
|
-
"onbpds-collapsible-initial-in-view"?: (
|
|
32
|
-
event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-initial-in-view"],
|
|
33
|
-
) => void;
|
|
34
|
-
},
|
|
35
|
-
HTMLElement
|
|
36
|
-
>;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
1
|
+
import "./src/jsx";
|
|
2
|
+
export { default } from "./src/Collapsible";
|
|
3
|
+
export type { Props as CollapsibleProps } from "./src/Collapsible";
|
|
4
|
+
export type { CollapsibleImperativeHandle } from "@bonprix-ds/react-collapsible";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { CollapsibleProps } from "@bonprix-ds/react-collapsible";
|
|
3
|
+
import "@bonprix-ds/bpds-collapsible/collapsible.css";
|
|
4
|
+
export type Props = CollapsibleProps;
|
|
5
|
+
declare const Collapsible: {
|
|
6
|
+
({ title, children, initiallyOpened, rootRef, imperativeRef, id, onOpen, onClose, onInitialInView }: Props): React.JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
9
|
+
export default Collapsible;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsible.js","names":[],"sources":["../../src/Collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"Collapsible.js","names":[],"sources":["../../src/Collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useImperativeHandle, useRef } from \"react\";\n\nimport type { CollapsibleProps } from \"@bonprix-ds/react-collapsible\";\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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
declare module "react" {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
"bpds-collapsible": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
|
|
6
|
+
"initially-opened"?: string;
|
|
7
|
+
"onbpds-collapsible-open"?: (event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-open"]) => void;
|
|
8
|
+
"onbpds-collapsible-close"?: (event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-close"]) => void;
|
|
9
|
+
"onbpds-collapsible-initial-in-view"?: (event: import("@bonprix-ds/bpds-collapsible").CollapsibleCustomEvents["bpds-collapsible-initial-in-view"]) => void;
|
|
10
|
+
}, HTMLElement>;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
package/package.json
CHANGED
|
@@ -1,16 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-wrapper-collapsible",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Collapsible component, implemented as a React wrapper around bpds-collapsible, for the Bonprix Design System.",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"author": "",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/bonprix/design-system.git",
|
|
11
|
+
"directory": "packages/react-wrappers/collapsible"
|
|
9
12
|
},
|
|
10
|
-
"
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
16
|
+
"!dist/vite.config.d.ts",
|
|
17
|
+
"!dist/**/*.test.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
11
20
|
"sideEffects": [
|
|
12
21
|
"**/*.css"
|
|
13
22
|
],
|
|
23
|
+
"module": "./dist/index.js",
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
14
25
|
"exports": {
|
|
15
26
|
".": {
|
|
16
27
|
"import": "./dist/index.js",
|
|
@@ -18,33 +29,23 @@
|
|
|
18
29
|
"default": "./dist/index.js"
|
|
19
30
|
}
|
|
20
31
|
},
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
"
|
|
24
|
-
],
|
|
25
|
-
"keywords": [],
|
|
26
|
-
"author": "",
|
|
27
|
-
"license": "UNLICENSED",
|
|
28
|
-
"repository": {
|
|
29
|
-
"type": "git",
|
|
30
|
-
"url": "git+https://github.com/bonprix/design-system.git",
|
|
31
|
-
"directory": "packages/react-wrappers/collapsible"
|
|
32
|
+
"publishConfig": {
|
|
33
|
+
"access": "public",
|
|
34
|
+
"provenance": true
|
|
32
35
|
},
|
|
33
36
|
"dependencies": {
|
|
34
37
|
"@bonprix-ds/bpds-collapsible": "1.0.0",
|
|
35
|
-
"@bonprix-ds/react-collapsible": "1.0.
|
|
36
|
-
},
|
|
37
|
-
"peerDependencies": {
|
|
38
|
-
"react": "^19.0.0",
|
|
39
|
-
"react-dom": "^19.0.0"
|
|
38
|
+
"@bonprix-ds/react-collapsible": "1.0.8"
|
|
40
39
|
},
|
|
41
40
|
"devDependencies": {
|
|
42
|
-
"
|
|
43
|
-
"@types/react": "19.2.18",
|
|
41
|
+
"@types/react": "19.3.0",
|
|
44
42
|
"@vitejs/plugin-react": "6.1.1",
|
|
45
43
|
"rollup-preserve-directives": "1.1.3",
|
|
46
|
-
"
|
|
47
|
-
|
|
44
|
+
"vite": "8.3.0"
|
|
45
|
+
},
|
|
46
|
+
"peerDependencies": {
|
|
47
|
+
"react": "^19.3.0",
|
|
48
|
+
"react-dom": "^19.3.0"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
51
|
"build": "vite build"
|