@canonical/react-components 1.3.0 → 1.3.1

package/dist-esm/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,308 @@
+import _pt from "prop-types";
+var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "sortFn", "groupFn"];
+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 React, { useEffect, useId, useMemo, useRef, useState } from "react";
+import "./MultiSelect.scss";
+import { Button, CheckboxInput, ContextualMenu, SearchBox } from "../../index";
+import { FadeInDown } from "./FadeInDown";
+var sortAlphabetically = (a, b) => {
+  return a.label.localeCompare(b.label, "en", {
+    numeric: true
+  });
+};
+var createSortSelectedItems = previouslySelectedItemValues => (a, b) => {
+  if (previouslySelectedItemValues) {
+    var aIsPreviouslySelected = previouslySelectedItemValues.has(a.value);
+    var bIsPreviouslySelected = previouslySelectedItemValues.has(b.value);
+    if (aIsPreviouslySelected && !bIsPreviouslySelected) return -1;
+    if (!aIsPreviouslySelected && bIsPreviouslySelected) return 1;
+  }
+  return 0;
+};
+var getGroupedItems = items => {
+  var groups = new Map();
+  items.forEach(item => {
+    var group = item.group || "Ungrouped";
+    var groupItems = groups.get(group) || [];
+    groupItems.push(item);
+    groups.set(group, groupItems);
+  });
+  return Array.from(groups, _ref => {
+    var [group, items] = _ref;
+    return {
+      group,
+      items
+    };
+  });
+};
+export var MultiSelectDropdown = _ref2 => {
+  var {
+      items,
+      selectedItems,
+      disabledItems,
+      header,
+      updateItems,
+      onSelectItem,
+      onDeselectItem,
+      isOpen,
+      footer,
+      sortFn = sortAlphabetically,
+      groupFn = getGroupedItems
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var selectedItemValues = useMemo(() => new Set(selectedItems.map(item => item.value)), [selectedItems]);
+  var disabledItemValues = useMemo(() => new Set(disabledItems.map(item => item.value)), [disabledItems]);
+  var [previouslySelectedItemValues, setPreviouslySelectedItemValues] = useState(new Set(selectedItemValues));
+  useEffect(() => {
+    if (isOpen) {
+      setPreviouslySelectedItemValues(new Set(selectedItemValues));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+  var hasGroup = useMemo(() => items.some(item => item.group), [items]);
+  var groupedItems = useMemo(() => hasGroup ? groupFn(items) : [{
+    group: "Ungrouped",
+    items
+  }],
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [items, groupFn]);
+  var handleOnChange = event => {
+    var {
+      checked,
+      value
+    } = event.target;
+    var foundItem = items.find(item => "".concat(item.value) === value);
+    if (foundItem) {
+      var _selectedItems$filter;
+      var newSelectedItems = checked ? [...selectedItems, foundItem] : (_selectedItems$filter = selectedItems.filter(item => "".concat(item.value) !== value)) !== null && _selectedItems$filter !== void 0 ? _selectedItems$filter : [];
+      updateItems(newSelectedItems);
+      if (checked) {
+        onSelectItem === null || onSelectItem === void 0 || onSelectItem(foundItem);
+      } else {
+        onDeselectItem === null || onDeselectItem === void 0 || onDeselectItem(foundItem);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(FadeInDown, {
+    isVisible: isOpen
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: "multi-select__dropdown",
+    role: "listbox"
+  }, props), header ? header : null, groupedItems.map(_ref3 => {
+    var {
+      group,
+      items
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "multi-select__group",
+      key: group
+    }, hasGroup ? /*#__PURE__*/React.createElement("h5", {
+      className: "multi-select__dropdown-header"
+    }, group) : null, /*#__PURE__*/React.createElement("ul", {
+      className: "multi-select__dropdown-list",
+      "aria-label": group
+    }, items.sort(sortFn).sort(createSortSelectedItems(previouslySelectedItemValues)).map(item => /*#__PURE__*/React.createElement("li", {
+      key: item.value,
+      className: "multi-select__dropdown-item"
+    }, /*#__PURE__*/React.createElement(CheckboxInput, {
+      disabled: disabledItemValues.has(item.value),
+      label: item.label,
+      checked: selectedItemValues.has(item.value),
+      value: item.value,
+      onChange: handleOnChange,
+      key: item.value
+    })))));
+  }), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "multi-select__footer"
+  }, footer) : null));
+};
+
+/**
+ * Component allowing to select multiple items from a list of options.
+ *
+ * `MultiSelectDropdown` displays the dropdown with options which are grouped and sorted alphabetically.
+ * `SearchBox` or `Button` is used to trigger the dropdown depending on the variant.
+ */
+MultiSelectDropdown.propTypes = {
+  isOpen: _pt.bool.isRequired,
+  items: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })).isRequired,
+  selectedItems: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })).isRequired,
+  disabledItems: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })).isRequired,
+  header: _pt.node,
+  updateItems: _pt.func.isRequired,
+  onDeselectItem: _pt.func,
+  onSelectItem: _pt.func,
+  footer: _pt.node,
+  groupFn: _pt.func,
+  sortFn: _pt.any
+};
+export var MultiSelect = _ref4 => {
+  var {
+    disabled,
+    selectedItems: externalSelectedItems = [],
+    label,
+    listSelected = true,
+    onItemsUpdate,
+    onSelectItem,
+    onDeselectItem,
+    placeholder,
+    required = false,
+    items = [],
+    disabledItems = [],
+    dropdownHeader,
+    dropdownFooter,
+    showDropdownFooter = true,
+    variant = "search"
+  } = _ref4;
+  var buttonRef = useRef();
+  var [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  var [filter, setFilter] = useState("");
+  var [internalSelectedItems, setInternalSelectedItems] = useState([]);
+  var selectedItems = externalSelectedItems || internalSelectedItems;
+  var updateItems = newItems => {
+    var uniqueItems = Array.from(new Set(newItems));
+    setInternalSelectedItems(uniqueItems);
+    onItemsUpdate && onItemsUpdate(uniqueItems);
+  };
+  var dropdownId = useId();
+  var inputId = useId();
+  var selectedItemsLabel = selectedItems.filter(selectedItem => items.some(item => item.value === selectedItem.value)).map(el => el.label).join(", ");
+  var footer = null;
+  if (showDropdownFooter) {
+    footer = dropdownFooter ? dropdownFooter : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      appearance: "link",
+      onClick: () => {
+        var enabledItems = items.filter(item => !disabledItems.some(disabledItem => disabledItem.value === item.value));
+        updateItems([...selectedItems, ...enabledItems]);
+      },
+      type: "button"
+    }, "Select all"), /*#__PURE__*/React.createElement(Button, {
+      appearance: "link",
+      onClick: () => {
+        var disabledSelectedItems = selectedItems.filter(item => disabledItems.some(disabledItem => disabledItem.value === item.value));
+        updateItems(disabledSelectedItems);
+      },
+      type: "button"
+    }, "Clear"));
+  }
+  return /*#__PURE__*/React.createElement(ContextualMenu, {
+    className: "multi-select",
+    onToggleMenu: isOpen => {
+      if (!isOpen) {
+        setFilter("");
+      }
+      // Handle syncing the state when toggling the menu from within the
+      // contextual menu component e.g. when clicking outside.
+      if (isOpen !== isDropdownOpen) {
+        setIsDropdownOpen(isOpen);
+      }
+    },
+    position: "left",
+    constrainPanelWidth: true,
+    toggle: variant === "search" ? /*#__PURE__*/React.createElement(SearchBox, {
+      externallyControlled: true,
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownOpen,
+      id: inputId,
+      role: "combobox",
+      "aria-label": label || placeholder || "Search",
+      disabled: disabled,
+      autoComplete: "off",
+      onChange: value => {
+        setFilter(value);
+        // reopen if dropdown has been closed via ESC
+        setIsDropdownOpen(true);
+      },
+      onFocus: () => setIsDropdownOpen(true),
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
+      required: required,
+      type: "text",
+      value: filter,
+      className: "multi-select__input"
+    }) : /*#__PURE__*/React.createElement("button", {
+      role: "combobox",
+      type: "button",
+      "aria-label": label || placeholder || "Select items",
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownOpen,
+      className: "multi-select__select-button",
+      onClick: () => {
+        setIsDropdownOpen(!isDropdownOpen);
+      },
+      onMouseDown: event => {
+        // If the dropdown is open when this button is clicked the
+        // click-outside event will fire which will close the dropdown, but
+        // then the button click event will fire which will immediately
+        // reopen the dropdown.
+        // To prevent this we can stop the propagation to the click event
+        // while `isDropdownOpen` is still set to `true` (by the time we
+        // get to the `onClick` event `isDropdownOpen` will already be `false`,
+        // hence having to do this on mouse down).
+        if (isDropdownOpen) {
+          event.stopPropagation();
+        }
+      },
+      ref: buttonRef
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "multi-select__condensed-text"
+    }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")),
+    visible: isDropdownOpen
+  }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
+    id: dropdownId,
+    isOpen: isDropdownOpen,
+    items: filter.length > 0 ? items.filter(item => item.label.toLowerCase().includes(filter.toLowerCase())) : items,
+    selectedItems: selectedItems,
+    disabledItems: disabledItems,
+    header: dropdownHeader,
+    updateItems: updateItems,
+    onSelectItem: onSelectItem,
+    onDeselectItem: onDeselectItem,
+    footer: footer
+  }));
+};
+MultiSelect.propTypes = {
+  disabled: _pt.bool,
+  error: _pt.string,
+  selectedItems: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })),
+  help: _pt.string,
+  label: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
+  listSelected: _pt.bool,
+  onDeselectItem: _pt.func,
+  onItemsUpdate: _pt.func,
+  onSelectItem: _pt.func,
+  placeholder: _pt.string,
+  required: _pt.bool,
+  items: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })).isRequired,
+  disabledItems: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })),
+  renderItem: _pt.func,
+  dropdownHeader: _pt.node,
+  dropdownFooter: _pt.node,
+  showDropdownFooter: _pt.bool,
+  variant: _pt.oneOf(["condensed", "search"])
+};

package/dist-esm/components/MultiSelect/index.js

@@ -0,0 +1 @@
+export * from "./MultiSelect";

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/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/index.js

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

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/index.js

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

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

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

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

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