@telus-uds/components-web 2.33.0 → 2.33.1

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # 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 Wed, 24 Apr 2024 16:28:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.33.1
+
+Wed, 24 Apr 2024 16:28:55 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-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/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.82.0",
+    "@telus-uds/components-base": "1.83.0",
     "@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.33.0"
+  "version": "2.33.1"
 }

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