@bonprix-ds/react-wrapper-toggle-icon-button 1.0.2 → 1.0.4
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.
|
@@ -1,40 +1,44 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "react";
|
|
3
|
-
import
|
|
2
|
+
import { useRef as e } from "react";
|
|
3
|
+
import t from "@bonprix-ds/react-icon";
|
|
4
|
+
import { useEventListener as n } from "@bonprix-ds/utils";
|
|
4
5
|
import "#styles";
|
|
5
|
-
import { jsx as
|
|
6
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
7
|
//#region src/ToggleIconButton.tsx
|
|
7
8
|
typeof window < "u" && import("@bonprix-ds/bpds-toggle-icon-button").then(({ ToggleIconButton: e }) => {
|
|
8
9
|
customElements.get("bpds-toggle-icon-button") || customElements.define("bpds-toggle-icon-button", e);
|
|
9
10
|
});
|
|
10
|
-
var
|
|
11
|
+
var a = {
|
|
11
12
|
small: "w-4 h-4 fill-current",
|
|
12
13
|
medium: "w-6 h-6 fill-current",
|
|
13
14
|
large: "w-6 h-6 fill-current"
|
|
14
|
-
},
|
|
15
|
-
variant:
|
|
16
|
-
className:
|
|
17
|
-
}) :
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
children:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
})
|
|
36
|
-
|
|
15
|
+
}, o = (e, n) => typeof e == "string" ? /* @__PURE__ */ r(t, {
|
|
16
|
+
variant: e,
|
|
17
|
+
className: a[n]
|
|
18
|
+
}) : e, s = ({ size: t = "medium", selected: a, disabled: s = !1, animation: c = "none", iconUnselected: l, iconSelected: u, labelUnselected: d, labelSelected: f, onChange: p }) => {
|
|
19
|
+
let m = e(null);
|
|
20
|
+
return n(m, "bpds-toggle-icon-button-change", ({ detail: e }) => p(e.selected)), /* @__PURE__ */ r("bpds-toggle-icon-button", {
|
|
21
|
+
ref: m,
|
|
22
|
+
className: "preflight",
|
|
23
|
+
size: t,
|
|
24
|
+
selected: a ? "true" : "false",
|
|
25
|
+
animation: c,
|
|
26
|
+
children: /* @__PURE__ */ i("button", {
|
|
27
|
+
type: "button",
|
|
28
|
+
disabled: s,
|
|
29
|
+
"aria-label": a ? f : d,
|
|
30
|
+
children: [/* @__PURE__ */ r("span", {
|
|
31
|
+
"data-bpds-toggle-icon-button-icon": "unselected",
|
|
32
|
+
children: o(l, t)
|
|
33
|
+
}), /* @__PURE__ */ r("span", {
|
|
34
|
+
"data-bpds-toggle-icon-button-icon": "selected",
|
|
35
|
+
children: o(u, t)
|
|
36
|
+
})]
|
|
37
|
+
})
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
s.displayName = "ToggleIconButton";
|
|
37
41
|
//#endregion
|
|
38
|
-
export {
|
|
42
|
+
export { s as default };
|
|
39
43
|
|
|
40
44
|
//# sourceMappingURL=ToggleIconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleIconButton.js","names":["Icon","ToggleIconButtonElement","ICON_CLASSES","renderIcon","icon","size","ToggleIconButton","
|
|
1
|
+
{"version":3,"file":"ToggleIconButton.js","names":["Icon","ToggleIconButtonElement","ICON_CLASSES","renderIcon","icon","size","ToggleIconButton","ref","useRef","useEventListener","onChange","detail","selected","labelSelected","labelUnselected","iconUnselected","iconSelected"],"sources":["../../src/ToggleIconButton.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useRef, type ReactElement } from \"react\";\n\nimport type { ToggleIconButtonCustomEvents } from \"@bonprix-ds/bpds-toggle-icon-button\";\nimport type { ToggleIconButtonProps } from \"@bonprix-ds/bpds-toggle-icon-button/constants\";\nimport Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport { useEventListener } from \"@bonprix-ds/utils\";\nimport \"@bonprix-ds/bpds-toggle-icon-button/toggle-icon-button.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. The button, its label and both icons are rendered by\n// the JSX below, so the markup is complete without JavaScript and the upgrade only adds the custom\n// event and the arming of the animation.\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-toggle-icon-button\").then(({ ToggleIconButton: ToggleIconButtonElement }) => {\n if (!customElements.get(\"bpds-toggle-icon-button\")) customElements.define(\"bpds-toggle-icon-button\", ToggleIconButtonElement);\n });\n}\n\n// Deliberately `ReactElement` rather than `ReactNode`: `ReactNode` includes `string`, which swallows\n// the icon names whole - no autocompletion, no narrowing back to `IconType` in `renderIcon`, and\n// `@typescript-eslint/no-redundant-type-constituents` rejects the union outright.\ntype IconOrElement = IconType | ReactElement;\n\nexport interface Props {\n /** One of three sizes, to be chosen depending on the surface the button sits on. */\n size?: ToggleIconButtonProps[\"size\"];\n /** Whether the button is selected. The button never changes this itself: update it in `onChange`. */\n selected: boolean;\n /** If `true`, the button cannot be toggled. */\n disabled?: boolean;\n /** Feedback the icon plays when the button goes from unselected to selected. Never on the way back. */\n animation?: ToggleIconButtonProps[\"animation\"];\n /** Icon of the unselected button: a name from our icon set, or your own node. */\n iconUnselected: IconOrElement;\n /** Icon of the selected button: a name from our icon set, or your own node. */\n iconSelected: IconOrElement;\n /** Accessible label while the button is unselected, e.g. \"Add to wishlist\". */\n labelUnselected: string;\n /** Accessible label while the button is selected, e.g. \"Remove from wishlist\". */\n labelSelected: string;\n /** Called with the requested selection whenever the user clicks the button. */\n onChange: (selected: boolean) => void;\n}\n\n// `Icon` carries `w-6 h-6 fill-clr-primary`, and the Tailwind preset sets `important: true`, so the\n// element's own stylesheet can never size or recolor it. These classes reach `twMerge` inside `Icon`\n// and replace them instead. A node a consumer brings themselves carries no utilities and is left to\n// the stylesheet, which is also the only thing styling the icons on the plain web-component path.\nconst ICON_CLASSES = {\n small: \"w-4 h-4 fill-current\",\n medium: \"w-6 h-6 fill-current\",\n large: \"w-6 h-6 fill-current\",\n} as const;\n\nconst renderIcon = (icon: IconOrElement, size: NonNullable<ToggleIconButtonProps[\"size\"]>) =>\n typeof icon === \"string\" ? <Icon variant={icon} className={ICON_CLASSES[size]} /> : icon;\n\nconst ToggleIconButton = ({\n size = \"medium\",\n selected,\n disabled = false,\n animation = \"none\",\n iconUnselected,\n iconSelected,\n labelUnselected,\n labelSelected,\n onChange,\n}: Props) => {\n const ref = useRef<HTMLElement>(null);\n\n useEventListener<ToggleIconButtonCustomEvents[\"bpds-toggle-icon-button-change\"]>(ref, \"bpds-toggle-icon-button-change\", ({ detail }) =>\n onChange(detail.selected),\n );\n\n return (\n <bpds-toggle-icon-button ref={ref} className=\"preflight\" size={size} selected={selected ? \"true\" : \"false\"} animation={animation}>\n <button type=\"button\" disabled={disabled} aria-label={selected ? labelSelected : labelUnselected}>\n <span data-bpds-toggle-icon-button-icon=\"unselected\">{renderIcon(iconUnselected, size)}</span>\n <span data-bpds-toggle-icon-button-icon=\"selected\">{renderIcon(iconSelected, size)}</span>\n </button>\n </bpds-toggle-icon-button>\n );\n};\n\nToggleIconButton.displayName = \"ToggleIconButton\";\n\nexport default ToggleIconButton;\n"],"mappings":";;;;;;;AAkBI,OAAO,SAAW,OACpB,OAAY,sCAAsC,CAAC,MAAM,EAAE,kBAAkBC,QAA8B;CACzG,AAAK,eAAe,IAAI,yBAAyB,KAAG,eAAe,OAAO,2BAA2BA,CAAuB;AAC9H,CAAC;AAiCH,IAAMC,IAAe;CACnB,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEMC,KAAc,GAAqB,MACvC,OAAOC,KAAS,WAAW,kBAACJ,GAAD;CAAM,SAASI;CAAM,WAAWF,EAAaG;AAAQ,CAAA,IAAID,GAEhFE,KAAoB,EACxB,UAAO,UACP,aACA,cAAW,IACX,eAAY,QACZ,mBACA,iBACA,oBACA,kBACA,kBACW;CACX,IAAMC,IAAMC,EAAoB,IAAI;CAMpC,OAJAC,EAAiFF,GAAK,mCAAmC,EAAE,gBACzHG,EAASC,EAAO,QAAQ,CAC1B,GAGE,kBAAC,2BAAD;EAA8B;EAAK,WAAU;EAAkB;EAAM,UAAUC,IAAW,SAAS;EAAoB;EACrH,UAAA,kBAAC,UAAD;GAAQ,MAAK;GAAmB;GAAU,cAAYA,IAAWC,IAAgBC;GAAjF,UAAA,CACE,kBAAC,QAAD;IAAM,qCAAkC;IAAc,UAAAX,EAAWY,GAAgBV,CAAI;GAAQ,CAAA,GAC7F,kBAAC,QAAD;IAAM,qCAAkC;IAAY,UAAAF,EAAWa,GAAcX,CAAI;GAAQ,CAAA,CACnF;;CACe,CAAA;AAE7B;AAEA,EAAiB,cAAc"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-wrapper-toggle-icon-button",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "ToggleIconButton component, implemented as a React wrapper around bpds-toggle-icon-button, 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-toggle-icon-button": "1.0.0",
|
|
45
|
-
"@bonprix-ds/react-icon": "1.
|
|
46
|
-
"@bonprix-ds/utils": "0.
|
|
45
|
+
"@bonprix-ds/react-icon": "1.3.1",
|
|
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": {
|