@telus-uds/components-web 2.31.5 → 2.32.1

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 06 Mar 2024 00:02:37 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:26:51 GMT
+
+### Minor changes
+
+- Changes to enable the new variants for Footnote.Link (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.80.0
+
+### Patches
+
+- Make `WebPortal` SSR compliant and use it in `DatePicker` instead of `Portal` from `@gorhom/portal` (shahzaibkhalidmalik@outlook.com)
+
 ## 2.31.5
 
-Wed, 06 Mar 2024 00:02:37 GMT
+Wed, 06 Mar 2024 00:09:16 GMT
 
 ### Patches
 

package/lib/DatePicker/DatePicker.js

@@ -125,7 +125,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   });
   (0, _componentsBase.useSafeLayoutEffect)(() => {
     const updateDimensions = () => {
-      if (inline) return;
+      if (inline || !textInputRef.current) return;
       const {
         left,
         top
@@ -138,7 +138,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     const throttledUpdateDimensions = (0, _lodash.throttle)(updateDimensions, 100, {
       leading: false
     });
-    updateDimensions();
+    throttledUpdateDimensions();
     window.addEventListener('resize', throttledUpdateDimensions);
     return () => window.removeEventListener('resize', throttledUpdateDimensions);
   }, []);

package/lib/Footnote/FootnoteLink.js

@@ -30,7 +30,7 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
     cursor: 'pointer',
     // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
     fontSize: fontSize ? `${fontSize}px` : 'smaller',
-    lineHeight: `${fontSize * lineHeight}px`,
+    lineHeight: lineHeight ?? `${fontSize * 2}px`,
     margin: 0,
     paddingVertical: 0,
     paddingLeft,
@@ -90,7 +90,7 @@ const FootnoteLink = _ref2 => {
       tabIndex: 0,
       ...selectProps(rest),
       ...themeTokens,
-      fontSize: fontSize,
+      fontSize: fontSize ?? themeTokens.fontSize,
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });
@@ -100,6 +100,7 @@ const copyShape = _propTypes.default.shape({
 });
 FootnoteLink.propTypes = {
   ...selectedSystemPropTypes,
+  variant: _componentsBase.variantProp.propType,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the key `a11yLabel`.

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,7 +5,7 @@ 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, Portal, 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';
@@ -118,7 +118,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      if (inline) return;
+      if (inline || !textInputRef.current) return;
       const {
         left,
         top
@@ -131,7 +131,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     const throttledUpdateDimensions = throttle(updateDimensions, 100, {
       leading: false
     });
-    updateDimensions();
+    throttledUpdateDimensions();
     window.addEventListener('resize', throttledUpdateDimensions);
     return () => window.removeEventListener('resize', throttledUpdateDimensions);
   }, []);

package/lib-module/Footnote/FootnoteLink.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens } from '@telus-uds/components-base';
+import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens, variantProp } from '@telus-uds/components-base';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,7 +24,7 @@ const StyledSup = /*#__PURE__*/styled.sup.withConfig({
     cursor: 'pointer',
     // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
     fontSize: fontSize ? `${fontSize}px` : 'smaller',
-    lineHeight: `${fontSize * lineHeight}px`,
+    lineHeight: lineHeight ?? `${fontSize * 2}px`,
     margin: 0,
     paddingVertical: 0,
     paddingLeft,
@@ -84,7 +84,7 @@ const FootnoteLink = _ref2 => {
       tabIndex: 0,
       ...selectProps(rest),
       ...themeTokens,
-      fontSize: fontSize,
+      fontSize: fontSize ?? themeTokens.fontSize,
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });
@@ -94,6 +94,7 @@ const copyShape = PropTypes.shape({
 });
 FootnoteLink.propTypes = {
   ...selectedSystemPropTypes,
+  variant: variantProp.propType,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the key `a11yLabel`.

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.79.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.31.5"
+  "version": "2.32.1"
 }

package/src/DatePicker/DatePicker.jsx

@@ -8,13 +8,13 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
 import {
   IconButton,
   TextInput,
+  Portal,
   selectSystemProps,
   useCopy,
   useViewport,
   useThemeTokens,
   applyTextStyles,
   getTokensPropType,
-  Portal,
   useSafeLayoutEffect
 } from '@telus-uds/components-base'
 import moment from 'moment'
@@ -110,7 +110,7 @@ const DatePicker = forwardRef(
 
     useSafeLayoutEffect(() => {
       const updateDimensions = () => {
-        if (inline) return
+        if (inline || !textInputRef.current) return
         const { left, top } = textInputRef.current.getBoundingClientRect()
         setDatePickerPosition({
           left,
@@ -118,7 +118,7 @@ const DatePicker = forwardRef(
         })
       }
       const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
-      updateDimensions()
+      throttledUpdateDimensions()
       window.addEventListener('resize', throttledUpdateDimensions)
       return () => window.removeEventListener('resize', throttledUpdateDimensions)
     }, [])

package/src/Footnote/FootnoteLink.jsx

@@ -5,7 +5,8 @@ import {
   applyTextStyles,
   selectSystemProps,
   useCopy,
-  useThemeTokens
+  useThemeTokens,
+  variantProp
 } from '@telus-uds/components-base'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
@@ -20,7 +21,7 @@ const StyledSup = styled.sup(
       cursor: 'pointer',
       // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
       fontSize: fontSize ? `${fontSize}px` : 'smaller',
-      lineHeight: `${fontSize * lineHeight}px`,
+      lineHeight: lineHeight ?? `${fontSize * 2}px`,
       margin: 0,
       paddingVertical: 0,
       paddingLeft,
@@ -83,7 +84,7 @@ const FootnoteLink = ({
           tabIndex={0}
           {...selectProps(rest)}
           {...themeTokens}
-          fontSize={fontSize}
+          fontSize={fontSize ?? themeTokens.fontSize}
         >
           {`${num}${index !== numbers.length - 1 ? ',' : ''}`}
         </StyledSup>
@@ -98,6 +99,7 @@ const copyShape = PropTypes.shape({
 
 FootnoteLink.propTypes = {
   ...selectedSystemPropTypes,
+  variant: variantProp.propType,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the key `a11yLabel`.

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,42 +0,0 @@
-"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

@@ -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,35 +0,0 @@
-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

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

package/src/WebPortal/WebPortal.jsx

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

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