@telus-uds/components-web 1.10.0 → 1.12.0

package/lib/Footnote/Footnote.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _componentsBase = require("@telus-uds/components-base");
 
-var _Close = _interopRequireDefault(require("../../__fixtures__/icons/Close"));
-
 var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
 
 var _utils = require("../utils");
@@ -312,7 +310,8 @@ const Footnote = props => {
     closeButtonMarginRight,
     closeButtonMarginBottom,
     closeButtonWidth,
-    closeButtonIconSize
+    closeButtonIconSize,
+    closeIcon
   } = (0, _componentsBase.useThemeTokens)('Footnote', tokens, variant);
   const footnoteRef = (0, _react.useRef)(null);
   const headerRef = (0, _react.useRef)(null);
@@ -528,7 +527,7 @@ const Footnote = props => {
                 },
                 "aria-label": getCopy('close'),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
-                  icon: _Close.default,
+                  icon: closeIcon,
                   tokens: {
                     size: `${closeButtonIconSize}px`
                   }

package/lib/Footnote/FootnoteLink.js

@@ -28,22 +28,26 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
   componentId: "components-web__sc-17nd7xo-0"
 })(_ref => {
   let {
-    fontSize = 'smaller',
+    fontSize,
     lineHeight,
     paddingLeft,
-    paddingRight
+    paddingRight,
+    ...fontNameAndWeight
   } = _ref;
   return {
     border: 0,
     color: 'inherit',
     cursor: 'pointer',
-    fontSize,
+    // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
+    fontSize: fontSize ? `${fontSize}px` : 'smaller',
     lineHeight,
     margin: 0,
     paddingVertical: 0,
     paddingLeft,
     paddingRight,
-    textDecoration: 'underline'
+    textDecoration: 'underline',
+    // apply font family
+    ...(0, _componentsBase.applyTextStyles)(fontNameAndWeight)
   };
 });
 /**
@@ -67,11 +71,7 @@ const FootnoteLink = _ref2 => {
     variant = {},
     ...rest
   } = _ref2;
-  const {
-    lineHeight,
-    paddingLeft,
-    paddingRight
-  } = (0, _componentsBase.useThemeTokens)('FootnoteLink', tokens, variant);
+  const themeTokens = (0, _componentsBase.useThemeTokens)('FootnoteLink', tokens, variant);
   const numbers = Array.isArray(number) ? number : [number];
   const refs = numbers.map(() => /*#__PURE__*/_react.default.createRef());
 
@@ -103,11 +103,9 @@ const FootnoteLink = _ref2 => {
       "aria-label": getCopy('a11yLabel'),
       ref: refs[index],
       onClick: event => handleOnClick(event, index),
-      fontSize: fontSize,
-      lineHeight: lineHeight,
-      paddingLeft: paddingLeft,
-      paddingRight: paddingRight,
       ...selectProps(rest),
+      ...themeTokens,
+      fontSize: fontSize,
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });

package/lib/List/List.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _default = _componentsBase.ListBase;
+exports.default = _default;

package/lib/List/ListItem.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    title,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.ListItem, {
+    ref: ref,
+    ...rest,
+    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        size: 'h4'
+      },
+      children: title
+    }), children]
+  });
+});
+ListItem.displayName = 'ListItem';
+ListItem.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string
+};
+ListItem.defaultProps = {
+  title: undefined
+};
+var _default = ListItem;
+exports.default = _default;

package/lib/List/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _List = _interopRequireDefault(require("./List"));
+
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_List.default.Item = _ListItem.default;
+var _default = _List.default;
+exports.default = _default;

package/lib/NavigationBar/NavigationBar.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _utils = require("../utils");
+
+var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
+
+var _NavigationSubMenu = _interopRequireDefault(require("./NavigationSubMenu"));
+
+var _collapseItems = _interopRequireDefault(require("./collapseItems"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const Heading = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "NavigationBar__Heading",
+  componentId: "components-web__sc-1vis1gt-0"
+})({
+  alignItems: 'center',
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-start',
+  '> *': {
+    display: 'contents',
+    letterSpacing: 0
+  }
+});
+/**
+ * NavigationBar can be used to allow customers to consistently navigate across
+ * key pages within a specific product line
+ */
+
+
+const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    accessibilityRole = 'navigation',
+    heading,
+    headingLevel = 'h1',
+    items,
+    onChange = () => {},
+    selectedId,
+    LinkRouter,
+    linkRouterProps,
+    ...rest
+  } = _ref;
+  const direction = (0, _componentsBase.useResponsiveProp)({
+    xs: 'column',
+    sm: 'row'
+  });
+  const itemsForViewport = (0, _componentsBase.useResponsiveProp)({
+    xs: (0, _collapseItems.default)(items, selectedId),
+    lg: items
+  });
+  const openOverlayRef = (0, _react.useRef)(null);
+  const [openSubMenuId, setOpenSubMenuId] = (0, _react.useState)(null);
+
+  const handleSubMenuClose = event => {
+    var _openOverlayRef$curre, _openOverlayRef$curre2;
+
+    if (event.type === 'keydown') {
+      if (event.key === 'Escape' || event.key === 27) {
+        setOpenSubMenuId(null);
+      }
+    } else if (event.type === 'click' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target))) {
+      setOpenSubMenuId(null);
+    } else if (event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
+      setOpenSubMenuId(null);
+    }
+  }; // Add listeners for mouse clicks outside and for ESCAPE key presses
+  // TODO: create a custom hook for that and use here and in the Footnote
+
+
+  (0, _react.useEffect)(() => {
+    if (openSubMenuId !== null) {
+      window.addEventListener('click', handleSubMenuClose);
+      window.addEventListener('keydown', handleSubMenuClose);
+      window.addEventListener('touchstart', handleSubMenuClose);
+    }
+
+    return () => {
+      if (openSubMenuId !== null) {
+        window.removeEventListener('click', handleSubMenuClose);
+        window.removeEventListener('keydown', handleSubMenuClose);
+        window.removeEventListener('touchstart', handleSubMenuClose);
+      }
+    };
+  }, [openSubMenuId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    accessibilityRole: accessibilityRole,
+    direction: direction,
+    ref: ref,
+    space: 2,
+    tokens: {
+      alignItems: direction === 'column' ? 'flex-start' : 'center',
+      justifyContent: 'flex-end'
+    },
+    ...selectProps(rest),
+    children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'h5'
+        },
+        heading: headingLevel,
+        children: heading
+      })
+    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref2, index) => {
+      let {
+        href,
+        label,
+        id,
+        onClick,
+        ref: itemRef,
+        LinkRouter: ItemLinkRouter = LinkRouter,
+        linkRouterProps: itemLinkRouterProps,
+        items: nestedItems,
+        ...itemRest
+      } = _ref2;
+      const itemId = id ?? label;
+
+      const handleClick = event => {
+        if (nestedItems) {
+          setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
+        }
+
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        onChange === null || onChange === void 0 ? void 0 : onChange(itemId, event);
+      };
+
+      const ItemComponent = nestedItems ? _NavigationSubMenu.default : _NavigationItem.default;
+      const isOpen = itemId === openSubMenuId;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
+        ref: itemRef,
+        href: href,
+        onClick: handleClick // TODO: refactor to pass selected ID via context
+        ,
+        selectedId: selectedId,
+        index: index,
+        LinkRouter: ItemLinkRouter,
+        linkRouterProps: { ...linkRouterProps,
+          ...itemLinkRouterProps
+        },
+        items: nestedItems,
+        selected: itemId === selectedId,
+        ...itemRest,
+        ...(nestedItems && {
+          isOpen
+        }),
+        ...(nestedItems && isOpen && {
+          openOverlayRef
+        }),
+        children: label
+      }, itemId);
+    })]
+  });
+});
+NavigationBar.displayName = 'NavigationBar';
+NavigationBar.propTypes = { ...selectedSystemPropTypes,
+  ..._componentsBase.withLinkRouter.propTypes,
+
+  /**
+   * NavigationBar pages
+   *
+   * Each `item` object must contain:
+   *  - `heading` - user-facing text in the tab link
+   *  - `href` - the URL of the page linked to. Do not use hash links, for content within a page, use `Tabs`.
+   *  - `id` - a stable, unique identifier of the page within the set. Not written into the HTML.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    href: _propTypes.default.string,
+    id: _propTypes.default.string.isRequired,
+    onClick: _propTypes.default.func,
+    selected: _propTypes.default.bool,
+    LinkRouter: (_withLinkRouter$propT = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
+    linkRouterProps: (_withLinkRouter$propT2 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps,
+    // One layer of nested links is allowed
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      label: _propTypes.default.string.isRequired,
+      href: _propTypes.default.string,
+      id: _propTypes.default.string.isRequired,
+      onClick: _propTypes.default.func,
+      selected: _propTypes.default.bool,
+      LinkRouter: (_withLinkRouter$propT3 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT3 === void 0 ? void 0 : _withLinkRouter$propT3.LinkRouter,
+      linkRouterProps: (_withLinkRouter$propT4 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT4 === void 0 ? void 0 : _withLinkRouter$propT4.linkRouterProps
+    }))
+  })).isRequired,
+
+  /**
+   * Common navigation bar heading.
+   */
+  heading: _propTypes.default.string,
+  headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+
+  /**
+   * Matches the `id` property of the item in `items` corresponding to the current page
+   */
+  selectedId: _propTypes.default.string.isRequired,
+
+  /**
+   * Optional function to be called on pressing a link
+   */
+  onChange: _propTypes.default.func
+};
+NavigationBar.defaultProps = {
+  heading: undefined,
+  headingLevel: 'h1',
+  onChange: () => {}
+};
+var _default = NavigationBar;
+exports.default = _default;

package/lib/NavigationBar/NavigationItem.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const defaultMaxWidth = 192;
+
+const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "NavigationItem__ItemContainer",
+  componentId: "components-web__sc-ql9x7c-0"
+})(_ref => {
+  let {
+    targetWidth
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    maxWidth: `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px`,
+    flexGrow: targetWidth ? 1 : 0,
+    flexShrink: 1
+  };
+});
+/**
+ * NavigationItem within a NavigationBar component.
+ *
+ * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
+ */
+
+
+const NavigationItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    accessibilityRole = 'link',
+    // @todo switch to 'button' for dropdowns
+    children,
+    id,
+    onClick: handleClick = () => {},
+    selected,
+    accessibilityState = {
+      current: selected ? 'page' : false
+    },
+    href,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  const selectedProps = selectProps(rest);
+  const targetWidth = (0, _componentsBase.useResponsiveProp)({
+    xs: 288,
+    lg: null
+  });
+  const viewport = (0, _componentsBase.useViewport)();
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('NavigationBar', tokens, variant);
+
+  const getStateTokens = state => getTokens({ ...state,
+    viewport
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContainer, {
+    targetWidth: targetWidth,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Button, {
+      accessibilityRole: accessibilityRole,
+      accessibilityState: accessibilityState,
+      onPress: handleClick,
+      ref: ref,
+      tokens: getStateTokens,
+      variant: {
+        selected
+      },
+      href: href,
+      ...selectedProps,
+      children: children
+    })
+  });
+});
+NavigationItem.displayName = 'NavigationItem';
+NavigationItem.propTypes = { ...selectedSystemPropTypes,
+  ..._componentsBase.withLinkRouter.propTypes,
+  onClick: _propTypes.default.func,
+  selected: _propTypes.default.bool,
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired
+};
+NavigationItem.defaultProps = {
+  onClick: () => {},
+  selected: false
+};
+
+var _default = (0, _componentsBase.withLinkRouter)(NavigationItem);
+
+exports.default = _default;

package/lib/NavigationBar/NavigationSubMenu.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
+
+var _Listbox = _interopRequireDefault(require("../Listbox"));
+
+var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidPosition"));
+
+var _resolveItemSelection = _interopRequireDefault(require("./resolveItemSelection"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * A NavigationItem that opens or closes a Listbox of other NavigationItems.
+ *
+ * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
+ */
+const NavigationSubMenu = _ref => {
+  let {
+    children,
+    id,
+    isOpen = false,
+    label,
+    onClick,
+    selectedId,
+    items = [],
+    openOverlayRef,
+    LinkRouter,
+    linkRouterProps
+  } = _ref;
+  const focusTrapRef = (0, _react.useRef)();
+  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
+
+  const {
+    align,
+    offsets,
+    minWidth
+  } = (0, _componentsBase.useResponsiveProp)({
+    xs: {
+      align: {
+        top: 'top',
+        left: 'left'
+      },
+      minWidth: maxWidth
+    },
+    sm: {
+      align: {
+        top: 'top',
+        right: 'right'
+      },
+      minWidth: maxWidth
+    },
+    lg: {
+      align: {
+        top: 'bottom',
+        center: 'center'
+      },
+      offsets: {
+        vertical: 4
+      },
+      minWidth: 192
+    }
+  });
+  const {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  } = (0, _useOverlaidPosition.default)({
+    isShown: isOpen,
+    offsets,
+    align
+  });
+  const {
+    selected
+  } = (0, _resolveItemSelection.default)({
+    id,
+    label,
+    items
+  }, selectedId);
+
+  const handleClick = event => {
+    if (typeof onClick === 'function') onClick(event);
+  };
+
+  const {
+    icoMenu
+  } = (0, _componentsBase.useThemeTokens)('NavigationBar', {}, {}, {
+    expanded: isOpen
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.default, {
+      ref: sourceRef,
+      accessibilityRole: "button",
+      id: id,
+      selected: selected,
+      onClick: handleClick,
+      icon: icoMenu,
+      children: _ref2 => {
+        var _textStyles$, _textStyles$2;
+
+        let {
+          textStyles
+        } = _ref2;
+        return [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+          space: 1,
+          direction: "row"
+        }, `${id}_spacer`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+          icon: icoMenu,
+          variant: {
+            size: 'small'
+          },
+          tokens: {
+            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color,
+            size: (_textStyles$2 = textStyles[0]) === null || _textStyles$2 === void 0 ? void 0 : _textStyles$2.fontSize
+          }
+        }, `${id}_icon`)];
+      }
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
+        overlaidPosition: overlaidPosition,
+        maxWidth: maxWidth,
+        minWidth: minWidth,
+        isReady: isReady,
+        onLayout: onTargetLayout,
+        ref: openOverlayRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default, {
+          items: items,
+          firstItemRef: targetRef,
+          parentRef: sourceRef,
+          selectedId: selectedId,
+          LinkRouter: LinkRouter,
+          linkRouterProps: linkRouterProps
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        // This catches and shifts focus to other interactive elements.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0,
+        ref: focusTrapRef,
+        onFocus: () => targetRef.current.focus()
+      })]
+    })]
+  });
+};
+
+NavigationSubMenu.displayName = 'NavigationSubMenu'; // @TODO - proper prop types and comments
+
+NavigationSubMenu.propTypes = {
+  children: _propTypes.default.node,
+  id: _propTypes.default.string,
+  isOpen: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  selectedId: _propTypes.default.string,
+  items: _propTypes.default.array,
+  openOverlayRef: _propTypes.default.object,
+  LinkRouter: _propTypes.default.elementType,
+  linkRouterProps: _propTypes.default.object
+};
+var _default = NavigationSubMenu;
+exports.default = _default;