@telus-uds/components-web 2.5.0 → 2.7.0

package/CHANGELOG.md

@@ -1,12 +1,46 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 02 Jun 2023 00:27:36 GMT and should not be manually modified.
+This log was last generated on Fri, 09 Jun 2023 00:18:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.7.0
+
+Fri, 09 Jun 2023 00:18:16 GMT
+
+### Minor changes
+
+- validation prop implemented for the Autocomplete component (35577399+JoshHC@users.noreply.github.com)
+- expand collapse mini variant introduced (akshay.pandey1@telus.com)
+- exporting useSetTheme (srikanthkhari@gmail.com)
+- Make Table fullWidth by default (wlsdud194@hotmail.com)
+-  Fixed bullet alignment within ListItemBase (wlsdud194@hotmail.com)
+- Bump @telus-uds/components-base to v1.49.0
+- Bump @telus-uds/system-theme-tokens to v2.31.0
+
+### Patches
+
+- Fix mousedown handling in Footnote (6854874+kyletsang@users.noreply.github.com)
+- Fix `NavigationBar`'s `react-router` integration (shahzaibkhalidmalik@outlook.com)
+
+## 2.6.0
+
+Tue, 06 Jun 2023 20:46:12 GMT
+
+### Minor changes
+
+- allow 'FootnoteLink' to inherit color (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.48.0
+- Bump @telus-uds/system-theme-tokens to v2.30.0
+
+### Patches
+
+- Testing: Snapshots updated (oscar.palencia@telus.com)
+- Fix an issue where `Button` may not align as expected in a flex container (shahzaibkhalidmalik@outlook.com)
+
 ## 2.5.0
 
-Fri, 02 Jun 2023 00:27:36 GMT
+Fri, 02 Jun 2023 00:34:55 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -3100,7 +3100,7 @@
       "props": {
         "fullWidth": {
           "defaultValue": {
-            "value": "false",
+            "value": "true",
             "computed": false
           },
           "required": false
@@ -4435,7 +4435,6 @@
               "color": "color",
               "lineHeight": "lineHeight",
               "textAlign": "flexJustifyContent",
-              "alignSelf": "flexAlign",
               "fontName": "fontName",
               "fontWeight": "fontWeight",
               "backgroundColor": "color",
@@ -4634,7 +4633,6 @@
               "color": "color",
               "lineHeight": "lineHeight",
               "textAlign": "flexJustifyContent",
-              "alignSelf": "flexAlign",
               "fontName": "fontName",
               "fontWeight": "fontWeight",
               "backgroundColor": "color",
@@ -5060,7 +5058,6 @@
               "color": "color",
               "lineHeight": "lineHeight",
               "textAlign": "flexJustifyContent",
-              "alignSelf": "flexAlign",
               "fontName": "fontName",
               "fontWeight": "fontWeight",
               "backgroundColor": "color",
@@ -6862,13 +6859,6 @@
             "required": false,
             "description": "Array of the ids of currently open groups"
           },
-          "isMiniExpandCollapse": {
-            "defaultValue": {
-              "value": "false",
-              "computed": false
-            },
-            "required": false
-          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -6973,7 +6963,12 @@
                 "paddingBottom": "size",
                 "borderWidth": "border",
                 "borderColor": "color",
-                "backgroundColor": "color"
+                "backgroundColor": "color",
+                "borderTopLeftRadius": "radius",
+                "borderBottomLeftRadius": "radius",
+                "borderTopRightRadius": "radius",
+                "borderBottomRightRadius": "radius",
+                "textLine": "textLine"
               }
             },
             "required": false,
@@ -11078,6 +11073,8 @@
             "name": "custom",
             "raw": {
               "color": "color",
+              "secondColor": "color",
+              "animationDuration": "integer",
               "size": "size",
               "radius": "radius",
               "baseWidth": "size",

package/lib/Autocomplete/Autocomplete.js

@@ -34,10 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /* eslint-disable react/require-default-props */
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs, _componentsBase.inputSupportsProps, _componentsBase.textInputHandlerProps, _componentsBase.textInputProps]);
-const inputTokens = {
-  paddingLeft: _constants.INPUT_LEFT_PADDING
-}; // Returns JSX to display a bold string `str` with unbolded occurrences of the
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs, _componentsBase.inputSupportsProps, _componentsBase.textInputHandlerProps, _componentsBase.textInputProps]); // Returns JSX to display a bold string `str` with unbolded occurrences of the
 // `substring` based in the array of `matchIndexes` provided
 
 const highlightAllMatches = function (str) {
@@ -119,7 +116,10 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 
   const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems); // We need to store the current value as well to be able to highlight it
 
-  const [currentValue, setCurrentValue] = (0, _react.useState)(value ?? initialValue); // Setting up the overlay
+  const [currentValue, setCurrentValue] = (0, _react.useState)(value ?? initialValue);
+  const inputTokens = {
+    paddingLeft: _constants.INPUT_LEFT_PADDING
+  }; // Setting up the overlay
 
   const openOverlayRef = (0, _react.useRef)();
   const [isExpanded, setIsExpanded] = (0, _react.useState)(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
@@ -261,6 +261,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
           readOnly: readOnly,
           ref: inputRef,
           tokens: inputTokens,
+          validation: validation,
           ...selectedProps,
           ...props,
           ...(isControlled ? {

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -49,7 +49,9 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onChange: handleChange,
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
-      isMiniExpandCollapse: true,
+      variant: {
+        mini: true
+      },
       controlTokens: {
         icon: null
       } // TODO refactor

package/lib/Footnote/Footnote.js

@@ -354,6 +354,10 @@ const Footnote = props => {
   const handleClose = (0, _react.useCallback)(event => {
     var _footnoteRef$current, _footnoteRef$current2;
 
+    if (!isVisible) {
+      return;
+    }
+
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         closeFootnote(event, {
@@ -369,7 +373,7 @@ const Footnote = props => {
         returnFocus: false
       });
     }
-  }, [closeFootnote]);
+  }, [closeFootnote, isVisible]);
 
   const saveCurrentHeight = () => {
     const oldHeight = contentRef.current.offsetHeight;
@@ -450,7 +454,7 @@ const Footnote = props => {
 
     return () => {
       if (isOpen) {
-        document.addEventListener('mousedown', handleClose);
+        document.removeEventListener('mousedown', handleClose);
         window.removeEventListener('click', handleClose);
         window.removeEventListener('keydown', handleClose);
         window.removeEventListener('touchstart', handleClose);

package/lib/Listbox/ListboxItem.js

@@ -93,6 +93,8 @@ const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     prevItemRef,
     tokens,
     variant = {},
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref4;
   const selectedProps = selectProps(rest);
@@ -128,8 +130,7 @@ ListboxItem.propTypes = { ...selectedSystemPropTypes,
   nextItemRef: _propTypes.default.object,
   prevItemRef: _propTypes.default.object,
   onPress: _propTypes.default.func,
-  selected: _propTypes.default.bool,
-  reactRouterLinkComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  selected: _propTypes.default.bool
 };
 
 var _default = (0, _componentsBase.withLinkRouter)(ListboxItem);

package/lib/Listbox/ListboxOverlay.js

@@ -15,6 +15,8 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
+var _WebPortal = _interopRequireDefault(require("../WebPortal"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,7 +53,7 @@ const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onLayout
   } = _ref;
   const systemTokens = (0, _componentsBase.useThemeTokens)('ListBox', {}, {});
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebPortal.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       ref: ref,
       onLayout: onLayout,

package/lib/NavigationBar/NavigationItem.js

@@ -63,6 +63,8 @@ const NavigationItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     href,
     tokens,
     variant = {},
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref2;
   const selectedProps = selectProps(rest);
@@ -89,6 +91,8 @@ const NavigationItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         selected
       },
       href: href,
+      LinkRouter: LinkRouter,
+      linkRouterProps: linkRouterProps,
       ...selectedProps,
       children: children
     })
@@ -96,7 +100,6 @@ const NavigationItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 });
 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
@@ -105,7 +108,5 @@ NavigationItem.defaultProps = {
   onClick: () => {},
   selected: false
 };
-
-var _default = (0, _componentsBase.withLinkRouter)(NavigationItem);
-
+var _default = NavigationItem;
 exports.default = _default;

package/lib/Table/Table.js

@@ -66,7 +66,7 @@ exports.useTableContext = useTableContext;
 const Table = _ref2 => {
   let {
     children,
-    fullWidth = false,
+    fullWidth = true,
     text = 'medium',
     tokens,
     variant,

package/lib/WebPortal/WebPortal.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * WebPortal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `WebPortal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+const WebPortal = _ref => {
+  let {
+    children
+  } = _ref;
+  const portalContainer = document.createElement('div');
+  (0, _react.useEffect)(() => {
+    document.body.appendChild(portalContainer);
+    return () => {
+      document.body.removeChild(portalContainer);
+    };
+  }, [portalContainer]);
+  return /*#__PURE__*/_reactDom.default.createPortal(children, portalContainer);
+};
+
+var _default = WebPortal;
+exports.default = _default;

package/lib/WebPortal/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _WebPortal = _interopRequireDefault(require("./WebPortal"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _WebPortal.default;
+exports.default = _default;

package/lib/baseExports.js

@@ -345,6 +345,12 @@ Object.defineProperty(exports, "useResponsiveProp", {
     return _componentsBase.useResponsiveProp;
   }
 });
+Object.defineProperty(exports, "useSetTheme", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.useSetTheme;
+  }
+});
 Object.defineProperty(exports, "useViewport", {
   enumerable: true,
   get: function () {

package/lib/index.js

@@ -43,7 +43,8 @@ var _exportNames = {
   TermsAndConditions: true,
   NavigationBar: true,
   Progress: true,
-  SkeletonProvider: true
+  SkeletonProvider: true,
+  WebPortal: true
 };
 Object.defineProperty(exports, "Autocomplete", {
   enumerable: true,
@@ -267,6 +268,12 @@ Object.defineProperty(exports, "WaffleGrid", {
     return _WaffleGrid.default;
   }
 });
+Object.defineProperty(exports, "WebPortal", {
+  enumerable: true,
+  get: function () {
+    return _WebPortal.default;
+  }
+});
 Object.defineProperty(exports, "WebVideo", {
   enumerable: true,
   get: function () {
@@ -364,6 +371,8 @@ var _Progress = _interopRequireDefault(require("./Progress"));
 
 var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
 
+var _WebPortal = _interopRequireDefault(require("./WebPortal"));
+
 var _baseExports = require("./baseExports");
 
 Object.keys(_baseExports).forEach(function (key) {

package/lib-module/Autocomplete/Autocomplete.js

@@ -12,10 +12,7 @@ import dictionary from './dictionary';
 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 [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, inputSupportsProps, textInputHandlerProps, textInputProps]);
-const inputTokens = {
-  paddingLeft: INPUT_LEFT_PADDING
-}; // Returns JSX to display a bold string `str` with unbolded occurrences of the
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, inputSupportsProps, textInputHandlerProps, textInputProps]); // Returns JSX to display a bold string `str` with unbolded occurrences of the
 // `substring` based in the array of `matchIndexes` provided
 
 const highlightAllMatches = function (str) {
@@ -97,7 +94,10 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
 
   const [currentItems, setCurrentItems] = useState(initialItems); // We need to store the current value as well to be able to highlight it
 
-  const [currentValue, setCurrentValue] = useState(value ?? initialValue); // Setting up the overlay
+  const [currentValue, setCurrentValue] = useState(value ?? initialValue);
+  const inputTokens = {
+    paddingLeft: INPUT_LEFT_PADDING
+  }; // Setting up the overlay
 
   const openOverlayRef = useRef();
   const [isExpanded, setIsExpanded] = useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
@@ -239,6 +239,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
           readOnly: readOnly,
           ref: inputRef,
           tokens: inputTokens,
+          validation: validation,
           ...selectedProps,
           ...props,
           ...(isControlled ? {

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -31,7 +31,9 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
     onChange: handleChange,
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
-      isMiniExpandCollapse: true,
+      variant: {
+        mini: true
+      },
       controlTokens: {
         icon: null
       } // TODO refactor

package/lib-module/Footnote/Footnote.js

@@ -326,6 +326,10 @@ const Footnote = props => {
   const handleClose = useCallback(event => {
     var _footnoteRef$current, _footnoteRef$current2;
 
+    if (!isVisible) {
+      return;
+    }
+
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         closeFootnote(event, {
@@ -341,7 +345,7 @@ const Footnote = props => {
         returnFocus: false
       });
     }
-  }, [closeFootnote]);
+  }, [closeFootnote, isVisible]);
 
   const saveCurrentHeight = () => {
     const oldHeight = contentRef.current.offsetHeight;
@@ -422,7 +426,7 @@ const Footnote = props => {
 
     return () => {
       if (isOpen) {
-        document.addEventListener('mousedown', handleClose);
+        document.removeEventListener('mousedown', handleClose);
         window.removeEventListener('click', handleClose);
         window.removeEventListener('keydown', handleClose);
         window.removeEventListener('touchstart', handleClose);

package/lib-module/Listbox/ListboxItem.js

@@ -71,6 +71,8 @@ const ListboxItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     prevItemRef,
     tokens,
     variant = {},
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref4;
   const selectedProps = selectProps(rest);
@@ -106,7 +108,6 @@ ListboxItem.propTypes = { ...selectedSystemPropTypes,
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
   onPress: PropTypes.func,
-  selected: PropTypes.bool,
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  selected: PropTypes.bool
 };
 export default withLinkRouter(ListboxItem);

package/lib-module/Listbox/ListboxOverlay.js

@@ -1,9 +1,10 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react';
-import { Card, Portal, useThemeTokens } from '@telus-uds/components-base';
+import { Card, useThemeTokens } from '@telus-uds/components-base';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import WebPortal from '../WebPortal';
 import { jsx as _jsx } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -31,7 +32,7 @@ const DropdownOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
     onLayout
   } = _ref;
   const systemTokens = useThemeTokens('ListBox', {}, {});
-  return /*#__PURE__*/_jsx(Portal, {
+  return /*#__PURE__*/_jsx(WebPortal, {
     children: /*#__PURE__*/_jsx(View, {
       ref: ref,
       onLayout: onLayout,

package/lib-module/NavigationBar/NavigationItem.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Button, selectSystemProps, useResponsiveProp, useViewport, withLinkRouter, useThemeTokensCallback } from '@telus-uds/components-base';
+import { Button, selectSystemProps, useResponsiveProp, useViewport, useThemeTokensCallback } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,6 +42,8 @@ const NavigationItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     href,
     tokens,
     variant = {},
+    LinkRouter,
+    linkRouterProps,
     ...rest
   } = _ref2;
   const selectedProps = selectProps(rest);
@@ -68,6 +70,8 @@ const NavigationItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
         selected
       },
       href: href,
+      LinkRouter: LinkRouter,
+      linkRouterProps: linkRouterProps,
       ...selectedProps,
       children: children
     })
@@ -75,7 +79,6 @@ const NavigationItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 NavigationItem.displayName = 'NavigationItem';
 NavigationItem.propTypes = { ...selectedSystemPropTypes,
-  ...withLinkRouter.propTypes,
   onClick: PropTypes.func,
   selected: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
@@ -84,4 +87,4 @@ NavigationItem.defaultProps = {
   onClick: () => {},
   selected: false
 };
-export default withLinkRouter(NavigationItem);
+export default NavigationItem;

package/lib-module/Table/Table.js

@@ -39,7 +39,7 @@ export const useTableContext = () => useContext(TableContext);
 const Table = _ref2 => {
   let {
     children,
-    fullWidth = false,
+    fullWidth = true,
     text = 'medium',
     tokens,
     variant,

package/lib-module/WebPortal/WebPortal.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+/**
+ * WebPortal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `WebPortal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const WebPortal = _ref => {
+  let {
+    children
+  } = _ref;
+  const portalContainer = document.createElement('div');
+  useEffect(() => {
+    document.body.appendChild(portalContainer);
+    return () => {
+      document.body.removeChild(portalContainer);
+    };
+  }, [portalContainer]);
+  return /*#__PURE__*/ReactDOM.createPortal(children, portalContainer);
+};
+
+export default WebPortal;

package/lib-module/WebPortal/index.js

@@ -0,0 +1,2 @@
+import WebPortal from './WebPortal';
+export default WebPortal;

package/lib-module/baseExports.js

@@ -12,4 +12,4 @@ A11yText, ActivityIndicator, Box, Button, BaseProvider, A11yInfoProvider, Viewpo
  */
 // Enable access to the viewports system for app-specific responsive layouts and features
 useResponsiveProp, useViewport, // TODO reenable ViewportContext once published from base  // enable localised viewport overrides e.g. in tests, narrow columns, etc
-useCarousel } from '@telus-uds/components-base';
+useCarousel, useSetTheme } from '@telus-uds/components-base';

package/lib-module/index.js

@@ -37,5 +37,6 @@ export { default as TermsAndConditions } from './TermsAndConditions';
 export { default as NavigationBar } from './NavigationBar';
 export { default as Progress } from './Progress';
 export { default as SkeletonProvider } from './SkeletonProvider';
+export { default as WebPortal } from './WebPortal';
 export { ssrStyles } from './utils';
 export * from './baseExports';

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.47.0",
+    "@telus-uds/components-base": "1.49.0",
     "@telus-uds/system-constants": "^1.2.1",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.29.0",
+    "@telus-uds/system-theme-tokens": "^2.31.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0"
@@ -62,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.5.0"
+  "version": "2.7.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -32,8 +32,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   textInputProps
 ])
 
-const inputTokens = { paddingLeft: INPUT_LEFT_PADDING }
-
 // Returns JSX to display a bold string `str` with unbolded occurrences of the
 // `substring` based in the array of `matchIndexes` provided
 const highlightAllMatches = (str, substring = '', matchIndexes = []) => (
@@ -104,6 +102,8 @@ const Autocomplete = forwardRef(
     // We need to store the current value as well to be able to highlight it
     const [currentValue, setCurrentValue] = useState(value ?? initialValue)
 
+    const inputTokens = { paddingLeft: INPUT_LEFT_PADDING }
+
     // Setting up the overlay
     const openOverlayRef = useRef()
     const [isExpanded, setIsExpanded] = useState((value ?? initialValue)?.length >= minToSuggestion)
@@ -229,6 +229,7 @@ const Autocomplete = forwardRef(
                 readOnly={readOnly}
                 ref={inputRef}
                 tokens={inputTokens}
+                validation={validation}
                 {...selectedProps}
                 {...props}
                 {...(isControlled ? { value } : { initialValue })}

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -20,7 +20,7 @@ const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, ...rest },
         <ExpandCollapse.Panel
           {...expandProps}
           panelId="ExpandCollapseMiniPanel"
-          isMiniExpandCollapse={true}
+          variant={{ mini: true }}
           controlTokens={{ icon: null }}
           // TODO refactor
           // eslint-disable-next-line react/no-unstable-nested-components

package/src/Footnote/Footnote.jsx

@@ -271,6 +271,10 @@ const Footnote = (props) => {
   // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
   const handleClose = useCallback(
     (event) => {
+      if (!isVisible) {
+        return
+      }
+
       if (event.type === 'keydown') {
         if (event.key === 'Escape' || event.key === 27) {
           closeFootnote(event, { returnFocus: true })
@@ -293,7 +297,7 @@ const Footnote = (props) => {
         closeFootnote(event, { returnFocus: false })
       }
     },
-    [closeFootnote]
+    [closeFootnote, isVisible]
   )
 
   const saveCurrentHeight = () => {
@@ -365,7 +369,7 @@ const Footnote = (props) => {
     }
     return () => {
       if (isOpen) {
-        document.addEventListener('mousedown', handleClose)
+        document.removeEventListener('mousedown', handleClose)
         window.removeEventListener('click', handleClose)
         window.removeEventListener('keydown', handleClose)
         window.removeEventListener('touchstart', handleClose)

package/src/Listbox/ListboxItem.jsx

@@ -53,6 +53,8 @@ const ListboxItem = forwardRef(
       prevItemRef,
       tokens,
       variant = {},
+      LinkRouter,
+      linkRouterProps,
       ...rest
     },
     ref
@@ -94,8 +96,7 @@ ListboxItem.propTypes = {
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
   onPress: PropTypes.func,
-  selected: PropTypes.bool,
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  selected: PropTypes.bool
 }
 
 export default withLinkRouter(ListboxItem)

package/src/Listbox/ListboxOverlay.jsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react'
-import { Card, Portal, useThemeTokens } from '@telus-uds/components-base'
+import { Card, useThemeTokens } from '@telus-uds/components-base'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native-web'
+import WebPortal from '../WebPortal'
 
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -25,7 +26,7 @@ const DropdownOverlay = forwardRef(
     const systemTokens = useThemeTokens('ListBox', {}, {})
 
     return (
-      <Portal>
+      <WebPortal>
         <View
           ref={ref}
           onLayout={onLayout}
@@ -48,7 +49,7 @@ const DropdownOverlay = forwardRef(
             {children}
           </Card>
         </View>
-      </Portal>
+      </WebPortal>
     )
   }
 )

package/src/NavigationBar/NavigationItem.jsx

@@ -5,7 +5,6 @@ import {
   selectSystemProps,
   useResponsiveProp,
   useViewport,
-  withLinkRouter,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
@@ -41,6 +40,8 @@ const NavigationItem = forwardRef(
       href,
       tokens,
       variant = {},
+      LinkRouter,
+      linkRouterProps,
       ...rest
     },
     ref
@@ -61,6 +62,8 @@ const NavigationItem = forwardRef(
           tokens={getStateTokens}
           variant={{ selected }}
           href={href}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
           {...selectedProps}
         >
           {children}
@@ -73,11 +76,10 @@ NavigationItem.displayName = 'NavigationItem'
 
 NavigationItem.propTypes = {
   ...selectedSystemPropTypes,
-  ...withLinkRouter.propTypes,
   onClick: PropTypes.func,
   selected: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
 }
 NavigationItem.defaultProps = { onClick: () => {}, selected: false }
 
-export default withLinkRouter(NavigationItem)
+export default NavigationItem

package/src/Table/Table.jsx

@@ -36,7 +36,7 @@ export const useTableContext = () => useContext(TableContext)
  * - Use `Table.Row` and `Table.Cell` to build up the tabular data
  * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
  */
-const Table = ({ children, fullWidth = false, text = 'medium', tokens, variant, ...rest }) => {
+const Table = ({ children, fullWidth = true, text = 'medium', tokens, variant, ...rest }) => {
   const { tablePaddingBottom } = useThemeTokens('Table', tokens, variant)
   const containerRef = useRef()
   const tableRef = useRef()

package/src/WebPortal/WebPortal.jsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * WebPortal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `WebPortal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const WebPortal = ({ children }) => {
+  const portalContainer = document.createElement('div')
+
+  useEffect(() => {
+    document.body.appendChild(portalContainer)
+
+    return () => {
+      document.body.removeChild(portalContainer)
+    }
+  }, [portalContainer])
+
+  return ReactDOM.createPortal(children, portalContainer)
+}
+
+export default WebPortal

package/src/WebPortal/index.js

@@ -0,0 +1,3 @@
+import WebPortal from './WebPortal'
+
+export default WebPortal

package/src/baseExports.js

@@ -67,5 +67,6 @@ export {
   // Enable access to the viewports system for app-specific responsive layouts and features
   useResponsiveProp,
   useViewport, // TODO reenable ViewportContext once published from base  // enable localised viewport overrides e.g. in tests, narrow columns, etc
-  useCarousel
+  useCarousel,
+  useSetTheme
 } from '@telus-uds/components-base'

package/src/index.js

@@ -37,6 +37,7 @@ export { default as TermsAndConditions } from './TermsAndConditions'
 export { default as NavigationBar } from './NavigationBar'
 export { default as Progress } from './Progress'
 export { default as SkeletonProvider } from './SkeletonProvider'
+export { default as WebPortal } from './WebPortal'
 
 export { ssrStyles } from './utils'