@telus-uds/components-web 2.33.2 → 2.34.1

package/lib/Footnote/Footnote.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -12,9 +12,9 @@ var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedLis
 var _utils = require("../utils");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const viewportBreakpoint = 1440;
 const GlobalBodyScrollLock = /*#__PURE__*/(0, _styledComponents.createGlobalStyle)({
@@ -224,8 +224,8 @@ const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.
   };
 });
 const usePrevious = value => {
-  const ref = (0, _react.useRef)();
-  (0, _react.useEffect)(() => {
+  const ref = _react.default.useRef();
+  _react.default.useEffect(() => {
     ref.current = value;
   });
   if (ref.current) {
@@ -252,21 +252,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.default.forwardRef((props, ref) => {
   var _theme$themeOptions;
-  const viewport = (0, _componentsBase.useViewport)();
   const {
-    copy,
+    copy = 'en',
     number,
     content,
     onClose,
-    isOpen,
+    isOpen = false,
     tokens,
     variant = {},
     isMobileFullScreen = true,
     dictionary = _dictionary.default,
     ...rest
   } = props;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     footnoteBackground,
     footnoteBorderTopSizeMd,
@@ -304,19 +304,19 @@ const Footnote = props => {
   } = (0, _componentsBase.useThemeTokens)('Footnote', tokens, variant, {
     viewport
   });
-  const footnoteRef = (0, _react.useRef)(null);
-  const headerRef = (0, _react.useRef)(null);
-  const bodyRef = (0, _react.useRef)(null);
-  const contentRef = (0, _react.useRef)(null);
-  const headingRef = (0, _react.useRef)(null);
-  const [data, setData] = (0, _react.useState)({
+  const footnoteRef = _react.default.useRef(null);
+  const headerRef = _react.default.useRef(null);
+  const bodyRef = _react.default.useRef(null);
+  const contentRef = _react.default.useRef(null);
+  const headingRef = _react.default.useRef(null);
+  const [data, setData] = _react.default.useState({
     content: null,
     number: null
   });
-  const [headerHeight, setHeaderHeight] = (0, _react.useState)('auto');
-  const [bodyHeight, setBodyHeight] = (0, _react.useState)('auto');
-  const [isVisible, setIsVisible] = (0, _react.useState)(false);
-  const [isTextVisible, setIsTextVisible] = (0, _react.useState)(true);
+  const [headerHeight, setHeaderHeight] = _react.default.useState('auto');
+  const [bodyHeight, setBodyHeight] = _react.default.useState('auto');
+  const [isVisible, setIsVisible] = _react.default.useState(false);
+  const [isTextVisible, setIsTextVisible] = _react.default.useState(true);
   const getCopy = (0, _componentsBase.useCopy)({
     dictionary,
     copy
@@ -324,13 +324,13 @@ const Footnote = props => {
   const prevProps = usePrevious(props);
   const theme = (0, _componentsBase.useTheme)();
   const maxWidth = (0, _componentsBase.useResponsiveProp)((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
-  const [isScrollable, setIsScrollable] = (0, _react.useState)(false);
-  const closeFootnote = (0, _react.useCallback)((event, options) => {
+  const [isScrollable, setIsScrollable] = _react.default.useState(false);
+  const closeFootnote = _react.default.useCallback((event, options) => {
     onClose(event, options);
   }, [onClose]);
 
   // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
-  const handleClose = (0, _react.useCallback)(event => {
+  const handleClose = _react.default.useCallback(event => {
     var _footnoteRef$current, _footnoteRef$current2;
     if (!isVisible) {
       return;
@@ -396,7 +396,7 @@ const Footnote = props => {
   };
 
   // Set height of header on mount
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     var _headerRef$current;
     setHeaderHeight((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight);
   }, []);
@@ -407,7 +407,7 @@ const Footnote = props => {
   };
 
   // Add listeners for mouse clicks outside of Footnote and for ESCAPE key presses
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (isOpen) {
       setIsVisible(true);
       document.addEventListener('mousedown', handleClose);
@@ -430,7 +430,7 @@ const Footnote = props => {
   }, [handleClose, isOpen]);
 
   // Set data if opening a new footnote
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (isOpen && !prevProps.isOpen) {
       setData({
         content,
@@ -438,7 +438,7 @@ const Footnote = props => {
       });
     }
   }, [isOpen, prevProps.isOpen, content, number]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (isOpen && prevProps.isOpen && number !== prevProps.number) {
       saveCurrentHeight();
       setIsTextVisible(false);
@@ -446,8 +446,8 @@ const Footnote = props => {
   }, [number, isOpen, prevProps.isOpen, prevProps.number]);
 
   // Reset footnote on close
-  (0, _react.useEffect)(resetFootnote, [isOpen]);
-  const getFootnoteBodyContent = (0, _react.useCallback)(() => {
+  _react.default.useEffect(resetFootnote, [isOpen]);
+  const getFootnoteBodyContent = _react.default.useCallback(() => {
     if (!data.number || !data.content) {
       return null;
     }
@@ -482,7 +482,7 @@ const Footnote = props => {
       })
     });
   }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
-  const checkIfScrollable = (0, _react.useCallback)(() => {
+  const checkIfScrollable = _react.default.useCallback(() => {
     const footnoteElement = footnoteRef.current;
     if (footnoteElement) {
       const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0;
@@ -490,7 +490,7 @@ const Footnote = props => {
       setIsScrollable(contentHeight > footnoteViewportHeight * 0.5);
     }
   }, [contentRef, setIsScrollable]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (isOpen) {
       setTimeout(() => {
         checkIfScrollable();
@@ -500,6 +500,7 @@ const Footnote = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ...selectProps(rest),
+      ref: ref,
       children: [isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalBodyScrollLock, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnote, {
         ref: footnoteRef,
         isOpen: isOpen,
@@ -566,7 +567,8 @@ const Footnote = props => {
       })]
     })
   });
-};
+});
+Footnote.displayName = 'Footnote';
 const copyShape = _propTypes.default.shape({
   close: _propTypes.default.string.isRequired,
   heading: _propTypes.default.string.isRequired
@@ -618,12 +620,5 @@ Footnote.propTypes = {
    */
   isMobileFullScreen: _propTypes.default.bool
 };
-Footnote.defaultProps = {
-  isOpen: false,
-  number: undefined,
-  content: undefined,
-  copy: 'en',
-  isMobileFullScreen: true
-};
 var _default = Footnote;
 exports.default = _default;

package/lib/Footnote/FootnoteLink.js

@@ -40,6 +40,10 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
     ...(0, _componentsBase.applyTextStyles)(fontNameAndWeight)
   };
 });
+const FootnoteLinkContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "FootnoteLink__FootnoteLinkContainer",
+  componentId: "components-web__sc-17nd7xo-1"
+})(["display:inline-block;"]);
 
 /**
  * Use `FootnoteLink` to open `Footnote` component and display related legal content.
@@ -50,7 +54,7 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.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.default.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     number = [],
@@ -80,7 +84,8 @@ const FootnoteLink = _ref2 => {
       handleClick(index);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FootnoteLinkContainer, {
+    ref: ref,
     children: numbers.map((num, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSup, {
       onKeyDown: event => handleOnKeyDown(event, index),
       role: "button",
@@ -94,7 +99,8 @@ const FootnoteLink = _ref2 => {
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });
-};
+});
+FootnoteLink.displayName = 'FootnoteLink';
 const copyShape = _propTypes.default.shape({
   a11yLabel: _propTypes.default.string.isRequired
 });
@@ -120,8 +126,5 @@ FootnoteLink.propTypes = {
    */
   fontSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
-FootnoteLink.defaultProps = {
-  copy: 'en'
-};
 var _default = FootnoteLink;
 exports.default = _default;

package/lib/IconButton/IconButton.js

@@ -4,18 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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 IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    icon,
+    icon = null,
     action,
-    tokens,
+    tokens = {},
     variant = {},
     ...iconButtonProps
   } = _ref;
@@ -55,16 +53,11 @@ IconButton.propTypes = {
   /**
    * To set the icon to a multi-brand compatabile icon
    */
-  // eslint-disable-next-line react/require-default-props
   action: _propTypes.default.oneOf(multiBrandIconNames),
   /**
    * To set a custom icon
    */
   icon: _propTypes.default.func
 };
-IconButton.defaultProps = {
-  icon: null,
-  tokens: {}
-};
 var _default = IconButton;
 exports.default = _default;

package/lib/Image/Image.js

@@ -11,7 +11,7 @@ var _logger = require("../utils/logger");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _server.selectSystemProps)([_server.htmlAttrs]);
-const Image = _ref => {
+const Image = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     src,
     width,
@@ -50,9 +50,11 @@ const Image = _ref => {
     width: width,
     height: height,
     alt: alt,
-    loading: loading
+    loading: loading,
+    ref: ref
   });
-};
+});
+Image.displayName = 'Image';
 Image.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib/List/ListItem.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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) => {
+const ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     title,
@@ -33,8 +31,5 @@ ListItem.propTypes = {
   children: _propTypes.default.node.isRequired,
   title: _propTypes.default.string
 };
-ListItem.defaultProps = {
-  title: undefined
-};
 var _default = ListItem;
 exports.default = _default;

package/lib/NavigationBar/NavigationBar.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -15,8 +15,6 @@ 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",
@@ -36,7 +34,7 @@ const Heading = /*#__PURE__*/_styledComponents.default.div.withConfig({
  * 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) => {
+const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'navigation',
     heading,
@@ -56,8 +54,8 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     xs: (0, _collapseItems.default)(items, selectedId),
     lg: items
   });
-  const openOverlayRef = (0, _react.useRef)(null);
-  const [openSubMenuId, setOpenSubMenuId] = (0, _react.useState)(null);
+  const openOverlayRef = _react.default.useRef(null);
+  const [openSubMenuId, setOpenSubMenuId] = _react.default.useState(null);
   const handleSubMenuClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown') {
@@ -70,12 +68,12 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setOpenSubMenuId(null);
     }
   };
-  const navRefDefault = (0, _react.useRef)(null);
+  const navRefDefault = _react.default.useRef(null);
   const navRef = ref ?? navRefDefault;
-  const itemsRef = (0, _react.useRef)(null);
+  const itemsRef = _react.default.useRef(null);
 
   // Close the submenu when the user clicks outside the navigation bar
-  const handleMouseDown = (0, _react.useCallback)(event => {
+  const handleMouseDown = _react.default.useCallback(event => {
     if (navRef.current && itemsRef.current) {
       // Get the bounding rectangles of the navigation bar and the items container
       const navRect = navRef.current.getBoundingClientRect();
@@ -91,7 +89,7 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, [navRef, itemsRef, setOpenSubMenuId]);
 
   // TODO: create a custom hook for that and use here and in the Footnote
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     // Add listeners for mouse clicks outside and for key presses
     document.addEventListener('mousedown', handleMouseDown);
     if (openSubMenuId !== null) {
@@ -180,7 +178,6 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 NavigationBar.displayName = 'NavigationBar';
 NavigationBar.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('NavigationBar'),
   ..._componentsBase.withLinkRouter.propTypes,
   /**
    * NavigationBar pages
@@ -230,12 +227,5 @@ NavigationBar.propTypes = {
    */
   accessibilityRole: _propTypes.default.string
 };
-NavigationBar.defaultProps = {
-  heading: undefined,
-  headingLevel: 'h1',
-  onChange: () => {},
-  accessibilityRole: '',
-  tokens: {}
-};
 var _default = NavigationBar;
 exports.default = _default;

package/lib/NavigationBar/NavigationItem.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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({
@@ -37,14 +35,14 @@ const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-const NavigationItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'link',
     // @todo switch to 'button' for dropdowns
     children,
     id,
     onClick: handleClick = () => {},
-    selected,
+    selected = false,
     accessibilityState = {
       current: selected ? 'page' : false
     },
@@ -88,13 +86,10 @@ const NavigationItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 NavigationItem.displayName = 'NavigationItem';
 NavigationItem.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('NavigationBar'),
   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 = NavigationItem;
 exports.default = _default;

package/lib/NavigationBar/NavigationSubMenu.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
@@ -12,17 +12,16 @@ var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidP
 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 => {
+ */const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     id,
     isOpen = false,
+    tokens = {},
     label,
     onClick,
     selectedId,
@@ -32,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     linkRouterProps,
     itemsContainerRef
   } = _ref;
-  const focusTrapRef = (0, _react.useRef)();
+  const focusTrapRef = _react.default.useRef();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
   const defaultOffsets = {
     offsets: {
@@ -103,6 +102,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
       selected: selected,
       onClick: handleClick,
       icon: icoMenu,
+      tokens: tokens,
       children: _ref2 => {
         var _textStyles$;
         let {
@@ -133,7 +133,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
           selectedId: selectedId,
           LinkRouter: LinkRouter,
           linkRouterProps: linkRouterProps,
-          ref: itemsContainerRef
+          ref: itemsContainerRef || ref
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         // This catches and shifts focus to other interactive elements.
@@ -144,11 +144,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
       })]
     })]
   });
-};
+});
 NavigationSubMenu.displayName = 'NavigationSubMenu';
 
 // @TODO - proper prop types and comments
 NavigationSubMenu.propTypes = {
+  tokens: (0, _componentsBase.getTokensPropType)('NavigationBar'),
   children: _propTypes.default.node,
   id: _propTypes.default.string,
   isOpen: _propTypes.default.bool,

package/lib/NavigationBar/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
+var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+_NavigationBar.default.Item = _NavigationItem.default;
 var _default = _NavigationBar.default;
 exports.default = _default;

package/lib/OptimizeImage/OptimizeImage.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _ResponsiveImage = _interopRequireDefault(require("../ResponsiveImage"));
@@ -12,10 +12,8 @@ var _utils = require("./utils");
 var _utils2 = 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)([_utils2.htmlAttrs]);
-const OptimizeImage = _ref => {
+const OptimizeImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     contentfulAssetUrl,
     alt,
@@ -32,8 +30,8 @@ const OptimizeImage = _ref => {
   // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
   const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
   // by default assuming webP support for SSR
-  const [imgUrls, setImgUrls] = (0, _react.useState)((0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
-  (0, _react.useEffect)(() => {
+  const [imgUrls, setImgUrls] = _react.default.useState((0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
+  _react.default.useEffect(() => {
     // Checking for webP support for CSR
     (0, _utils.hasWebpSupport)().then(supportsWebp => {
       const imageUrls = (0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp);
@@ -44,9 +42,11 @@ const OptimizeImage = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
     ...imgUrls,
     alt: alt,
-    ...selectProps(rest)
+    ...selectProps(rest),
+    ref: ref
   });
-};
+});
+OptimizeImage.displayName = 'OptimizeImage';
 OptimizeImage.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib/OrderedList/Item.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -13,8 +13,6 @@ var _utils = require("../utils");
 var _constants = require("./constants");
 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 selectItemTextStyles = (_ref, themeOptions) => {
   let {
@@ -77,12 +75,12 @@ const ItemContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
 })({
   flex: 1
 });
-const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     counterName,
     title,
-    tokens,
+    tokens = {},
     variant,
     ...rest
   } = _ref3;
@@ -141,9 +139,5 @@ Item.propTypes = {
    */
   tokens: (0, _componentsBase.getTokensPropType)('List')
 };
-Item.defaultProps = {
-  title: undefined,
-  tokens: {}
-};
 var _default = Item;
 exports.default = _default;