@telus-uds/components-web 2.32.0 → 2.32.1

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 12 Mar 2024 22:22:38 GMT and should not be manually modified.
+This log was last generated on Tue, 19 Mar 2024 18:37:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.32.1
+
+Tue, 19 Mar 2024 18:37:02 GMT
+
+### Patches
+
+- `Autocomplete`: Overlay does not render next to `TextInput` (shahzaibkhalidmalik@outlook.com)
+- `NavigationBar`: overlay may render on top of toggle button in smaller viewports (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.80.1
+
 ## 2.32.0
 
-Tue, 12 Mar 2024 22:22:38 GMT
+Tue, 12 Mar 2024 22:26:51 GMT
 
 ### Minor changes
 

package/lib/DatePicker/DatePicker.js

@@ -17,7 +17,6 @@ var _lodash = require("lodash");
 var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _utils = require("../utils");
-var _WebPortal = _interopRequireDefault(require("../WebPortal"));
 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); }
@@ -329,7 +328,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         validation: validation,
         inactive: disabled,
         ref: textInputRef,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebPortal.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,

package/lib/NavigationBar/NavigationSubMenu.js

@@ -33,33 +33,38 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
   } = _ref;
   const focusTrapRef = (0, _react.useRef)();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
+  const defaultOffsets = {
+    offsets: {
+      vertical: 4
+    }
+  };
   const {
     align,
     offsets,
     minWidth
   } = (0, _componentsBase.useResponsiveProp)({
     xs: {
+      ...defaultOffsets,
       align: {
-        top: 'top',
+        top: 'bottom',
         left: 'left'
       },
       minWidth: maxWidth
     },
     sm: {
+      ...defaultOffsets,
       align: {
-        top: 'top',
+        top: 'bottom',
         right: 'right'
       },
       minWidth: maxWidth
     },
     lg: {
+      ...defaultOffsets,
       align: {
         top: 'bottom',
         center: 'center'
       },
-      offsets: {
-        vertical: 4
-      },
       minWidth: 192
     }
   });

package/lib/baseExports.js

@@ -177,6 +177,12 @@ Object.defineProperty(exports, "Pagination", {
     return _componentsBase.Pagination;
   }
 });
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Portal;
+  }
+});
 Object.defineProperty(exports, "QuickLinks", {
   enumerable: true,
   get: function () {
@@ -357,6 +363,12 @@ Object.defineProperty(exports, "ViewportProvider", {
     return _componentsBase.ViewportProvider;
   }
 });
+Object.defineProperty(exports, "WebPortal", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Portal;
+  }
+});
 Object.defineProperty(exports, "useCarousel", {
   enumerable: true,
   get: function () {

package/lib/index.js

@@ -42,8 +42,7 @@ var _exportNames = {
   TermsAndConditions: true,
   NavigationBar: true,
   Progress: true,
-  SkeletonProvider: true,
-  WebPortal: true
+  SkeletonProvider: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -255,12 +254,6 @@ 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 () {
@@ -315,7 +308,6 @@ var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions")
 var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
 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) {
   if (key === "default" || key === "__esModule") return;

package/lib-module/DatePicker/DatePicker.js

@@ -5,13 +5,12 @@ import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, useSafeLayoutEffect } from '@telus-uds/components-base';
+import { IconButton, TextInput, Portal, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, useSafeLayoutEffect } from '@telus-uds/components-base';
 import moment from 'moment';
 import { isUndefined, throttle } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
-import WebPortal from '../WebPortal';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -322,7 +321,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         validation: validation,
         inactive: disabled,
         ref: textInputRef,
-        children: /*#__PURE__*/_jsx(WebPortal, {
+        children: /*#__PURE__*/_jsx(Portal, {
           children: /*#__PURE__*/_jsx(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -28,33 +28,38 @@ const NavigationSubMenu = _ref => {
   } = _ref;
   const focusTrapRef = useRef();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
+  const defaultOffsets = {
+    offsets: {
+      vertical: 4
+    }
+  };
   const {
     align,
     offsets,
     minWidth
   } = useResponsiveProp({
     xs: {
+      ...defaultOffsets,
       align: {
-        top: 'top',
+        top: 'bottom',
         left: 'left'
       },
       minWidth: maxWidth
     },
     sm: {
+      ...defaultOffsets,
       align: {
-        top: 'top',
+        top: 'bottom',
         right: 'right'
       },
       minWidth: maxWidth
     },
     lg: {
+      ...defaultOffsets,
       align: {
         top: 'bottom',
         center: 'center'
       },
-      offsets: {
-        vertical: 4
-      },
       minWidth: 192
     }
   });

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.
@@ -13,4 +13,7 @@ A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoPr
 // 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, useSetTheme } from '@telus-uds/components-base';
+useCarousel, useSetTheme } from '@telus-uds/components-base';
+
+// TODO: Added `WebPortal` alias for backwards compatibility with `Portal` from `@telus-uds/components-base`. Remove in next major version.
+export { Portal as WebPortal } from '@telus-uds/components-base';

package/lib-module/index.js

@@ -36,6 +36,5 @@ 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,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.80.0",
+    "@telus-uds/components-base": "1.80.1",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.32.0"
+  "version": "2.32.1"
 }

package/src/DatePicker/DatePicker.jsx

@@ -8,6 +8,7 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
 import {
   IconButton,
   TextInput,
+  Portal,
   selectSystemProps,
   useCopy,
   useViewport,
@@ -21,7 +22,6 @@ import { isUndefined, throttle } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
-import WebPortal from '../WebPortal'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 const dateFormat = 'DD / MM / YYYY'
@@ -294,7 +294,7 @@ const DatePicker = forwardRef(
               inactive={disabled}
               ref={textInputRef}
             >
-              <WebPortal>
+              <Portal>
                 {/* Because `SingleDatePicker` is an absolutely positioned element,
                  * putting it in a `Portal` breaks view heirarchy because it doesn't
                  * align with `TextInput`, but rather position itself with the nearest
@@ -359,7 +359,7 @@ const DatePicker = forwardRef(
                     />
                   </CalendarContainer>
                 </PortalPositionedContainer>
-              </WebPortal>
+              </Portal>
             </TextInput>
           </DateInputWrapper>
         )}

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -25,12 +25,13 @@ const NavigationSubMenu = ({
   const focusTrapRef = useRef()
 
   const maxWidth = 289 // Slightly over 288 of nav item to account for subpixel rounding
+  const defaultOffsets = { offsets: { vertical: 4 } }
   const { align, offsets, minWidth } = useResponsiveProp({
-    xs: { align: { top: 'top', left: 'left' }, minWidth: maxWidth },
-    sm: { align: { top: 'top', right: 'right' }, minWidth: maxWidth },
+    xs: { ...defaultOffsets, align: { top: 'bottom', left: 'left' }, minWidth: maxWidth },
+    sm: { ...defaultOffsets, align: { top: 'bottom', right: 'right' }, minWidth: maxWidth },
     lg: {
+      ...defaultOffsets,
       align: { top: 'bottom', center: 'center' },
-      offsets: { vertical: 4 },
       minWidth: 192
     }
   })

package/src/baseExports.js

@@ -36,6 +36,7 @@ export {
   MultiSelectFilter,
   Notification,
   Pagination,
+  Portal,
   QuickLinks,
   QuickLinksFeature,
   Radio,
@@ -74,3 +75,6 @@ export {
   useCarousel,
   useSetTheme
 } from '@telus-uds/components-base'
+
+// TODO: Added `WebPortal` alias for backwards compatibility with `Portal` from `@telus-uds/components-base`. Remove in next major version.
+export { Portal as WebPortal } from '@telus-uds/components-base'

package/src/index.js

@@ -36,7 +36,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'
 

package/lib/WebPortal/WebPortal.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-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, setPortalContainer] = (0, _react.useState)(null);
-  (0, _react.useEffect)(() => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    setPortalContainer(container);
-    return () => {
-      if (container && container.parentNode) {
-        container.parentNode.removeChild(container);
-      }
-    };
-  }, []);
-  if (!portalContainer) return null;
-  return /*#__PURE__*/_reactDom.default.createPortal(children, portalContainer);
-};
-WebPortal.propTypes = {
-  children: _propTypes.default.node.isRequired
-};
-var _default = WebPortal;
-exports.default = _default;

package/lib/WebPortal/index.js

@@ -1,10 +0,0 @@
-"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-module/WebPortal/WebPortal.js

@@ -1,44 +0,0 @@
-import { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-/**
- * 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, setPortalContainer] = useState(null);
-  useEffect(() => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    setPortalContainer(container);
-    return () => {
-      if (container && container.parentNode) {
-        container.parentNode.removeChild(container);
-      }
-    };
-  }, []);
-  if (!portalContainer) return null;
-  return /*#__PURE__*/ReactDOM.createPortal(children, portalContainer);
-};
-WebPortal.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default WebPortal;

package/lib-module/WebPortal/index.js

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

package/src/WebPortal/WebPortal.jsx

@@ -1,47 +0,0 @@
-import { useState, useEffect } from 'react'
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-
-/**
- * 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, setPortalContainer] = useState(null)
-
-  useEffect(() => {
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    setPortalContainer(container)
-
-    return () => {
-      if (container && container.parentNode) {
-        container.parentNode.removeChild(container)
-      }
-    }
-  }, [])
-
-  if (!portalContainer) return null
-
-  return ReactDOM.createPortal(children, portalContainer)
-}
-
-WebPortal.propTypes = {
-  children: PropTypes.node.isRequired
-}
-
-export default WebPortal

package/src/WebPortal/index.js

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