@pantheon-systems/pds-toolkit-react 2.0.0-alpha.69 → 2.0.0-alpha.70

package/dist/index.js

@@ -2428,7 +2428,7 @@ var rt = Object.create, it = Object.defineProperty, at = Object.getOwnPropertyDe
 		...d
 	}, o ? S : x);
 }, xt = ({ className: t, color: n = "brand-muted", label: r, size: i = "s", ...a }) => {
-	let o = "pds-badge", s = `${o}--${n}`, c = i === "m" ? null : `${o}--${i}`;
+	let o = "pds-badge", s = `${o}--${n}`, c = `${o}--${i}`;
 	return /* @__PURE__ */ e.createElement("span", {
 		className: Z([
 			o,
@@ -3050,25 +3050,25 @@ var Cn = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 }, Nn = (e, t) => {
 	let n = t.toLowerCase();
 	return e.find((e) => (e?.textContent?.trim().toLowerCase() ?? "").startsWith(n));
-}, Pn = ({ allowEscape: e = !1, enableClick: t = !0, enableListNavigation: n = !0, enableShift: r = !0, enableTransition: i = !0, enableTypeahead: a = !1, offsetValue: o = 0, openOnHover: s = !1, placement: c = "bottom-start", role: l = "menu", selectedIndex: u = null, shiftPadding: d = 24, variant: f = "default", virtual: p = !1 } = {}) => {
-	let [m, _] = g(!1), [v, y] = g(null), b = h([]), x = f === "input", { context: S, floatingStyles: C, refs: N } = M({
-		open: m,
-		onOpenChange: _,
-		placement: c,
+}, Pn = ({ allowEscape: e = !1, enableClick: t = !0, enableListNavigation: n = !0, enableShift: r = !0, enableTransition: i = !0, enableTypeahead: a = !1, matchReferenceWidth: o = !1, offsetValue: s = 0, openOnHover: c = !1, placement: l = "bottom-start", role: u = "menu", selectedIndex: d = null, shiftPadding: f = 24, variant: p = "default", virtual: m = !1 } = {}) => {
+	let [_, v] = g(!1), [y, b] = g(null), x = h([]), S = p === "input", C = S || o, { context: N, floatingStyles: F, refs: V } = M({
+		open: _,
+		onOpenChange: v,
+		placement: l,
 		whileElementsMounted: w,
 		middleware: (() => {
 			let e = [];
-			return x ? e.push(E(({ placement: e }) => e.startsWith("top") ? 16 : 0)) : o > 0 && e.push(E(o)), e.push(T({
+			return S ? e.push(E(({ placement: e }) => e.startsWith("top") ? 16 : 0)) : s > 0 && e.push(E(s)), e.push(T({
 				crossAxis: !1,
 				padding: 24
 			})), r && e.push(O({
-				padding: d,
-				mainAxis: !x
+				padding: f,
+				mainAxis: !C
 			})), e.push(k({
 				apply({ availableHeight: e, elements: t, rects: n }) {
 					if (t.floating) {
 						let r = { maxHeight: `${e}px` };
-						x && (r.minHeight = "var(--pds-spacing-3xl)", r.minWidth = `${n.reference.width}px`), Object.assign(t.floating.style, r);
+						S ? (r.minHeight = "var(--pds-spacing-3xl)", r.minWidth = `${n.reference.width}px`) : o && (r.width = `${n.reference.width}px`), Object.assign(t.floating.style, r);
 					}
 				},
 				padding: {
@@ -3080,15 +3080,15 @@ var Cn = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 			})), e;
 		})(),
 		strategy: "fixed"
-	}), { getFloatingProps: F, getItemProps: V, getReferenceProps: H } = I([
-		A(S, {
+	}), { getFloatingProps: H, getItemProps: U, getReferenceProps: W } = I([
+		A(N, {
 			enabled: t,
 			event: "mousedown"
 		}),
-		j(S),
-		R(S, { role: l }),
-		P(S, {
-			enabled: s,
+		j(N),
+		R(N, { role: u }),
+		P(N, {
+			enabled: c,
 			move: !1,
 			delay: {
 				open: 100,
@@ -3100,27 +3100,27 @@ var Cn = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 				blockPointerEvents: !0
 			})
 		}),
-		L(S, {
+		L(N, {
 			enabled: n,
-			listRef: b,
-			activeIndex: v,
-			onNavigate: y,
-			virtual: p,
+			listRef: x,
+			activeIndex: y,
+			onNavigate: b,
+			virtual: m,
 			loop: !0,
 			allowEscape: e,
-			focusItemOnHover: !p
+			focusItemOnHover: !m
 		}),
-		B(S, {
+		B(N, {
 			enabled: a,
-			listRef: b,
-			activeIndex: v,
-			selectedIndex: u,
+			listRef: x,
+			activeIndex: y,
+			selectedIndex: d,
 			onMatch: (e) => {
-				m || _(!0), y(e);
+				_ || v(!0), b(e);
 			},
 			findMatch: Nn
 		})
-	]), { isMounted: U, styles: W } = z(S, i ? {
+	]), { isMounted: G, styles: K } = z(N, i ? {
 		duration: {
 			open: 300,
 			close: 150
@@ -3130,18 +3130,18 @@ var Cn = ({ className: t, componentWidth: n, isLoading: r, loadingText: i = "Loa
 		close: { opacity: 0 }
 	} : { duration: 0 });
 	return {
-		activeIndex: v,
-		floatingStyles: C,
-		getFloatingProps: F,
-		getItemProps: V,
-		getReferenceProps: H,
-		isOpen: m,
-		isMounted: U,
-		listRef: b,
-		refs: N,
-		setActiveIndex: y,
-		setIsOpen: _,
-		transitionStyles: W
+		activeIndex: y,
+		floatingStyles: F,
+		getFloatingProps: H,
+		getItemProps: U,
+		getReferenceProps: W,
+		isOpen: _,
+		isMounted: G,
+		listRef: x,
+		refs: V,
+		setActiveIndex: b,
+		setIsOpen: v,
+		transitionStyles: K
 	};
 }, Fn = i(null), In = () => {
 	let e = l(Fn);
@@ -8748,56 +8748,10 @@ var Hr = {
 		iconName: a,
 		size: "m"
 	})), /* @__PURE__ */ e.createElement("span", { className: `${t}__link-label` }, n.props.children))] })) : n), o;
-}, Ki = ({ ariaLabel: t, border: n = !1, className: r, menuItems: i, ...a }) => {
-	let o = h(null), s = "pds-button-nav", c = n ? `${s}--bordered` : null;
-	u(() => {
-		let e = (e) => {
-			if (document.documentElement.hasAttribute("data-pds-mobile")) return;
-			let t = o.current;
-			if (!t) return;
-			let n = Array.from(t.querySelectorAll("a, button, [tabindex]:not([tabindex=\"-1\"])"));
-			if (n.length === 0) return;
-			let r = document.activeElement, i = n.indexOf(r);
-			i !== -1 && (e.key === "ArrowRight" ? (e.preventDefault(), n[(i + 1) % n.length].focus()) : e.key === "ArrowLeft" && (e.preventDefault(), n[(i - 1 + n.length) % n.length].focus()));
-		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, []);
-	let l = ({ isActive: t, linkContent: n }) => {
-		let r = `${s}__item`;
-		return /* @__PURE__ */ e.createElement("li", { className: Z([r, t ? `${r}--active` : null]) }, n);
-	}, d = i.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${s}__menu` }, i.map((t, n) => /* @__PURE__ */ e.createElement(l, {
-		key: n,
-		isActive: Vi(t),
-		linkContent: t.linkContent
-	}))) : null, f = [];
-	i.map((e) => {
-		e.linkContent && (Vi(e) ? f.unshift({
-			linkContent: e.linkContent,
-			isLink: !0
-		}) : f.push({
-			linkContent: e.linkContent,
-			isLink: !0
-		}));
-	});
-	let p = f.length > 0 ? /* @__PURE__ */ e.createElement("div", { className: `${s}__mobile` }, /* @__PURE__ */ e.createElement(rr, {
-		actionItems: f,
-		id: "mobile-nav-split-button",
-		size: "s",
-		variant: "secondary"
-	})) : null;
-	return /* @__PURE__ */ e.createElement("nav", {
-		ref: o,
-		"aria-label": t,
-		className: Z([
-			s,
-			c,
-			r ?? ""
-		]),
-		...a
-	}, d, p);
-}, qi = ({ className: t, headingText: n, menuItems: i, selectTextFallback: a = "Navigate to...", ...o }) => {
+}, Ki = ({ className: t, headingText: n, menuItems: i, selectTextFallback: a = "Navigate to...", ...o }) => {
 	let s = "pds-dropdown-menu", c = Ri(i), l = c ? c.props.children : a, u = /* @__PURE__ */ e.createElement(Gn, { className: `pds-dropdown__selected-icon ${s}__active-icon` }), { activeIndex: d, floatingStyles: f, getFloatingProps: p, getItemProps: m, getReferenceProps: h, isMounted: g, listRef: _, refs: v, setIsOpen: y, transitionStyles: b } = Pn({
 		enableTypeahead: !0,
+		matchReferenceWidth: !0,
 		role: "menu"
 	}), x = (e) => {
 		e.target.nodeName === "A" && y(!1);
@@ -8895,6 +8849,43 @@ var Hr = {
 		tabIndex: d === n ? 0 : -1,
 		...m({ onKeyDown: C })
 	}, t.linkContent, t.isActive === !0 && u)))));
+}, qi = ({ ariaLabel: t, border: n = !1, className: r, hasMobileDropdown: i = !1, menuItems: a, ...o }) => {
+	let s = h(null), c = "pds-button-nav", l = n ? `${c}--bordered` : null, d = i ? `${c}--has-mobile-dropdown` : null;
+	u(() => {
+		let e = (e) => {
+			if (document.documentElement.hasAttribute("data-pds-mobile")) return;
+			let t = s.current;
+			if (!t) return;
+			let n = Array.from(t.querySelectorAll("a, button, [tabindex]:not([tabindex=\"-1\"])"));
+			if (n.length === 0) return;
+			let r = document.activeElement, i = n.indexOf(r);
+			i !== -1 && (e.key === "ArrowRight" ? (e.preventDefault(), n[(i + 1) % n.length].focus()) : e.key === "ArrowLeft" && (e.preventDefault(), n[(i - 1 + n.length) % n.length].focus()));
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, []);
+	let f = ({ isActive: t, linkContent: n }) => {
+		let r = `${c}__item`;
+		return /* @__PURE__ */ e.createElement("li", { className: Z([r, t ? `${r}--active` : null]) }, n);
+	}, p = a.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${c}__menu` }, a.map((t, n) => /* @__PURE__ */ e.createElement(f, {
+		key: n,
+		isActive: Vi(t),
+		linkContent: t.linkContent
+	}))) : null, m = /* @__PURE__ */ e.createElement(Ki, {
+		className: `${c}__mobile`,
+		menuItems: a,
+		selectTextFallback: t
+	});
+	return /* @__PURE__ */ e.createElement("nav", {
+		ref: s,
+		"aria-label": t,
+		className: Z([
+			c,
+			l,
+			d,
+			r ?? ""
+		]),
+		...o
+	}, p, i && m);
 }, Ji = ({ children: t, className: n, width: r = "standard", ...i }) => {
 	let a = "pds-container", o = r === "standard" ? null : `${a}--${r}`;
 	return /* @__PURE__ */ e.createElement("div", {
@@ -9058,7 +9049,7 @@ var Hr = {
 				Vi(t) ? `${m}--active` : null
 			])
 		}, Wi(t.linkContent, t.links))))) : i);
-	}, S = /* @__PURE__ */ e.createElement(e.Fragment, null, a && /* @__PURE__ */ e.createElement("h2", { className: `${f}__heading` }, a), c.length > 0 && /* @__PURE__ */ e.createElement("ul", { className: `${f}__menu ${f}__menu--top-level` }, c.map((e, t) => x(e, t)))), C = /* @__PURE__ */ e.createElement(qi, {
+	}, S = /* @__PURE__ */ e.createElement(e.Fragment, null, a && /* @__PURE__ */ e.createElement("h2", { className: `${f}__heading` }, a), c.length > 0 && /* @__PURE__ */ e.createElement("ul", { className: `${f}__menu ${f}__menu--top-level` }, c.map((e, t) => x(e, t)))), C = /* @__PURE__ */ e.createElement(Ki, {
 		className: `${f}__mobile`,
 		headingText: a,
 		menuItems: c,
@@ -12746,6 +12737,6 @@ var bo = ({ children: t, className: n, columns: r, depth: i = 0, hasChildren: a
 	}, []), t;
 };
 //#endregion
-export { ur as ActionCard, qo as AppLayout, bt as Avatar, xt as Badge, fa as Banner, Nr as BarChart, Cn as BranchDiff, Li as Breadcrumb, Dn as Button, On as ButtonLink, Ki as ButtonNav, Ni as CTALink, lr as Callout, dr as Card, fr as CardSelect, $r as Checkbox, ei as CheckboxFieldset, ti as CheckboxGroup, jn as ClipboardButton, Mn as CloseButton, Ur as CodeBlock, ni as Combobox, ii as ComboboxMultiselect, pr as CompactEmptyState, Gr as ComparisonList, Ji as Container, Ci as Datepicker, Jo as DocsLayout, Da as Drawer, Ln as Dropdown, qi as DropdownMenu, Fa as ExpansionPanel, Ia as ExpansionPanelGroup, Yr as FileDiff, wi as FileUpload, Kn as FilterButton, $o as FlexContainer, Oa as FullScreenOverlay, cs as GlobalWrapper, ls as Grid, us as GridItem, qr as HorizontalEmptyState, Q as Icon, An as IconButton, Qr as IdentityBlock, ma as InlineMessage, Ti as InputGroup, Fr as LineChart, Pi as LinkNewWindow, _a as MIN_AUTO_CLOSE_DURATION, tr as MenuButton, ka as Modal, Yi as Navbar, Ma as Pagination, Na as PaginationChapter, Pa as PaginationCompact, La as Panel, Ra as PanelList, za as PanelRow, Ba as PanelStack, Wa as PantheonLogo, Zr as PaymentIcon, Ii as Picture, Lr as PieChart, ir as PlatformIcon, qa as Popover, Ya as ProgressBar, Za as ProgressRing, zr as ProportionBar, Ei as RadioGroup, eo as ResultCount, or as SSOButton, ga as SectionMessage, nr as SegmentedButton, hr as Select, mr as SelectOptionGroup, Xi as SideNav, Qi as SideNavGlobal, Zi as SideNavGlobalItem, Yo as SidebarLayout, ro as SiteFooter, ea as SiteMenu, io as SiteOptionDisplay, ao as SiteSearch, er as SiteTypeIcon, $n as SiteTypeLabel, kr as Skeleton, Fi as Skiplink, vo as SortableList, fo as SortableListHeader, bo as SortableRow, bn as Spinner, rr as SplitButton, xn as StatusBadge, So as StatusChecker, Co as StatusIndicator, Jn as StatusTypeLabels, wo as StepList, To as Stepper, Xo as StepperLayout, Di as Switch, na as TabMenu, Oo as Table, Fo as TableOfContents, Io as Tabs, Wo as Tag, ki as TagsInput, Sn as Tally, Mi as TextInput, Ai as Textarea, rs as ThemeContext, os as ThemeContextProvider, oa as ThemeSwitcher, Zo as ThreeItemLayout, li as Timepicker, wa as Toast, Ta as ToastType, xa as Toaster, ya as ToasterContext, nn as Tooltip, ia as TreeNav, Qo as TwoItemLayout, sa as UserMenu, Go as UtilityBar, sr as UtilityButton, Jr as VerticalEmptyState, Do as VerticalStepper, Kr as VideoEmbed, ca as WorkspaceSelector, yi as getPresetDateRange, as as getThemeInitScript, _t as iconList, Xn as isHeadingItemType, Zn as isLinkItemType, Qn as isNodeItemType, Yn as isSeparatorItemType, xo as statusCheckerStates, Lo as tagColors, Bo as tagSolidColors, Ro as tagSolidHueColors, zo as tagSolidStatusColors, Ko as useBreakpoint, kn as useClipboard, Pn as useDropdown, Xt as useIsMobile, ds as useKeyPress, tn as useKeyboardShortcut, es as useMediaQuery, ss as useTheme, Ea as useToast, fs as useWindowWidth };
+export { ur as ActionCard, qo as AppLayout, bt as Avatar, xt as Badge, fa as Banner, Nr as BarChart, Cn as BranchDiff, Li as Breadcrumb, Dn as Button, On as ButtonLink, qi as ButtonNav, Ni as CTALink, lr as Callout, dr as Card, fr as CardSelect, $r as Checkbox, ei as CheckboxFieldset, ti as CheckboxGroup, jn as ClipboardButton, Mn as CloseButton, Ur as CodeBlock, ni as Combobox, ii as ComboboxMultiselect, pr as CompactEmptyState, Gr as ComparisonList, Ji as Container, Ci as Datepicker, Jo as DocsLayout, Da as Drawer, Ln as Dropdown, Ki as DropdownMenu, Fa as ExpansionPanel, Ia as ExpansionPanelGroup, Yr as FileDiff, wi as FileUpload, Kn as FilterButton, $o as FlexContainer, Oa as FullScreenOverlay, cs as GlobalWrapper, ls as Grid, us as GridItem, qr as HorizontalEmptyState, Q as Icon, An as IconButton, Qr as IdentityBlock, ma as InlineMessage, Ti as InputGroup, Fr as LineChart, Pi as LinkNewWindow, _a as MIN_AUTO_CLOSE_DURATION, tr as MenuButton, ka as Modal, Yi as Navbar, Ma as Pagination, Na as PaginationChapter, Pa as PaginationCompact, La as Panel, Ra as PanelList, za as PanelRow, Ba as PanelStack, Wa as PantheonLogo, Zr as PaymentIcon, Ii as Picture, Lr as PieChart, ir as PlatformIcon, qa as Popover, Ya as ProgressBar, Za as ProgressRing, zr as ProportionBar, Ei as RadioGroup, eo as ResultCount, or as SSOButton, ga as SectionMessage, nr as SegmentedButton, hr as Select, mr as SelectOptionGroup, Xi as SideNav, Qi as SideNavGlobal, Zi as SideNavGlobalItem, Yo as SidebarLayout, ro as SiteFooter, ea as SiteMenu, io as SiteOptionDisplay, ao as SiteSearch, er as SiteTypeIcon, $n as SiteTypeLabel, kr as Skeleton, Fi as Skiplink, vo as SortableList, fo as SortableListHeader, bo as SortableRow, bn as Spinner, rr as SplitButton, xn as StatusBadge, So as StatusChecker, Co as StatusIndicator, Jn as StatusTypeLabels, wo as StepList, To as Stepper, Xo as StepperLayout, Di as Switch, na as TabMenu, Oo as Table, Fo as TableOfContents, Io as Tabs, Wo as Tag, ki as TagsInput, Sn as Tally, Mi as TextInput, Ai as Textarea, rs as ThemeContext, os as ThemeContextProvider, oa as ThemeSwitcher, Zo as ThreeItemLayout, li as Timepicker, wa as Toast, Ta as ToastType, xa as Toaster, ya as ToasterContext, nn as Tooltip, ia as TreeNav, Qo as TwoItemLayout, sa as UserMenu, Go as UtilityBar, sr as UtilityButton, Jr as VerticalEmptyState, Do as VerticalStepper, Kr as VideoEmbed, ca as WorkspaceSelector, yi as getPresetDateRange, as as getThemeInitScript, _t as iconList, Xn as isHeadingItemType, Zn as isLinkItemType, Qn as isNodeItemType, Yn as isSeparatorItemType, xo as statusCheckerStates, Lo as tagColors, Bo as tagSolidColors, Ro as tagSolidHueColors, zo as tagSolidStatusColors, Ko as useBreakpoint, kn as useClipboard, Pn as useDropdown, Xt as useIsMobile, ds as useKeyPress, tn as useKeyboardShortcut, es as useMediaQuery, ss as useTheme, Ea as useToast, fs as useWindowWidth };
 
 //# sourceMappingURL=index.js.map