@telus-uds/components-base 2.0.1 → 2.1.0

package/lib/Icon/Icon.js

@@ -53,6 +53,7 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...style,
       backgroundColor: themeTokens.backgroundColor,
       borderRadius: themeTokens.borderRadius,
+      paddingTop: themeTokens.paddingTop,
       ...paddingStyles
     },
     dataSet: dataSet,

package/lib/InputSupports/InputSupports.js

@@ -55,6 +55,9 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       title: feedback,
       validation: validation,
       tokens: feedbackTokens,
+      variant: {
+        icon: feedbackProps.showFeedbackIcon
+      },
       ...feedbackProps
     }) : null]
   });

package/lib/Link/LinkBase.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils/props';
+import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps, contentfulProps } from '../utils/props';
 import { resolvePressableTokens } from '../utils/pressability';
 import { withLinkRouter } from '../utils';
 import InlinePressable from './InlinePressable';
 import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps, contentfulProps]);
 const selectOuterBorderStyles = _ref => {
   let {
     outerBorderColor,

package/lib/Modal/Modal.js

@@ -37,7 +37,9 @@ const selectContainerStyles = _ref => {
 const selectModalStyles = _ref2 => {
   let {
     backgroundColor,
+    borderColor,
     borderRadius,
+    borderWidth,
     height,
     paddingLeft,
     paddingRight,
@@ -47,7 +49,9 @@ const selectModalStyles = _ref2 => {
   } = _ref2;
   return {
     backgroundColor,
+    borderColor,
     borderRadius,
+    borderWidth,
     height,
     paddingLeft,
     paddingRight,

package/lib/Modal/ModalContent.js

@@ -55,7 +55,29 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined;
   const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined;
   const hasHeadingSection = Boolean(heading || subHeading);
-  const selectFooterContainerStyles = _ref3 => {
+  const selectHeadingContainerStyles = _ref3 => {
+    let {
+      paddingLeft,
+      paddingRight,
+      marginLeft,
+      marginRight,
+      borderColor,
+      headingBorderBottomWidth,
+      headingPaddingRight,
+      headingPaddingTop
+    } = _ref3;
+    return {
+      flexDirection: 'column',
+      marginLeft: -marginLeft,
+      marginRight: -marginRight,
+      paddingLeft,
+      paddingTop: headingPaddingTop,
+      paddingRight: paddingRight + headingPaddingRight,
+      borderBottomColor: borderColor,
+      borderBottomWidth: headingBorderBottomWidth
+    };
+  };
+  const selectFooterContainerStyles = _ref4 => {
     let {
       paddingLeft,
       paddingRight,
@@ -67,7 +89,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       direction,
       footerTopWidth,
       hasBorder
-    } = _ref3;
+    } = _ref4;
     return {
       flexDirection: direction,
       alignItems: 'center',
@@ -81,11 +103,6 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       borderTopColor: borderColor
     };
   };
-  const headingStyles = {
-    flexDirection: 'column',
-    paddingTop: 8,
-    paddingRight: themeTokens.headingPaddingRight
-  };
   const subheadingStyles = {
     marginTop: themeTokens.subHeadingMarginTop
   };
@@ -93,7 +110,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: styles.modalContent,
     ref: ref,
     children: [hasHeadingSection && /*#__PURE__*/_jsxs(View, {
-      style: headingStyles,
+      style: selectHeadingContainerStyles(themeTokens),
       children: [heading && /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: headingLevel
@@ -120,6 +137,8 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         showsVerticalScrollIndicator: true
       },
       onLayout: handleContainerLayout,
+      top: themeTokens.contentPaddingTop,
+      bottom: themeTokens.contentPaddingBottom,
       children: /*#__PURE__*/_jsx(Typography, {
         children: bodyText
       })

package/lib/Progress/Progress.js

@@ -1,6 +1,7 @@
 import React 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";
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -64,7 +65,7 @@ const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant);
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: selectProgressStyles(themeTokens),
+    style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
     ...selectProps(rest),
     children: children
   });
@@ -85,4 +86,9 @@ Progress.propTypes = {
    */
   variant: variantProp.propType
 };
-export default Progress;
+export default Progress;
+const staticStyles = StyleSheet.create({
+  progressContainer: {
+    position: 'relative'
+  }
+});

package/lib/Progress/ProgressBar.js

@@ -6,9 +6,10 @@ import View from "react-native-web/dist/exports/View";
 import ProgressBarBackground from './ProgressBarBackground';
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { MAX_PERCENT_VALUE, MIN_PERCENT_VALUE } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectBarStyles = (_ref, percentage) => {
+const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
   let {
     backgroundColor,
     borderRadius,
@@ -22,7 +23,8 @@ const selectBarStyles = (_ref, percentage) => {
     outlineWidth,
     outlineColor,
     ...applyShadowToken(shadow),
-    width: `${percentage}%`
+    width: `${calculatedPercentage}%`,
+    left: `${barPosition}%`
   };
 };
 
@@ -67,27 +69,45 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     percentage = 0,
     tokens,
     variant,
+    offset = {
+      items: 0,
+      current: 1
+    },
     ...rest
   } = _ref2;
+  const {
+    items,
+    current
+  } = offset;
+  let calculatedPercentage = percentage;
+  let barPosition = MIN_PERCENT_VALUE;
+  const validItems = items > MIN_PERCENT_VALUE;
+  if (validItems) {
+    calculatedPercentage = MAX_PERCENT_VALUE / items;
+    barPosition = calculatedPercentage * (current < 1 ? MIN_PERCENT_VALUE : current - 1);
+    if (current > items) {
+      barPosition = calculatedPercentage * (items - 1);
+    }
+  }
   const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
-  if (percentage < 0) {
+  if (percentage < MIN_PERCENT_VALUE) {
     throw new Error('ProgressBar: `percentage` must be a positive number');
-  } else if (percentage > 100) {
+  } else if (percentage > MAX_PERCENT_VALUE) {
     throw new Error('ProgressBar: `percentage` cannot exceed 100');
   }
   const selectedProps = selectProps({
     accessibilityRole: 'progressbar',
     accessibilityValue: {
-      min: 0,
-      max: 100,
-      now: percentage,
-      text: `${percentage}%`
+      min: MIN_PERCENT_VALUE,
+      max: MAX_PERCENT_VALUE,
+      now: calculatedPercentage.toFixed(2),
+      text: `${validItems ? (barPosition + calculatedPercentage).toFixed(2) : calculatedPercentage}%`
     },
     ...rest
   });
-  return percentage > 0 ? /*#__PURE__*/_jsx(View, {
+  return percentage > MIN_PERCENT_VALUE || items ? /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
+    style: [staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)],
     ...selectedProps,
     children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
       variant: variant
@@ -116,14 +136,22 @@ ProgressBar.propTypes = {
   /**
    * Progress bar variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Using the offset object, the `items` will determine the total number of items.
+   * The `current` will determine the current position of the progress bar.
+   */
+  offset: PropTypes.shape({
+    items: PropTypes.number,
+    current: PropTypes.number
+  })
 };
 export default ProgressBar;
 const staticStyles = StyleSheet.create({
   bar: {
     height: '100%',
     overflow: 'hidden',
-    position: 'absolute',
+    position: 'relative',
     ...Platform.select({
       web: {
         outlineStyle: 'solid'

package/lib/Progress/ProgressBarBackground.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { INACTIVE_VARIANT, NEGATIVE_VARIANT } from './constants';
 import { variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`;
@@ -10,9 +11,10 @@ const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variant
   } = _ref;
   let source = null;
-  if (variant !== null && variant !== void 0 && variant.inactive) {
+  // TODO: Remove the `variant?.inactive` & `variant?.negative` to complete the deprecation
+  if (variant !== null && variant !== void 0 && variant.inactive || (variant === null || variant === void 0 ? void 0 : variant.style) === INACTIVE_VARIANT) {
     source = inactiveBackground;
-  } else if (variant !== null && variant !== void 0 && variant.negative) {
+  } else if (variant !== null && variant !== void 0 && variant.negative || (variant === null || variant === void 0 ? void 0 : variant.style) === NEGATIVE_VARIANT) {
     source = negativeBackground;
   } else {
     return null;

package/lib/Progress/constants.js

@@ -0,0 +1,4 @@
+export const MAX_PERCENT_VALUE = 100;
+export const MIN_PERCENT_VALUE = 0;
+export const INACTIVE_VARIANT = 'inactive';
+export const NEGATIVE_VARIANT = 'negative';

package/lib/Search/Search.js

@@ -2,13 +2,13 @@ import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps, contentfulProps } from '../utils';
 import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
 const selectInputTokens = _ref => {
   let {

package/lib/Select/Picker.native.js

@@ -89,6 +89,7 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     items: items,
     value: value,
     onValueChange: handleChange,
+    useNativeAndroidPickerStyle: false,
     style: {
       inputIOS: style,
       inputAndroid: selectAndroidInputStyles(style)

package/lib/Select/Select.js

@@ -266,10 +266,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
           children: /*#__PURE__*/_jsx(ValidationIconComponent, {
             ...selectValidationIconTokens(themeTokens)
           })
-        }), IconComponent && Platform.OS !== 'android' &&
-        /*#__PURE__*/
-        // we can't hide the default caret of a native picker on android
-        _jsx(View, {
+        }), IconComponent && /*#__PURE__*/_jsx(View, {
           pointerEvents: "none",
           style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
           children: /*#__PURE__*/_jsx(IconComponent, {

package/lib/Status/Status.js

@@ -55,12 +55,16 @@ const selectContainerStyles = _ref => {
 const selectIconProps = _ref2 => {
   let {
     icon,
-    iconColor
+    iconColor,
+    iconSize,
+    iconPaddingTop
   } = _ref2;
   return {
     icon,
     tokens: {
-      color: iconColor
+      color: iconColor,
+      paddingTop: iconPaddingTop,
+      size: iconSize
     },
     variant: {
       size: 'small'

package/lib/TextInput/TextInputBase.js

@@ -308,7 +308,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   }
   if (isPassword) {
     textInputButtons === null || textInputButtons === void 0 || textInputButtons.unshift(/*#__PURE__*/_jsx(IconButton, {
-      accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
+      accessibilityLabel: showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
       onPress: handleShowOrHide,
       variant: {
@@ -371,7 +371,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
       children: /*#__PURE__*/_jsx(IconComponent, {
         ...selectIconTokens(themeTokens)
       })
-    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
+    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && !inactive && /*#__PURE__*/_jsx(View, {
       style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
       children: /*#__PURE__*/_jsx(StackView, {
         direction: "row",

package/lib/Tooltip/Tooltip.js

@@ -41,30 +41,40 @@ const selectTooltipShadowStyles = _ref2 => {
     ...applyShadowToken(shadow)
   };
 };
-const selectMobileTooltipPositionStyles = _ref3 => {
+const selectToolTipSizeStyles = _ref3 => {
+  let {
+    maxWidth,
+    minWidth
+  } = _ref3;
+  return {
+    maxWidth,
+    minWidth
+  };
+};
+const selectMobileTooltipPositionStyles = _ref4 => {
   let {
     top,
     left,
     position
-  } = _ref3;
+  } = _ref4;
   return {
     top,
     left,
     position
   };
 };
-const selectMobileArrowStyles = (_ref4, _ref5) => {
+const selectMobileArrowStyles = (_ref5, _ref6) => {
   let {
     backgroundColor,
     arrowWidth,
     arrowBorderRadius,
     shadow
-  } = _ref4;
+  } = _ref5;
   let {
     placement,
     x: arrowX,
     y: arrowY
-  } = _ref5;
+  } = _ref6;
   const staticSide = {
     top: 'bottom',
     right: 'left',
@@ -109,7 +119,7 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipBut
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
     content,
@@ -121,7 +131,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     inline = false,
     nativeID,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isOpen, setIsOpen] = React.useState(false);
   const arrowRef = React.useRef();
   const [tooltipDimensions, setTooltipDimensions] = React.useState(null);
@@ -162,19 +172,19 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     setIsOpen(!isOpen);
   };
   const close = () => setIsOpen(false);
-  const getPressableState = _ref7 => {
+  const getPressableState = _ref8 => {
     let {
       pressed,
       hovered,
       focused
-    } = _ref7;
+    } = _ref8;
     return {
       pressed,
       hover: hovered,
       focus: focused
     };
   };
-  const onTooltipLayout = _ref8 => {
+  const onTooltipLayout = _ref9 => {
     let {
       nativeEvent: {
         layout: {
@@ -182,7 +192,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
           height
         }
       }
-    } = _ref8;
+    } = _ref9;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: Platform.select({
@@ -233,7 +243,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       ref: floating,
       style: [selectTooltipShadowStyles(themeTokens), staticStyles.tooltip,
       // applied separately so that it doesn't cover the arrow
-      selectMobileTooltipPositionStyles({
+      selectToolTipSizeStyles, selectMobileTooltipPositionStyles({
         position: strategy,
         top: y ?? 0,
         left: x ?? 0
@@ -269,7 +279,6 @@ const staticStyles = StyleSheet.create({
   },
   tooltip: {
     position: 'absolute',
-    maxWidth: 240,
     top: 0,
     left: 0
   },

package/lib/Tooltip/Tooltip.native.js

@@ -43,30 +43,40 @@ const selectTooltipShadowStyles = _ref2 => {
     ...applyShadowToken(shadow)
   };
 };
-const selectTooltipPositionStyles = _ref3 => {
+const selectToolTipSizeStyles = _ref3 => {
+  let {
+    maxWidth,
+    minWidth
+  } = _ref3;
+  return {
+    maxWidth,
+    minWidth
+  };
+};
+const selectTooltipPositionStyles = _ref4 => {
   let {
     top,
     left,
     width
-  } = _ref3;
+  } = _ref4;
   return {
     top,
     left,
     width
   };
 };
-const selectArrowStyles = (_ref4, _ref5) => {
+const selectArrowStyles = (_ref5, _ref6) => {
   let {
     backgroundColor,
     arrowWidth,
     arrowBorderRadius,
     shadow
-  } = _ref4;
+  } = _ref5;
   let {
     position,
     width: tooltipWidth,
     height: tooltipHeight
-  } = _ref5;
+  } = _ref6;
   // the arrow width is actually a diagonal of the rectangle that we'll use as a tip
   const rectangleSide = Math.sqrt(arrowWidth * arrowWidth / 2);
 
@@ -139,7 +149,7 @@ const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/_jsx(To
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
     content,
@@ -153,7 +163,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     activateOnHover = false,
     tooltipButtonTokens,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isOpen, setIsOpen] = React.useState(false);
   const controlRef = React.useRef();
   const [controlLayout, setControlLayout] = React.useState(null);
@@ -170,10 +180,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     arrowOffset
   } = themeTokens;
   React.useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', _ref7 => {
+    const subscription = Dimensions.addEventListener('change', _ref8 => {
       let {
         window
-      } = _ref7;
+      } = _ref8;
       setWindowDimensions(window);
     });
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
@@ -183,19 +193,19 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     setIsOpen(!isOpen);
   };
   const close = () => setIsOpen(false);
-  const getPressableState = _ref8 => {
+  const getPressableState = _ref9 => {
     let {
       pressed,
       hovered,
       focused
-    } = _ref8;
+    } = _ref9;
     return {
       pressed,
       hover: hovered,
       focus: focused
     };
   };
-  const onTooltipLayout = _ref9 => {
+  const onTooltipLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -203,7 +213,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref10;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: Platform.select({
@@ -312,7 +322,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
         ref: ref,
         style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens),
         // applied separately so that it doesn't cover the arrow
-        tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
+        selectToolTipSizeStyles(themeTokens), tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
         ],
         onLayout: onTooltipLayout,
         accessibilityRole: "alert",
@@ -341,7 +351,6 @@ const staticStyles = StyleSheet.create({
   },
   tooltip: {
     position: 'absolute',
-    maxWidth: 240,
     top: 0,
     left: 0
   },

package/lib/Validator/Validator.js

@@ -186,6 +186,10 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }, []);
   return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
+    feedbackProps: {
+      ...(rest === null || rest === void 0 ? void 0 : rest.feedbackProps),
+      showFeedbackIcon: true
+    },
     children: /*#__PURE__*/_jsx(StackView, {
       space: 2,
       direction: "row",

package/lib/utils/props/contentfulProps.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import getPropSelector from './getPropSelector';
+const contentfulPropsTypes = {
+  ...Platform.select({
+    web: {
+      'data-contentful-field-id': PropTypes.string,
+      'data-contentful-entry-id': PropTypes.string
+    },
+    default: {}
+  })
+};
+export default {
+  /**
+   * Set of contentful properties used for the content preview inspector.
+   */
+  types: contentfulPropsTypes,
+  /**
+   * Filters a props object, returning only contentful props.
+   */
+  select: getPropSelector(contentfulPropsTypes)
+};

package/lib/utils/props/index.js

@@ -16,4 +16,5 @@ export { default as selectSystemProps } from './selectSystemProps';
 export { default as textInputProps } from './textInputProps';
 export { default as textProps } from './textProps';
 export { default as variantProp } from './variantProp';
-export { default as viewProps } from './viewProps';
+export { default as viewProps } from './viewProps';
+export { default as contentfulProps } from './contentfulProps';

package/package.json

@@ -13,7 +13,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^2.0.0",
-    "@telus-uds/system-theme-tokens": "^3.0.0",
+    "@telus-uds/system-theme-tokens": "^3.1.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "~10.3.0",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "2.0.1",
+  "version": "2.1.0",
   "types": "types/index.d.ts"
 }

package/src/Card/PressableCardBase.jsx

@@ -82,7 +82,7 @@ const PressableCardBase = React.forwardRef(
     const getTokens = (pressableState) =>
       validateThemeTokens(
         resolvePressableTokens(tokens, pressableState, additionalState),
-        getTokensSetPropType(tokenKeys, { requireAll: true }),
+        getTokensSetPropType(tokenKeys, { partial: true, allowFunction: true }),
         'PressableCard'
       )