@justeattakeaway/pie-icon-button 0.21.1 → 0.21.3-next.0
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.js +45 -101
- package/dist/react.d.ts +1 -1
- package/dist/react.js +34 -56
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { unsafeCSS as f, LitElement as m, html as s } from "lit";
|
|
2
|
+
import { property as l } from "lit/decorators.js";
|
|
3
|
+
import "@justeattakeaway/pie-spinner";
|
|
4
|
+
const h = (i, o, t) => function(r, n) {
|
|
5
|
+
const a = `#${n}`;
|
|
6
|
+
Object.defineProperty(r, n, {
|
|
6
7
|
get() {
|
|
7
8
|
return this[a];
|
|
8
9
|
},
|
|
9
|
-
set(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
`<${n}> Invalid value "${l}" provided for property "${i}".`,
|
|
10
|
+
set(v) {
|
|
11
|
+
o.includes(v) ? this[a] = v : (console.error(
|
|
12
|
+
`<${i}> Invalid value "${v}" provided for property "${n}".`,
|
|
13
13
|
`Must be one of: ${o.join(" | ")}.`,
|
|
14
14
|
`Falling back to default value: "${t}"`
|
|
15
|
-
), this[a] = t)
|
|
16
|
-
}
|
|
15
|
+
), this[a] = t);
|
|
16
|
+
},
|
|
17
|
+
configurable: !0
|
|
17
18
|
});
|
|
18
19
|
};
|
|
19
|
-
function
|
|
20
|
-
customElements.get(
|
|
20
|
+
function g(i, o) {
|
|
21
|
+
customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, o);
|
|
21
22
|
}
|
|
22
|
-
const
|
|
23
|
-
`,
|
|
23
|
+
const p = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);block-size:var(--btn-dimension);inline-size:var(--btn-dimension);border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled),.o-iconBtn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn[variant=secondary]:active:not(:disabled),.o-iconBtn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled),.o-iconBtn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled),.o-iconBtn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled),.o-iconBtn[variant=ghost-secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled),.o-iconBtn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled),.o-iconBtn[variant=ghost-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
|
|
24
|
+
`, u = ["xsmall", "small", "medium", "large"], y = [
|
|
24
25
|
"primary",
|
|
25
26
|
"secondary",
|
|
26
27
|
"outline",
|
|
@@ -28,71 +29,14 @@ const $ = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-bo
|
|
|
28
29
|
"ghost-secondary",
|
|
29
30
|
"inverse",
|
|
30
31
|
"ghost-inverse"
|
|
31
|
-
]
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
set(a) {
|
|
38
|
-
const l = this[i];
|
|
39
|
-
o.includes(a) ? this[i] = a : (console.error(
|
|
40
|
-
`<${n}> Invalid value "${a}" provided for property "${r}".`,
|
|
41
|
-
`Must be one of: ${o.join(" | ")}.`,
|
|
42
|
-
`Falling back to default value: "${t}"`
|
|
43
|
-
), this[i] = t), this.requestUpdate(r, l);
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
};
|
|
47
|
-
function w(n, o) {
|
|
48
|
-
customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, o);
|
|
49
|
-
}
|
|
50
|
-
const L = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner[variant=secondary]{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner[variant=inverse]{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner[size=xs]{--spinner-size: 16px}.c-spinner[size=s]{--spinner-size: 20px}.c-spinner[size=l]{--spinner-size: 32px}.c-spinner[size=xl]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
|
|
51
|
-
`, j = ["xs", "s", "m", "l", "xl"], O = ["brand", "secondary", "inverse"];
|
|
52
|
-
var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (n, o, t, e) => {
|
|
53
|
-
for (var r = e > 1 ? void 0 : e ? _(o, t) : o, i = n.length - 1, a; i >= 0; i--)
|
|
54
|
-
(a = n[i]) && (r = (e ? a(o, t, r) : a(r)) || r);
|
|
55
|
-
return e && r && E(o, t, r), r;
|
|
56
|
-
};
|
|
57
|
-
const h = "pie-spinner";
|
|
58
|
-
class v extends g {
|
|
59
|
-
constructor() {
|
|
60
|
-
super(...arguments), this.size = "m", this.variant = "brand";
|
|
61
|
-
}
|
|
62
|
-
render() {
|
|
63
|
-
const { variant: o, size: t, aria: e } = this;
|
|
64
|
-
return d`
|
|
65
|
-
<div
|
|
66
|
-
data-test-id="pie-spinner"
|
|
67
|
-
class="c-spinner"
|
|
68
|
-
role="status"
|
|
69
|
-
aria-live="polite"
|
|
70
|
-
size="${t}"
|
|
71
|
-
variant="${o}">
|
|
72
|
-
${e != null && e.label ? d`<span class="c-spinner-label">${e.label}</span>` : z}
|
|
73
|
-
</div>`;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
v.styles = m(L);
|
|
77
|
-
p([
|
|
78
|
-
c({ type: Object })
|
|
79
|
-
], v.prototype, "aria", 2);
|
|
80
|
-
p([
|
|
81
|
-
c(),
|
|
82
|
-
y(h, j, "m")
|
|
83
|
-
], v.prototype, "size", 2);
|
|
84
|
-
p([
|
|
85
|
-
c(),
|
|
86
|
-
y(h, O, "brand")
|
|
87
|
-
], v.prototype, "variant", 2);
|
|
88
|
-
w(h, v);
|
|
89
|
-
var C = Object.defineProperty, I = Object.getOwnPropertyDescriptor, b = (n, o, t, e) => {
|
|
90
|
-
for (var r = e > 1 ? void 0 : e ? I(o, t) : o, i = n.length - 1, a; i >= 0; i--)
|
|
91
|
-
(a = n[i]) && (r = (e ? a(o, t, r) : a(r)) || r);
|
|
92
|
-
return e && r && C(o, t, r), r;
|
|
32
|
+
];
|
|
33
|
+
var B = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (i, o, t, e) => {
|
|
34
|
+
for (var r = e > 1 ? void 0 : e ? z(o, t) : o, n = i.length - 1, a; n >= 0; n--)
|
|
35
|
+
(a = i[n]) && (r = (e ? a(o, t, r) : a(r)) || r);
|
|
36
|
+
return e && r && B(o, t, r), r;
|
|
93
37
|
};
|
|
94
|
-
const
|
|
95
|
-
class
|
|
38
|
+
const b = "pie-icon-button";
|
|
39
|
+
class c extends m {
|
|
96
40
|
constructor() {
|
|
97
41
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1, this.isLoading = !1;
|
|
98
42
|
}
|
|
@@ -104,7 +48,7 @@ class s extends g {
|
|
|
104
48
|
renderSpinner() {
|
|
105
49
|
const { variant: o, size: t } = this, e = t === "xsmall" ? "s" : "m";
|
|
106
50
|
let r = "brand";
|
|
107
|
-
return o != null && o.includes("secondary") && (r = "secondary"), (o === "primary" || o === "ghost-inverse") && (r = "inverse"),
|
|
51
|
+
return o != null && o.includes("secondary") && (r = "secondary"), (o === "primary" || o === "ghost-inverse") && (r = "inverse"), s`
|
|
108
52
|
<pie-spinner
|
|
109
53
|
size="${e}"
|
|
110
54
|
variant="${r}"
|
|
@@ -117,35 +61,35 @@ class s extends g {
|
|
|
117
61
|
variant: e,
|
|
118
62
|
isLoading: r
|
|
119
63
|
} = this;
|
|
120
|
-
return
|
|
64
|
+
return s`
|
|
121
65
|
<button
|
|
122
66
|
class="o-iconBtn"
|
|
123
67
|
size="${t}"
|
|
124
68
|
variant="${e}"
|
|
125
69
|
?disabled="${o}"
|
|
126
70
|
?isLoading="${r}">
|
|
127
|
-
${r ? this.renderSpinner() :
|
|
71
|
+
${r ? this.renderSpinner() : s`<slot></slot>`}
|
|
128
72
|
</button>`;
|
|
129
73
|
}
|
|
130
74
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
],
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
],
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
],
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
],
|
|
146
|
-
|
|
75
|
+
c.styles = f(p);
|
|
76
|
+
d([
|
|
77
|
+
l(),
|
|
78
|
+
h(b, u, "medium")
|
|
79
|
+
], c.prototype, "size", 2);
|
|
80
|
+
d([
|
|
81
|
+
l(),
|
|
82
|
+
h(b, y, "primary")
|
|
83
|
+
], c.prototype, "variant", 2);
|
|
84
|
+
d([
|
|
85
|
+
l({ type: Boolean })
|
|
86
|
+
], c.prototype, "disabled", 2);
|
|
87
|
+
d([
|
|
88
|
+
l({ type: Boolean })
|
|
89
|
+
], c.prototype, "isLoading", 2);
|
|
90
|
+
g(b, c);
|
|
147
91
|
export {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
92
|
+
c as PieIconButton,
|
|
93
|
+
u as sizes,
|
|
94
|
+
y as variants
|
|
151
95
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
-
import type { ReactWebComponent } from '@lit
|
|
3
|
+
import type { ReactWebComponent } from '@lit/react';
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare interface IconButtonProps {
|
package/dist/react.js
CHANGED
|
@@ -1,72 +1,50 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as y from "react";
|
|
2
2
|
import { PieIconButton as E } from "./index.js";
|
|
3
|
-
import { sizes as
|
|
3
|
+
import { sizes as k, variants as C } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
|
+
import "@justeattakeaway/pie-spinner";
|
|
6
7
|
/**
|
|
7
8
|
* @license
|
|
8
9
|
* Copyright 2018 Google LLC
|
|
9
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10
11
|
*/
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
let
|
|
15
|
-
|
|
16
|
-
let
|
|
17
|
-
|
|
18
|
-
})(t,
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
constructor() {
|
|
32
|
-
super(...arguments), this.o = null;
|
|
33
|
-
}
|
|
34
|
-
t(e) {
|
|
35
|
-
if (this.o !== null)
|
|
36
|
-
for (const h in this.i)
|
|
37
|
-
B(this.o, h, this.props[h], e ? e[h] : void 0, m);
|
|
38
|
-
}
|
|
39
|
-
componentDidMount() {
|
|
12
|
+
const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), b = (t, i, a, l, u) => {
|
|
13
|
+
const m = u == null ? void 0 : u[i];
|
|
14
|
+
m === void 0 || a === l ? (t[i] = a, a == null && i in HTMLElement.prototype && t.removeAttribute(i)) : ((c, r, o) => {
|
|
15
|
+
let s = v.get(c);
|
|
16
|
+
s === void 0 && v.set(c, s = /* @__PURE__ */ new Map());
|
|
17
|
+
let n = s.get(r);
|
|
18
|
+
o !== void 0 ? n === void 0 ? (s.set(r, n = { handleEvent: o }), c.addEventListener(r, n)) : n.handleEvent = o : n !== void 0 && (s.delete(r), c.removeEventListener(r, n));
|
|
19
|
+
})(t, m, a);
|
|
20
|
+
}, h = ({ react: t, tagName: i, elementClass: a, events: l, displayName: u }) => {
|
|
21
|
+
const m = new Set(Object.keys(l ?? {})), c = t.forwardRef((r, o) => {
|
|
22
|
+
const s = t.useRef(null), n = t.useRef(null), f = {}, p = {};
|
|
23
|
+
for (const [e, d] of Object.entries(r))
|
|
24
|
+
N.has(e) ? f[e === "className" ? "class" : e] = d : m.has(e) || e in a.prototype ? p[e] = d : f[e] = d;
|
|
25
|
+
return t.useLayoutEffect(() => {
|
|
26
|
+
if (n.current !== null) {
|
|
27
|
+
for (const e in p)
|
|
28
|
+
b(n.current, e, r[e], s.current ? s.current[e] : void 0, l);
|
|
29
|
+
s.current = r;
|
|
30
|
+
}
|
|
31
|
+
}), t.useLayoutEffect(() => {
|
|
40
32
|
var e;
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.h !== e && (this.u = (i) => {
|
|
49
|
-
e !== null && I(e, i), this.o = i, this.h = e;
|
|
50
|
-
}), this.i = {};
|
|
51
|
-
const v = { ref: this.u };
|
|
52
|
-
for (const [i, y] of Object.entries(h))
|
|
53
|
-
b.has(i) ? v[i === "className" ? "class" : i] = y : l.has(i) || i in o.prototype ? this.i[i] = y : v[i] = y;
|
|
54
|
-
return v.suppressHydrationWarning = !0, a(r, v);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
f.displayName = p ?? o.name;
|
|
58
|
-
const N = s.forwardRef((c, e) => a(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
|
|
59
|
-
return N.displayName = f.displayName, N;
|
|
60
|
-
}
|
|
61
|
-
const L = M({
|
|
33
|
+
(e = n.current) == null || e.removeAttribute("defer-hydration");
|
|
34
|
+
}, []), f.suppressHydrationWarning = !0, t.createElement(i, { ...f, ref: t.useCallback((e) => {
|
|
35
|
+
n.current = e, typeof o == "function" ? o(e) : o !== null && (o.current = e);
|
|
36
|
+
}, [o]) });
|
|
37
|
+
});
|
|
38
|
+
return c.displayName = u ?? a.name, c;
|
|
39
|
+
}, I = h({
|
|
62
40
|
displayName: "PieIconButton",
|
|
63
41
|
elementClass: E,
|
|
64
|
-
react:
|
|
42
|
+
react: y,
|
|
65
43
|
tagName: "pie-icon-button",
|
|
66
44
|
events: {}
|
|
67
45
|
});
|
|
68
46
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
47
|
+
I as PieIconButton,
|
|
48
|
+
k as sizes,
|
|
49
|
+
C as variants
|
|
72
50
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.3-next.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@justeattakeaway/pie-icons-webc": "0.11.1",
|
|
30
|
-
"@justeattakeaway/pie-spinner": "0.2.
|
|
31
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
30
|
+
"@justeattakeaway/pie-spinner": "0.2.2-next.0",
|
|
31
|
+
"@justeattakeaway/pie-webc-core": "0.12.0-next.0"
|
|
32
32
|
},
|
|
33
33
|
"volta": {
|
|
34
34
|
"extends": "../../../package.json"
|