@canonical/react-components 1.6.0 → 1.7.0

package/dist/esm/components/Navigation/Navigation.js

@@ -0,0 +1,215 @@
+var _excluded = ["url", "src", "title", "icon", "aria-current", "aria-label"],
+  _excluded2 = ["fullWidth", "generateLink", "items", "itemsRight", "leftNavProps", "logo", "navProps", "rightNavProps", "searchProps", "theme"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import { useRef, useEffect } from "react";
+import React, { isValidElement, useState } from "react";
+import classNames from "classnames";
+import NavigationLink from "./NavigationLink";
+import NavigationMenu from "./NavigationMenu";
+import SearchBox from "../SearchBox";
+import { useOnEscapePressed } from "../../hooks";
+import { Theme } from "../../enums";
+/**
+ * Narrow the type of the nav item to a NavMenu.
+ */
+var isMenu = item => "items" in item;
+
+/**
+ * Narrow the type of the logo prop to LogoProps.
+ */
+var isLogoProps = logo => ! /*#__PURE__*/isValidElement(logo);
+
+/**
+ * Display the standard logo if the props were provided otherwise display the
+ * full element provided.
+ */
+var generateLogo = (logo, generateLink) => {
+  if (isLogoProps(logo)) {
+    var {
+        url,
+        src,
+        title,
+        icon,
+        "aria-current": ariaCurrent,
+        "aria-label": ariaLabel
+      } = logo,
+      logoProps = _objectWithoutProperties(logo, _excluded);
+    var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "p-navigation__logo-tag"
+    }, icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React.createElement("img", {
+      className: "p-navigation__logo-icon",
+      src: src,
+      alt: "Logo"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "p-navigation__logo-title"
+    }, title));
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: "p-navigation__tagged-logo"
+    }, logoProps), /*#__PURE__*/React.createElement(NavigationLink, {
+      generateLink: generateLink,
+      link: {
+        "aria-label": ariaLabel,
+        className: "p-navigation__link",
+        isSelected: !!ariaCurrent,
+        label: content,
+        url: url
+      }
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "p-navigation__logo"
+  }, logo);
+};
+
+/**
+ * Generate the JSX for a set of nav items. This will map the items to menus,
+ * links or generated components.
+ * @param items The nav items to map to elements.
+ * @param closeMobileMenu A function to close the mobile menu.
+ * @param generateLink The optional function used to generate link components.
+ * @returns A list of navigation item elements.
+ */
+var generateItems = (items, closeMobileMenu, generateLink) => items.map((item, i) => isMenu(item) ? /*#__PURE__*/React.createElement(NavigationMenu, _extends({}, item, {
+  generateLink: generateLink,
+  key: i
+})) : /*#__PURE__*/React.createElement("li", {
+  className: classNames("p-navigation__item", {
+    "is-selected": item.isSelected
+  }),
+  key: i
+}, /*#__PURE__*/React.createElement(NavigationLink, {
+  generateLink: generateLink,
+  link: _objectSpread(_objectSpread({}, item), {}, {
+    className: classNames("p-navigation__link", item.className),
+    onClick: evt => {
+      var _item$onClick;
+      (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, evt);
+      closeMobileMenu();
+    }
+  })
+})));
+
+/**
+This is the [React](https://reactjs.org/) component for the Vanilla
+[Navigation](https://vanillaframework.io/docs/patterns/navigation) pattern. It
+is a simple navigation bar that you can add to the top of your site or app.
+
+The navigation items are collapsed behind a "Menu" link in small screens and
+displayed horizontally on larger screens.
+ */
+var Navigation = _ref => {
+  var {
+      fullWidth,
+      generateLink,
+      items,
+      itemsRight,
+      leftNavProps,
+      logo,
+      navProps,
+      rightNavProps,
+      searchProps,
+      theme
+    } = _ref,
+    headerProps = _objectWithoutProperties(_ref, _excluded2);
+  var searchRef = useRef();
+  var [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  var [searchOpen, setSearchOpen] = useState(false);
+  // Display the search box if the props have been provided.
+  var hasSearch = !!searchProps;
+  // Close the mobile menu when the search box is opened.
+  var toggleSearch = open => {
+    setSearchOpen(open !== null && open !== void 0 ? open : !searchOpen);
+    setMobileMenuOpen(false);
+  };
+  // Close the search box when the mobile menu is opened.
+  var toggleMobileMenu = () => {
+    setMobileMenuOpen(!mobileMenuOpen);
+    setSearchOpen(false);
+  };
+  var closeMobileMenu = () => {
+    if (mobileMenuOpen) {
+      setMobileMenuOpen(false);
+    }
+  };
+  // Hide the searchbox when the escape key is pressed.
+  useOnEscapePressed(() => toggleSearch(false));
+  useEffect(() => {
+    if (searchOpen) {
+      var _searchRef$current;
+      // Focus on the searchbox when it appears. This done in a useEffect so
+      // that the state change to display the searchbox has already occured and
+      // the input has been made visible.
+      (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus();
+    }
+  }, [searchOpen]);
+  return /*#__PURE__*/React.createElement("header", _extends({}, headerProps, {
+    className: classNames("p-navigation", headerProps.className, {
+      "has-menu-open": mobileMenuOpen,
+      "has-search-open": searchOpen,
+      "is-dark": theme === Theme.DARK,
+      "is-light": theme === Theme.LIGHT
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: fullWidth ? "p-navigation__row--full-width" : "p-navigation__row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-navigation__banner"
+  }, generateLogo(logo, generateLink), /*#__PURE__*/React.createElement("ul", {
+    className: "p-navigation__items"
+  },
+  // When the header has a search box then this button is used to
+  // toggle the search box at mobile size.
+  hasSearch ? /*#__PURE__*/React.createElement("li", {
+    className: "p-navigation__item"
+  }, /*#__PURE__*/React.createElement("button", {
+    "aria-label": "Search",
+    className: "p-navigation__link--search-toggle",
+    onClick: () => toggleSearch()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-navigation__search-label"
+  }, "Search"))) : null, (items === null || items === void 0 ? void 0 : items.length) > 0 || (itemsRight === null || itemsRight === void 0 ? void 0 : itemsRight.length) > 0 ? /*#__PURE__*/React.createElement("li", {
+    className: "p-navigation__item"
+  }, /*#__PURE__*/React.createElement("button", {
+    "aria-pressed": mobileMenuOpen,
+    className: "p-navigation__link",
+    onClick: toggleMobileMenu
+  }, mobileMenuOpen ? "Close menu" : "Menu")) : null)), /*#__PURE__*/React.createElement("nav", _extends({
+    className: "p-navigation__nav"
+  }, navProps), /*#__PURE__*/React.createElement("ul", _extends({
+    className: "p-navigation__items"
+  }, leftNavProps), items ? generateItems(items, closeMobileMenu, generateLink) : null), itemsRight || hasSearch ? /*#__PURE__*/React.createElement("ul", _extends({
+    className: "p-navigation__items"
+  }, rightNavProps), itemsRight ? generateItems(itemsRight, closeMobileMenu, generateLink) : null,
+  // When the header has a search box then this button is used to
+  // toggle the search box at non-mobile size.
+  hasSearch ? /*#__PURE__*/React.createElement("li", {
+    className: "p-navigation__item"
+  }, /*#__PURE__*/React.createElement("button", {
+    "aria-label": "Search",
+    className: "p-navigation__link--search-toggle",
+    onClick: () => toggleSearch()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-navigation__search-label"
+  }, "Search"))) : null) : null,
+  // When the header has a search box and the user has opened the search
+  // form then this search box is displayed.
+  hasSearch ? /*#__PURE__*/React.createElement("div", {
+    className: "p-navigation__search",
+    "aria-hidden": !searchOpen
+  }, /*#__PURE__*/React.createElement(SearchBox, {
+    ref: searchRef
+  })) : null)),
+  // When the header has a search box and the user has opened the search
+  // form then this element is overlayed over the whole page.
+  hasSearch ? /*#__PURE__*/React.createElement("div", {
+    className: "p-navigation__search-overlay",
+    onClick: () => setSearchOpen(false)
+  }) : null);
+};
+export default Navigation;

package/dist/esm/components/Navigation/Navigation.stories.d.ts

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Navigation from "./Navigation";
+declare const meta: Meta<typeof Navigation>;
+export default meta;
+type Story = StoryObj<typeof Navigation>;
+/**
+ * The default navigation is constrained to the max width of the Vanilla grid and
+uses the light theme.
+ */
+export declare const Default: Story;
+/**
+ * You can switch to a dark themed Navigation by using the `dark` prop. This will
+automatically update the Navigation items to use lighter text and hover state
+colours.
+ */
+export declare const Dark: Story;
+/**
+ * Sub-navigation dropdown menus can be added to Navigation by adding an `items`
+array instead of a URL. By default, the dropdown items will align to the left of the
+parent item. This can be changed by adding `alignRight` to the subnav
+object.
+ */
+export declare const Dropdown: Story;
+/**
+ * Expanding search can be enabled by providing props to the underlying [`SearchBox`](/?path=/docs/searchbox--default-story)
+component. Elements to toggle the Searchbox will be included automatically if
+the SearchBox props are provided.
+ */
+export declare const Search: Story;
+/**
+ * Logos can be displayed using the new tag design. In cases where another logo
+style is required then an element can be provided to the `logo` prop.
+ */
+export declare const OverridingTheLogo: Story;
+/**
+ * In some cases such as when using [React Router](https://reactrouter.com/) it is
+necessary to use custom components for links. When this is required then a
+function can be passed to `generateLink` which should return your component.
+Bear in mind that some props like classes and on-click events might be passed to
+this function so take care in overriding any link props.
+ */
+export declare const OverridingTheLinkComponent: Story;
+export declare const NoMenuItems: Story;

package/dist/esm/components/Navigation/Navigation.stories.js

@@ -0,0 +1,225 @@
+import React from "react";
+import Navigation from "./Navigation";
+import { Theme } from "../../enums";
+var meta = {
+  component: Navigation,
+  tags: ["autodocs"]
+};
+export default meta;
+/**
+ * The default navigation is constrained to the max width of the Vanilla grid and
+uses the light theme.
+ */
+export var Default = {
+  name: "Default",
+  args: {
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    }
+  }
+};
+
+/**
+ * You can switch to a dark themed Navigation by using the `dark` prop. This will
+automatically update the Navigation items to use lighter text and hover state
+colours.
+ */
+export var Dark = {
+  name: "Dark",
+  args: {
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    },
+    theme: Theme.DARK
+  }
+};
+
+/**
+ * Sub-navigation dropdown menus can be added to Navigation by adding an `items`
+array instead of a URL. By default, the dropdown items will align to the left of the
+parent item. This can be changed by adding `alignRight` to the subnav
+object.
+ */
+export var Dropdown = {
+  name: "Dropdown",
+  args: {
+    items: [{
+      items: [{
+        label: "Introduction",
+        url: "#"
+      }, {
+        label: "News",
+        url: "#"
+      }, {
+        label: "Getting started - Command line",
+        url: "#"
+      }, {
+        label: "Getting started - OpenStack",
+        url: "#"
+      }, {
+        label: "Getting started - OpenNebula",
+        url: "#"
+      }],
+      label: "LXD"
+    }, {
+      items: [{
+        label: "Introduction",
+        url: "#"
+      }, {
+        label: "News",
+        url: "#"
+      }, {
+        label: "Getting started",
+        url: "#"
+      }],
+      label: "LXCFS"
+    }],
+    itemsRight: [{
+      alignRight: true,
+      items: [{
+        label: "Sign out",
+        url: "#"
+      }],
+      label: "My account"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "LXD",
+      url: "#"
+    }
+  }
+};
+
+/**
+ * Expanding search can be enabled by providing props to the underlying [`SearchBox`](/?path=/docs/searchbox--default-story)
+component. Elements to toggle the Searchbox will be included automatically if
+the SearchBox props are provided.
+ */
+export var Search = {
+  name: "Search",
+  args: {
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    },
+    searchProps: {
+      onSearch: () => null
+    }
+  }
+};
+
+/**
+ * Logos can be displayed using the new tag design. In cases where another logo
+style is required then an element can be provided to the `logo` prop.
+ */
+export var OverridingTheLogo = {
+  name: "Overriding the logo",
+  args: {
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: /*#__PURE__*/React.createElement("img", {
+      alt: "",
+      src: "https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",
+      width: "100"
+    })
+  }
+};
+
+/**
+ * In some cases such as when using [React Router](https://reactrouter.com/) it is
+necessary to use custom components for links. When this is required then a
+function can be passed to `generateLink` which should return your component.
+Bear in mind that some props like classes and on-click events might be passed to
+this function so take care in overriding any link props.
+ */
+export var OverridingTheLinkComponent = {
+  name: "Overriding the link component",
+  args: {
+    generateLink: _ref => {
+      var {
+        label,
+        className
+      } = _ref;
+      return /*#__PURE__*/React.createElement("button", {
+        className: className
+      }, label);
+    },
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    }
+  }
+};
+export var NoMenuItems = {
+  name: "No menu items",
+  args: {
+    generateLink: _ref2 => {
+      var {
+        label,
+        className
+      } = _ref2;
+      return /*#__PURE__*/React.createElement("button", {
+        className: className
+      }, label);
+    },
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    }
+  }
+};

package/dist/esm/components/Navigation/Navigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Navigation/NavigationLink/NavigationLink.d.ts

@@ -0,0 +1,10 @@
+import type { GenerateLink, NavLink } from "../types";
+type Props = {
+    generateLink?: GenerateLink;
+    link: NavLink;
+};
+/**
+ * This component is used internally to display links inside the Navigation component.
+ */
+declare const NavigationLink: ({ generateLink, link }: Props) => JSX.Element | null;
+export default NavigationLink;

package/dist/esm/components/Navigation/NavigationLink/NavigationLink.js

@@ -0,0 +1,58 @@
+import _pt from "prop-types";
+var _excluded = ["isSelected"],
+  _excluded2 = ["isSelected", "label", "url"],
+  _excluded3 = ["isSelected", "label", "url"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { isNavigationAnchor, isNavigationButton } from "../../../utils";
+/**
+ * This component is used internally to display links inside the Navigation component.
+ */
+var NavigationLink = _ref => {
+  var {
+    generateLink,
+    link
+  } = _ref;
+  // const ariaCurrent = isSelected ? "page" : undefined;
+  if (generateLink) {
+    var {
+        isSelected
+      } = link,
+      linkProps = _objectWithoutProperties(link, _excluded);
+    // If a function has been provided then use it to generate the link element.
+    return /*#__PURE__*/React.createElement(React.Fragment, null, generateLink(_objectSpread({
+      isSelected,
+      "aria-current": isSelected ? "page" : undefined
+    }, linkProps)));
+  } else if (isNavigationAnchor(link)) {
+    var {
+        isSelected: _isSelected,
+        label,
+        url
+      } = link,
+      linkProps = _objectWithoutProperties(link, _excluded2);
+    return /*#__PURE__*/React.createElement("a", _extends({}, linkProps, {
+      href: url,
+      "aria-current": _isSelected ? "page" : undefined
+    }), label);
+  } else if (isNavigationButton(link)) {
+    var {
+        isSelected: _isSelected2,
+        label: _label,
+        url: _url
+      } = link,
+      linkProps = _objectWithoutProperties(link, _excluded3);
+    return /*#__PURE__*/React.createElement("button", _extends({}, linkProps, {
+      "aria-current": _isSelected2 ? "page" : undefined
+    }), _label);
+  }
+  return null;
+};
+export default NavigationLink;

package/dist/esm/components/Navigation/NavigationLink/NavigationLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Navigation/NavigationLink/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./NavigationLink";

package/dist/esm/components/Navigation/NavigationLink/index.js

@@ -0,0 +1 @@
+export { default } from "./NavigationLink";

package/dist/esm/components/Navigation/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLProps } from "react";
+import type { GenerateLink, NavMenu } from "../types";
+import { PropsWithSpread } from "../../../types";
+type Props = PropsWithSpread<NavMenu & {
+    generateLink?: GenerateLink;
+}, HTMLProps<HTMLLIElement>>;
+/**
+ * This component is used internally to display menus inside the Navigation component.
+ */
+declare const NavigationMenu: ({ alignRight, generateLink, items, label, ...props }: Props) => JSX.Element;
+export default NavigationMenu;

package/dist/esm/components/Navigation/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,57 @@
+var _excluded = ["alignRight", "generateLink", "items", "label"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useCallback, useId, useRef, useState } from "react";
+import classNames from "classnames";
+import NavigationLink from "../NavigationLink";
+import { useOnClickOutside } from "../../../hooks";
+/**
+ * This component is used internally to display menus inside the Navigation component.
+ */
+var NavigationMenu = _ref => {
+  var {
+      alignRight,
+      generateLink,
+      items,
+      label
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var [isOpen, setIsOpen] = useState(false);
+  var closeMenu = useCallback(() => setIsOpen(false), [setIsOpen]);
+  var menuRef = useRef(null);
+  useOnClickOutside(menuRef, closeMenu);
+  var menuId = useId();
+  return /*#__PURE__*/React.createElement("li", _extends({}, props, {
+    className: classNames(props.className, "p-navigation__item--dropdown-toggle", {
+      "is-active": isOpen
+    }),
+    ref: menuRef
+  }), /*#__PURE__*/React.createElement("button", {
+    "aria-controls": menuId,
+    className: "p-navigation__link u-no-margin--right",
+    onClick: evt => {
+      evt.preventDefault();
+      setIsOpen(!isOpen);
+    }
+  }, label), /*#__PURE__*/React.createElement("ul", {
+    "aria-hidden": !isOpen,
+    className: classNames("p-navigation__dropdown", {
+      "p-navigation__dropdown--right": alignRight
+    }),
+    id: menuId
+  }, items.map((item, i) => /*#__PURE__*/React.createElement("li", {
+    key: i
+  }, /*#__PURE__*/React.createElement(NavigationLink, {
+    generateLink: generateLink,
+    link: _objectSpread(_objectSpread({}, item), {}, {
+      className: classNames("p-navigation__dropdown-item", item.className)
+    })
+  })))));
+};
+export default NavigationMenu;

package/dist/esm/components/Navigation/NavigationMenu/NavigationMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Navigation/NavigationMenu/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./NavigationMenu";

package/dist/esm/components/Navigation/NavigationMenu/index.js

@@ -0,0 +1 @@
+export { default } from "./NavigationMenu";

package/dist/esm/components/Navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Navigation";
+export type { Props as NavigationProps } from "./Navigation";
+export type { GenerateLink, LogoProps, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, NavMenu, NavItem, } from "./types";

package/dist/esm/components/Navigation/index.js

@@ -0,0 +1 @@
+export { default } from "./Navigation";