@telus-uds/components-base 1.62.0 → 1.63.0

package/lib-module/TooltipButton/TooltipButton.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
@@ -53,7 +55,7 @@ const TooltipButton = _ref3 => {
   return /*#__PURE__*/_jsx(View, {
     style: [applyOuterBorder(themeTokens), themeTokens.outerBorderWidth && {
       margin: -themeTokens.outerBorderWidth
-    }],
+    }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: selectInnerContainerStyles(themeTokens),
@@ -65,6 +67,14 @@ const TooltipButton = _ref3 => {
   });
 };
 
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: { ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+});
 TooltipButton.propTypes = { ...selectedSystemPropTypes,
 
   /**

package/package.json

@@ -64,15 +64,14 @@
     "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
-    "build": "npm run build:code && npm run build:docs",
+    "build": "npm run build:code",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
-    "build:code": "npm run build:main && npm run build:module",
-    "build:docs": "babel-node --plugins=@telus-uds/babel-plugin-react-docgen generate-component-docs.js"
+    "build:code": "npm run build:main && npm run build:module"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.62.0"
+  "version": "1.63.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/require-default-props */
-import React, { forwardRef, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { Dimensions, Platform, View, StyleSheet } from 'react-native'
 import throttle from 'lodash.throttle'
@@ -118,6 +118,8 @@ const Autocomplete = forwardRef(
     // We need to store current items for uncontrolled usage
     const [currentItems, setCurrentItems] = useState(initialItems)
 
+    const [otherItems, setOtherItems] = useState(items)
+
     // We need to store the current value as well to be able to highlight it
     const [currentValue, setCurrentValue] = useState(value ?? initialValue)
     const inputTokens = { paddingLeft: INPUT_LEFT_PADDING }
@@ -128,6 +130,9 @@ const Autocomplete = forwardRef(
     const [isFocused, setisFocused] = useState(false)
     const [sourceLayout, setSourceLayout] = useState(null)
 
+    // When it's nested, selected value
+    const [nestedSelectedValue, setNestedSelectedValue] = useState(null)
+
     const { supportsProps, ...selectedProps } = selectProps(rest)
     const { hint, label: inputLabel } = supportsProps
     const hintExpansionEnabled = isFocused && helpText && !currentValue
@@ -197,21 +202,49 @@ const Autocomplete = forwardRef(
     }
     const handleSelect = (selectedId) => {
       onSelect?.(selectedId)
-      const { label: newValue, nested } = (isControlled ? items : currentItems)?.find(
-        ({ id }) => id === selectedId
-      )
+      const {
+        label: newValue,
+        nested,
+        title
+      } = (isControlled ? items : currentItems)?.find(({ id }) => id === selectedId)
+      if (title) return
       if (!nested) {
+        setNestedSelectedValue(null)
         onChange?.(newValue)
         setIsExpanded(false)
       }
       setCurrentValue(newValue)
       if (!isControlled && inputRef?.current) inputRef.current.value = newValue
+
+      if (nested) setNestedSelectedValue(newValue)
     }
 
+    /**
+     * When an item that is nested equal "true" is selected this useEffect is executed.
+     * The nested item is added to the item list at the top, the if validates it doesn't exist
+     * within the list, if doesn't exist the nested item is added to the top of the list,
+     * the nested item is added with an id equal "0"
+     */
+    useEffect(() => {
+      if (nestedSelectedValue && !items.find((item) => item.id === 0)) {
+        const tmpItems = [...items]
+        tmpItems.unshift({ label: nestedSelectedValue, title: true, id: 0 })
+        setOtherItems(
+          tmpItems.map((item) => {
+            return {
+              ...item,
+              nestedChild: item.id !== 0
+            }
+          })
+        )
+      }
+    }, [nestedSelectedValue, items])
+
     const handleClose = (event) => {
       if (event.type === 'keydown') {
         if (event.key === 'Escape' || event.key === 27) {
           setIsExpanded(false)
+          setNestedSelectedValue(null)
         } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef?.current) {
           targetRef.current.focus()
         }
@@ -232,6 +265,7 @@ const Autocomplete = forwardRef(
       } else if (Platform.OS === 'web') {
         // needed for dropdown to be collapsed when clicking outside on web
         setIsExpanded(false)
+        setNestedSelectedValue(null)
       }
     }
     const itemsToShow = currentValue
@@ -308,7 +342,11 @@ const Autocomplete = forwardRef(
                 <Suggestions
                   hasResults={getCopy('hasResults')}
                   id="autocomplete"
-                  items={itemsToShow}
+                  items={
+                    nestedSelectedValue
+                      ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor))
+                      : itemsToShow
+                  }
                   noResults={helpTextToShow}
                   onClose={handleClose}
                   onSelect={handleSelect}

package/src/Button/ButtonDropdown.jsx

@@ -6,6 +6,7 @@ import ButtonBase from './ButtonBase'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  getTokensPropType,
   focusHandlerProps,
   resolvePressableState,
   selectTokens,
@@ -153,6 +154,8 @@ ButtonDropdown.propTypes = {
   ...focusHandlerProps.types,
   ...buttonPropTypes,
   children: textAndA11yText,
+  tokens: getTokensPropType('ButtonDropdown'),
+
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.
    */

package/src/Icon/Icon.jsx

@@ -7,7 +7,15 @@ import { getTokensPropType, scaleWithText, variantProp } from '../utils'
 
 const Icon = forwardRef(
   (
-    { icon: IconComponent, accessibilityLabel, variant, tokens, scalesWithText = false, dataSet },
+    {
+      icon: IconComponent,
+      accessibilityLabel,
+      variant,
+      tokens,
+      scalesWithText = false,
+      style = {},
+      dataSet
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('Icon', tokens, variant)
@@ -32,7 +40,8 @@ const Icon = forwardRef(
             themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''
           ]
             .filter((exists) => exists)
-            .join(' ')
+            .join(' '),
+          ...style
         }}
         dataSet={dataSet}
       >
@@ -55,7 +64,17 @@ export const iconComponentPropTypes = {
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  scalesWithText: PropTypes.bool
+  scalesWithText: PropTypes.bool,
+  /**
+   * Custom style object to be applied to the icon component.
+   * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
+   *
+   * Note: This prop is only used in web.
+   *
+   * @example
+   * <Icon style={{ color: 'red' }}
+   */
+  style: PropTypes.object
 }
 
 Icon.propTypes = {

package/src/Link/LinkBase.jsx

@@ -180,9 +180,20 @@ const LinkBase = forwardRef(
               icon={IconComponent}
               iconPosition={iconPosition}
               space={iconSpace}
-              iconProps={{ ...iconProps, tokens: iconTokens }}
+              iconProps={{
+                ...iconProps,
+                tokens: iconTokens,
+                style: staticStyles.bubblePointerEvents
+              }}
             >
-              <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>
+              <Text
+                style={[
+                  textStyles,
+                  blockTextStyles,
+                  staticStyles.baseline,
+                  staticStyles.bubblePointerEvents
+                ]}
+              >
                 {typeof children === 'function' ? children(linkState) : children}
               </Text>
             </IconText>
@@ -239,6 +250,13 @@ const staticStyles = StyleSheet.create({
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 })
 

package/src/Listbox/Listbox.jsx

@@ -136,6 +136,7 @@ const Listbox = ({
 
 Listbox.propTypes = {
   ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('Listbox'),
   /**
    * Focus will be moved to the item with this ref once within the menu.
    */
@@ -156,8 +157,7 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: PropTypes.func,
-  tokens: getTokensPropType('Listbox')
+  onClose: PropTypes.func
 }
 
 Listbox.Overlay = DropdownOverlay

package/src/Listbox/ListboxItem.jsx

@@ -15,6 +15,9 @@ const styles = StyleSheet.create({
   },
   childContainer: {
     paddingLeft: 16
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
   }
 })
 
@@ -24,6 +27,7 @@ const ListboxItem = forwardRef(
       href,
       label,
       isChild = false,
+      nestedChild,
       onBlur,
       nextItemRef,
       prevItemRef,
@@ -41,7 +45,14 @@ const ListboxItem = forwardRef(
 
     const getTokens = useThemeTokensCallback('Listbox', tokens, variant, { isChild })
     return (
-      <View style={[styles.itemContainer, isChild && styles.childContainer]} role="option">
+      <View
+        style={[
+          styles.itemContainer,
+          isChild && styles.childContainer,
+          nestedChild && styles.nestedChildContainer
+        ]}
+        role="option"
+      >
         <PressableItem
           href={href}
           isChild={isChild}
@@ -70,7 +81,8 @@ ListboxItem.propTypes = {
   label: PropTypes.node.isRequired,
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  nestedChild: PropTypes.bool
 }
 
 export default withLinkRouter(ListboxItem)

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -344,9 +344,9 @@ MultiSelectFilter.propTypes = {
    */
   variant: variantProp.propType,
   /**
-   * Sets the tokens for ButtonDropdown element.
+   * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: getTokensPropType('ButtonDropdown'),
+  tokens: getTokensPropType('MultiSelectFilter'),
   /**
    * The options a user may select.
    */

package/src/Tooltip/Tooltip.jsx

@@ -92,6 +92,7 @@ const Tooltip = forwardRef(
       tokens,
       variant,
       inline = false,
+      nativeID,
       ...rest
     },
     ref
@@ -193,6 +194,7 @@ const Tooltip = forwardRef(
           hitSlop={pressableHitSlop}
           accessibilityLabel={getCopy('a11yText')}
           accessibilityRole="button"
+          nativeID={nativeID}
         >
           {typeof control === 'function'
             ? (pressableState) => control(getPressableState(pressableState), variant)

package/src/Tooltip/Tooltip.native.jsx

@@ -118,6 +118,7 @@ const Tooltip = forwardRef(
       tokens,
       variant,
       inline = false,
+      nativeID,
       ...rest
     },
     ref
@@ -252,6 +253,7 @@ const Tooltip = forwardRef(
           hitSlop={pressableHitSlop}
           accessibilityLabel={getCopy('a11yText')}
           accessibilityRole="button"
+          nativeID={nativeID}
         >
           {typeof control === 'function'
             ? (pressableState) => control(getPressableState(pressableState), variant)

package/src/Tooltip/shared.js

@@ -28,6 +28,10 @@ const propTypes = {
    * Callback function triggered when the tooltip is pressed.
    */
   onPress: PropTypes.func,
+  /**
+   * The `id` of the tooltip button.
+   */
+  nativeID: PropTypes.string,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }

package/src/TooltipButton/TooltipButton.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
@@ -35,7 +35,8 @@ const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
         applyOuterBorder(themeTokens),
         themeTokens.outerBorderWidth && {
           margin: -themeTokens.outerBorderWidth
-        }
+        },
+        staticStyles.bubblePointerEvents
       ]}
       {...selectProps(rest)}
     >
@@ -46,6 +47,16 @@ const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
   )
 }
 
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+})
+
 TooltipButton.propTypes = {
   ...selectedSystemPropTypes,
   /**