@telus-uds/components-web 2.33.0 → 2.33.2

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 05 Apr 2024 17:10:34 GMT and should not be manually modified.
+This log was last generated on Mon, 06 May 2024 16:33:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.33.2
+
+Mon, 06 May 2024 16:33:57 GMT
+
+### Patches
+
+- Bug fixed for Terms and Conditions component, the component added extra padding to the page when the content exceed the mean height and overflows the container  (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.84.0
+- Bump @telus-uds/system-theme-tokens to v2.55.0
+
+## 2.33.1
+
+Wed, 24 Apr 2024 16:35:16 GMT
+
+### Patches
+
+- DatePicker visual inconsistency fixed: when the selected date was outside the actual month, the date was highlighted in the calendar but the calendar still appeared in the actual month instead of the correct month. (35577399+JoshHC@users.noreply.github.com)
+- vertical position fixed for the calendar in datepicker when scrolling (35577399+JoshHC@users.noreply.github.com)
+- `NavigationSubMenu:` fix proptype (guillermo.peitzner@telus.com)
+- `NavigationBar:` close menus when clicking outside the component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.83.0
+
 ## 2.33.0
 
-Fri, 05 Apr 2024 17:10:34 GMT
+Fri, 05 Apr 2024 17:16:24 GMT
 
 ### Minor changes
 

package/lib/DatePicker/DatePicker.js

@@ -131,9 +131,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         left,
         top
       } = textInputRef.current.getBoundingClientRect();
+      const inputTop = top + window.scrollY;
       setDatePickerPosition({
         left,
-        top: top + textInputRef.current.offsetHeight
+        top: inputTop + textInputRef.current.offsetHeight
       });
     };
     const throttledUpdateDimensions = (0, _lodash.throttle)(updateDimensions, 100, {
@@ -308,7 +309,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
           date: inputDate,
           onDateChange: onChange,
-          focused: isFocused,
+          focused: inputDate ?? isFocused,
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,

package/lib/NavigationBar/NavigationBar.js

@@ -70,27 +70,49 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setOpenSubMenuId(null);
     }
   };
+  const navRefDefault = (0, _react.useRef)(null);
+  const navRef = ref ?? navRefDefault;
+  const itemsRef = (0, _react.useRef)(null);
+
+  // Close the submenu when the user clicks outside the navigation bar
+  const handleMouseDown = (0, _react.useCallback)(event => {
+    if (navRef.current && itemsRef.current) {
+      // Get the bounding rectangles of the navigation bar and the items container
+      const navRect = navRef.current.getBoundingClientRect();
+      const itemsRect = itemsRef.current.getBoundingClientRect();
+
+      // Check if the click was outside the navigation bar and the items container
+      const isOutsideNav = event.clientX < navRect.left || event.clientX > navRect.right || event.clientY < navRect.top || event.clientY > navRect.bottom;
+      const isOutsideItems = event.clientX < itemsRect.left || event.clientX > itemsRect.right || event.clientY < itemsRect.top || event.clientY > itemsRect.bottom;
+      if (isOutsideNav && isOutsideItems) {
+        setOpenSubMenuId(null);
+      }
+    }
+  }, [navRef, itemsRef, setOpenSubMenuId]);
 
-  // Add listeners for mouse clicks outside and for ESCAPE key presses
   // TODO: create a custom hook for that and use here and in the Footnote
   (0, _react.useEffect)(() => {
+    // Add listeners for mouse clicks outside and for key presses
+    document.addEventListener('mousedown', handleMouseDown);
     if (openSubMenuId !== null) {
       window.addEventListener('click', handleSubMenuClose);
       window.addEventListener('keydown', handleSubMenuClose);
       window.addEventListener('touchstart', handleSubMenuClose);
     }
     return () => {
+      // Remove listeners when the component is unmounted
+      document.removeEventListener('mousedown', handleMouseDown);
       if (openSubMenuId !== null) {
         window.removeEventListener('click', handleSubMenuClose);
         window.removeEventListener('keydown', handleSubMenuClose);
         window.removeEventListener('touchstart', handleSubMenuClose);
       }
     };
-  }, [openSubMenuId]);
+  }, [openSubMenuId, handleMouseDown]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
     accessibilityRole: accessibilityRole,
     direction: direction,
-    ref: ref,
+    ref: navRef,
     space: 2,
     tokens: {
       alignItems: direction === 'column' ? 'flex-start' : 'center',
@@ -142,6 +164,7 @@ const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         },
         items: nestedItems,
         selected: itemId === selectedId,
+        itemsContainerRef: itemsRef,
         ...itemRest,
         ...(nestedItems && {
           isOpen

package/lib/NavigationBar/NavigationSubMenu.js

@@ -29,7 +29,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     items = [],
     openOverlayRef,
     LinkRouter,
-    linkRouterProps
+    linkRouterProps,
+    itemsContainerRef
   } = _ref;
   const focusTrapRef = (0, _react.useRef)();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
@@ -131,7 +132,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
           parentRef: sourceRef,
           selectedId: selectedId,
           LinkRouter: LinkRouter,
-          linkRouterProps: linkRouterProps
+          linkRouterProps: linkRouterProps,
+          ref: itemsContainerRef
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         // This catches and shifts focus to other interactive elements.
@@ -156,7 +158,8 @@ NavigationSubMenu.propTypes = {
   items: _propTypes.default.array,
   openOverlayRef: _propTypes.default.object,
   LinkRouter: _propTypes.default.elementType,
-  linkRouterProps: _propTypes.default.object
+  linkRouterProps: _propTypes.default.object,
+  itemsContainerRef: _propTypes.default.object
 };
 var _default = NavigationSubMenu;
 exports.default = _default;

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -97,6 +97,10 @@ const NonIndexedContentTitle = /*#__PURE__*/_styledComponents.default.div.withCo
     paddingLeft: tokens.titlePaddingLeft
   };
 });
+const MainContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "TermsAndConditions__MainContainer",
+  componentId: "components-web__sc-1199epn-5"
+})(["overflow:hidden;"]);
 
 /**
  * Use `TermsAndConditions` to display important legal content.
@@ -127,7 +131,7 @@ const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const themeTokens = (0, _componentsBase.useThemeTokens)('TermsAndConditions', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MainContainer, {
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
       tokens: {

package/lib-module/DatePicker/DatePicker.js

@@ -124,9 +124,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         left,
         top
       } = textInputRef.current.getBoundingClientRect();
+      const inputTop = top + window.scrollY;
       setDatePickerPosition({
         left,
-        top: top + textInputRef.current.offsetHeight
+        top: inputTop + textInputRef.current.offsetHeight
       });
     };
     const throttledUpdateDimensions = throttle(updateDimensions, 100, {
@@ -301,7 +302,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           date: inputDate,
           onDateChange: onChange,
-          focused: isFocused,
+          focused: inputDate ?? isFocused,
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,

package/lib-module/NavigationBar/NavigationBar.js

@@ -1,5 +1,5 @@
 var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
@@ -62,27 +62,49 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
       setOpenSubMenuId(null);
     }
   };
+  const navRefDefault = useRef(null);
+  const navRef = ref ?? navRefDefault;
+  const itemsRef = useRef(null);
+
+  // Close the submenu when the user clicks outside the navigation bar
+  const handleMouseDown = useCallback(event => {
+    if (navRef.current && itemsRef.current) {
+      // Get the bounding rectangles of the navigation bar and the items container
+      const navRect = navRef.current.getBoundingClientRect();
+      const itemsRect = itemsRef.current.getBoundingClientRect();
+
+      // Check if the click was outside the navigation bar and the items container
+      const isOutsideNav = event.clientX < navRect.left || event.clientX > navRect.right || event.clientY < navRect.top || event.clientY > navRect.bottom;
+      const isOutsideItems = event.clientX < itemsRect.left || event.clientX > itemsRect.right || event.clientY < itemsRect.top || event.clientY > itemsRect.bottom;
+      if (isOutsideNav && isOutsideItems) {
+        setOpenSubMenuId(null);
+      }
+    }
+  }, [navRef, itemsRef, setOpenSubMenuId]);
 
-  // Add listeners for mouse clicks outside and for ESCAPE key presses
   // TODO: create a custom hook for that and use here and in the Footnote
   useEffect(() => {
+    // Add listeners for mouse clicks outside and for key presses
+    document.addEventListener('mousedown', handleMouseDown);
     if (openSubMenuId !== null) {
       window.addEventListener('click', handleSubMenuClose);
       window.addEventListener('keydown', handleSubMenuClose);
       window.addEventListener('touchstart', handleSubMenuClose);
     }
     return () => {
+      // Remove listeners when the component is unmounted
+      document.removeEventListener('mousedown', handleMouseDown);
       if (openSubMenuId !== null) {
         window.removeEventListener('click', handleSubMenuClose);
         window.removeEventListener('keydown', handleSubMenuClose);
         window.removeEventListener('touchstart', handleSubMenuClose);
       }
     };
-  }, [openSubMenuId]);
+  }, [openSubMenuId, handleMouseDown]);
   return /*#__PURE__*/_jsxs(StackView, {
     accessibilityRole: accessibilityRole,
     direction: direction,
-    ref: ref,
+    ref: navRef,
     space: 2,
     tokens: {
       alignItems: direction === 'column' ? 'flex-start' : 'center',
@@ -134,6 +156,7 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
         },
         items: nestedItems,
         selected: itemId === selectedId,
+        itemsContainerRef: itemsRef,
         ...itemRest,
         ...(nestedItems && {
           isOpen

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -24,7 +24,8 @@ const NavigationSubMenu = _ref => {
     items = [],
     openOverlayRef,
     LinkRouter,
-    linkRouterProps
+    linkRouterProps,
+    itemsContainerRef
   } = _ref;
   const focusTrapRef = useRef();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
@@ -126,7 +127,8 @@ const NavigationSubMenu = _ref => {
           parentRef: sourceRef,
           selectedId: selectedId,
           LinkRouter: LinkRouter,
-          linkRouterProps: linkRouterProps
+          linkRouterProps: linkRouterProps,
+          ref: itemsContainerRef
         })
       }), /*#__PURE__*/_jsx("div", {
         // This catches and shifts focus to other interactive elements.
@@ -151,6 +153,7 @@ NavigationSubMenu.propTypes = {
   items: PropTypes.array,
   openOverlayRef: PropTypes.object,
   LinkRouter: PropTypes.elementType,
-  linkRouterProps: PropTypes.object
+  linkRouterProps: PropTypes.object,
+  itemsContainerRef: PropTypes.object
 };
 export default NavigationSubMenu;

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -89,6 +89,10 @@ const NonIndexedContentTitle = /*#__PURE__*/styled.div.withConfig({
     paddingLeft: tokens.titlePaddingLeft
   };
 });
+const MainContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TermsAndConditions__MainContainer",
+  componentId: "components-web__sc-1199epn-5"
+})(["overflow:hidden;"]);
 
 /**
  * Use `TermsAndConditions` to display important legal content.
@@ -119,7 +123,7 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
   const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(MainContainer, {
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Divider, {
       tokens: {

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.82.0",
+    "@telus-uds/components-base": "1.84.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.54.0",
+    "@telus-uds/system-theme-tokens": "^2.55.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.33.0"
+  "version": "2.33.2"
 }

package/src/DatePicker/DatePicker.jsx

@@ -114,9 +114,10 @@ const DatePicker = forwardRef(
       const updateDimensions = () => {
         if (inline || !textInputRef.current) return
         const { left, top } = textInputRef.current.getBoundingClientRect()
+        const inputTop = top + window.scrollY
         setDatePickerPosition({
           left,
-          top: top + textInputRef.current.offsetHeight
+          top: inputTop + textInputRef.current.offsetHeight
         })
       }
       const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
@@ -282,7 +283,7 @@ const DatePicker = forwardRef(
               <DayPickerSingleDateController
                 date={inputDate}
                 onDateChange={onChange}
-                focused={isFocused}
+                focused={inputDate ?? isFocused}
                 onFocusChange={onFocusChange}
                 numberOfMonths={1}
                 hideKeyboardShortcutsPanel={true}

package/src/NavigationBar/NavigationBar.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import {
   selectSystemProps,
@@ -69,28 +69,66 @@ const NavigationBar = forwardRef(
       }
     }
 
-    // Add listeners for mouse clicks outside and for ESCAPE key presses
+    const navRefDefault = useRef(null)
+    const navRef = ref ?? navRefDefault
+    const itemsRef = useRef(null)
+
+    // Close the submenu when the user clicks outside the navigation bar
+    const handleMouseDown = useCallback(
+      (event) => {
+        if (navRef.current && itemsRef.current) {
+          // Get the bounding rectangles of the navigation bar and the items container
+          const navRect = navRef.current.getBoundingClientRect()
+          const itemsRect = itemsRef.current.getBoundingClientRect()
+
+          // Check if the click was outside the navigation bar and the items container
+          const isOutsideNav =
+            event.clientX < navRect.left ||
+            event.clientX > navRect.right ||
+            event.clientY < navRect.top ||
+            event.clientY > navRect.bottom
+
+          const isOutsideItems =
+            event.clientX < itemsRect.left ||
+            event.clientX > itemsRect.right ||
+            event.clientY < itemsRect.top ||
+            event.clientY > itemsRect.bottom
+
+          if (isOutsideNav && isOutsideItems) {
+            setOpenSubMenuId(null)
+          }
+        }
+      },
+      [navRef, itemsRef, setOpenSubMenuId]
+    )
+
     // TODO: create a custom hook for that and use here and in the Footnote
     useEffect(() => {
+      // Add listeners for mouse clicks outside and for key presses
+      document.addEventListener('mousedown', handleMouseDown)
+
       if (openSubMenuId !== null) {
         window.addEventListener('click', handleSubMenuClose)
         window.addEventListener('keydown', handleSubMenuClose)
         window.addEventListener('touchstart', handleSubMenuClose)
       }
       return () => {
+        // Remove listeners when the component is unmounted
+        document.removeEventListener('mousedown', handleMouseDown)
+
         if (openSubMenuId !== null) {
           window.removeEventListener('click', handleSubMenuClose)
           window.removeEventListener('keydown', handleSubMenuClose)
           window.removeEventListener('touchstart', handleSubMenuClose)
         }
       }
-    }, [openSubMenuId])
+    }, [openSubMenuId, handleMouseDown])
 
     return (
       <StackView
         accessibilityRole={accessibilityRole}
         direction={direction}
-        ref={ref}
+        ref={navRef}
         space={2}
         tokens={{
           alignItems: direction === 'column' ? 'flex-start' : 'center',
@@ -145,6 +183,7 @@ const NavigationBar = forwardRef(
                 linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
                 items={nestedItems}
                 selected={itemId === selectedId}
+                itemsContainerRef={itemsRef}
                 {...itemRest}
                 {...(nestedItems && { isOpen })}
                 {...(nestedItems && isOpen && { openOverlayRef })}

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -20,7 +20,8 @@ const NavigationSubMenu = ({
   items = [],
   openOverlayRef,
   LinkRouter,
-  linkRouterProps
+  linkRouterProps,
+  itemsContainerRef
 }) => {
   const focusTrapRef = useRef()
 
@@ -86,6 +87,7 @@ const NavigationSubMenu = ({
               selectedId={selectedId}
               LinkRouter={LinkRouter}
               linkRouterProps={linkRouterProps}
+              ref={itemsContainerRef}
             />
           </Listbox.Overlay>
           <div
@@ -114,7 +116,8 @@ NavigationSubMenu.propTypes = {
   items: PropTypes.array,
   openOverlayRef: PropTypes.object,
   LinkRouter: PropTypes.elementType,
-  linkRouterProps: PropTypes.object
+  linkRouterProps: PropTypes.object,
+  itemsContainerRef: PropTypes.object
 }
 
 export default NavigationSubMenu

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -63,6 +63,10 @@ const NonIndexedContentTitle = styled.div(({ tokens }) => ({
   paddingLeft: tokens.titlePaddingLeft
 }))
 
+const MainContainer = styled.div`
+  overflow: hidden;
+`
+
 /**
  * Use `TermsAndConditions` to display important legal content.
  *
@@ -93,7 +97,7 @@ const TermsAndConditions = forwardRef(
     const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, { viewport })
 
     return (
-      <div {...selectProps(rest)}>
+      <MainContainer {...selectProps(rest)}>
         <Divider tokens={{ color: themeTokens.dividerColor }} />
         <ExpandCollapse
           collapseTitle={getCopy('headingView')}
@@ -140,7 +144,7 @@ const TermsAndConditions = forwardRef(
           </ContentContainer>
         </ExpandCollapse>
         <Divider tokens={{ color: themeTokens.dividerColor }} />
-      </div>
+      </MainContainer>
     )
   }
 )