@pantheon-systems/pds-toolkit-react 2.0.0-alpha.43 → 2.0.0-alpha.44

package/dist/index.js

@@ -2899,71 +2899,75 @@ var Vt = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 			await navigator.clipboard.writeText(e), r(!0);
 		} catch {}
 	}];
-}, Jt = a(({ ariaLabel: t, buttonType: n = "button", className: r, disabled: i = !1, hasBorder: a = !1, hasTooltip: o = !0, icon2Name: s = null, iconName: c, isPressed: l, onClick: u, pressedIconName: d, size: f = "s", variant: p = "standard", ...h }, g) => {
-	let _ = "pds-icon-button", v = f === "s" ? null : `${_}--${f}`, y = p === "standard" ? null : `${_}--${p}`, b = a ? `${_}--has-border` : null, x = l ? `${_}--pressed` : null, S = {
-		fadeOut: `${_}--fadeOut`,
-		hide: `${_}--hide`,
-		scaleIn: `${_}--scaleIn`
-	}, C, w;
-	switch (f) {
+}, Jt = a(({ ariaLabel: t, buttonType: n = "button", className: r, disabled: i = !1, hasBorder: a = !1, hasTooltip: o = !0, icon2Name: s = null, iconName: c, isPressed: u, onClick: d, pressedIconName: f, size: p = "s", variant: h = "standard", ...g }, _) => {
+	let v = "pds-icon-button", y = p === "s" ? null : `${v}--${p}`, b = h === "standard" ? null : `${v}--${h}`, x = a ? `${v}--has-border` : null, S = u ? `${v}--pressed` : null, C = {
+		fadeOut: `${v}--fadeOut`,
+		hide: `${v}--hide`,
+		scaleIn: `${v}--scaleIn`
+	}, w, T;
+	switch (p) {
 		case "s":
-			w = "m", C = 8;
+			T = "m", w = 8;
 			break;
 		case "m":
-			w = "l", C = 11;
+			T = "l", w = 11;
 			break;
 		default:
-			w = "m", C = 8;
+			T = "m", w = 8;
 			break;
 	}
-	let T = s !== null, E = m(null), D = m(null), O = () => {
-		E.current.classList.add(S.fadeOut), E.current.classList.add(S.hide), D.current.classList.remove(S.hide), D.current.classList.add(S.scaleIn), setTimeout(() => {
-			E.current.classList.remove(S.fadeOut, S.hide), E.current.classList.add(S.scaleIn), D.current.classList.remove(S.scaleIn), D.current.classList.add(S.hide);
-		}, 2e3);
-	}, k = (e) => {
-		T && O(), u && u(e);
-	}, A = l && d ? d : c, j = T ? /* @__PURE__ */ e.createElement("div", { className: `${_}__content` }, /* @__PURE__ */ e.createElement("div", {
-		ref: E,
-		className: `${_}__icon-wrapper`
+	let E = s !== null, D = m(null), O = m(null), k = m(void 0);
+	l(() => () => {
+		k.current && clearTimeout(k.current);
+	}, []);
+	let A = () => {
+		!D.current || !O.current || (D.current.classList.add(C.fadeOut), D.current.classList.add(C.hide), O.current.classList.remove(C.hide), O.current.classList.add(C.scaleIn), k.current = setTimeout(() => {
+			!D.current || !O.current || (D.current.classList.remove(C.fadeOut, C.hide), D.current.classList.add(C.scaleIn), O.current.classList.remove(C.scaleIn), O.current.classList.add(C.hide));
+		}, 2e3));
+	}, j = (e) => {
+		E && A(), d && d(e);
+	}, M = u && f ? f : c, N = E ? /* @__PURE__ */ e.createElement("div", { className: `${v}__content` }, /* @__PURE__ */ e.createElement("div", {
+		ref: D,
+		className: `${v}__icon-wrapper`
 	}, /* @__PURE__ */ e.createElement(Q, {
-		className: `${_}__icon`,
+		className: `${v}__icon`,
 		iconName: c,
-		size: w
+		size: T
 	})), /* @__PURE__ */ e.createElement("div", {
-		ref: D,
-		className: `${_}__icon-wrapper ${S.hide}`
+		ref: O,
+		className: `${v}__icon-wrapper ${C.hide}`
 	}, /* @__PURE__ */ e.createElement(Q, {
-		className: `${_}__icon`,
+		className: `${v}__icon`,
 		iconName: s,
-		size: w
-	}))) : /* @__PURE__ */ e.createElement("div", { className: `${_}__content` }, /* @__PURE__ */ e.createElement(Q, {
-		className: `${_}__icon`,
-		iconName: A,
-		size: w
+		size: T
+	}))) : /* @__PURE__ */ e.createElement("div", { className: `${v}__content` }, /* @__PURE__ */ e.createElement(Q, {
+		className: `${v}__icon`,
+		iconName: M,
+		size: T
 	}));
 	return /* @__PURE__ */ e.createElement("button", {
-		ref: g,
+		ref: _,
 		"aria-label": t,
-		"aria-pressed": l,
+		"aria-pressed": u,
 		className: Z([
-			_,
 			v,
 			y,
 			b,
 			x,
+			S,
 			r
 		]),
 		disabled: i,
-		onClick: k,
+		onClick: j,
 		title: o && !i ? null : t,
 		type: n,
-		...h
+		...g
 	}, o && !i ? /* @__PURE__ */ e.createElement(xt, {
-		className: `${_}__tooltip`,
+		className: `${v}__tooltip`,
 		content: t,
-		customTrigger: j,
-		offsetValue: C
-	}) : j);
+		customTrigger: N,
+		offsetValue: w
+	}) : N);
 }), Yt = ({ ariaLabel: t = "Copy to clipboard", className: n, clipboardText: r = "", disabled: i, hasBorder: a = !1, variant: o = "standard", ...s }) => {
 	let [c, l] = qt(r);
 	return /* @__PURE__ */ e.createElement(Jt, {
@@ -6870,40 +6874,44 @@ var sr = {
 		message: x,
 		validationStatus: p
 	}));
-}, br = ({ className: t, disabled: n = !1, fieldsetProps: r, id: i, inputWidth: a, label: o, message: s, onGroupBlur: c, onValueChange: l, options: u, required: d = !1, showLabel: f = !0, tooltipText: p = null, validationMessage: m, validationStatus: g, ..._ }) => {
-	let v = a ? { width: `${a / 16}rem` } : null, y = "pds-checkbox-group", b = n ? $.disabled : null, x = d && !n ? $.required : null, S = g === "error" ? $.error : null, C = g === "success" ? $.success : null, w = m || s;
-	u.map((e) => {
+}, br = ({ className: t, disabled: n = !1, fieldsetProps: r, id: i, inputWidth: a, label: o, message: s, onGroupBlur: c, onValueChange: u, options: d, required: f = !1, showLabel: p = !0, tooltipText: g = null, validationMessage: _, validationStatus: v, ...y }) => {
+	let b = a ? { width: `${a / 16}rem` } : null, x = "pds-checkbox-group", S = n ? $.disabled : null, C = f && !n ? $.required : null, w = v === "error" ? $.error : null, T = v === "success" ? $.success : null, E = _ || s;
+	d.map((e) => {
 		e.id || (e.id = e.value);
 	});
-	let T = [];
-	u.map((e) => {
-		e.checked === !0 && T.push(e.value);
+	let D = [];
+	d.map((e) => {
+		e.checked === !0 && D.push(e.value);
 	});
-	let [E, D] = h(T), O = (e) => {
-		let { value: t } = e.target, n = E.includes(t) ? E.filter((e) => e !== t) : [...E, t];
-		D(n), l && l(n);
+	let [O, k] = h(D), A = m(void 0);
+	l(() => () => {
+		A.current && clearTimeout(A.current);
+	}, []);
+	let j = (e) => {
+		let { value: t } = e.target, n = O.includes(t) ? O.filter((e) => e !== t) : [...O, t];
+		k(n), u && u(n);
 	};
-	u.map((e) => {
-		E.includes(e.value) ? e.checked = !0 : e.checked = !1;
+	d.map((e) => {
+		O.includes(e.value) ? e.checked = !0 : e.checked = !1;
 	});
-	let k = () => {
-		c && setTimeout(() => {
-			u.some((e) => e.id === document.activeElement.id) || c(E);
-		}, 1500);
+	let M = () => {
+		c && (A.current = setTimeout(() => {
+			d.some((e) => e.id === document.activeElement?.id) || c(O);
+		}, 1500));
 	};
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([
-			y,
-			b,
 			x,
 			S,
 			C,
+			w,
+			T,
 			t ?? ""
 		]),
-		style: a ? v : null,
-		..._
+		style: a ? b : null,
+		...y
 	}, /* @__PURE__ */ e.createElement("fieldset", {
-		className: `${y}__fieldset`,
+		className: `${x}__fieldset`,
 		id: i,
 		...r
 	}, /* @__PURE__ */ e.createElement(Tt, {
@@ -6911,26 +6919,26 @@ var sr = {
 		disabled: n,
 		id: i,
 		label: o,
-		required: d,
-		showLabel: f,
-		tooltipText: p
-	}), /* @__PURE__ */ e.createElement("div", { className: `${y}__options` }, u.map((t) => /* @__PURE__ */ e.createElement(vr, {
+		required: f,
+		showLabel: p,
+		tooltipText: g
+	}), /* @__PURE__ */ e.createElement("div", { className: `${x}__options` }, d.map((t) => /* @__PURE__ */ e.createElement(vr, {
 		key: t.id,
 		checked: t.checked,
-		className: `${y}__checkbox`,
+		className: `${x}__checkbox`,
 		disabled: t.disabled || n,
 		id: t.id,
 		label: t.label,
 		name: t.name,
-		onBlur: k,
-		onChange: O,
+		onBlur: M,
+		onChange: j,
 		value: t.value
-	})))), w && /* @__PURE__ */ e.createElement(Et, {
+	})))), E && /* @__PURE__ */ e.createElement(Et, {
 		validationMessageHasDecorators: !0,
-		hasValidationMessage: !!m,
+		hasValidationMessage: !!_,
 		id: i,
-		message: w,
-		validationStatus: g
+		message: E,
+		validationStatus: v
 	}));
 }, xr = a(({ className: t, defaultValue: n, disabled: r = !1, hasClearButton: i = !0, hasDropdownTrigger: a = !1, hasSearchIcon: o = !0, hasSearchShortcut: c = !1, id: u, inputWidth: d, isLoading: f = !1, label: g, labelStrings: _ = {
 	clearButton: "Clear input text",
@@ -9624,51 +9632,55 @@ var sr = {
 	success: "circleCheck",
 	critical: "diamondExclamation",
 	discovery: "squareQuestion"
-}, bi = ({ className: t, ctaButton: n, dataContext: r = "product", dismissLabel: i = "Dismiss", id: a, isDismissible: o, message: s, onDismiss: c, title: l, type: u = "info", typeLabels: d = fn, ...f }) => {
-	let p = r === "marketing", h = m(null), g = "pds-section-message", _ = {
-		error: `${g}--error`,
-		success: `${g}--success`,
-		warning: `${g}--warning`,
-		info: `${g}--info`,
-		critical: `${g}--critical`,
-		discovery: `${g}--discovery`,
-		dismissing: `${g}--dismissing`,
-		dismissed: `${g}--dismissed`
-	}, v = o ? `${g}--hasDismiss` : null, y = l ? `${g}--hasTitle` : null, b = u === "critical" ? "alert" : "status", x = `${d[u]}: `, S = typeof s == "string" ? /* @__PURE__ */ e.createElement("p", null, s) : s, C = () => {
-		h.current.addEventListener("animationend", w, { once: !0 });
-	}, w = (e) => {
-		c(e, a);
-	}, T = () => {
-		C(), h.current.classList.toggle(_.dismissing), setTimeout(() => {
-			h.current.classList.toggle(_.dismissing), h.current.classList.toggle(_.dismissed);
+}, bi = ({ className: t, ctaButton: n, dataContext: r = "product", dismissLabel: i = "Dismiss", id: a, isDismissible: o, message: s, onDismiss: c, title: u, type: d = "info", typeLabels: f = fn, ...p }) => {
+	let h = r === "marketing", g = m(null), _ = m(void 0), v = "pds-section-message", y = {
+		error: `${v}--error`,
+		success: `${v}--success`,
+		warning: `${v}--warning`,
+		info: `${v}--info`,
+		critical: `${v}--critical`,
+		discovery: `${v}--discovery`,
+		dismissing: `${v}--dismissing`,
+		dismissed: `${v}--dismissed`
+	}, b = o ? `${v}--hasDismiss` : null, x = u ? `${v}--hasTitle` : null, S = d === "critical" ? "alert" : "status", C = `${f[d]}: `, w = typeof s == "string" ? /* @__PURE__ */ e.createElement("p", null, s) : s;
+	l(() => () => {
+		_.current && clearTimeout(_.current);
+	}, []);
+	let T = () => {
+		g.current?.addEventListener("animationend", E, { once: !0 });
+	}, E = (e) => {
+		c?.(e, a);
+	}, D = () => {
+		T(), g.current?.classList.toggle(y.dismissing), _.current = setTimeout(() => {
+			g.current && (g.current.classList.toggle(y.dismissing), g.current.classList.toggle(y.dismissed));
 		}, 400);
 	};
 	return /* @__PURE__ */ e.createElement("div", {
-		ref: h,
+		ref: g,
 		className: Z([
-			g,
-			_[u],
 			v,
-			y,
+			y[d],
+			b,
+			x,
 			t ?? ""
 		]),
 		"data-context": r,
 		id: a,
-		role: b,
-		...f
-	}, /* @__PURE__ */ e.createElement("div", { className: `${g}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${g}__icon ${g}__icon-${u}` }, /* @__PURE__ */ e.createElement(Q, {
-		iconName: `${u}` in yi ? yi[u] : yi.info,
-		size: p ? "xl" : "l"
-	})), /* @__PURE__ */ e.createElement("div", { className: `${g}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, x), l && /* @__PURE__ */ e.createElement("div", { className: `${g}__title` }, l), /* @__PURE__ */ e.createElement("div", { className: `${g}__message` }, S))), (n || o) && /* @__PURE__ */ e.createElement("div", { className: `${g}__actions` }, n && /* @__PURE__ */ e.createElement(Gt, {
+		role: S,
+		...p
+	}, /* @__PURE__ */ e.createElement("div", { className: `${v}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${v}__icon ${v}__icon-${d}` }, /* @__PURE__ */ e.createElement(Q, {
+		iconName: `${d}` in yi ? yi[d] : yi.info,
+		size: h ? "xl" : "l"
+	})), /* @__PURE__ */ e.createElement("div", { className: `${v}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, C), u && /* @__PURE__ */ e.createElement("div", { className: `${v}__title` }, u), /* @__PURE__ */ e.createElement("div", { className: `${v}__message` }, w))), (n || o) && /* @__PURE__ */ e.createElement("div", { className: `${v}__actions` }, n && /* @__PURE__ */ e.createElement(Gt, {
 		...n,
-		className: `${g}__cta`,
-		size: p ? "m" : "s",
+		className: `${v}__cta`,
+		size: h ? "m" : "s",
 		variant: "secondary"
 	}), o && /* @__PURE__ */ e.createElement(Xt, {
 		ariaLabel: i,
-		className: `${g}__dismiss`,
-		onClick: T,
-		size: p ? "l" : "m"
+		className: `${v}__dismiss`,
+		onClick: D,
+		size: h ? "l" : "m"
 	})));
 }, xi = 3e4, Si = {
 	pause: "Pause notification",