@entur/menu 5.0.0-alpha.0 → 5.0.1

package/dist/menu.esm.js

@@ -1,13 +1,14 @@
-import { useRandomId, warnAboutMissingStyles } from '@entur/utils';
-import React, { useState, useEffect, cloneElement } from 'react';
+import { useOnClickOutside, useOnEscape, getNodeText, useRandomId, warnAboutMissingStyles } from '@entur/utils';
+import React, { useState, useEffect, useRef, cloneElement, useContext } from 'react';
 import classNames from 'classnames';
-import { RightArrowIcon, MenuIcon, LeftArrowIcon, VerticalDotsIcon, UpArrowIcon, DownArrowIcon } from '@entur/icons';
-import { ExpandArrow, BaseExpand } from '@entur/expand';
-import { Menu, MenuButton, MenuList, MenuItem, MenuLink } from '@reach/menu-button';
+import { RightArrowIcon, MenuIcon, LeftArrowIcon, VerticalDotsIcon, DownArrowIcon } from '@entur/icons';
+import { useFloating, autoUpdate, offset, flip, shift, useListNavigation, useTypeahead, useRole, useInteractions, FloatingList, useListItem } from '@floating-ui/react';
+import { IconButton } from '@entur/button';
+import { standardisePlacement } from '@entur/tooltip';
+import { space } from '@entur/tokens';
 import { VisuallyHidden } from '@entur/a11y';
-import { useContrast, Contrast } from '@entur/layout';
 import { Label } from '@entur/typography';
-import { IconButton } from '@entur/button';
+import { ExpandArrow, BaseExpand } from '@entur/expand';
 
 var BreadcrumbNavigation = function BreadcrumbNavigation(_ref) {
   var _ref$ariaLabel = _ref['aria-label'],
@@ -74,25 +75,6 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
   }));
 };
 
-var _excluded$7 = ["className", "children", "size"];
-var SideNavigation = function SideNavigation(_ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  if (!children || !React.Children.count(children)) {
-    return null;
-  }
-  return React.createElement("ul", _extends({
-    className: classNames('eds-side-navigation', {
-      'eds-side-navigation--small': size === 'small'
-    }, className)
-  }, rest), children);
-};
-/** This is required to check that the Menu */
-SideNavigation.__IS_ENTUR_MENU__ = true;
-
 function useControllableProp(_ref) {
   var prop = _ref.prop,
     _ref$updater = _ref.updater,
@@ -111,7 +93,7 @@ function useControllableProp(_ref) {
   return prop === undefined ? [internalState, setInternalState] : [prop, updater];
 }
 
-var _excluded$6 = ["className", "children", "size", "collapsed", "onCollapseToggle", "collapsibleButtonPosition", "openSideMenuAriaLabel", "closeSideMenuAriaLabel"];
+var _excluded$7 = ["className", "children", "size", "collapsed", "onCollapseToggle", "collapsibleButtonPosition", "openSideMenuAriaLabel", "closeSideMenuAriaLabel"];
 var CollapsibleSideNavigation = function CollapsibleSideNavigation(_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -124,7 +106,7 @@ var CollapsibleSideNavigation = function CollapsibleSideNavigation(_ref) {
     openSideMenuAriaLabel = _ref$openSideMenuAria === void 0 ? 'Åpne sidemeny' : _ref$openSideMenuAria,
     _ref$closeSideMenuAri = _ref.closeSideMenuAriaLabel,
     closeSideMenuAriaLabel = _ref$closeSideMenuAri === void 0 ? 'Lukk sidemeny' : _ref$closeSideMenuAri,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var _useControllableProp = useControllableProp({
       prop: collapsible,
       defaultValue: false,
@@ -167,180 +149,155 @@ var useSideNavigationContext = function useSideNavigationContext() {
   return context;
 };
 
-var useShowDelayedLabel = function useShowDelayedLabel(isCollapsed) {
-  var _useState = useState(true),
-    showLabel = _useState[0],
-    setShowLabel = _useState[1];
-  var hideDelay = 50;
-  var showDelay = 200;
-  useEffect(function () {
-    if (isCollapsed) {
-      setTimeout(function () {
-        setShowLabel(false);
-      }, hideDelay);
-    }
-    if (!isCollapsed) {
-      setTimeout(function () {
-        setShowLabel(true);
-      }, showDelay);
-    }
-    return function () {
-      return undefined;
-    };
-  }, [isCollapsed]);
-  return [showLabel];
-};
-
-var _excluded$5 = ["className", "active", "subMenu", "icon", "children", "as"],
-  _excluded2$1 = ["children"],
-  _excluded3$1 = ["active", "disabled", "children", "forceExpandSubMenus", "as"];
-function isActiveRecursively(child) {
-  if (!child.props) {
-    return false;
-  }
-  if (child.props.active) {
-    return true;
-  }
-  if (!child.props.children) {
-    return false;
-  }
-  return React.Children.toArray(child.props.children).some(function (child) {
-    return isActiveRecursively(child);
-  });
-}
-var defaultElementBaseItem = 'a';
-var BaseSideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active,
-    subMenu = _ref.subMenu,
-    icon = _ref.icon,
-    children = _ref.children,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  var Element = as || defaultElementBaseItem;
-  var _useSideNavigationCon = useSideNavigationContext(),
-    isCollapsed = _useSideNavigationCon.isCollapsed;
-  var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
-    showLabel = _useShowDelayedLabel[0];
-  return React.createElement("li", {
-    className: classNames('eds-side-navigation__item', className)
-  }, React.createElement(Element, _extends({
-    className: classNames('eds-side-navigation__click-target', {
-      'eds-side-navigation__click-target--active': active
+var _excluded$6 = ["children", "className", "button", "buttonIcon", "placement", "aria-label"],
+  _excluded2$1 = ["children", "className", "onSelect", "href", "disabled"],
+  _excluded3$1 = ["href"];
+var SelectContext = /*#__PURE__*/React.createContext({});
+var OverflowMenu = function OverflowMenu(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    button = _ref.button,
+    buttonIcon = _ref.buttonIcon,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'åpne valgmeny' : _ref$ariaLabel,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var _useState = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = useState(null),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var listRef = useRef([]);
+  var labelsRef = useRef([]);
+  var _useFloating = useFloating({
+      whileElementsMounted: autoUpdate,
+      placement: standardisePlacement(
+      // check for left is added for backwards compatibility
+      rest.position === 'left' ? 'bottom-end' : placement),
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      middleware: [offset(space.extraSmall2), flip(), shift({
+        padding: space.extraSmall
+      })]
     }),
-    "aria-label": icon ? children : undefined,
-    "aria-current": active ? 'page' : undefined,
-    ref: ref
-  }, rest), icon, showLabel && children), subMenu);
-});
-var DisabledSideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-  return React.createElement(BaseSideNavigationItem, _extends({
-    as: "button",
-    disabled: true,
-    "aria-disabled": true,
-    ref: ref
-  }, rest), children);
-});
-var defaultElementItem = 'a';
-var SideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
-  var active = _ref3.active,
-    disabled = _ref3.disabled,
-    children = _ref3.children,
-    forceExpandSubMenus = _ref3.forceExpandSubMenus,
-    as = _ref3.as,
-    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
-  var Element = as || defaultElementItem;
-  var childrenArray = React.Children.toArray(children);
-  var subMenu = childrenArray.find(function (child) {
-    return child && child.type && child.type.__IS_ENTUR_MENU__;
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var listNav = useListNavigation(context, {
+    listRef: listRef,
+    activeIndex: activeIndex,
+    onNavigate: setActiveIndex
   });
-  var label = subMenu ? childrenArray.filter(function (child) {
-    return child !== subMenu;
-  }) : children;
-  if (disabled) {
-    return React.createElement(DisabledSideNavigationItem, _extends({
-      ref: ref
-    }, rest), label);
-  }
-  if (!subMenu) {
-    return React.createElement(BaseSideNavigationItem, _extends({
-      as: Element,
-      active: active,
-      ref: ref
-    }, rest), label);
-  }
-  var isExpanded = forceExpandSubMenus || isActiveRecursively({
-    props: {
-      children: children,
-      active: active
+  var typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    activeIndex: activeIndex,
+    onMatch: function onMatch(index) {
+      return isOpen && setActiveIndex(index);
     }
   });
-  return React.createElement(BaseSideNavigationItem, _extends({
-    active: active,
-    subMenu: isExpanded && subMenu,
-    "aria-expanded": isExpanded,
-    as: Element,
-    ref: ref
-  }, rest), label);
-});
-
-var _excluded$4 = ["defaultOpen", "open", "onToggle", "className", "children", "title", "icon"];
-var SideNavigationGroup = function SideNavigationGroup(_ref) {
-  var _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-    open = _ref.open,
-    onToggle = _ref.onToggle,
-    className = _ref.className,
-    children = _ref.children,
-    title = _ref.title,
-    icon = _ref.icon,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var _useControllableProp = useControllableProp({
-      prop: open,
-      updater: onToggle,
-      defaultValue: defaultOpen
-    }),
-    isOpen = _useControllableProp[0],
-    setOpen = _useControllableProp[1];
-  var _useSideNavigationCon = useSideNavigationContext(),
-    isCollapsed = _useSideNavigationCon.isCollapsed;
-  var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
-    showLabel = _useShowDelayedLabel[0];
-  return React.createElement("div", _extends({
-    className: classNames('eds-side-navigation-group', className)
-  }, rest), React.createElement("button", {
+  var role = useRole(context, {
+    role: 'menu'
+  });
+  var _useInteractions = useInteractions([listNav, typeahead, role]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getItemProps = _useInteractions.getItemProps;
+  var closeMenuAndReturnFocus = function closeMenuAndReturnFocus() {
+    var _refs$reference$curre;
+    setIsOpen(false);
+    // @ts-expect-error the reference element is actually focusable
+    (_refs$reference$curre = refs.reference.current) == null ? void 0 : _refs$reference$curre.focus == null ? void 0 : _refs$reference$curre.focus();
+  };
+  useOnClickOutside([refs.floating, refs.reference], function () {
+    return setIsOpen(false);
+  });
+  useOnEscape(refs.floating, closeMenuAndReturnFocus);
+  useOnEscape(refs.reference, closeMenuAndReturnFocus);
+  var selectContext = React.useMemo(function () {
+    return {
+      activeIndex: activeIndex,
+      getItemProps: getItemProps,
+      closeMenuAndReturnFocus: closeMenuAndReturnFocus
+    };
+  }, [activeIndex, getItemProps, closeMenuAndReturnFocus]);
+  var _buttonIcon = buttonIcon != null ? buttonIcon : React.createElement(VerticalDotsIcon, null);
+  return React.createElement(React.Fragment, null, !button ? React.createElement(IconButton, _extends({
+    ref: refs.setReference
+  }, getReferenceProps({
     onClick: function onClick() {
-      return setOpen(!isOpen);
+      return setIsOpen(!isOpen);
     },
-    type: "button",
-    className: "eds-side-navigation-group__trigger",
-    "aria-label": title + ", utvidbar meny, " + (isOpen ? 'åpen' : 'lukket')
-  }, React.createElement("span", null, icon && React.createElement("span", {
-    className: "eds-side-navigation-group__trigger-icon"
-  }, icon), showLabel && title), showLabel && React.createElement(ExpandArrow, {
-    open: isOpen,
-    className: "eds-side-navigation-group__expand-icon"
-  })), React.createElement(BaseExpand, {
-    open: isOpen
-  }, children));
+    className: className,
+    'aria-label': ariaLabel
+  }), rest), _buttonIcon) : cloneElement(button, _extends({
+    ref: refs.setReference
+  }, getReferenceProps({
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    },
+    className: className,
+    'aria-label': ariaLabel
+  }), rest)), React.createElement(SelectContext.Provider, {
+    value: selectContext
+  }, React.createElement("div", _extends({
+    ref: refs.setFloating,
+    style: _extends({}, floatingStyles, {
+      display: isOpen ? 'initial' : 'none'
+    })
+  }, getFloatingProps({
+    className: 'eds-overflow-menu__menu-list'
+  })), React.createElement(FloatingList, {
+    elementsRef: listRef,
+    labelsRef: labelsRef
+  }, children))));
 };
-
-var _excluded$3 = ["active", "className", "as"];
-var defaultElement = 'a';
-var TopNavigationItem = function TopNavigationItem(_ref) {
-  var _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active,
-    className = _ref.className,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var Element = as || defaultElement;
+var OverflowMenuItem = function OverflowMenuItem(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    _ref2$onSelect = _ref2.onSelect,
+    onSelect = _ref2$onSelect === void 0 ? function () {
+      return undefined;
+    } : _ref2$onSelect,
+    href = _ref2.href,
+    disabled = _ref2.disabled,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+  var _useContext = useContext(SelectContext),
+    activeIndex = _useContext.activeIndex,
+    getItemProps = _useContext.getItemProps,
+    closeMenuAndReturnFocus = _useContext.closeMenuAndReturnFocus;
+  var _useListItem = useListItem({
+      label: !disabled ? getNodeText(children) : null
+    }),
+    listItemRef = _useListItem.ref,
+    index = _useListItem.index;
+  var isHighlighted = activeIndex === index;
+  var isLink = href !== undefined;
+  var Element = isLink ? 'a' : 'button';
   return React.createElement(Element, _extends({
-    className: classNames(['eds-top-navigation-item', className, {
-      'eds-top-navigation-item--active': active
-    }])
+    ref: listItemRef,
+    className: classNames('eds-overflow-menu__item', {
+      'eds-overflow-menu__item--disabled': disabled,
+      'eds-overflow-menu__item--highlighted': isHighlighted
+    }, className),
+    role: "menuitem",
+    "aria-disabled": disabled,
+    "aria-selected": isHighlighted
+  }, getItemProps({
+    onClick: isLink || disabled ? undefined : function () {
+      onSelect();
+      closeMenuAndReturnFocus();
+    },
+    href: disabled ? undefined : href,
+    tabIndex: isHighlighted ? 0 : -1
+  }), rest), children);
+};
+var OverflowMenuLink = function OverflowMenuLink(_ref3) {
+  var href = _ref3.href,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
+  return React.createElement(OverflowMenuItem, _extends({
+    href: href
   }, rest));
 };
 
@@ -353,10 +310,10 @@ var PaginationPage = function PaginationPage(_ref) {
     ariaLabel = _ref['aria-label'],
     ariaDescribedby = _ref['aria-describedby'];
   return React.createElement("button", {
-    className: classNames('eds-pagination__page', {
-      'eds-pagination__page--selected': selected
+    className: classNames('eds-pagination__controls__page', {
+      'eds-pagination__controls__page--selected': selected
     }, {
-      'eds-pagination__page--disabled': disabled
+      'eds-pagination__controls__page--disabled': disabled
     }, className),
     disabled: selected || disabled,
     type: "button",
@@ -409,83 +366,19 @@ var PaginationInput = function PaginationInput(_ref) {
     noValidate: true,
     "aria-label": "form"
   }, React.createElement("label", {
-    className: "eds-pagination__input-wrapper"
+    className: "eds-pagination__controls__input__wrapper"
   }, React.createElement("span", {
-    className: "eds-pagination__input-label"
+    className: "eds-pagination__controls__input__label"
   }, label), React.createElement("input", {
     type: "number",
     max: pageCount,
-    className: "eds-pagination__input-field",
+    className: "eds-pagination__controls__input__field",
     value: input,
     onChange: handleChange
   })));
 };
 
-var _excluded$2 = ["children", "className", "button", "position"],
-  _excluded2 = ["children", "className", "onSelect", "disabled", "as"],
-  _excluded3 = ["children", "as", "className", "onSelect", "disabled"];
-var OverflowMenu = function OverflowMenu(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    button = _ref.button,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'right' : _ref$position,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return React.createElement("div", null, React.createElement(Menu, null, !button ? React.createElement(IconButton, _extends({
-    as: MenuButton,
-    className: classNames(className, 'eds-overflow-menu__menu-button')
-  }, rest), React.createElement(VerticalDotsIcon, null)) : cloneElement(button, _extends({
-    as: MenuButton,
-    className: classNames(className, 'eds-overflow-menu__menu-button')
-  }, rest)), useContrast() ? React.createElement(Contrast, {
-    className: classNames('eds-overflow-menu__menu-list'),
-    as: MenuList,
-    portal: false
-  }, [children]) : React.createElement(MenuList, {
-    className: classNames('eds-overflow-menu__menu-list', {
-      'eds-overflow-menu__menu-list--left': position === 'left'
-    }),
-    portal: false
-  }, [children])));
-};
-var OverflowMenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    onSelect = _ref2.onSelect,
-    disabled = _ref2.disabled,
-    _ref2$as = _ref2.as,
-    as = _ref2$as === void 0 ? 'div' : _ref2$as,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  return React.createElement(MenuItem, _extends({
-    className: classNames('eds-overflow-menu__item', {
-      'eds-overflow-menu__item--disabled': disabled
-    }, className),
-    onSelect: onSelect,
-    disabled: disabled,
-    ref: ref,
-    as: as
-  }, rest), children);
-});
-var OverflowMenuLink = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-    _ref3$as = _ref3.as,
-    as = _ref3$as === void 0 ? 'a' : _ref3$as,
-    className = _ref3.className,
-    onSelect = _ref3.onSelect,
-    disabled = _ref3.disabled,
-    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  return React.createElement(MenuLink, _extends({
-    as: as,
-    className: classNames('eds-overflow-menu__item', {
-      'eds-overflow-menu__item--disabled': disabled
-    }, className),
-    onSelect: onSelect,
-    disabled: disabled,
-    ref: ref
-  }, rest), children);
-});
-
-var _excluded$1 = ["className", "currentPage", "inputLabel", "onPageChange", "pageCount", "pageLabel", "previousPageLabel", "currentPageLabelForScreenreader", "lastPageLabelForScreenreader", "showInput", "numberOfResults", "resultsPerPage", "resultsPerPageOptions", "onResultsPerPageChange", "showNumberOfResultsLabel", "nextPageLabel", "showingResultsLabel", "hideNextButton", "hidePrevButton"];
+var _excluded$5 = ["className", "currentPage", "inputLabel", "onPageChange", "pageCount", "pageLabel", "previousPageLabel", "currentPageLabelForScreenreader", "lastPageLabelForScreenreader", "showInput", "numberOfResults", "resultsPerPage", "resultsPerPageOptions", "onResultsPerPageChange", "showNumberOfResultsLabel", "nextPageLabel", "showingResultsLabel", "changeNumberOfResultsLabelForScreenreader", "hideNextButton", "hidePrevButton"];
 var Pagination = function Pagination(_ref) {
   var className = _ref.className,
     currentPage = _ref.currentPage,
@@ -516,12 +409,13 @@ var Pagination = function Pagination(_ref) {
     showingResultsLabel = _ref$showingResultsLa === void 0 ? function (minPage, maxPage, pageCount) {
       return "Viser resultat " + minPage + "\u2013" + maxPage + " av " + pageCount;
     } : _ref$showingResultsLa,
+    _ref$changeNumberOfRe = _ref.changeNumberOfResultsLabelForScreenreader,
+    changeNumberOfResultsLabelForScreenreader = _ref$changeNumberOfRe === void 0 ? "Viser " + resultsPerPage + " resultater. Trykk for \xE5 endre antall. \xC5pner en flervalgsmeny." : _ref$changeNumberOfRe,
     _ref$hideNextButton = _ref.hideNextButton,
     hideNextButton = _ref$hideNextButton === void 0 ? false : _ref$hideNextButton,
     _ref$hidePrevButton = _ref.hidePrevButton,
     hidePrevButton = _ref$hidePrevButton === void 0 ? false : _ref$hidePrevButton,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var isContrast = useContrast();
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _useState = useState([]),
     listedEntries = _useState[0],
     setListedEntries = _useState[1];
@@ -554,30 +448,26 @@ var Pagination = function Pagination(_ref) {
     "aria-label": "Paginering"
   }, rest), resultsPerPage && numberOfResults && React.createElement("div", {
     className: "eds-pagination__results"
-  }, onResultsPerPageChange && React.createElement(Menu, null, function (_ref2) {
-    var isOpen = _ref2.isOpen;
-    return React.createElement(React.Fragment, null, React.createElement(Label, {
-      as: "p",
-      "aria-hidden": "true"
-    }, showNumberOfResultsLabel), React.createElement(MenuButton, {
-      className: classNames('eds-pagination-menu__menu-button', {
-        'eds-pagination-menu__menu-button--open': isOpen
-      })
-    }, React.createElement(VisuallyHidden, null, showNumberOfResultsLabel, " "), resultsPerPage, isOpen ? React.createElement(UpArrowIcon, null) : React.createElement(DownArrowIcon, null)), React.createElement(MenuList, {
-      className: classNames('eds-pagination-menu__menu-list', 'eds-overflow-menu__menu-list', {
-        'eds-contrast': isContrast
-      })
-    }, resultsPerPageOptions.map(function (option, key) {
-      return React.createElement(OverflowMenuItem, {
-        key: key,
-        onSelect: function onSelect() {
-          return onResultsPerPageChange(option);
-        }
-      }, option);
-    })));
-  }), React.createElement(Label, {
+  }, onResultsPerPageChange && React.createElement(React.Fragment, null, React.createElement(Label, {
     as: "p",
-    className: "eds-pagination__results-label"
+    "aria-hidden": "true"
+  }, showNumberOfResultsLabel), React.createElement(OverflowMenu, {
+    className: "eds-pagination__results__change-number-of-results",
+    buttonIcon: React.createElement(React.Fragment, null, resultsPerPage, ' ', React.createElement(DownArrowIcon, {
+      className: "eds-pagination__results__change-number-of-results__arrow",
+      "aria-hidden": "true"
+    })),
+    "aria-label": changeNumberOfResultsLabelForScreenreader,
+    placement: "bottom-end"
+  }, resultsPerPageOptions.map(function (option, key) {
+    return React.createElement(OverflowMenuItem, {
+      key: key,
+      onSelect: function onSelect() {
+        return onResultsPerPageChange(option);
+      }
+    }, option);
+  }))), React.createElement(Label, {
+    as: "p"
   }, showingResultsLabel((currentPage - 1) * resultsPerPage + 1, currentPage * resultsPerPage > numberOfResults ? numberOfResults : currentPage * resultsPerPage, numberOfResults))), React.createElement("div", {
     className: "eds-pagination__controls"
   }, !hidePrevButton && React.createElement(PaginationPage, {
@@ -587,7 +477,9 @@ var Pagination = function Pagination(_ref) {
     "aria-label": previousPageLabel,
     "aria-describedby": paginationId,
     disabled: isFirstPostSelected
-  }, React.createElement(LeftArrowIcon, null)), listedEntries.map(function (entry, index) {
+  }, React.createElement(LeftArrowIcon, {
+    "aria-hidden": "true"
+  })), listedEntries.map(function (entry, index) {
     return entry === '…' ? React.createElement(Ellipsis, {
       key: "ellipsis-" + index
     }) : React.createElement(PaginationPage, {
@@ -606,7 +498,9 @@ var Pagination = function Pagination(_ref) {
     "aria-label": nextPageLabel,
     "aria-describedby": paginationId,
     disabled: isLastPostSelected
-  }, React.createElement(RightArrowIcon, null)), showInput && React.createElement(PaginationInput, {
+  }, React.createElement(RightArrowIcon, {
+    "aria-hidden": "true"
+  })), showInput && React.createElement(PaginationInput, {
     pageCount: pageCount,
     currentPage: currentPage,
     onPageChange: onPageChange,
@@ -617,12 +511,194 @@ var Pagination = function Pagination(_ref) {
 };
 var Ellipsis = function Ellipsis() {
   return React.createElement("span", {
-    className: "eds-pagination__ellipsis",
+    className: "eds-pagination__controls__page__ellipsis",
     "aria-hidden": "true"
   }, "\u2026");
 };
 
-var _excluded = ["activeIndex", "className", "interactive", "onStepClick", "showStepperIndex", "steps", "ariaLabelStep", "ariaLabelOf", "ariaLabelCompleted", "ariaLabelSummary"];
+var _excluded$4 = ["className", "children", "size"];
+var SideNavigation = function SideNavigation(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  if (!children || !React.Children.count(children)) {
+    return null;
+  }
+  return React.createElement("ul", _extends({
+    className: classNames('eds-side-navigation', {
+      'eds-side-navigation--small': size === 'small'
+    }, className)
+  }, rest), children);
+};
+/** This is required to check that the Menu */
+SideNavigation.__IS_ENTUR_MENU__ = true;
+
+var useShowDelayedLabel = function useShowDelayedLabel(isCollapsed) {
+  var _useState = useState(true),
+    showLabel = _useState[0],
+    setShowLabel = _useState[1];
+  var hideDelay = 50;
+  var showDelay = 200;
+  useEffect(function () {
+    if (isCollapsed) {
+      setTimeout(function () {
+        setShowLabel(false);
+      }, hideDelay);
+    }
+    if (!isCollapsed) {
+      setTimeout(function () {
+        setShowLabel(true);
+      }, showDelay);
+    }
+    return function () {
+      return undefined;
+    };
+  }, [isCollapsed]);
+  return [showLabel];
+};
+
+var _excluded$3 = ["className", "active", "subMenu", "icon", "children", "as"],
+  _excluded2 = ["children"],
+  _excluded3 = ["active", "disabled", "children", "forceExpandSubMenus", "as"];
+function isActiveRecursively(child) {
+  if (!child.props) {
+    return false;
+  }
+  if (child.props.active) {
+    return true;
+  }
+  if (!child.props.children) {
+    return false;
+  }
+  return React.Children.toArray(child.props.children).some(function (child) {
+    return isActiveRecursively(child);
+  });
+}
+var defaultElementBaseItem = 'a';
+var BaseSideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    subMenu = _ref.subMenu,
+    icon = _ref.icon,
+    children = _ref.children,
+    as = _ref.as,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  var Element = as || defaultElementBaseItem;
+  var _useSideNavigationCon = useSideNavigationContext(),
+    isCollapsed = _useSideNavigationCon.isCollapsed;
+  var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
+    showLabel = _useShowDelayedLabel[0];
+  return React.createElement("li", {
+    className: classNames('eds-side-navigation__item', className)
+  }, React.createElement(Element, _extends({
+    className: classNames('eds-side-navigation__click-target', {
+      'eds-side-navigation__click-target--active': active
+    }),
+    "aria-label": isCollapsed ? children : undefined,
+    "aria-current": active ? 'page' : undefined,
+    ref: ref
+  }, rest), icon, showLabel && children), subMenu);
+});
+var DisabledSideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return React.createElement(BaseSideNavigationItem, _extends({
+    as: "button",
+    disabled: true,
+    "aria-disabled": true,
+    ref: ref,
+    type: "button"
+  }, rest), children);
+});
+var defaultElementItem = 'a';
+var SideNavigationItem = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var active = _ref3.active,
+    disabled = _ref3.disabled,
+    children = _ref3.children,
+    forceExpandSubMenus = _ref3.forceExpandSubMenus,
+    as = _ref3.as,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  var Element = as || defaultElementItem;
+  var childrenArray = React.Children.toArray(children);
+  var subMenu = childrenArray.find(function (child) {
+    return child && child.type && child.type.__IS_ENTUR_MENU__;
+  });
+  var label = subMenu ? childrenArray.filter(function (child) {
+    return child !== subMenu;
+  }) : children;
+  if (disabled) {
+    return React.createElement(DisabledSideNavigationItem, _extends({
+      ref: ref
+    }, rest), label);
+  }
+  if (!subMenu) {
+    return React.createElement(BaseSideNavigationItem, _extends({
+      as: Element,
+      active: active,
+      ref: ref
+    }, rest), label);
+  }
+  var isExpanded = forceExpandSubMenus || isActiveRecursively({
+    props: {
+      children: children,
+      active: active
+    }
+  });
+  return React.createElement(BaseSideNavigationItem, _extends({
+    active: active,
+    subMenu: isExpanded && subMenu,
+    "aria-expanded": isExpanded,
+    as: Element,
+    ref: ref
+  }, rest), label);
+});
+
+var _excluded$2 = ["defaultOpen", "open", "onToggle", "className", "children", "title", "icon"];
+var SideNavigationGroup = function SideNavigationGroup(_ref) {
+  var _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    open = _ref.open,
+    onToggle = _ref.onToggle,
+    className = _ref.className,
+    children = _ref.children,
+    title = _ref.title,
+    icon = _ref.icon,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var _useControllableProp = useControllableProp({
+      prop: open,
+      updater: onToggle,
+      defaultValue: defaultOpen
+    }),
+    isOpen = _useControllableProp[0],
+    setOpen = _useControllableProp[1];
+  var _useSideNavigationCon = useSideNavigationContext(),
+    isCollapsed = _useSideNavigationCon.isCollapsed;
+  var _useShowDelayedLabel = useShowDelayedLabel(isCollapsed),
+    showLabel = _useShowDelayedLabel[0];
+  return React.createElement("div", _extends({
+    className: classNames('eds-side-navigation-group', className)
+  }, rest), React.createElement("button", {
+    onClick: function onClick() {
+      return setOpen(!isOpen);
+    },
+    type: "button",
+    className: "eds-side-navigation-group__trigger",
+    "aria-label": title + ", utvidbar meny, " + (isOpen ? 'åpen' : 'lukket')
+  }, React.createElement("span", null, icon && React.createElement("span", {
+    className: "eds-side-navigation-group__trigger-icon"
+  }, icon), showLabel && title), showLabel && React.createElement(ExpandArrow, {
+    open: isOpen,
+    className: "eds-side-navigation-group__expand-icon"
+  })), React.createElement(BaseExpand, {
+    className: "eds-side-navigation-group__expand-content",
+    open: isOpen
+  }, children));
+};
+
+var _excluded$1 = ["activeIndex", "className", "interactive", "onStepClick", "showStepperIndex", "steps", "ariaLabelStep", "ariaLabelOf", "ariaLabelCompleted", "ariaLabelSummary"];
 var Stepper = function Stepper(_ref) {
   var activeIndex = _ref.activeIndex,
     className = _ref.className,
@@ -640,7 +716,7 @@ var Stepper = function Stepper(_ref) {
     ariaLabelCompleted = _ref$ariaLabelComplet === void 0 ? 'fullført' : _ref$ariaLabelComplet,
     _ref$ariaLabelSummary = _ref.ariaLabelSummary,
     ariaLabelSummary = _ref$ariaLabelSummary === void 0 ? "Stegindikator med " + steps.length + " steg, du er p\xE5 steg " + (activeIndex + 1) + " " + steps[activeIndex] + "," : _ref$ariaLabelSummary,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return React.createElement("ol", _extends({
     className: classNames('eds-stepper', className),
     "aria-label": ariaLabelSummary
@@ -656,7 +732,8 @@ var Stepper = function Stepper(_ref) {
       }
     } : {};
     return React.createElement("li", {
-      key: step
+      key: step,
+      className: "eds-stepper__step__wrapper"
     }, React.createElement(Element, _extends({
       className: classNames('eds-stepper__step', {
         'eds-stepper__step--active': isCurrent
@@ -665,7 +742,8 @@ var Stepper = function Stepper(_ref) {
       }, {
         'eds-stepper__step--interactive': isInteractive
       }),
-      "aria-current": isCurrent ? 'step' : undefined
+      "aria-current": isCurrent ? 'step' : undefined,
+      type: Element === 'button' ? 'button' : undefined
     }, props), React.createElement("div", {
       className: "eds-stepper__step__line",
       "aria-hidden": true
@@ -676,6 +754,22 @@ var Stepper = function Stepper(_ref) {
   }));
 };
 
+var _excluded = ["active", "className", "as"];
+var defaultElement = 'a';
+var TopNavigationItem = function TopNavigationItem(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    className = _ref.className,
+    as = _ref.as,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var Element = as || defaultElement;
+  return React.createElement(Element, _extends({
+    className: classNames(['eds-top-navigation-item', className, {
+      'eds-top-navigation-item--active': active
+    }])
+  }, rest));
+};
+
 warnAboutMissingStyles('menu', 'expand', 'icons', 'typography', 'button', 'layout', 'a11y');
 
 export { BreadcrumbItem, BreadcrumbNavigation, CollapsibleSideNavigation, OverflowMenu, OverflowMenuItem, OverflowMenuLink, Pagination, SideNavigation, SideNavigationGroup, SideNavigationItem, Stepper, TopNavigationItem, useSideNavigationContext };