@telus-uds/components-base 1.82.0 → 1.83.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @telus-uds/components-base
 
-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 -->
 
+## 1.83.0
+
+Wed, 24 Apr 2024 16:28:55 GMT
+
+### Minor changes
+
+- Radio: Allow React node along with string labels for label prop (35577399+JoshHC@users.noreply.github.com)
+- `Listbox:` add ref prop (guillermo.peitzner@telus.com)
+
+### Patches
+
+- Notification: fix justify-content not being reflected. (evander.owusu@telus.com)
+
 ## 1.82.0
 
-Fri, 05 Apr 2024 17:10:34 GMT
+Fri, 05 Apr 2024 17:16:24 GMT
 
 ### Minor changes
 

package/lib/Listbox/Listbox.js

@@ -27,7 +27,7 @@ const styles = _StyleSheet.default.create({
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = _ref => {
+const Listbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -106,6 +106,7 @@ const Listbox = _ref => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
       initialOpen: initialOpen,
       maxOpen: 1,
+      ref: ref,
       children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [styles.list, {
           minHeight,
@@ -121,9 +122,9 @@ const Listbox = _ref => {
           const itemId = id ?? label;
 
           // Give the list of refs.
-          const itemRef = ref => {
-            itemRefs.current[index] = ref;
-            return ref;
+          const itemRef = currentItemRef => {
+            itemRefs.current[index] = currentItemRef;
+            return currentItemRef;
           };
           return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, {
             ...item,
@@ -148,7 +149,8 @@ const Listbox = _ref => {
       })
     })
   });
-};
+});
+Listbox.displayName = 'Listbox';
 Listbox.propTypes = {
   ..._utils.withLinkRouter.propTypes,
   tokens: (0, _utils.getTokensPropType)('Listbox'),

package/lib/Notification/Notification.js

@@ -72,7 +72,7 @@ const selectDismissButtonContainerStyles = _ref4 => {
   };
 };
 const selectContentContainerStyle = maxWidth => ({
-  width: maxWidth || '100%'
+  maxWidth: maxWidth || '100%'
 });
 const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {

package/lib/Radio/Radio.js

@@ -248,7 +248,7 @@ Radio.propTypes = {
   /**
    * The label.
    */
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   /**
    * Associate this radio button with a group (set as the name attribute).
    */

package/lib-module/Listbox/Listbox.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = _ref => {
+const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -98,6 +98,7 @@ const Listbox = _ref => {
     children: /*#__PURE__*/_jsx(ExpandCollapse, {
       initialOpen: initialOpen,
       maxOpen: 1,
+      ref: ref,
       children: expandProps => /*#__PURE__*/_jsx(View, {
         style: [styles.list, {
           minHeight,
@@ -113,9 +114,9 @@ const Listbox = _ref => {
           const itemId = id ?? label;
 
           // Give the list of refs.
-          const itemRef = ref => {
-            itemRefs.current[index] = ref;
-            return ref;
+          const itemRef = currentItemRef => {
+            itemRefs.current[index] = currentItemRef;
+            return currentItemRef;
           };
           return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, {
             ...item,
@@ -140,7 +141,8 @@ const Listbox = _ref => {
       })
     })
   });
-};
+});
+Listbox.displayName = 'Listbox';
 Listbox.propTypes = {
   ...withLinkRouter.propTypes,
   tokens: getTokensPropType('Listbox'),

package/lib-module/Notification/Notification.js

@@ -64,7 +64,7 @@ const selectDismissButtonContainerStyles = _ref4 => {
   };
 };
 const selectContentContainerStyle = maxWidth => ({
-  width: maxWidth || '100%'
+  maxWidth: maxWidth || '100%'
 });
 const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {

package/lib-module/Radio/Radio.js

@@ -240,7 +240,7 @@ Radio.propTypes = {
   /**
    * The label.
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Associate this radio button with a group (set as the name attribute).
    */

package/package.json

@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.82.0",
+  "version": "1.83.0",
   "types": "types/index.d.ts"
 }

package/src/Listbox/Listbox.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -25,119 +25,126 @@ const getInitialOpen = (items, selectedId) =>
     )
     .map((item) => item.id ?? item.label)
 
-const Listbox = ({
-  items = [],
-  firstItemRef = null, // focus will be moved to this one once within the menu
-  parentRef = null, // to return focus to after leaving the last menu item
-  selectedId: defaultSelectedId,
-  LinkRouter,
-  itemRouterProps,
-  onClose,
-  variant,
-  tokens
-}) => {
-  const initialOpen = getInitialOpen(items, defaultSelectedId)
+const Listbox = forwardRef(
+  (
+    {
+      items = [],
+      firstItemRef = null, // focus will be moved to this one once within the menu
+      parentRef = null, // to return focus to after leaving the last menu item
+      selectedId: defaultSelectedId,
+      LinkRouter,
+      itemRouterProps,
+      onClose,
+      variant,
+      tokens
+    },
+    ref
+  ) => {
+    const initialOpen = getInitialOpen(items, defaultSelectedId)
 
-  const [selectedId, setSelectedId] = useState(defaultSelectedId)
+    const [selectedId, setSelectedId] = useState(defaultSelectedId)
 
-  const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
+    const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
 
-  // We need to keep track of each item's ref in order to be able to
-  // focus on a specific item via keyboard navigation
-  const itemRefs = useRef([])
-  if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
-  const [focusedIndex, setFocusedIndex] = useState(0)
-  const handleKeydown = useCallback(
-    (event) => {
-      const nextItemRef = itemRefs.current[focusedIndex + 1]
-      const prevItemRef = itemRefs.current[focusedIndex - 1]
-      if (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) {
-        // Move the focus to the previous item or to the parent one if on the first
-        if (prevItemRef) {
+    // We need to keep track of each item's ref in order to be able to
+    // focus on a specific item via keyboard navigation
+    const itemRefs = useRef([])
+    if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
+    const [focusedIndex, setFocusedIndex] = useState(0)
+    const handleKeydown = useCallback(
+      (event) => {
+        const nextItemRef = itemRefs.current[focusedIndex + 1]
+        const prevItemRef = itemRefs.current[focusedIndex - 1]
+        if (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) {
+          // Move the focus to the previous item or to the parent one if on the first
+          if (prevItemRef) {
+            event.preventDefault()
+            prevItemRef.focus()
+          } else if (parentRef) parentRef.current?.focus()
+          setFocusedIndex(focusedIndex - 1)
+        } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
           event.preventDefault()
-          prevItemRef.focus()
-        } else if (parentRef) parentRef.current?.focus()
-        setFocusedIndex(focusedIndex - 1)
-      } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
-        event.preventDefault()
-        setFocusedIndex(focusedIndex + 1)
-        nextItemRef.focus()
-      } else if (event.key === 'Escape') {
-        // Close the dropdown
-        parentRef?.current?.click()
-        // Return focus to the dropdown control after leaving the last item
-        parentRef?.current?.focus()
-        if (onClose) onClose(event)
-      } else if (!nextItemRef && firstItemRef) {
-        // If the last item is focused, move the focus to the first one
-        event.preventDefault()
-        setFocusedIndex(0)
-        firstItemRef.current?.focus()
-      }
-    },
-    [focusedIndex, onClose, parentRef, firstItemRef]
-  )
+          setFocusedIndex(focusedIndex + 1)
+          nextItemRef.focus()
+        } else if (event.key === 'Escape') {
+          // Close the dropdown
+          parentRef?.current?.click()
+          // Return focus to the dropdown control after leaving the last item
+          parentRef?.current?.focus()
+          if (onClose) onClose(event)
+        } else if (!nextItemRef && firstItemRef) {
+          // If the last item is focused, move the focus to the first one
+          event.preventDefault()
+          setFocusedIndex(0)
+          firstItemRef.current?.focus()
+        }
+      },
+      [focusedIndex, onClose, parentRef, firstItemRef]
+    )
 
-  // Add listeners for mouse clicks outside and for key presses
-  useEffect(() => {
-    if (Platform.OS === 'web') {
-      window.addEventListener('click', onClose)
-      window.addEventListener('keydown', handleKeydown)
-      window.addEventListener('touchstart', onClose)
-      return () => {
-        window.removeEventListener('click', onClose)
-        window.removeEventListener('keydown', handleKeydown)
-        window.removeEventListener('touchstart', onClose)
+    // Add listeners for mouse clicks outside and for key presses
+    useEffect(() => {
+      if (Platform.OS === 'web') {
+        window.addEventListener('click', onClose)
+        window.addEventListener('keydown', handleKeydown)
+        window.addEventListener('touchstart', onClose)
+        return () => {
+          window.removeEventListener('click', onClose)
+          window.removeEventListener('keydown', handleKeydown)
+          window.removeEventListener('touchstart', onClose)
+        }
       }
-    }
-    return () => {}
-  }, [onClose, handleKeydown])
+      return () => {}
+    }, [onClose, handleKeydown])
 
-  return (
-    <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
-      <ExpandCollapse initialOpen={initialOpen} maxOpen={1}>
-        {(expandProps) => (
-          <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
-            {items.map((item, index) => {
-              const { id, label, items: nestedItems } = item
-              const itemId = id ?? label
+    return (
+      <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
+        <ExpandCollapse initialOpen={initialOpen} maxOpen={1} ref={ref}>
+          {(expandProps) => (
+            <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
+              {items.map((item, index) => {
+                const { id, label, items: nestedItems } = item
+                const itemId = id ?? label
 
-              // Give the list of refs.
-              const itemRef = (ref) => {
-                itemRefs.current[index] = ref
-                return ref
-              }
+                // Give the list of refs.
+                const itemRef = (currentItemRef) => {
+                  itemRefs.current[index] = currentItemRef
+                  return currentItemRef
+                }
 
-              return nestedItems ? (
-                <ListboxGroup
-                  {...item}
-                  expandProps={expandProps}
-                  LinkRouter={LinkRouter}
-                  itemRouterProps={itemRouterProps}
-                  prevItemRef={itemRefs.current[index - 1] ?? null}
-                  nextItemRef={itemRefs.current[index + 1] ?? null}
-                  ref={index === 0 ? firstItemRef : itemRef}
-                  key={itemId}
-                />
-              ) : (
-                <ListboxItem
-                  {...item}
-                  key={itemId}
-                  id={itemId}
-                  LinkRouter={LinkRouter}
-                  itemRouterProps={itemRouterProps}
-                  prevItemRef={itemRefs.current[index - 1] ?? null}
-                  nextItemRef={itemRefs.current[index + 1] ?? null}
-                  ref={index === 0 ? firstItemRef : itemRef}
-                />
-              )
-            })}
-          </View>
-        )}
-      </ExpandCollapse>
-    </ListboxContext.Provider>
-  )
-}
+                return nestedItems ? (
+                  <ListboxGroup
+                    {...item}
+                    expandProps={expandProps}
+                    LinkRouter={LinkRouter}
+                    itemRouterProps={itemRouterProps}
+                    prevItemRef={itemRefs.current[index - 1] ?? null}
+                    nextItemRef={itemRefs.current[index + 1] ?? null}
+                    ref={index === 0 ? firstItemRef : itemRef}
+                    key={itemId}
+                  />
+                ) : (
+                  <ListboxItem
+                    {...item}
+                    key={itemId}
+                    id={itemId}
+                    LinkRouter={LinkRouter}
+                    itemRouterProps={itemRouterProps}
+                    prevItemRef={itemRefs.current[index - 1] ?? null}
+                    nextItemRef={itemRefs.current[index + 1] ?? null}
+                    ref={index === 0 ? firstItemRef : itemRef}
+                  />
+                )
+              })}
+            </View>
+          )}
+        </ExpandCollapse>
+      </ListboxContext.Provider>
+    )
+  }
+)
+
+Listbox.displayName = 'Listbox'
 
 Listbox.propTypes = {
   ...withLinkRouter.propTypes,

package/src/Notification/Notification.jsx

@@ -65,7 +65,7 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
 })
 
 const selectContentContainerStyle = (maxWidth) => ({
-  width: maxWidth || '100%'
+  maxWidth: maxWidth || '100%'
 })
 
 const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {

package/src/Radio/Radio.jsx

@@ -247,7 +247,7 @@ Radio.propTypes = {
   /**
    * The label.
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Associate this radio button with a group (set as the name attribute).
    */