@pantheon-systems/pds-toolkit-react 2.0.0-beta.4 → 2.0.0-beta.5

package/dist/index.js

@@ -2840,78 +2840,78 @@ var En = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 		return t.toArray(n.children).map(kn).join("");
 	}
 	return "";
-}, An = o(({ ariaLabel: t, buttonType: n = "button", className: r = "", disabled: i = !1, displayType: a = "label-only", iconName: o, isFullWidth: s = !1, isLoading: c = !1, isSplitButton: l = !1, isWorking: u = !1, label: d, onClick: f, size: p = "s", statusDot: m, tally: h, tooltipText: g, variant: _ = "primary", ...v }, y) => {
-	let b = "pds-button", x = `${b}--${p}`, S = `${b}--${_}`, C = s ? `${b}--full-width` : null, w = c ? `${b}--loading` : null, T = c ? "pds-pulse" : null, E, D, O;
-	switch (p) {
+}, An = o(({ ariaLabel: t, buttonType: n = "button", className: r = "", disabled: i = !1, disableWhenWorking: a = !0, displayType: o = "label-only", iconName: s, isFullWidth: c = !1, isLoading: l = !1, isSplitButton: u = !1, isWorking: d = !1, label: f, onClick: p, size: m = "s", statusDot: h, tally: g, tooltipText: _, variant: v = "primary", ...y }, b) => {
+	let x = "pds-button", S = `${x}--${m}`, C = `${x}--${v}`, w = c ? `${x}--full-width` : null, T = l ? `${x}--loading` : null, E = l ? "pds-pulse" : null, D = i || l || d && a, O, k, A;
+	switch (m) {
 		case "xs":
-			E = "xs", D = "s", O = "xs";
+			O = "xs", k = "s", A = "xs";
 			break;
 		case "s":
-			E = "m", D = "m", O = "xs";
+			O = "m", k = "m", A = "xs";
 			break;
 		case "m":
-			E = "m", D = "m", O = "s";
+			O = "m", k = "m", A = "s";
 			break;
 		case "l":
-			E = "xl", D = "l", O = "m";
+			O = "xl", k = "l", A = "m";
 			break;
 	}
-	let k = [
+	let j = [
 		"primary",
 		"secondary",
 		"subtle",
 		"highlight"
-	], A = k.includes(_);
-	h && !A && process.env.NODE_ENV !== "production" && console.warn(`[Button] The \`tally\` prop is not supported on the "${_}" variant. Use one of: ${k.join(", ")}.`);
-	let j = [
+	], M = j.includes(v);
+	g && !M && process.env.NODE_ENV !== "production" && console.warn(`[Button] The \`tally\` prop is not supported on the "${v}" variant. Use one of: ${j.join(", ")}.`);
+	let N = [
 		"primary",
 		"secondary",
 		"subtle"
-	], M = j.includes(_);
-	m && !M && process.env.NODE_ENV !== "production" && console.warn(`[Button] The \`statusDot\` prop is not supported on the "${_}" variant. Use one of: ${j.join(", ")}.`);
-	let N = /* @__PURE__ */ e.createElement(Q, {
+	], P = N.includes(v);
+	h && !P && process.env.NODE_ENV !== "production" && console.warn(`[Button] The \`statusDot\` prop is not supported on the "${v}" variant. Use one of: ${N.join(", ")}.`);
+	let F = /* @__PURE__ */ e.createElement(Q, {
 		key: "icon",
-		className: `${b}__icon`,
-		iconName: o,
-		size: E
-	}), P = [];
-	m && M ? P.push(/* @__PURE__ */ e.createElement(Dn, {
+		className: `${x}__icon`,
+		iconName: s,
+		size: O
+	}), I = [];
+	h && P ? I.push(/* @__PURE__ */ e.createElement(Dn, {
 		key: "status-dot",
-		className: `${b}__icon`,
-		status: m
-	})) : a === "icon-start" && o && P.push(N), P.push(/* @__PURE__ */ e.createElement(e.Fragment, { key: "label" }, d)), h && A ? P.push(/* @__PURE__ */ e.createElement(Tn, {
+		className: `${x}__icon`,
+		status: h
+	})) : o === "icon-start" && s && I.push(F), I.push(/* @__PURE__ */ e.createElement(e.Fragment, { key: "label" }, f)), g && M ? I.push(/* @__PURE__ */ e.createElement(Tn, {
 		key: "tally",
-		className: `${b}__tally`,
-		label: h.label,
-		size: O,
-		type: h.type
-	})) : a === "icon-end" && o && P.push(N), l && (P = [N], t = kn(d));
-	let F = /* @__PURE__ */ e.createElement("button", {
-		ref: y,
+		className: `${x}__tally`,
+		label: g.label,
+		size: A,
+		type: g.type
+	})) : o === "icon-end" && s && I.push(F), u && (I = [F], t = kn(f));
+	let L = /* @__PURE__ */ e.createElement("button", {
+		ref: b,
 		"aria-label": t,
 		className: Z([
-			b,
 			x,
 			S,
 			C,
 			w,
 			T,
+			E,
 			r
 		]),
-		disabled: i || c || u,
-		onClick: f,
+		disabled: D,
+		onClick: p,
 		type: n,
-		...v
-	}, u && !c && /* @__PURE__ */ e.createElement(Cn, {
-		className: `${b}__working-indicator`,
+		...y
+	}, d && !l && /* @__PURE__ */ e.createElement(Cn, {
+		className: `${x}__working-indicator`,
 		color: "currentColor",
-		size: D
-	}), P);
-	return (i || c || u) && g ? /* @__PURE__ */ e.createElement(on, {
+		size: k
+	}), I);
+	return D && _ ? /* @__PURE__ */ e.createElement(on, {
 		disableTapTrigger: !0,
-		content: g,
-		customTrigger: F
-	}) : /* @__PURE__ */ e.createElement(e.Fragment, null, F);
+		content: _,
+		customTrigger: L
+	}) : /* @__PURE__ */ e.createElement(e.Fragment, null, L);
 }), jn = ({ className: t, disabled: n = !1, displayType: i = "label-only", iconName: a, linkContent: o, size: c = "s", tooltipText: l, variant: u = "primary", ...d }) => {
 	let f = "pds-button-link", p = "pds-button", m = Z([
 		p,
@@ -3044,8 +3044,8 @@ var En = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 		customTrigger: N,
 		offsetValue: w
 	}) : N);
-}), Pn = ({ ariaLabel: t = "Copy to clipboard", className: n, clipboardText: r = "", disabled: i, hasBorder: a = !1, variant: o = "standard", ...s }) => {
-	let [c, l] = Mn(r);
+}), Pn = ({ ariaLabel: t = "Copy to clipboard", className: n, clipboardText: r = "", disabled: i, hasBorder: a = !1, size: o = "s", variant: s = "standard", ...c }) => {
+	let [l, u] = Mn(r);
 	return /* @__PURE__ */ e.createElement(Nn, {
 		ariaLabel: t,
 		buttonType: "button",
@@ -3054,10 +3054,10 @@ var En = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 		hasBorder: a,
 		icon2Name: "check",
 		iconName: "copy",
-		onClick: l,
-		size: "m",
-		variant: o,
-		...s
+		onClick: u,
+		size: o,
+		variant: s,
+		...c
 	});
 }, Fn = ({ ariaLabel: t = "Close", className: n, onClick: r, size: i = "m", ...a }) => {
 	let o = "pds-close-button", s = `${o}--${i}`, c = /* @__PURE__ */ e.createElement("button", {
@@ -4118,85 +4118,86 @@ var lr = ({ className: t = "pds-dropdown__selected-icon" }) => /* @__PURE__ */ e
 		d: "M17 10.5V15H21.5C22.0312 15 22.5 15.4688 22.5 16C22.5 16.5625 22.0312 17 21.5 17H17V21.5C17 22.0625 16.5312 22.5 16 22.5C15.4375 22.5 15 22.0625 15 21.5V17H10.5C9.9375 17 9.5 16.5625 9.5 16C9.5 15.4688 9.9375 15 10.5 15H15V10.5C15 9.96875 15.4375 9.5 16 9.5C16.5312 9.5 17 9.96875 17 10.5Z",
 		fill: "var(--pds-color-foreground-reverse)"
 	}))
-}, gr = ({ buttonType: t = "button", className: n = "", disabled: r = !1, isWorking: i = !1, label: a, onClick: o, platform: s, size: c = "m", tooltipText: l, ...u }) => {
-	let d = "pds-sso-button", f = `${d}--${c}`, p = c === "m" ? "l" : "2xl", m = c === "m" ? "l" : "xl", h = /* @__PURE__ */ e.createElement(mr, {
-		className: `${d}__icon`,
-		platformType: s,
-		size: p
-	}), g = /* @__PURE__ */ e.createElement("button", {
+}, gr = ({ buttonType: t = "button", className: n = "", disabled: r = !1, disableWhenWorking: i = !0, isWorking: a = !1, label: o, onClick: s, platform: c, size: l = "m", tooltipText: u, ...d }) => {
+	let f = "pds-sso-button", p = `${f}--${l}`, m = l === "m" ? "l" : "2xl", h = l === "m" ? "l" : "xl", g = r || a && i, _ = /* @__PURE__ */ e.createElement(mr, {
+		className: `${f}__icon`,
+		platformType: c,
+		size: m
+	}), v = /* @__PURE__ */ e.createElement("button", {
 		className: Z([
-			d,
 			f,
+			p,
 			n
 		]),
-		disabled: r || i,
-		onClick: o,
+		disabled: g,
+		onClick: s,
 		type: t,
-		...u
-	}, h, a, i && /* @__PURE__ */ e.createElement(Cn, {
-		className: `${d}__working-indicator`,
+		...d
+	}, _, o, a && /* @__PURE__ */ e.createElement(Cn, {
+		className: `${f}__working-indicator`,
 		color: "currentColor",
-		size: m
+		size: h
 	}));
-	return (r || i) && l ? /* @__PURE__ */ e.createElement(on, {
+	return g && u ? /* @__PURE__ */ e.createElement(on, {
 		disableTapTrigger: !0,
-		content: l,
-		customTrigger: g
-	}) : /* @__PURE__ */ e.createElement(e.Fragment, null, g);
-}, _r = ({ buttonProps: t, className: n, disabled: i = !1, hasBorder: a = !1, iconName: o, iconPosition: c = "before", isCritical: l = !1, isLoading: u, isMonospace: d = !1, isWorking: f, label: p, linkContent: m, onClick: h, tooltipText: g, ..._ }) => {
-	let v = "pds-utility-button", y = u ? "pds-pulse" : null, b = (t) => o && !f ? /* @__PURE__ */ e.createElement(Q, {
+		content: u,
+		customTrigger: v
+	}) : /* @__PURE__ */ e.createElement(e.Fragment, null, v);
+}, _r = ({ buttonProps: t, className: n, disabled: i = !1, disableWhenWorking: a = !0, hasBorder: o = !1, iconName: c, iconPosition: l = "before", isCritical: u = !1, isLoading: d, isMonospace: f = !1, isWorking: p, label: m, linkContent: h, onClick: g, tooltipText: _, ...v }) => {
+	let y = "pds-utility-button", b = d ? "pds-pulse" : null, x = i || d || p && a, S = (t) => c && !p ? /* @__PURE__ */ e.createElement(Q, {
 		key: t,
-		className: `${v}__icon`,
-		iconName: o
-	}) : null, x = () => f ? /* @__PURE__ */ e.createElement(Cn, {
+		className: `${y}__icon`,
+		iconName: c
+	}) : null, C = () => p ? /* @__PURE__ */ e.createElement(Cn, {
 		key: "spinner",
-		className: `${v}__spinner`,
+		className: `${y}__spinner`,
+		color: "currentColor",
 		size: "m"
-	}) : null, S = (t) => {
+	}) : null, w = (t) => {
 		let n = [];
-		return c === "before" && n.push(b("icon-before")), n.push(x()), n.push(/* @__PURE__ */ e.createElement("span", {
+		return l === "before" && n.push(S("icon-before")), n.push(C()), n.push(/* @__PURE__ */ e.createElement("span", {
 			key: "label",
-			className: `${v}__label`
-		}, t)), c === "after" && n.push(b("icon-after")), n.filter(Boolean);
-	}, C = m && s(m) ? m.props.children : p, w = Z([
-		v,
-		a ? `${v}--border` : null,
-		l ? `${v}--critical` : null,
-		i ? `${v}--disabled` : null,
-		u ? `${v}--loading` : null,
-		f ? `${v}--working` : null,
-		d ? `${v}--monospace` : null,
+			className: `${y}__label`
+		}, t)), l === "after" && n.push(S("icon-after")), n.filter(Boolean);
+	}, T = h && s(h) ? h.props.children : m, E = Z([
+		y,
+		o ? `${y}--border` : null,
+		u ? `${y}--critical` : null,
+		i ? `${y}--disabled` : null,
+		d ? `${y}--loading` : null,
+		p ? `${y}--working` : null,
+		f ? `${y}--monospace` : null,
 		n ?? ""
-	]), T = (t) => g ? /* @__PURE__ */ e.createElement(on, {
+	]), D = (t) => _ ? /* @__PURE__ */ e.createElement(on, {
 		disableTapTrigger: !0,
-		content: g,
+		content: _,
 		customTrigger: t
 	}) : t;
-	if (m && !i) {
-		let t = s(m) ? r(m, Object.assign({}, m.props, {
+	if (h && !i) {
+		let t = s(h) ? r(h, Object.assign({}, h.props, {
 			className: Z([
-				`${v}__button`,
-				y,
-				m.props.className ?? ""
+				`${y}__button`,
+				b,
+				h.props.className ?? ""
 			]),
-			children: S(C)
+			children: w(T)
 		})) : null;
 		return /* @__PURE__ */ e.createElement("div", {
-			className: w,
-			..._
-		}, T(t));
+			className: E,
+			...v
+		}, D(t));
 	}
-	let E = /* @__PURE__ */ e.createElement("button", {
-		className: Z([`${v}__button`, y]),
-		disabled: i || u || f,
-		onClick: h,
+	let O = /* @__PURE__ */ e.createElement("button", {
+		className: Z([`${y}__button`, b]),
+		disabled: x,
+		onClick: g,
 		type: "button",
 		...t
-	}, S(C));
+	}, w(T));
 	return /* @__PURE__ */ e.createElement("div", {
-		className: w,
-		..._
-	}, T(E));
+		className: E,
+		...v
+	}, D(O));
 }, vr = {
 	info: "circleInfo",
 	warning: "triangleExclamation",
@@ -12386,54 +12387,59 @@ var ns = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	"default",
 	"working",
 	"checked"
-], as = ({ alignment: t = "left", className: n, componentWidth: r, labelStrings: i = {}, lastChecked: a, onCheck: o, state: s = "default", ...c }) => {
-	let l = {
+], as = ({ alignment: t = "left", className: n, componentWidth: r, displayType: i = "label", labelStrings: a = {}, lastChecked: o, onCheck: s, state: c = "default", ...l }) => {
+	let u = i === "icon-button", d = {
 		checkForUpdates: "Check for updates",
 		checking: "Checking...",
 		checked: "Last checked",
 		ariaLabel: "Check for updates",
-		...i
-	}, u = () => {
-		switch (s) {
-			case "default": return l.checkForUpdates;
-			case "working": return l.checking;
+		...a
+	}, f = () => {
+		switch (c) {
+			case "default": return d.checkForUpdates;
+			case "working": return d.checking;
 			case "checked":
-				if (a) {
-					let e = a instanceof Date ? a : new Date(a), t = Date.now() - e.getTime(), n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), o = Math.floor(i / 24), s = {
+				if (o) {
+					let e = o instanceof Date ? o : new Date(o), t = Date.now() - e.getTime(), n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), a = Math.floor(i / 24), s = {
 						year: "numeric",
 						month: "short",
 						day: "numeric"
 					}, c = "";
-					return c = o > 7 ? e.toLocaleDateString(void 0, s) : o > 0 && o <= 7 ? `${o} day${o === 1 ? "" : "s"} ago` : i > 0 ? `${i} hour${i === 1 ? "" : "s"} ago` : r > 0 ? `${r} minute${r === 1 ? "" : "s"} ago` : `${n} second${n === 1 ? "" : "s"} ago`, `${l.checked} ${c}`;
+					return c = a > 7 ? e.toLocaleDateString(void 0, s) : a > 0 && a <= 7 ? `${a} day${a === 1 ? "" : "s"} ago` : i > 0 ? `${i} hour${i === 1 ? "" : "s"} ago` : r > 0 ? `${r} minute${r === 1 ? "" : "s"} ago` : `${n} second${n === 1 ? "" : "s"} ago`, `${d.checked} ${c}`;
 				}
-				return l.checked;
+				return d.checked;
 		}
-	}, d = "pds-status-checker", f = `${d}--${t}`, p = Z([`${d}__button`, s === "working" ? `${d}__button--spinning` : ""]), m = r !== null && r > 0 ? `${r}rem` : "100%", h = /* @__PURE__ */ e.createElement("span", { className: `${d}__tooltip-icon` }, /* @__PURE__ */ e.createElement(Q, {
-		className: `${d}__icon ${s === "working" ? `${d}__icon--spinning` : ""}`,
+	}, p = "pds-status-checker", m = `${p}--${t}`, h = u ? `${p}--icon-button` : "", g = Z([
+		`${p}__button`,
+		c === "working" ? `${p}__button--spinning` : "",
+		u ? `${p}__button--icon-only` : ""
+	]), _ = u ? void 0 : r !== null && r > 0 ? `${r}rem` : "100%", v = /* @__PURE__ */ e.createElement("span", { className: `${p}__tooltip-icon` }, /* @__PURE__ */ e.createElement(Q, {
+		className: `${p}__icon ${c === "working" ? `${p}__icon--spinning` : ""}`,
 		iconName: "rotate",
 		size: "m"
-	})), g = /* @__PURE__ */ e.createElement("span", { className: `${d}__label` }, u());
+	})), y = /* @__PURE__ */ e.createElement("span", { className: `${p}__label` }, f());
 	return /* @__PURE__ */ e.createElement("div", {
 		className: Z([
-			d,
-			f,
+			p,
+			m,
+			h,
 			n ?? ""
 		]),
-		style: { width: m },
-		...c
+		style: _ ? { width: _ } : void 0,
+		...l
 	}, /* @__PURE__ */ e.createElement("button", {
-		"aria-label": l.ariaLabel,
+		"aria-label": d.ariaLabel,
 		"aria-live": "polite",
-		className: p,
-		onClick: o,
+		className: g,
+		onClick: s,
 		type: "button"
-	}, t === "right" && g, /* @__PURE__ */ e.createElement(on, {
+	}, t === "right" && y, /* @__PURE__ */ e.createElement(on, {
 		disableTapTrigger: !0,
-		content: l.tooltipContent || l.ariaLabel,
-		customTrigger: h,
+		content: d.tooltipContent || d.ariaLabel,
+		customTrigger: v,
 		triggerIconColor: "default",
 		triggerIconSize: "xs"
-	}), t === "left" && g));
+	}), t === "left" && y));
 }, os = ({ className: t, label: n = null, linkContent: r, type: i = "neutral", ...a }) => {
 	let o = "pds-status-indicator", c = `${o}--${i}`, l = /* @__PURE__ */ e.createElement(e.Fragment, null, i === "working" ? /* @__PURE__ */ e.createElement(Cn, {
 		className: `${o}__spinner`,