@telus-uds/components-base 1.94.0 → 1.95.0

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 16 Sep 2024 12:26:18 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Sep 2024 16:57:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.95.0
+
+Wed, 25 Sep 2024 16:57:49 GMT
+
+### Minor changes
+
+- `DownloadApp`: add component (Mauricio.BatresMontejo@telus.com)
+- `TabBar`: new component added (35577399+JoshHC@users.noreply.github.com)
+- `Link`: add `inline` variant to `iconPosition` (evander.owusu@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.64.0
+
+### Patches
+
+- `Modal`: fix focusing on undefined ref for close button (kristina.kirpichnikova@telus.com)
+- `TextInput`: masked characters issue in password fixed (35577399+JoshHC@users.noreply.github.com)
+- `Tooltip`: fix positioning (guillermo.peitzner@telus.com)
+- `Autocomplete`: add missing loading-label functionality (guillermo.peitzner@telus.com)
+
 ## 1.94.0
 
-Mon, 16 Sep 2024 12:26:18 GMT
+Mon, 16 Sep 2024 12:35:38 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -111,6 +111,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     validation,
     value,
     helpText = '',
+    loadingLabel,
     ...rest
   } = _ref2;
   const {
@@ -346,7 +347,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         onLayout: handleMeasure,
         ref: openOverlayRef,
         children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
-          label: getCopy('loading')
+          label: loadingLabel ?? getCopy('loading')
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",

package/lib/DownloadApp/DownloadApp.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+const selectOuterStyles = _ref => {
+  let {
+    borderColor,
+    borderWidth,
+    borderGap,
+    borderRadius,
+    padding
+  } = _ref;
+  return {
+    outline: 'none',
+    borderColor,
+    borderWidth,
+    borderGap,
+    borderRadius,
+    padding
+  };
+};
+const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    dictionary = _dictionary.default,
+    type = 'ios',
+    href,
+    onPress,
+    tokens = {},
+    variant = {},
+    ...props
+  } = _ref2;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary,
+    copy
+  });
+  const {
+    hrefAttrs,
+    rest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole: href ? 'link' : 'button',
+    href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rest
+  });
+  const getDownloadAppTokens = (0, _ThemeProvider.useThemeTokensCallback)('DownloadApp', tokens, variant);
+  const resolveDownloadAppTokens = pressableState => {
+    const themeTokens = (0, _utils.resolvePressableTokens)(getDownloadAppTokens, pressableState, {});
+    return selectOuterStyles(themeTokens);
+  };
+  const {
+    androidENIcon,
+    androidFRIcon,
+    iosENIcon,
+    iosFRIcon
+  } = getDownloadAppTokens();
+  const imageResources = {
+    en: {
+      android: androidENIcon,
+      ios: iosENIcon
+    },
+    fr: {
+      android: androidFRIcon,
+      ios: iosFRIcon
+    }
+  };
+  const IconComponent = imageResources[copy][type];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: pressState => [resolveDownloadAppTokens(pressState), staticStyles.row],
+    ...selectedProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      style: staticImageSizes[type][copy],
+      alt: type === 'ios' ? getCopy('altTextIos') : getCopy('altTextAndroid')
+    })
+  });
+});
+DownloadApp.displayName = 'DownloadApp';
+const dictionaryContentShape = _propTypes.default.shape({
+  altTextAndroid: _propTypes.default.string.isRequired,
+  altTextIos: _propTypes.default.string.isRequired
+});
+DownloadApp.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: _utils.copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Select the type of image to show.
+   */
+  type: _propTypes.default.oneOf(['android', 'ios']),
+  /**
+   * It's a simple link that opens the Download Button instead of the onPress function.
+   */
+  href: _propTypes.default.string,
+  /**
+   * Function called when the button is pressed. Required unless the button has a href.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * DownloadApp tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('DownloadApp'),
+  /**
+   * DownloadApp variant.
+   */
+  variant: _utils.variantProp.propType
+};
+const staticStyles = _StyleSheet.default.create({
+  row: {
+    ..._Platform.default.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        alignSelf: 'flex-start'
+      }
+    })
+  }
+});
+const staticImageSizes = {
+  android: {
+    en: {
+      width: 162,
+      height: 48
+    },
+    fr: {
+      width: 162,
+      height: 48
+    }
+  },
+  ios: {
+    en: {
+      width: 144,
+      height: 48
+    },
+    fr: {
+      width: 152,
+      height: 48
+    }
+  }
+};
+var _default = DownloadApp;
+exports.default = _default;

package/lib/DownloadApp/dictionary.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    altTextAndroid: 'Get it on Google Play',
+    altTextIos: 'Download on the App Store'
+  },
+  fr: {
+    altTextAndroid: 'Disponible sur Google Play',
+    altTextIos: 'Télécharger dans l’App Store'
+  }
+};
+exports.default = _default;

package/lib/DownloadApp/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DownloadApp = _interopRequireDefault(require("./DownloadApp"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _DownloadApp.default;
+exports.default = _default;

package/lib/Icon/IconText.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Icon = _interopRequireWildcard(require("./Icon"));
 var _StackView = require("../StackView");
 var _utils = require("../utils");
@@ -66,6 +68,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   });
   const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
   const adjustedContainer = _Platform.default.OS === 'web' ? iconContent : mobile;
+  const adjustedContainerWithPosition = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.adjustedContainer,
+    children: adjustedContainer
+  });
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      children: [children, " ", adjustedContainerWithPosition]
+    });
+  }
   return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
@@ -80,9 +91,9 @@ IconText.propTypes = {
    */
   space: _utils.spacingProps.types.spacingValue,
   /**
-   * Whether the icon should be to the left of the content or the right of the content.
+   * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
@@ -100,5 +111,11 @@ IconText.propTypes = {
   children: _propTypes.default.node
   /* eslint-enable react/no-unused-prop-types */
 };
+
+const staticStyles = _StyleSheet.default.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+});
 var _default = IconText;
 exports.default = _default;

package/lib/Link/LinkBase.js

@@ -245,9 +245,9 @@ LinkBase.propTypes = {
    */
   icon: _propTypes.default.elementType,
   /**
-   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.

package/lib/Modal/Modal.js

@@ -158,7 +158,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     if (_Platform.default.OS === 'web') {
       const handleFocus = () => {
         // If the focus is on the last item of the web modal container, move it to the close button
-        if (document.activeElement === focusTrapRef.current) {
+        if (document.activeElement === focusTrapRef.current && closeButtonRef.current) {
           closeButtonRef.current.focus();
         }
         return undefined;

package/lib/TabBar/TabBar.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _TabBarItem = _interopRequireDefault(require("./TabBarItem"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectTabBarContainerStyles = _ref => {
+  let {
+    paddingTop,
+    paddingBottom,
+    borderTopWidth,
+    borderTopColor,
+    backgroundColor
+  } = _ref;
+  return {
+    paddingTop,
+    paddingBottom,
+    borderTopWidth,
+    borderTopColor,
+    backgroundColor
+  };
+};
+const selectTabBarItemContainerStyles = _ref2 => {
+  let {
+    paddingLeft,
+    paddingRight,
+    gap
+  } = _ref2;
+  return {
+    paddingLeft,
+    paddingRight,
+    gap
+  };
+};
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+/**
+ * TabBar component renders a navigation bar with multiple TabBarItems.
+ * It allows users to switch between different views or sections.
+ *
+ * @component
+ * @example
+ * const items = [
+ *   { id: '1', label: 'Home', icon: <HomeIcon />, iconActive: <HomeActiveIcon /> },
+ *   { id: '2', label: 'Profile', icon: <ProfileIcon />, iconActive: <ProfileActiveIcon /> },
+ * ]
+ * return (
+ *   <TabBar
+ *     items={items}
+ *     initiallySelectedItem="1"
+ *     onChange={(itemId) => console.log(itemId)}
+ *   />
+ * )
+ */
+
+const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    items = [],
+    initiallySelectedItem = '0',
+    onChange,
+    variant,
+    tokens,
+    ...rest
+  } = _ref3;
+  const [isSelected, setIsSelected] = _react.default.useState(initiallySelectedItem);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TabBar', tokens, variant);
+  const handlePress = itemId => {
+    setIsSelected(itemId);
+    onChange === null || onChange === void 0 ? void 0 : onChange(itemId);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: [styles.tabBar, selectTabBarContainerStyles(themeTokens)],
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarItem.default, {
+        label: item.label,
+        href: item.href,
+        isSelected: isSelected === item.id,
+        icon: item.icon,
+        iconActive: item.iconActive,
+        onPress: () => handlePress(item.id),
+        id: `tab-item-${index}`,
+        accessibilityRole: "tablist"
+      }, item.id))
+    })
+  });
+});
+TabBar.displayName = 'TabBar';
+TabBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /** Array of TabBarItems to be displayed in TabBar */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.node,
+    iconActive: _propTypes.default.node,
+    label: _propTypes.default.string.isRequired,
+    href: _propTypes.default.string
+  })).isRequired,
+  /** Id of the initially selected item. */
+  initiallySelectedItem: _propTypes.default.number,
+  /** Callback function to handle item selection change. */
+  onChange: _propTypes.default.func,
+  /** Variant of TabBar for styling purposes. */
+  variant: _utils.variantProp.propType,
+  /** Tokens for theming and styling. */
+  tokens: (0, _utils.getTokensPropType)('TabBar')
+};
+const styles = _StyleSheet.default.create({
+  tabBar: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  tabBarItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  }
+});
+var _default = TabBar;
+exports.default = _default;

package/lib/TabBar/TabBarItem.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectTypographyStyles = (_ref, isSelected) => {
+  let {
+    fontWeight,
+    color,
+    lineHeight,
+    fontName,
+    activeColor
+  } = _ref;
+  return {
+    fontWeight,
+    color: isSelected ? activeColor : color,
+    lineHeight,
+    fontName
+  };
+};
+const selectIconContainerStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingBottom
+  } = _ref2;
+  return {
+    paddingTop,
+    paddingBottom,
+    alignItems: 'center'
+  };
+};
+const selectIconStyles = (_ref3, isSelected) => {
+  let {
+    iconSize,
+    iconColor,
+    activeColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: isSelected ? activeColor : iconColor
+  };
+};
+const selectContainerStyles = _ref4 => {
+  let {
+    borderRadius,
+    backgroundColor
+  } = _ref4;
+  return {
+    borderRadius,
+    backgroundColor,
+    alignSelf: 'center',
+    alignItems: 'center'
+  };
+};
+const TabBarItem = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  let {
+    href,
+    variant,
+    tokens,
+    label,
+    isSelected,
+    id,
+    onPress,
+    icon: IconComponent,
+    iconActive: IconActiveComponent,
+    accessibilityRole = 'tab'
+  } = _ref5;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabBarItem', tokens, variant);
+  const getPressableStyle = _ref6 => {
+    let {
+      pressed,
+      focused,
+      hovered
+    } = _ref6;
+    const resolvedTokens = (0, _utils.resolvePressableTokens)(getTokens, {
+      pressed,
+      focused,
+      hovered
+    }, {
+      isSelected
+    });
+    return {
+      ...resolvedTokens,
+      outline: 'none' // removes the default browser :focus outline
+    };
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    href: href,
+    nativeID: id,
+    onPress: onPress,
+    style: _ref7 => {
+      let {
+        pressed,
+        focused,
+        hovered
+      } = _ref7;
+      return [styles.flexContainer, getPressableStyle({
+        pressed,
+        focused,
+        hovered
+      })];
+    },
+    accessibilityRole: accessibilityRole,
+    testID: id,
+    children: pressableState => {
+      const resolvedTokens = getPressableStyle(pressableState);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectContainerStyles(resolvedTokens),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [selectIconContainerStyles(resolvedTokens), styles.iconContainer],
+          children: isSelected ? IconActiveComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconActiveComponent, {
+            ...selectIconStyles(resolvedTokens, isSelected)
+          }) : IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+            ...selectIconStyles(resolvedTokens)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+          space: 1
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'micro'
+          },
+          tokens: selectTypographyStyles(resolvedTokens, isSelected),
+          align: "center",
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+          space: 1
+        })]
+      });
+    }
+  });
+});
+TabBarItem.displayName = 'TabBarItem';
+TabBarItem.propTypes = {
+  /** The icon to be displayed when the item is not selected. */
+  icon: _propTypes.default.elementType,
+  /** The icon to be displayed when the item is selected. */
+  iconActive: _propTypes.default.elementType,
+  /** Tokens for theming and styling the TabBarItem. */
+  tokens: (0, _utils.getTokensPropType)('TabBarItem'),
+  /** Variant of the TabBarItem for styling purposes. */
+  variant: _utils.variantProp.propType,
+  /** Callback function to handle press events. */
+  onPress: _propTypes.default.func,
+  /** URL to navigate to when the item is pressed. */
+  href: _propTypes.default.string,
+  /** Indicates whether the item is selected. */
+  isSelected: _propTypes.default.bool,
+  /** Unique identifier for the item. */
+  id: _propTypes.default.string,
+  /** Label text for the item. */
+  label: _propTypes.default.string.isRequired,
+  /** Accessibility role for the item. */
+  accessibilityRole: _propTypes.default.string
+};
+const styles = _StyleSheet.default.create({
+  flexContainer: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  iconContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 44,
+    minHeight: 40,
+    aspectRatio: 1.1
+  }
+});
+var _default = TabBarItem;
+exports.default = _default;

package/lib/TabBar/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TabBar = _interopRequireDefault(require("./TabBar"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _TabBar.default;
+exports.default = _default;

package/lib/TextInput/TextInputBase.js

@@ -48,7 +48,8 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
   const textStyles = (0, _ThemeProvider.applyTextStyles)({
-    fontName,
+    fontName: isPassword ? undefined : fontName,
+    // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
     fontSize,
     lineHeight,
     fontWeight,