@canonical/maas-react-components 2.7.2 → 2.8.0

package/dist/@canonical/maas-react-components.es.js

@@ -1,2 +1,2 @@
-import { A as e, C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "../lib-BEVV6FLF.mjs";
-export { t as ContentSection, c as DynamicTable, r as ExternalLink, u as FileUpload, a as FormSection, S as GenericTable, O as InputGroup, p as Layout, m as MainToolbar, n as Meter, b as MultiSelect, C as MultiSelectDropdown, x as Navigation, v as NavigationBar, f as NestedFormGroup, T as Pagination, d as PaginationContainer, D as Placeholder, o as ProgressIndicator, y as QueryInput, E as SidePanel, k as SidePanelContextProvider, _ as Stepper, h as TableCaption, i as defaultFilledColors, w as formatBytes, s as lazyLoadSidePanel, g as meterColor, e as testIds, l as useSidePanel };
+import { A as e, C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "../lib-qz4Dneh_.mjs";
+export { t as ContentSection, c as DynamicTable, r as ExternalLink, u as FileUpload, a as FormSection, S as GenericTable, O as InputGroup, p as Layout, m as MainToolbar, n as Meter, b as MultiSelect, C as MultiSelectDropdown, x as Navigation, v as NavigationBar, f as NestedFormGroup, T as Pagination, d as PaginationContainer, D as Placeholder, o as ProgressIndicator, y as QueryInput, l as SidePanel, E as SidePanelContextProvider, _ as Stepper, h as TableCaption, i as defaultFilledColors, w as formatBytes, s as lazyLoadSidePanel, g as meterColor, e as testIds, k as useSidePanel };

package/dist/{lib-BEVV6FLF.mjs → lib-qz4Dneh_.mjs}

@@ -225,50 +225,8 @@ _e.Label = ({ children: e }) => {
 //#region src/lib/sections/Layout/components/DocumentTitle/DocumentTitle.tsx
 var ve = ({ children: e }) => (l(() => {
 	document.title = t.toArray(e).join("");
-}, [e]), null), ye = a(null), q = () => {
-	let e = c(ye);
-	if (!e) throw Error("useSidePanel must be used within a SidePanelProvider");
-	return e;
-}, be = ({ children: e }) => {
-	let [t, n] = h({
-		isOpen: !1,
-		title: "",
-		size: "regular",
-		component: null,
-		props: {}
-	}), r = ({ component: e, title: t, props: r = {}, size: i = "regular" }) => {
-		n({
-			isOpen: !0,
-			title: t,
-			size: i,
-			component: e,
-			props: r || {}
-		});
-	}, i = () => {
-		n({
-			isOpen: !1,
-			title: "",
-			size: "regular",
-			component: null,
-			props: {}
-		});
-	}, a = s((e) => {
-		n((t) => ({
-			...t,
-			size: e
-		}));
-	}, []);
-	return /* @__PURE__ */ P(ye.Provider, {
-		value: {
-			...t,
-			openSidePanel: r,
-			closeSidePanel: i,
-			setSidePanelSize: a
-		},
-		children: e
-	});
-}, xe = () => {
-	let e = re(), { closeSidePanel: t } = q();
+}, [e]), null), ye = () => {
+	let e = re(), { closeSidePanel: t } = J();
 	l(() => {
 		t();
 	}, [
@@ -276,41 +234,41 @@ var ve = ({ children: e }) => (l(() => {
 		e.search,
 		e.hash
 	]);
-}, Se = () => {
-	let { setSidePanelSize: e } = q();
+}, be = () => {
+	let { setSidePanelSize: e } = J();
 	l(() => () => {
 		e("regular");
 	}, []);
-}, Ce = () => {
-	let { closeSidePanel: e } = q();
+}, xe = () => {
+	let { closeSidePanel: e } = J();
 	j(() => {
 		e();
 	});
-}, J = () => {
-	Ce(), xe(), Se();
-	let { isOpen: e, title: t, component: n, props: r, size: i } = q();
+}, q = ({ sidePanelTitles: e = "auto" }) => {
+	xe(), ye(), be();
+	let { isOpen: t, title: n, component: r, props: i, size: a } = J();
 	return /* @__PURE__ */ P(g, {
-		"aria-label": t ?? void 0,
+		"aria-label": n ?? void 0,
 		className: M({
-			"is-narrow": i === "narrow",
-			"is-large": i === "large",
-			"is-wide": i === "wide"
+			"is-narrow": a === "narrow",
+			"is-large": a === "large",
+			"is-wide": a === "wide"
 		}),
-		collapsed: !e,
+		collapsed: !t,
 		id: "aside-panel",
-		children: /* @__PURE__ */ F(W, { children: [t ? /* @__PURE__ */ P("div", {
+		children: /* @__PURE__ */ F(W, { children: [e === "auto" && n ? /* @__PURE__ */ P("div", {
 			className: "row section-header section-header--side-panel",
 			children: /* @__PURE__ */ P("div", {
 				className: "col-12",
 				children: /* @__PURE__ */ P("h3", {
 					className: "section-header__title u-flex--no-shrink p-heading--4",
-					children: t
+					children: n
 				})
 			})
-		}) : null, e && n && /* @__PURE__ */ P(n, { ...r })] })
+		}) : null, t && r && /* @__PURE__ */ P(r, { ...i })] })
 	});
 };
-J.Skeleton = ({ hasTitle: e }) => /* @__PURE__ */ F(W, {
+q.Skeleton = ({ hasTitle: e }) => /* @__PURE__ */ F(W, {
 	"aria-hidden": "true",
 	className: "aside-skeleton",
 	children: [
@@ -360,14 +318,56 @@ J.Skeleton = ({ hasTitle: e }) => /* @__PURE__ */ F(W, {
 	]
 });
 //#endregion
-//#region src/lib/sections/SidePanel/utils.tsx
-var we = (e, t) => {
+//#region src/lib/sections/SidePanel/SidePanelContextProvider/SidePanelContextProvider.tsx
+var Se = a(null), J = () => {
+	let e = c(Se);
+	if (!e) throw Error("useSidePanel must be used within a SidePanelProvider");
+	return e;
+}, Ce = ({ children: e }) => {
+	let [t, n] = h({
+		isOpen: !1,
+		title: "",
+		size: "regular",
+		component: null,
+		props: {}
+	}), r = ({ component: e, title: t, props: r = {}, size: i = "regular" }) => {
+		n({
+			isOpen: !0,
+			title: t,
+			size: i,
+			component: e,
+			props: r || {}
+		});
+	}, i = () => {
+		n({
+			isOpen: !1,
+			title: "",
+			size: "regular",
+			component: null,
+			props: {}
+		});
+	}, a = s((e) => {
+		n((t) => ({
+			...t,
+			size: e
+		}));
+	}, []);
+	return /* @__PURE__ */ P(Se.Provider, {
+		value: {
+			...t,
+			openSidePanel: r,
+			closeSidePanel: i,
+			setSidePanelSize: a
+		},
+		children: e
+	});
+}, we = (e, t) => {
 	let n = o(e);
 	return (e) => /* @__PURE__ */ P(r, {
-		fallback: /* @__PURE__ */ P(W, { children: /* @__PURE__ */ P(J.Skeleton, { hasTitle: t }) }),
+		fallback: /* @__PURE__ */ P(W, { children: /* @__PURE__ */ P(q.Skeleton, { hasTitle: t }) }),
 		children: /* @__PURE__ */ P(n, { ...e })
 	});
-}, Te = ({ className: e, children: t, pageTitle: n, view: i, isSecondaryNavVisible: a, navigation: o, secondaryNavigation: s, statusBar: c }) => /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(ve, { children: n }), /* @__PURE__ */ F(v, { children: [
+}, Te = ({ className: e, children: t, pageTitle: n, view: i, isSecondaryNavVisible: a, navigation: o, secondaryNavigation: s, sidePanelTitles: c = "auto", statusBar: l }) => /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(ve, { children: n }), /* @__PURE__ */ F(v, { children: [
 	o,
 	/* @__PURE__ */ F(_, {
 		className: e,
@@ -395,8 +395,8 @@ var we = (e, t) => {
 			})
 		]
 	}),
-	/* @__PURE__ */ P(J, {}),
-	c
+	/* @__PURE__ */ P(q, { sidePanelTitles: c }),
+	l
 ] })] }), Ee = ({ view: e }) => e === "settings" ? /* @__PURE__ */ F(W, {
 	"aria-hidden": "true",
 	className: "layout-skeleton",
@@ -2015,4 +2015,4 @@ var Et = ({ canSelect: e, initialColumns: t, groupBy: n, getSubRows: r, selectio
 	};
 };
 //#endregion
-export { H as A, W as C, fe as D, he as E, le as O, G as S, ge as T, we as _, dt as a, q as b, rt as c, et as d, Qe as f, Te as g, Ae as h, ht as i, L as k, tt as l, Xe as m, It as n, ct as o, Y as p, jt as r, st as s, Lt as t, $e as u, J as v, U as w, _e as x, be as y };
+export { H as A, W as C, fe as D, he as E, le as O, G as S, ge as T, we as _, dt as a, q as b, rt as c, et as d, Qe as f, Te as g, Ae as h, ht as i, L as k, tt as l, Xe as m, It as n, ct as o, Y as p, jt as r, st as s, Lt as t, $e as u, Ce as v, U as w, _e as x, J as y };