@telus-uds/components-base 3.17.1 → 3.19.0

package/lib/cjs/StepTracker/StepTracker.js

@@ -19,6 +19,7 @@ var _Step = _interopRequireDefault(require("./Step"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const STYLE_BAR_VARIANT = 'bar';
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectContainerStyles = _ref => {
   let {
@@ -59,6 +60,14 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
     themeOptions
   });
 };
+const selectStepsContainerStyles = _ref4 => {
+  let {
+    barGap
+  } = _ref4;
+  return {
+    gap: barGap
+  };
+};
 
 /**
  * StepTracker component shows the current position in a sequence of steps.
@@ -92,7 +101,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     current = 0,
     copy = 'en',
@@ -101,7 +110,8 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref5;
+  const isBarVariant = variant?.style === STYLE_BAR_VARIANT;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     showStepTrackerLabel,
@@ -147,7 +157,7 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       space: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: staticStyles.stepsContainer,
+        style: [staticStyles.stepsContainer, selectStepsContainerStyles(themeTokens)],
         accessibilityRole: stepsContainerAccessibilityRole,
         children: steps.map((label, index) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
@@ -158,7 +168,8 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
             stepCount: steps.length,
             tokens: themeTokens,
             accessibilityRole: stepAccessibilityRole,
-            accessibilityCurrent: current === index && _Platform.default.OS === 'web' && 'step'
+            accessibilityCurrent: current === index && _Platform.default.OS === 'web' && 'step',
+            isBarVariant: isBarVariant
           }, label);
         })
       }), showStepTrackerLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/cjs/TabBar/TabBar.js

@@ -91,7 +91,8 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist"
+        accessibilityRole: "tablist",
+        tokens: item.tokens
       }, item.id))
     })
   });
@@ -105,7 +106,8 @@ TabBar.propTypes = {
     icon: _propTypes.default.node,
     iconActive: _propTypes.default.node,
     label: _propTypes.default.string.isRequired,
-    href: _propTypes.default.string
+    href: _propTypes.default.string,
+    tokens: (0, _utils.getTokensPropType)('TabBarItem')
   })).isRequired,
   /** Id of the initially selected item. */
   initiallySelectedItem: _propTypes.default.number,

package/lib/cjs/TabBar/index.js

@@ -5,5 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _TabBar = _interopRequireDefault(require("./TabBar"));
+var _TabBarItem = _interopRequireDefault(require("./TabBarItem"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_TabBar.default.Item = _TabBarItem.default;
 var _default = exports.default = _TabBar.default;

package/lib/cjs/Tooltip/Backdrop.js

@@ -21,7 +21,7 @@ function createPortalNode(nodeId) {
   left: ${window.scrollX}px; 
   right: 0; 
   bottom: 0; 
-  z-index: 9999; 
+  z-index: 100000; 
   pointer-events: none;
   `;
   document.body.appendChild(node);

package/lib/cjs/utils/index.js

@@ -21,7 +21,8 @@ var _exportNames = {
   convertFromMegaByteToByte: true,
   formatImageSource: true,
   getSpacingScale: true,
-  useVariants: true
+  useVariants: true,
+  isTouchDevice: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -65,6 +66,12 @@ Object.defineProperty(exports, "info", {
     return _info.default;
   }
 });
+Object.defineProperty(exports, "isTouchDevice", {
+  enumerable: true,
+  get: function () {
+    return _isTouchDevice.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -256,6 +263,7 @@ var _convertFromMegaByteToByte = _interopRequireDefault(require("./convertFromMe
 var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
 var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
 var _useVariants = _interopRequireDefault(require("./useVariants"));
+var _isTouchDevice = _interopRequireDefault(require("./isTouchDevice"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/utils/isTouchDevice.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Determines if the current device supports touch interactions
+ *
+ * @returns {boolean} True if the device supports touch, false otherwise
+ */
+const isTouchDevice = () => {
+  if (_Platform.default.OS !== 'web') {
+    return true;
+  }
+  if (typeof window !== 'undefined') {
+    if ('ontouchstart' in window) {
+      return true;
+    }
+    if (window.navigator && window.navigator.maxTouchPoints > 0) {
+      return true;
+    }
+    if (window.navigator && window.navigator.msMaxTouchPoints > 0) {
+      return true;
+    }
+    if (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) {
+      return true;
+    }
+  }
+  return false;
+};
+var _default = exports.default = isTouchDevice;

package/lib/esm/Box/Box.js

@@ -7,8 +7,8 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import Image from "react-native-web/dist/exports/Image";
 import { useTheme, useThemeTokens, useResponsiveThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, createMediaQueryStyles, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps, StyleSheet as RNMQStyleSheet, getSpacingScale } from '../utils';
-import backgroundImageStylesMap from './backgroundImageStylesMap';
+import { a11yProps, createMediaQueryStyles, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps, StyleSheet as RNMQStyleSheet, getSpacingScale, formatImageSource } from '../utils';
+import backgroundImageStylesMap, { backgroundPositions } from './backgroundImageStylesMap';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -68,39 +68,51 @@ const setBackgroundImage = _ref2 => {
     backgroundImageResizeMode,
     backgroundImagePosition,
     backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
+    content,
+    testID
   } = _ref2;
-  if (backgroundImageResizeMode === 'contain') {
-    const containedViewStyle = {
-      ...staticStyles.containedView,
-      width: backgroundImageWidth,
-      height: backgroundImageHeight,
-      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
-    };
+  const backgroundImageTestID = testID ? `${testID}-background-image` : undefined;
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
+    if (Platform.OS === 'web') {
+      const backgroundPosition = backgroundPositions[positionKey] || 'center center';
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition
+      };
+      return /*#__PURE__*/_jsx(View, {
+        style: [staticStyles.imageBackground, backgroundImageStyle],
+        "aria-label": alt,
+        testID: backgroundImageTestID,
+        children: content
+      });
+    }
+    const positionStyles = backgroundImageStylesMap[positionKey] || {};
     return /*#__PURE__*/_jsxs(View, {
-      style: staticStyles.containedContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: containedViewStyle,
-        children: /*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: src
-          },
-          alt: alt,
-          style: staticStyles.containedImage,
-          accessibilityIgnoresInvertColors: true
-        })
-      }), content]
+      style: staticStyles.containContainer,
+      children: [/*#__PURE__*/_jsx(Image, {
+        source: src,
+        resizeMode: backgroundImageResizeMode,
+        style: [staticStyles.containImage, positionStyles],
+        accessible: true,
+        accessibilityLabel: alt,
+        accessibilityIgnoresInvertColors: true,
+        testID: backgroundImageTestID
+      }), /*#__PURE__*/_jsx(View, {
+        style: staticStyles.contentOverlay,
+        children: content
+      })]
     });
   }
   return /*#__PURE__*/_jsx(ImageBackground, {
-    source: {
-      uri: src
-    },
-    alt: alt,
-    style: staticStyles.backgroundImageContainer,
+    source: src,
     resizeMode: backgroundImageResizeMode,
+    style: staticStyles.imageBackground,
+    accessible: true,
+    accessibilityLabel: alt,
+    testID: backgroundImageTestID,
     children: content
   });
 };
@@ -257,31 +269,61 @@ const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     align = ''
   } = backgroundImage || {};
   const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
-  const backgroundImagePosition = useResponsiveProp(position, 'none');
-  const backgroundImageAlign = useResponsiveProp(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0);
-  if (backgroundImage) content = setBackgroundImage({
-    src,
-    alt,
-    backgroundImageResizeMode,
-    backgroundImagePosition,
-    backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
-  });
-  React.useEffect(() => {
-    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-      Image.getSize(src, (width, height) => {
-        // Only update the state if the size has changed
-        if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
-          setBackgroundImageWidth(width);
-          setBackgroundImageHeight(height);
-        }
+  const backgroundImagePosition = useResponsiveProp(position);
+  const backgroundImageAlign = useResponsiveProp(align);
+  const imageSourceViewport = formatImageSource(useResponsiveProp(src));
+  if (backgroundImage && src) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = boxStyles;
+    const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
+    const paddedContent = hasPadding ? /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    }) : children;
+    content = setBackgroundImage({
+      src: imageSourceViewport,
+      alt,
+      backgroundImageResizeMode,
+      backgroundImagePosition,
+      backgroundImageAlign,
+      content: paddedContent,
+      testID
+    });
+    const dataSetValue = boxMediaIds ? {
+      media: boxMediaIds,
+      ...dataSet
+    } : dataSet;
+    if (scroll) {
+      const scrollProps = typeof scroll === 'object' ? scroll : {};
+      scrollProps.contentContainerStyle = [containerStyle, scrollProps.contentContainerStyle];
+      return /*#__PURE__*/_jsx(ScrollView, {
+        ...scrollProps,
+        ...props,
+        testID: testID,
+        dataSet: dataSetValue,
+        ref: ref,
+        children: content
       });
     }
-  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+    return /*#__PURE__*/_jsx(View, {
+      ...props,
+      style: containerStyle,
+      testID: testID,
+      dataSet: dataSetValue,
+      ref: ref,
+      children: content
+    });
+  }
   const dataSetValue = boxMediaIds ? {
     media: boxMediaIds,
     ...dataSet
@@ -394,10 +436,12 @@ Box.propTypes = {
   */
   customGradient: PropTypes.func,
   /**
-   * Use this prop to add a background image to the box.
+   * Apply background image to the box.
    */
   backgroundImage: PropTypes.shape({
-    src: PropTypes.string.isRequired,
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
@@ -406,18 +450,24 @@ Box.propTypes = {
 };
 export default Box;
 const staticStyles = StyleSheet.create({
-  backgroundImageContainer: {
-    flex: 1
+  imageBackground: {
+    width: '100%',
+    height: '100%'
   },
-  containedContainer: {
-    flex: 1,
-    overflow: 'hidden'
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
   },
-  containedView: {
-    zIndex: -1,
-    position: 'absolute'
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
   },
-  containedImage: {
+  containImage: {
+    position: 'absolute',
     width: '100%',
     height: '100%'
   }

package/lib/esm/Box/backgroundImageStylesMap.js

@@ -1,11 +1,15 @@
-export default {
+import Platform from "react-native-web/dist/exports/Platform";
+const webStyles = {
   'top-start': {
-    top: 0
+    top: 0,
+    left: 0
   },
   'top-center': {
-    left: 0,
-    right: 0,
-    marginHorizontal: 'auto'
+    top: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
   },
   'top-end': {
     top: 0,
@@ -16,60 +20,160 @@ export default {
     right: 0
   },
   'left-start': {
-    top: 0
+    top: 0,
+    left: 0
   },
   'left-center': {
-    top: 0,
+    top: '50%',
+    left: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'right-center': {
+    top: '50%',
+    right: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    bottom: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
+  },
+  'bottom-end': {
     bottom: 0,
-    marginVertical: 'auto'
+    right: 0
+  },
+  'right-end': {
+    bottom: 0,
+    right: 0
   },
-  'none-start': {
+  'top-stretch': {
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
     top: 0,
     bottom: 0,
-    marginVertical: 'auto'
+    left: 0,
+    height: '100%'
   },
-  'none-center': {
+  'right-stretch': {
     top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
     bottom: 0,
     left: 0,
     right: 0,
-    margin: 'auto'
+    width: '100%'
+  }
+};
+const webBackgroundPositions = {
+  'top-start': 'left top',
+  'top-center': 'center top',
+  'top-end': 'right top',
+  'bottom-start': 'left bottom',
+  'bottom-center': 'center bottom',
+  'bottom-end': 'right bottom',
+  'left-center': 'left center',
+  'right-center': 'right center'
+};
+const nativeStyles = {
+  'top-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
   },
-  'right-center': {
+  'top-center': {
+    top: 0,
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
+  },
+  'top-end': {
     top: 0,
-    bottom: 0,
     right: 0,
-    marginVertical: 'auto'
+    width: 150,
+    height: 200
   },
-  'none-end': {
+  'right-start': {
     top: 0,
-    bottom: 0,
     right: 0,
-    marginVertical: 'auto'
+    width: 150,
+    height: 200
+  },
+  'left-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'left-center': {
+    left: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
+  },
+  'right-center': {
+    right: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
   },
   'bottom-start': {
     bottom: 0,
-    left: 0
+    left: 0,
+    width: 150,
+    height: 200
   },
   'left-end': {
     bottom: 0,
-    left: 0
+    left: 0,
+    width: 150,
+    height: 200
   },
   'bottom-center': {
-    left: 0,
-    right: 0,
     bottom: 0,
-    marginHorizontal: 'auto'
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
   },
   'bottom-end': {
+    bottom: 0,
     right: 0,
-    bottom: 0
+    width: 150,
+    height: 200
   },
   'right-end': {
+    bottom: 0,
     right: 0,
-    bottom: 0
+    width: 150,
+    height: 200
   },
   'top-stretch': {
+    top: 0,
     left: 0,
     right: 0,
     width: '100%'
@@ -77,6 +181,7 @@ export default {
   'left-stretch': {
     top: 0,
     bottom: 0,
+    left: 0,
     height: '100%'
   },
   'right-stretch': {
@@ -86,9 +191,11 @@ export default {
     height: '100%'
   },
   'bottom-stretch': {
+    bottom: 0,
     left: 0,
     right: 0,
-    bottom: 0,
     width: '100%'
   }
-};
+};
+export const backgroundPositions = Platform.OS === 'web' ? webBackgroundPositions : {};
+export default Platform.OS === 'web' ? webStyles : nativeStyles;

package/lib/esm/Carousel/Carousel.js

@@ -8,7 +8,7 @@ import Dimensions from "react-native-web/dist/exports/Dimensions";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
-import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment } from '../utils';
+import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment, isTouchDevice } from '../utils';
 import { useA11yInfo } from '../A11yInfoProvider';
 import { CarouselProvider } from './CarouselContext';
 import CarouselItem from './CarouselItem';
@@ -717,7 +717,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       return false;
     }
     if (Platform.OS === 'web') {
-      return !!(viewport === 'xs' || viewport === 'sm');
+      return !!(viewport === 'xs' || viewport === 'sm' || viewport === 'md' && isTouchDevice());
     }
     return true;
   }, [viewport, totalItems]);

package/lib/esm/Modal/Modal.js

@@ -120,6 +120,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     confirmButtonVariant,
     cancelButtonText,
     cancelButtonType,
+    footer,
     ...rest
   } = _ref5;
   const viewport = useViewport();
@@ -223,6 +224,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
+            footer: footer,
             children: Platform.OS !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
               style: selectScrollViewStyles,
               children: children
@@ -323,7 +325,11 @@ Modal.propTypes = {
   /**
    * Receive a function for the onCancel event in the cancel button.
    */
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  /**
+   * Receive a react node or an array of nodes to render at the bottom of the modal, above the action buttons.
+   */
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 };
 export default Modal;
 const staticStyles = StyleSheet.create({