@guardian/stand 0.0.40 → 0.0.42

package/dist/components/TopBar/TopBar.cjs

@@ -1,230 +1,157 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var React = require('react');
-var reactAriaComponents = require('react-aria-components');
-var mergeDeep = require('../../util/mergeDeep.cjs');
-var useResize = require('../../util/useResize.cjs');
-var Avatar = require('../Avatar/Avatar.cjs');
-var Icon = require('../Icon/Icon.cjs');
-var styles = require('./styles.cjs');
-var TopBarItem = require('./TopBarItem/TopBarItem.cjs');
-var TopBarNavigation = require('./TopBarNavigation/TopBarNavigation.cjs');
-var TopBarToolName = require('./TopBarToolName/TopBarToolName.cjs');
-var AvatarLink = require('../AvatarLink/AvatarLink.cjs');
-var AvatarButton = require('../AvatarButton/AvatarButton.cjs');
-
-function TopBarSide({
-  children,
-  alignment,
-  theme
-}) {
-  const items = [];
-  React.Children.forEach(children, (child, i) => {
-    if (!React.isValidElement(child)) {
-      return;
-    }
-    if (child.type === TopBarItem.TopBarItem) {
-      items.push(
-        React.cloneElement(child, {
-          key: `${child.key}-${i}`,
-          theme: theme?.item,
-          alignment
-        })
-      );
-    }
-    if (child.type === TopBarNavigation.TopBarNavigation) {
-      items.push(
-        React.cloneElement(child, {
-          key: `${child.key}-${i}`,
-          theme: theme?.navigation,
-          alignment
-        })
-      );
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_Avatar = require("../Avatar/Avatar.cjs");
+const require_AvatarButton = require("../AvatarButton/AvatarButton.cjs");
+const require_AvatarLink = require("../AvatarLink/AvatarLink.cjs");
+const require_TopBarItem = require("./TopBarItem/TopBarItem.cjs");
+const require_TopBarToolName = require("./TopBarToolName/TopBarToolName.cjs");
+const require_TopBarNavigation = require("./TopBarNavigation/TopBarNavigation.cjs");
+const require_useResize = require("../../util/useResize.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/TopBar/TopBar.tsx
+function TopBarSide({ children, alignment, theme }) {
+	const items = [];
+	react.default.Children.forEach(children, (child, i) => {
+		if (!react.default.isValidElement(child)) return;
+		if (child.type === require_TopBarItem.TopBarItem) items.push(react.default.cloneElement(child, {
+			key: `${child.key}-${i}`,
+			theme: theme?.item,
+			alignment
+		}));
+		if (child.type === require_TopBarNavigation.TopBarNavigation) items.push(react.default.cloneElement(child, {
+			key: `${child.key}-${i}`,
+			theme: theme?.navigation,
+			alignment
+		}));
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react_jsx_runtime.Fragment, { children: items });
 }
-function TopBarContainerRight({
-  children,
-  theme
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "right", theme, children });
+function TopBarContainerRight({ children, theme }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TopBarSide, {
+		alignment: "right",
+		theme,
+		children
+	});
 }
-function TopBarContainerLeft({
-  children,
-  theme
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "left", theme, children });
+function TopBarContainerLeft({ children, theme }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TopBarSide, {
+		alignment: "left",
+		theme,
+		children
+	});
 }
-function TopBar({
-  children,
-  collapseBelow = {
-    toolName: "lg",
-    containerLeft: "lg"
-  },
-  theme = {},
-  cssOverrides,
-  className,
-  ...props
-}) {
-  const [menuOpen, setMenuOpen] = React.useState(false);
-  const buttonRef = React.useRef(null);
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTopBarTheme, theme);
-  let leftSide;
-  let rightSide;
-  let toolName;
-  let avatar;
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return;
-    }
-    if (child.type === TopBarToolName.TopBarToolName) {
-      toolName ?? (toolName = React.cloneElement(
-        child,
-        { theme: mergedTheme.toolName, collapseBelow: collapseBelow.toolName }
-      ));
-    }
-    if (child.type === Avatar.Avatar || child.type === AvatarLink.AvatarLink || child.type === AvatarButton.AvatarButton) {
-      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { theme: mergedTheme.item, alignment: "right", children: child }));
-    }
-    if (child.type === TopBarContainerLeft) {
-      leftSide ?? (leftSide = React.cloneElement(
-        child,
-        { theme: mergedTheme }
-      ));
-    }
-    if (child.type === TopBarContainerRight) {
-      rightSide ?? (rightSide = React.cloneElement(
-        child,
-        { theme: mergedTheme }
-      ));
-    }
-  });
-  const leftSideMenuItems = [];
-  if (leftSide) {
-    React.Children.forEach(
-      leftSide.props.children,
-      (child) => {
-        if (!React.isValidElement(child)) {
-          return;
-        }
-        if (child.type === TopBarNavigation.TopBarNavigation) {
-          leftSideMenuItems.push(
-            React.cloneElement(
-              child,
-              {
-                theme: mergedTheme.navigation,
-                alignment: "left",
-                _menuOpen: menuOpen
-              }
-            )
-          );
-        }
-        if (child.type === TopBarItem.TopBarItem) {
-          leftSideMenuItems.push(
-            React.cloneElement(child, {
-              theme: mergedTheme.item,
-              alignment: "left",
-              _menuOpen: menuOpen
-            })
-          );
-        }
-      }
-    );
-  }
-  useResize.useResize(() => {
-    if (menuOpen) {
-      setMenuOpen(false);
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      css: [styles.topBarStyles(mergedTheme), cssOverrides],
-      className,
-      ...props,
-      children: [
-        leftSideMenuItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            css: styles.topBarContainerStyles(mergedTheme, {
-              showUntil: collapseBelow.containerLeft
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              reactAriaComponents.DialogTrigger,
-              {
-                isOpen: menuOpen,
-                onOpenChange: (isOpen) => {
-                  setMenuOpen(isOpen);
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    reactAriaComponents.Button,
-                    {
-                      "aria-label": "Navigation Menu",
-                      ref: buttonRef,
-                      css: styles.topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        TopBarItem.TopBarItem,
-                        {
-                          alignment: "left",
-                          size: "sm",
-                          theme: mergedTheme.item,
-                          "aria-label": "Navigation Menu",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            Icon.Icon,
-                            {
-                              fill: mergedTheme.collapsedNavMenu.button.color,
-                              size: "lg",
-                              children: menuOpen ? "close" : "menu"
-                            }
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    reactAriaComponents.Popover,
-                    {
-                      css: styles.topBarCollapsedNavMenuPopoverStyles(mergedTheme),
-                      offset: mergedTheme.collapsedNavMenu.popover.offset,
-                      containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding,
-                      shouldFlip: false,
-                      children: leftSideMenuItems
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarContainerStyles(mergedTheme), children: toolName }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            css: styles.topBarContainerStyles(mergedTheme, {
-              collapseBelow: collapseBelow.containerLeft
-            }),
-            children: leftSide
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            css: [
-              styles.topBarSpacerStyles(mergedTheme),
-              styles.topBarContainerStyles(mergedTheme)
-            ],
-            children: rightSide
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarContainerStyles(mergedTheme), children: avatar })
-      ]
-    }
-  );
+function TopBar({ children, collapseBelow = {
+	toolName: "lg",
+	containerLeft: "lg"
+}, theme = {}, cssOverrides, className, ...props }) {
+	const [menuOpen, setMenuOpen] = react.default.useState(false);
+	const buttonRef = react.default.useRef(null);
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTopBarTheme, theme);
+	let leftSide;
+	let rightSide;
+	let toolName;
+	let avatar;
+	react.default.Children.forEach(children, (child) => {
+		if (!react.default.isValidElement(child)) return;
+		/**
+		* Accepts a tool name that will always be rendered on the left hand side
+		*/
+		if (child.type === require_TopBarToolName.TopBarToolName) toolName ??= react.default.cloneElement(child, {
+			theme: mergedTheme.toolName,
+			collapseBelow: collapseBelow.toolName
+		});
+		/**
+		* Accepts an avatar that will always be rendered on the right hand side, within an item for styling
+		*/
+		if (child.type === require_Avatar.Avatar || child.type === require_AvatarLink.AvatarLink || child.type === require_AvatarButton.AvatarButton) avatar ??= /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TopBarItem.TopBarItem, {
+			theme: mergedTheme.item,
+			alignment: "right",
+			children: child
+		});
+		/**
+		* Other items must be defined as part of the LHS or RHS
+		*/
+		if (child.type === TopBarContainerLeft) leftSide ??= react.default.cloneElement(child, { theme: mergedTheme });
+		if (child.type === TopBarContainerRight) rightSide ??= react.default.cloneElement(child, { theme: mergedTheme });
+	});
+	const leftSideMenuItems = [];
+	if (leftSide) react.default.Children.forEach(leftSide.props.children, (child) => {
+		if (!react.default.isValidElement(child)) return;
+		if (child.type === require_TopBarNavigation.TopBarNavigation) leftSideMenuItems.push(react.default.cloneElement(child, {
+			theme: mergedTheme.navigation,
+			alignment: "left",
+			_menuOpen: menuOpen
+		}));
+		if (child.type === require_TopBarItem.TopBarItem) leftSideMenuItems.push(react.default.cloneElement(child, {
+			theme: mergedTheme.item,
+			alignment: "left",
+			_menuOpen: menuOpen
+		}));
+	});
+	require_useResize.useResize(() => {
+		if (menuOpen) setMenuOpen(false);
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: [require_styles.topBarStyles(mergedTheme), cssOverrides],
+		className,
+		...props,
+		children: [
+			leftSideMenuItems.length > 0 && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: require_styles.topBarContainerStyles(mergedTheme, { showUntil: collapseBelow.containerLeft }),
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.DialogTrigger, {
+					isOpen: menuOpen,
+					onOpenChange: (isOpen) => {
+						setMenuOpen(isOpen);
+					},
+					children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+						"aria-label": "Navigation Menu",
+						ref: buttonRef,
+						css: require_styles.topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen),
+						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_TopBarItem.TopBarItem, {
+							alignment: "left",
+							size: "sm",
+							theme: mergedTheme.item,
+							"aria-label": "Navigation Menu",
+							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+								fill: mergedTheme.collapsedNavMenu.button.color,
+								size: "lg",
+								children: menuOpen ? "close" : "menu"
+							})
+						})
+					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
+						css: require_styles.topBarCollapsedNavMenuPopoverStyles(mergedTheme),
+						offset: mergedTheme.collapsedNavMenu.popover.offset,
+						containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding,
+						shouldFlip: false,
+						children: leftSideMenuItems
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: require_styles.topBarContainerStyles(mergedTheme),
+				children: toolName
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: require_styles.topBarContainerStyles(mergedTheme, { collapseBelow: collapseBelow.containerLeft }),
+				children: leftSide
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: [require_styles.topBarSpacerStyles(mergedTheme), require_styles.topBarContainerStyles(mergedTheme)],
+				children: rightSide
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: require_styles.topBarContainerStyles(mergedTheme),
+				children: avatar
+			})
+		]
+	});
 }
-
+//#endregion
 exports.TopBar = TopBar;
 exports.TopBarContainerLeft = TopBarContainerLeft;
 exports.TopBarContainerRight = TopBarContainerRight;

package/dist/components/TopBar/TopBar.d.cts

@@ -0,0 +1,28 @@
+import { TopBarTheme } from "./styles.cjs";
+import { TopBarProps } from "./types.cjs";
+
+//#region src/components/TopBar/TopBar.d.ts
+declare function TopBarContainerRight({
+  children,
+  theme
+}: {
+  children: TopBarProps['children'];
+  theme?: TopBarTheme;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TopBarContainerLeft({
+  children,
+  theme
+}: {
+  children: TopBarProps['children'];
+  theme?: TopBarTheme;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TopBar({
+  children,
+  collapseBelow,
+  theme,
+  cssOverrides,
+  className,
+  ...props
+}: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TopBar, TopBarContainerLeft, TopBarContainerRight };

package/dist/components/TopBar/TopBar.d.ts

@@ -0,0 +1,28 @@
+import { TopBarTheme } from "./styles.js";
+import { TopBarProps } from "./types.js";
+
+//#region src/components/TopBar/TopBar.d.ts
+declare function TopBarContainerRight({
+  children,
+  theme
+}: {
+  children: TopBarProps['children'];
+  theme?: TopBarTheme;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TopBarContainerLeft({
+  children,
+  theme
+}: {
+  children: TopBarProps['children'];
+  theme?: TopBarTheme;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TopBar({
+  children,
+  collapseBelow,
+  theme,
+  cssOverrides,
+  className,
+  ...props
+}: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { TopBar, TopBarContainerLeft, TopBarContainerRight };