@telus-uds/components-web 2.33.2 → 2.34.0

package/lib-module/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState, useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import momentPropTypes from 'react-moment-proptypes';
@@ -88,32 +88,33 @@ const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   var _dictionary$copy;
   let {
     copy = 'en',
     id,
     date,
     feedback,
-    inline,
+    inline = false,
     isDayDisabled,
     label,
-    onDateChange,
+    onDateChange = () => {},
     hint,
     hintPosition = 'inline',
     tooltip,
     tokens,
     variant = {},
     validation,
-    disabled,
-    prevTestID,
-    nextTestID,
+    disabled = false,
+    prevTestID = '',
+    nextTestID = '',
+    placeholder = 'DD / MM / YYYY',
     ...rest
   } = _ref3;
-  const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined);
-  const [inputText, setInputText] = useState(date instanceof moment ? date.format(dateFormat) : '');
-  const textInputRef = useRef();
-  const [datePickerPosition, setDatePickerPosition] = useState({
+  const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined);
+  const [inputText, setInputText] = React.useState(date instanceof moment ? date.format(dateFormat) : '');
+  const textInputRef = React.useRef();
+  const [datePickerPosition, setDatePickerPosition] = React.useState({
     left: 0,
     top: 0
   });
@@ -137,13 +138,13 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     window.addEventListener('resize', throttledUpdateDimensions);
     return () => window.removeEventListener('resize', throttledUpdateDimensions);
   }, []);
-  const [isFocused, setIsFocused] = useState(false);
-  const [isClickedInside, setIsClickedInside] = useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isClickedInside, setIsClickedInside] = React.useState(false);
   const getCopy = useCopy({
     dictionary,
     copy
   });
-  useEffect(() => {
+  React.useEffect(() => {
     /**
      * `date` could be passed as `null` to reset the value so explicitly
      * checking for not being `undefined`
@@ -334,7 +335,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         copy: copy,
         feedback: feedback,
         hint: hint,
-        placeholder: "DD / MM / YYYY",
+        placeholder: placeholder,
         onChange: onChangeInput,
         onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
@@ -466,23 +467,10 @@ DatePicker.propTypes = {
    * This is for automation testing purposes.
    * Will be added as a `data-testid-next` attribute for example.
    */
-  nextTestID: PropTypes.string
-};
-DatePicker.defaultProps = {
-  copy: 'en',
-  date: undefined,
-  feedback: undefined,
-  inline: false,
-  isDayDisabled: undefined,
-  label: undefined,
-  hint: undefined,
-  hintPosition: 'inline',
-  tooltip: undefined,
-  onDateChange: () => {},
-  validation: undefined,
-  disabled: false,
-  tokens: undefined,
-  prevTestID: '',
-  nextTestID: ''
+  nextTestID: PropTypes.string,
+  /**
+   * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
+   */
+  placeholder: PropTypes.string
 };
 export default DatePicker;

package/lib-module/Disclaimer/Disclaimer.js

@@ -32,18 +32,20 @@ const StyledDisclaimer = /*#__PURE__*/styled.p.withConfig({
  * Use Disclaimer to display singular legal statement and must be displayed
  * immediately adjacent to the related, originating content.
  */
-const Disclaimer = _ref2 => {
+const Disclaimer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     ...rest
   } = _ref2;
   const themeTokens = useThemeTokens('Disclaimer');
   return /*#__PURE__*/_jsx(StyledDisclaimer, {
+    ref: ref,
     ...selectProps(rest),
     ...themeTokens,
     children: children
   });
-};
+});
+Disclaimer.displayName = 'Disclaimer';
 Disclaimer.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Disclaimer'),

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,13 +1,13 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
-    onToggle,
-    tokens,
+    onToggle = () => {},
+    tokens = {},
     nativeID,
     ...rest
   } = _ref;
@@ -19,6 +19,7 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/_jsx(ExpandCollapse, {
     onChange: handleChange,
+    tokens: tokens,
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
       ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
@@ -62,9 +63,4 @@ ExpandCollapseMini.propTypes = {
   children: PropTypes.node.isRequired,
   tokens: getTokensPropType('ExpandCollapseMini')
 };
-ExpandCollapseMini.defaultProps = {
-  onToggle: () => {},
-  tokens: {},
-  nativeID: ''
-};
 export default ExpandCollapseMini;

package/lib-module/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -29,7 +29,7 @@ const selectLinkTokens = _ref => {
     blockFontSize: fontSize
   };
 };
-const ExpandCollapseMiniControl = _ref2 => {
+const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -86,11 +86,13 @@ const ExpandCollapseMiniControl = _ref2 => {
       ...selectLinkTokens(themeTokens),
       outerBorderColor
     }),
+    ref: ref,
     ...presentationOnly,
     ...selectProps(rest),
     children: expanded ? expandTitle : collapseTitle
   });
-};
+});
+ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl';
 ExpandCollapseMiniControl.propTypes = {
   ...selectedSystemPropTypes,
   ...Link.propTypes,

package/lib-module/Footnote/Footnote.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { createGlobalStyle } from 'styled-components';
 import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
@@ -216,8 +216,8 @@ const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
   };
 });
 const usePrevious = value => {
-  const ref = useRef();
-  useEffect(() => {
+  const ref = React.useRef();
+  React.useEffect(() => {
     ref.current = value;
   });
   if (ref.current) {
@@ -244,21 +244,21 @@ const usePrevious = value => {
  * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
  * - When `Footnote` is closed, focus must return to the initiating element
  */
-const Footnote = props => {
+const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _theme$themeOptions;
-  const viewport = useViewport();
   const {
-    copy,
+    copy = 'en',
     number,
     content,
     onClose,
-    isOpen,
+    isOpen = false,
     tokens,
     variant = {},
     isMobileFullScreen = true,
     dictionary = defaultDictionary,
     ...rest
   } = props;
+  const viewport = useViewport();
   const {
     footnoteBackground,
     footnoteBorderTopSizeMd,
@@ -296,19 +296,19 @@ const Footnote = props => {
   } = useThemeTokens('Footnote', tokens, variant, {
     viewport
   });
-  const footnoteRef = useRef(null);
-  const headerRef = useRef(null);
-  const bodyRef = useRef(null);
-  const contentRef = useRef(null);
-  const headingRef = useRef(null);
-  const [data, setData] = useState({
+  const footnoteRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const bodyRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const headingRef = React.useRef(null);
+  const [data, setData] = React.useState({
     content: null,
     number: null
   });
-  const [headerHeight, setHeaderHeight] = useState('auto');
-  const [bodyHeight, setBodyHeight] = useState('auto');
-  const [isVisible, setIsVisible] = useState(false);
-  const [isTextVisible, setIsTextVisible] = useState(true);
+  const [headerHeight, setHeaderHeight] = React.useState('auto');
+  const [bodyHeight, setBodyHeight] = React.useState('auto');
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [isTextVisible, setIsTextVisible] = React.useState(true);
   const getCopy = useCopy({
     dictionary,
     copy
@@ -316,13 +316,13 @@ const Footnote = props => {
   const prevProps = usePrevious(props);
   const theme = useTheme();
   const maxWidth = useResponsiveProp((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
-  const [isScrollable, setIsScrollable] = useState(false);
-  const closeFootnote = useCallback((event, options) => {
+  const [isScrollable, setIsScrollable] = React.useState(false);
+  const closeFootnote = React.useCallback((event, options) => {
     onClose(event, options);
   }, [onClose]);
 
   // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
-  const handleClose = useCallback(event => {
+  const handleClose = React.useCallback(event => {
     var _footnoteRef$current, _footnoteRef$current2;
     if (!isVisible) {
       return;
@@ -388,7 +388,7 @@ const Footnote = props => {
   };
 
   // Set height of header on mount
-  useEffect(() => {
+  React.useEffect(() => {
     var _headerRef$current;
     setHeaderHeight((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight);
   }, []);
@@ -399,7 +399,7 @@ const Footnote = props => {
   };
 
   // Add listeners for mouse clicks outside of Footnote and for ESCAPE key presses
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setIsVisible(true);
       document.addEventListener('mousedown', handleClose);
@@ -422,7 +422,7 @@ const Footnote = props => {
   }, [handleClose, isOpen]);
 
   // Set data if opening a new footnote
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen && !prevProps.isOpen) {
       setData({
         content,
@@ -430,7 +430,7 @@ const Footnote = props => {
       });
     }
   }, [isOpen, prevProps.isOpen, content, number]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen && prevProps.isOpen && number !== prevProps.number) {
       saveCurrentHeight();
       setIsTextVisible(false);
@@ -438,8 +438,8 @@ const Footnote = props => {
   }, [number, isOpen, prevProps.isOpen, prevProps.number]);
 
   // Reset footnote on close
-  useEffect(resetFootnote, [isOpen]);
-  const getFootnoteBodyContent = useCallback(() => {
+  React.useEffect(resetFootnote, [isOpen]);
+  const getFootnoteBodyContent = React.useCallback(() => {
     if (!data.number || !data.content) {
       return null;
     }
@@ -474,7 +474,7 @@ const Footnote = props => {
       })
     });
   }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
-  const checkIfScrollable = useCallback(() => {
+  const checkIfScrollable = React.useCallback(() => {
     const footnoteElement = footnoteRef.current;
     if (footnoteElement) {
       const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0;
@@ -482,7 +482,7 @@ const Footnote = props => {
       setIsScrollable(contentHeight > footnoteViewportHeight * 0.5);
     }
   }, [contentRef, setIsScrollable]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setTimeout(() => {
         checkIfScrollable();
@@ -492,6 +492,7 @@ const Footnote = props => {
   return /*#__PURE__*/_jsx(Portal, {
     children: /*#__PURE__*/_jsxs("div", {
       ...selectProps(rest),
+      ref: ref,
       children: [isOpen && /*#__PURE__*/_jsx(GlobalBodyScrollLock, {}), /*#__PURE__*/_jsx(StyledFootnote, {
         ref: footnoteRef,
         isOpen: isOpen,
@@ -558,7 +559,8 @@ const Footnote = props => {
       })]
     })
   });
-};
+});
+Footnote.displayName = 'Footnote';
 const copyShape = PropTypes.shape({
   close: PropTypes.string.isRequired,
   heading: PropTypes.string.isRequired
@@ -610,11 +612,4 @@ Footnote.propTypes = {
    */
   isMobileFullScreen: PropTypes.bool
 };
-Footnote.defaultProps = {
-  isOpen: false,
-  number: undefined,
-  content: undefined,
-  copy: 'en',
-  isMobileFullScreen: true
-};
 export default Footnote;

package/lib-module/Footnote/FootnoteLink.js

@@ -5,7 +5,6 @@ import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens, variantPro
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const StyledSup = /*#__PURE__*/styled.sup.withConfig({
   displayName: "FootnoteLink__StyledSup",
@@ -44,7 +43,7 @@ const StyledSup = /*#__PURE__*/styled.sup.withConfig({
  * - Avoid using FootnoteLink if there is only one annotation on a page. Consider including
  *   the annotation as part of the content whenever possible.
  */
-const FootnoteLink = _ref2 => {
+const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     number = [],
@@ -74,7 +73,8 @@ const FootnoteLink = _ref2 => {
       handleClick(index);
     }
   };
-  return /*#__PURE__*/_jsx(_Fragment, {
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
     children: numbers.map((num, index) => /*#__PURE__*/_jsx(StyledSup, {
       onKeyDown: event => handleOnKeyDown(event, index),
       role: "button",
@@ -88,7 +88,8 @@ const FootnoteLink = _ref2 => {
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });
-};
+});
+FootnoteLink.displayName = 'FootnoteLink';
 const copyShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired
 });
@@ -114,7 +115,4 @@ FootnoteLink.propTypes = {
    */
   fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
-FootnoteLink.defaultProps = {
-  copy: 'en'
-};
 export default FootnoteLink;

package/lib-module/IconButton/IconButton.js

@@ -1,12 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { IconButton as IconButtonBase, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
-const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    icon,
+    icon = null,
     action,
-    tokens,
+    tokens = {},
     variant = {},
     ...iconButtonProps
   } = _ref;
@@ -46,15 +46,10 @@ IconButton.propTypes = {
   /**
    * To set the icon to a multi-brand compatabile icon
    */
-  // eslint-disable-next-line react/require-default-props
   action: PropTypes.oneOf(multiBrandIconNames),
   /**
    * To set a custom icon
    */
   icon: PropTypes.func
 };
-IconButton.defaultProps = {
-  icon: null,
-  tokens: {}
-};
 export default IconButton;

package/lib-module/Image/Image.js

@@ -4,7 +4,7 @@ import { htmlAttrs, selectSystemProps, getTokensPropType } from '@telus-uds/comp
 import { warn } from '../utils/logger';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Image = _ref => {
+const Image = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     src,
     width,
@@ -43,9 +43,11 @@ const Image = _ref => {
     width: width,
     height: height,
     alt: alt,
-    loading: loading
+    loading: loading,
+    ref: ref
   });
-};
+});
+Image.displayName = 'Image';
 Image.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib-module/List/ListItem.js

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { ListItem as ListItemBase, Typography } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     title,
@@ -25,7 +25,4 @@ ListItem.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string
 };
-ListItem.defaultProps = {
-  title: undefined
-};
 export default ListItem;

package/lib-module/NavigationBar/NavigationBar.js

@@ -1,7 +1,7 @@
 var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
-import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter, getTokensPropType } from '@telus-uds/components-base';
+import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
 import NavigationItem from './NavigationItem';
@@ -28,7 +28,7 @@ const Heading = /*#__PURE__*/styled.div.withConfig({
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
+const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'navigation',
     heading,
@@ -48,8 +48,8 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
     xs: collapseItems(items, selectedId),
     lg: items
   });
-  const openOverlayRef = useRef(null);
-  const [openSubMenuId, setOpenSubMenuId] = useState(null);
+  const openOverlayRef = React.useRef(null);
+  const [openSubMenuId, setOpenSubMenuId] = React.useState(null);
   const handleSubMenuClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown') {
@@ -62,12 +62,12 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
       setOpenSubMenuId(null);
     }
   };
-  const navRefDefault = useRef(null);
+  const navRefDefault = React.useRef(null);
   const navRef = ref ?? navRefDefault;
-  const itemsRef = useRef(null);
+  const itemsRef = React.useRef(null);
 
   // Close the submenu when the user clicks outside the navigation bar
-  const handleMouseDown = useCallback(event => {
+  const handleMouseDown = React.useCallback(event => {
     if (navRef.current && itemsRef.current) {
       // Get the bounding rectangles of the navigation bar and the items container
       const navRect = navRef.current.getBoundingClientRect();
@@ -83,7 +83,7 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, [navRef, itemsRef, setOpenSubMenuId]);
 
   // TODO: create a custom hook for that and use here and in the Footnote
-  useEffect(() => {
+  React.useEffect(() => {
     // Add listeners for mouse clicks outside and for key presses
     document.addEventListener('mousedown', handleMouseDown);
     if (openSubMenuId !== null) {
@@ -172,7 +172,6 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
 NavigationBar.displayName = 'NavigationBar';
 NavigationBar.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: getTokensPropType('NavigationBar'),
   ...withLinkRouter.propTypes,
   /**
    * NavigationBar pages
@@ -222,11 +221,4 @@ NavigationBar.propTypes = {
    */
   accessibilityRole: PropTypes.string
 };
-NavigationBar.defaultProps = {
-  heading: undefined,
-  headingLevel: 'h1',
-  onChange: () => {},
-  accessibilityRole: '',
-  tokens: {}
-};
 export default NavigationBar;

package/lib-module/NavigationBar/NavigationItem.js

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, selectSystemProps, useResponsiveProp, useViewport, useThemeTokensCallback } from '@telus-uds/components-base';
+import { Button, selectSystemProps, useResponsiveProp, useViewport, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,14 +28,14 @@ const ItemContainer = /*#__PURE__*/styled.div.withConfig({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const NavigationItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'link',
     // @todo switch to 'button' for dropdowns
     children,
     id,
     onClick: handleClick = () => {},
-    selected,
+    selected = false,
     accessibilityState = {
       current: selected ? 'page' : false
     },
@@ -79,12 +79,9 @@ const NavigationItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 NavigationItem.displayName = 'NavigationItem';
 NavigationItem.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('NavigationBar'),
   onClick: PropTypes.func,
   selected: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
 };
-NavigationItem.defaultProps = {
-  onClick: () => {},
-  selected: false
-};
 export default NavigationItem;

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -1,6 +1,6 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon, useResponsiveProp, useThemeTokens, Listbox } from '@telus-uds/components-base';
+import { Icon, useResponsiveProp, useThemeTokens, Listbox, getTokensPropType } from '@telus-uds/components-base';
 import NavigationItem from './NavigationItem';
 import useOverlaidPosition from '../utils/useOverlaidPosition';
 import resolveItemSelection from './resolveItemSelection';
@@ -13,11 +13,12 @@ import resolveItemSelection from './resolveItemSelection';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const NavigationSubMenu = _ref => {
+const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     id,
     isOpen = false,
+    tokens = {},
     label,
     onClick,
     selectedId,
@@ -27,7 +28,7 @@ const NavigationSubMenu = _ref => {
     linkRouterProps,
     itemsContainerRef
   } = _ref;
-  const focusTrapRef = useRef();
+  const focusTrapRef = React.useRef();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
   const defaultOffsets = {
     offsets: {
@@ -98,6 +99,7 @@ const NavigationSubMenu = _ref => {
       selected: selected,
       onClick: handleClick,
       icon: icoMenu,
+      tokens: tokens,
       children: _ref2 => {
         var _textStyles$;
         let {
@@ -128,7 +130,7 @@ const NavigationSubMenu = _ref => {
           selectedId: selectedId,
           LinkRouter: LinkRouter,
           linkRouterProps: linkRouterProps,
-          ref: itemsContainerRef
+          ref: itemsContainerRef || ref
         })
       }), /*#__PURE__*/_jsx("div", {
         // This catches and shifts focus to other interactive elements.
@@ -139,11 +141,12 @@ const NavigationSubMenu = _ref => {
       })]
     })]
   });
-};
+});
 NavigationSubMenu.displayName = 'NavigationSubMenu';
 
 // @TODO - proper prop types and comments
 NavigationSubMenu.propTypes = {
+  tokens: getTokensPropType('NavigationBar'),
   children: PropTypes.node,
   id: PropTypes.string,
   isOpen: PropTypes.bool,

package/lib-module/NavigationBar/index.js

@@ -1,2 +1,4 @@
 import NavigationBar from './NavigationBar';
+import NavigationItem from './NavigationItem';
+NavigationBar.Item = NavigationItem;
 export default NavigationBar;