@telus-uds/components-base 2.0.2 → 2.2.0

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 {
@@ -73,6 +73,7 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tokens,
     variant,
     nativeSubmitBtnID,
+    dataSet,
     ...rest
   } = _ref3;
   const {
@@ -132,6 +133,7 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   } = selectContainerProps(rest);
   return /*#__PURE__*/_jsx(View, {
     ...containerProps,
+    dataSet: dataSet,
     children: /*#__PURE__*/_jsx(TextInputBase, {
       nativeID: nativeID,
       testID: testID,

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
   },