@telus-uds/components-web 4.4.0 → 4.4.2

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 24 Mar 2025 16:24:15 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Apr 2025 19:33:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.4.2
+
+Tue, 08 Apr 2025 19:33:56 GMT
+
+### Patches
+
+- `BlockQuote`: fix component rendering when using RNMQ (guillermo.peitzner@telus.com)
+- `NavigationBar`: tokens propagated through the component to react correctly to overwriting of tokens (35577399+JoshHC@users.noreply.github.com)
+- `Countdown`: fix component render when RNMQ is active (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v3.5.2
+
+## 4.4.1
+
+Fri, 28 Mar 2025 01:02:45 GMT
+
+### Patches
+
+- `DatePicker`: Fix for missing dateformat prop TS definition (sam.obisesan@telus.com)
+- Bump @telus-uds/components-base to v3.5.1
+
 ## 4.4.0
 
-Mon, 24 Mar 2025 16:24:15 GMT
+Mon, 24 Mar 2025 16:30:05 GMT
 
 ### Minor changes
 

package/lib/cjs/BlockQuote/BlockQuote.js

@@ -81,9 +81,10 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     }
   } = (0, _componentsBase.useTheme)();
   const useTokens = enableMediaQueryStyleSheet ? _componentsBase.useResponsiveThemeTokens : _componentsBase.useThemeTokens;
-  const themeTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
+  const resolvedTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens;
   const {
     color,
     paddingTop,
@@ -129,7 +130,7 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       styles
     } = _componentsBase.StyleSheet.create({
       titleHeading: {
-        ...selectTitleHeadingTokens(themeTokens[viewport]),
+        ...selectTitleHeadingTokens(themeTokens),
         ...titleHeadingMediaQueryStyles
       }
     });

package/lib/cjs/Countdown/Countdown.js

@@ -103,9 +103,10 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     enableMediaQueryStyleSheet
   } = themeOptions;
   const useTokens = enableMediaQueryStyleSheet ? _componentsBase.useResponsiveThemeTokens : _componentsBase.useThemeTokens;
-  const themeTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
+  const resolvedTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens;
   const segmentFontSize = themeTokens.textFontSize;
   const semanticGradient = themeTokens.containerGradient && (0, _utils.transformGradient)(themeTokens.containerGradient);
   const mainTextTokens = getMainTextTokens(themeTokens);
@@ -149,15 +150,15 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       styles
     } = _componentsBase.StyleSheet.create({
       label: {
-        ...themeTokens[viewport],
+        ...themeTokens,
         ...labelMediaQueryStyles
       },
       mainText: {
-        ...themeTokens[viewport],
+        ...themeTokens,
         ...mainTestMediaQueryStyles
       },
       container: {
-        ...themeTokens[viewport],
+        ...themeTokens,
         ...containerMediaQueryStyles
       }
     });

package/lib/cjs/NavigationBar/NavigationBar.js

@@ -44,6 +44,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     value,
     LinkRouter,
     linkRouterProps,
+    tokens,
     ...rest
   } = _ref;
   const {
@@ -209,6 +210,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           ...itemLinkRouterProps
         },
         items: scrollableNestedItems,
+        tokens: tokens,
         selected: itemId === currentValue,
         itemsContainerRef: itemsRef,
         ...itemRest,

package/lib/cjs/NavigationBar/NavigationSubMenu.js

@@ -91,7 +91,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   };
   const {
     icoMenu
-  } = (0, _componentsBase.useThemeTokens)('NavigationBar', {}, {}, {
+  } = (0, _componentsBase.useThemeTokens)('NavigationBar', tokens, {}, {
     expanded: isOpen
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/lib/esm/BlockQuote/BlockQuote.js

@@ -74,9 +74,10 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     }
   } = useTheme();
   const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
-  const themeTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
+  const resolvedTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens;
   const {
     color,
     paddingTop,
@@ -122,7 +123,7 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       styles
     } = StyleSheet.create({
       titleHeading: {
-        ...selectTitleHeadingTokens(themeTokens[viewport]),
+        ...selectTitleHeadingTokens(themeTokens),
         ...titleHeadingMediaQueryStyles
       }
     });

package/lib/esm/Countdown/Countdown.js

@@ -95,9 +95,10 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     enableMediaQueryStyleSheet
   } = themeOptions;
   const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
-  const themeTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
+  const resolvedTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens;
   const segmentFontSize = themeTokens.textFontSize;
   const semanticGradient = themeTokens.containerGradient && transformGradient(themeTokens.containerGradient);
   const mainTextTokens = getMainTextTokens(themeTokens);
@@ -141,15 +142,15 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       styles
     } = StyleSheet.create({
       label: {
-        ...themeTokens[viewport],
+        ...themeTokens,
         ...labelMediaQueryStyles
       },
       mainText: {
-        ...themeTokens[viewport],
+        ...themeTokens,
         ...mainTestMediaQueryStyles
       },
       container: {
-        ...themeTokens[viewport],
+        ...themeTokens,
         ...containerMediaQueryStyles
       }
     });

package/lib/esm/NavigationBar/NavigationBar.js

@@ -37,6 +37,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     value,
     LinkRouter,
     linkRouterProps,
+    tokens,
     ...rest
   } = _ref;
   const {
@@ -202,6 +203,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           ...itemLinkRouterProps
         },
         items: scrollableNestedItems,
+        tokens: tokens,
         selected: itemId === currentValue,
         itemsContainerRef: itemsRef,
         ...itemRest,

package/lib/esm/NavigationBar/NavigationSubMenu.js

@@ -86,7 +86,7 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   const {
     icoMenu
-  } = useThemeTokens('NavigationBar', {}, {}, {
+  } = useThemeTokens('NavigationBar', tokens, {}, {
     expanded: isOpen
   });
   return /*#__PURE__*/_jsxs(_Fragment, {

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.5.0",
+    "@telus-uds/components-base": "^3.5.2",
     "@telus-uds/system-constants": "^3.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.4.0"
+  "version": "4.4.2"
 }

package/src/BlockQuote/BlockQuote.jsx

@@ -71,13 +71,14 @@ const BlockQuote = React.forwardRef(
     } = useTheme()
 
     const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
-
-    const themeTokens = useTokens(
+    const resolvedTokens = useTokens(
       'BlockQuote',
       tokens,
       variant,
       !enableMediaQueryStyleSheet && { viewport }
     )
+    const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens
+
     const {
       color,
       paddingTop,
@@ -126,7 +127,7 @@ const BlockQuote = React.forwardRef(
 
       const { ids, styles } = StyleSheet.create({
         titleHeading: {
-          ...selectTitleHeadingTokens(themeTokens[viewport]),
+          ...selectTitleHeadingTokens(themeTokens),
           ...titleHeadingMediaQueryStyles
         }
       })

package/src/Countdown/Countdown.jsx

@@ -93,12 +93,13 @@ const Countdown = React.forwardRef(
     const { enableMediaQueryStyleSheet } = themeOptions
 
     const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
-    const themeTokens = useTokens(
+    const resolvedTokens = useTokens(
       'Countdown',
       tokens,
       variant,
       !enableMediaQueryStyleSheet && { viewport }
     )
+    const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens
 
     const segmentFontSize = themeTokens.textFontSize
     const semanticGradient =
@@ -147,15 +148,15 @@ const Countdown = React.forwardRef(
 
       const { ids, styles } = StyleSheet.create({
         label: {
-          ...themeTokens[viewport],
+          ...themeTokens,
           ...labelMediaQueryStyles
         },
         mainText: {
-          ...themeTokens[viewport],
+          ...themeTokens,
           ...mainTestMediaQueryStyles
         },
         container: {
-          ...themeTokens[viewport],
+          ...themeTokens,
           ...containerMediaQueryStyles
         }
       })

package/src/NavigationBar/NavigationBar.jsx

@@ -41,6 +41,7 @@ const NavigationBar = React.forwardRef(
       value,
       LinkRouter,
       linkRouterProps,
+      tokens,
       ...rest
     },
     ref
@@ -218,6 +219,7 @@ const NavigationBar = React.forwardRef(
                 LinkRouter={ItemLinkRouter}
                 linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
                 items={scrollableNestedItems}
+                tokens={tokens}
                 selected={itemId === currentValue}
                 itemsContainerRef={itemsRef}
                 {...itemRest}

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -61,7 +61,7 @@ const NavigationSubMenu = React.forwardRef(
       if (typeof onClick === 'function') onClick(event)
     }
 
-    const { icoMenu } = useThemeTokens('NavigationBar', {}, {}, { expanded: isOpen })
+    const { icoMenu } = useThemeTokens('NavigationBar', tokens, {}, { expanded: isOpen })
 
     return (
       <>

package/types/DatePicker.d.ts

@@ -15,6 +15,7 @@ export interface DatePickerProps extends HTMLAttrs {
   tooltip?: string
   validation?: 'error' | 'success'
   disabled?: boolean
+  dateFormat?: string
 }
 
 declare const DatePicker: ComponentType<DatePickerProps>