@telus-uds/components-base 3.12.2 → 3.14.0

package/lib/esm/FlexGrid/FlexGrid.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
-import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
+import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles, useResponsiveProp } from '../utils';
 import Row from './Row';
 import Col from './Col';
 import GutterContext from './providers/GutterContext';
@@ -10,6 +10,48 @@ import { useTheme } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const CONTENT_MAX_WIDTH = 'max';
+const CONTENT_FULL_WIDTH = 'full';
+
+/**
+ * Resolves the maximum width for content based on the provided value and responsive width.
+ *
+ * @param {number|string|null|undefined} contentMinWidthValue - The minimum width value for the content.
+ *        Can be a number, a special string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
+ * @param {number} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
+ */
+const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
+  if (!contentMinWidthValue || contentMinWidthValue === CONTENT_FULL_WIDTH) {
+    return null;
+  }
+  if (Number.isFinite(contentMinWidthValue)) {
+    return contentMinWidthValue;
+  }
+  if (contentMinWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth;
+  }
+  return contentMinWidthValue;
+};
+
+/**
+ * Calculates the maximum width for a given viewport based on limitWidth and contentMinWidth settings.
+ *
+ * @param {string} viewportKey - The viewport key ('xs', 'sm', 'md', 'lg', 'xl')
+ * @param {boolean} limitWidth - Whether to limit the width to viewport breakpoints
+ * @param {any} contentMinWidth - The contentMinWidth prop value
+ * @param {number|string|null} maxWidth - The resolved max width value
+ * @returns {number|string|null} The calculated maximum width for the viewport
+ */
+const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWidth) => {
+  if (limitWidth) {
+    return viewports.map.get(viewportKey === 'xs' ? 'sm' : viewportKey);
+  }
+  if (contentMinWidth) {
+    return maxWidth;
+  }
+  return viewportKey === 'xl' ? viewports.map.get('xl') : null;
+};
 
 /**
  * A mobile-first flexbox grid.
@@ -17,7 +59,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    limitWidth = true,
+    limitWidth = false,
     gutter = true,
     outsideGutter = true,
     xsReverse,
@@ -29,35 +71,41 @@ const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     accessibilityRole,
     children,
     dataSet,
+    contentMinWidth,
     ...rest
   } = _ref;
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const viewport = useViewport();
   const {
+    themeOptions,
     themeOptions: {
       enableMediaQueryStyleSheet
     }
   } = useTheme();
   let flexgridStyles;
   let mediaIds;
+  const contentMinWidthValue = useResponsiveProp(contentMinWidth);
+  const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
+  const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth);
   const stylesByViewport = {
     xs: {
+      maxWidth: getMaxWidthForViewport('xs', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
     sm: {
-      maxWidth: limitWidth && viewports.map.get('sm'),
+      maxWidth: getMaxWidthForViewport('sm', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
     },
     md: {
-      maxWidth: limitWidth && viewports.map.get('md'),
+      maxWidth: getMaxWidthForViewport('md', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
     },
     lg: {
-      maxWidth: limitWidth && viewports.map.get('lg'),
+      maxWidth: getMaxWidthForViewport('lg', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
     },
     xl: {
-      maxWidth: limitWidth && viewports.map.get('xl'),
+      maxWidth: getMaxWidthForViewport('xl', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
   };
@@ -151,7 +199,24 @@ FlexGrid.propTypes = {
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+   * The minimum width of the content in the FlexGrid.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
+  })
 };
 FlexGrid.Row = Row;
 FlexGrid.Col = Col;

package/lib/esm/Icon/Icon.js

@@ -32,7 +32,9 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     width: themeTokens.size + themeTokens.width * 2,
     // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
     height: themeTokens.size + themeTokens.width * 2
-  } : {};
+  } : {
+    padding: themeTokens.padding
+  };
   const getIconContentForMobile = () => {
     if (Object.keys(paddingStyles).length) {
       return /*#__PURE__*/_jsx(View, {

package/lib/esm/InputLabel/InputLabel.js

@@ -142,7 +142,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Current number of characterts of an input text.
    */

package/lib/esm/InputSupports/InputSupports.js

@@ -116,7 +116,7 @@ InputSupports.propTypes = {
    * 1. `tooltip` as a string - The content of the tooltip.
    * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/lib/esm/Notification/Notification.js

@@ -9,6 +9,7 @@ import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CONTENT_MAX_WIDTH = 'max';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = tokens => ({
   ...tokens
@@ -63,13 +64,13 @@ const selectDismissButtonContainerStyles = _ref4 => {
     placeContent: 'start'
   };
 };
-const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
-  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
+const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport, useContentMaxWidth) => ({
+  maxWidth: system && (useContentMaxWidth || viewport === 'xl') ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system, useContentMaxWidth) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = {
@@ -92,7 +93,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
   const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce((acc, _ref6) => {
     let [vp, viewportTokens] = _ref6;
     acc[vp] = {
-      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp, useContentMaxWidth),
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
@@ -169,7 +170,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     selectDismissIconPropsStyles
   };
 };
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system, useContentMaxWidth) => ({
   containerStyles: {
     container: {
       flexDirection: 'column',
@@ -181,7 +182,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport, useContentMaxWidth),
       ...(system && {
         alignSelf: 'center'
       })
@@ -280,6 +281,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     tokens,
     variant,
     onDismiss,
+    contentMinWidth,
     ...rest
   } = _ref7;
   const [isDismissed, setIsDismissed] = React.useState(false);
@@ -302,6 +304,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     system: isSystemEnabled,
     viewport
   });
+  const useContentMaxWidth = useResponsiveProp(contentMinWidth) === CONTENT_MAX_WIDTH;
   const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth, viewports.map.get(viewports.xl));
   const notificationComponentRef = React.useRef({
     containerStyles: {},
@@ -324,9 +327,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled, useContentMaxWidth);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled, useContentMaxWidth);
   }
   if (isDismissed) {
     return null;
@@ -423,6 +426,22 @@ Notification.propTypes = {
    * Callback function called when the dismiss button is clicked
    */
   onDismiss: PropTypes.func,
+  /**
+   * The minimum width of the content in the Notification when using the system variant.
+   * This prop accepts responsive values for different viewports.
+   * - `xs`: 'max' | 'full'
+   * - `sm`: 'max' | 'full'
+   * - `md`: 'max' | 'full'
+   * - `lg`: 'max' | 'full'
+   * - `xl`: 'max' | 'full'
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOf(['max', 'full']),
+    lg: PropTypes.oneOf(['max', 'full']),
+    md: PropTypes.oneOf(['max', 'full']),
+    sm: PropTypes.oneOf(['max', 'full']),
+    xs: PropTypes.oneOf(['max', 'full'])
+  }),
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 };

package/lib/esm/Tabs/Tabs.js

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import StackView from '../StackView';
-import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, useResponsiveProp, variantProp, viewProps, withLinkRouter } from '../utils';
 import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
 import TabsItem from './TabsItem';
+import TabsDropdown from './TabsDropdown';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
@@ -39,6 +40,12 @@ const getStackViewTokens = variant => {
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
  *
+ * By default, Tabs always renders as horizontal scrolling tabs regardless of viewport.
+ * To enable dropdown mode, you must explicitly pass `variant={{ dropdown: true }}`.
+ * When dropdown is enabled, it will only render as a dropdown on mobile and tablet
+ * viewports (XS and SM). On larger viewports (MD, LG, XL), it will still render as
+ * horizontal tabs even with dropdown enabled.
+ *
  * If you are using Tabs to navigate to a new page (web-only) you should pass
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
@@ -84,6 +91,31 @@ const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
   const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
   const stackViewTokens = getStackViewTokens(variant);
+
+  // Render dropdown only if explicitly requested via variant AND viewport is xs or sm
+  const isSmallViewport = useResponsiveProp({
+    xs: true,
+    sm: true,
+    md: false,
+    lg: false,
+    xl: false
+  }, false);
+  const shouldRenderDropdown = variant?.dropdown === true && isSmallViewport;
+  if (shouldRenderDropdown) {
+    return /*#__PURE__*/_jsx(TabsDropdown, {
+      ref: ref,
+      tokens: tokens,
+      itemTokens: itemTokens,
+      variant: variant,
+      value: currentValue,
+      onChange: setValue,
+      items: items,
+      LinkRouter: LinkRouter,
+      linkRouterProps: linkRouterProps,
+      accessibilityRole: parentAccessibilityRole === 'tablist' ? 'button' : parentAccessibilityRole,
+      ...restProps
+    });
+  }
   return /*#__PURE__*/_jsx(HorizontalScroll, {
     ref: ref,
     ScrollButton: HorizontalScrollButton,
@@ -143,13 +175,13 @@ const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
-  ...withLinkRouter.PropTypes,
+  ...withLinkRouter.propTypes,
   /**
    * Array of `TabsItem`s
    */
   items: PropTypes.arrayOf(PropTypes.shape({
     ...selectedItemPropTypes,
-    ...withLinkRouter.PropTypes,
+    ...withLinkRouter.propTypes,
     href: PropTypes.string,
     label: PropTypes.string,
     id: PropTypes.string,

package/lib/esm/Tabs/TabsDropdown.js

@@ -0,0 +1,245 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokensCallback, applyTextStyles, useTheme } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, resolvePressableTokens, selectSystemProps, selectTokens, useOverlaidPosition, useCopy, variantProp, viewProps, withLinkRouter } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import Icon from '../Icon';
+import Listbox from '../Listbox';
+import dictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectButtonContentStyles = _ref => {
+  let {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    marginHorizontal,
+    marginVertical
+  } = _ref;
+  return {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    marginLeft: marginHorizontal,
+    marginRight: marginHorizontal,
+    marginTop: marginVertical,
+    marginBottom: marginVertical
+  };
+};
+
+/**
+ * TabsDropdown renders a dropdown version of tabs for mobile/tablet viewports.
+ * It shows the currently selected tab as a button that opens a dropdown menu
+ * containing all available tabs.
+ *
+ * This is rendered automatically by `Tabs` on mobile viewports and when variant
+ * is dropdown and isn't intended to be used directly.
+ */
+const TabsDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    itemTokens,
+    variant,
+    value,
+    onChange,
+    items = [],
+    LinkRouter,
+    linkRouterProps,
+    accessibilityRole = 'button',
+    copy = 'en',
+    dictionary: customDictionary = dictionary,
+    ...rest
+  } = _ref2;
+  const {
+    themeOptions
+  } = useTheme();
+  const viewport = useViewport();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const getTokens = useThemeTokensCallback('TabsItem', itemTokens, {
+    viewport,
+    ...variant
+  });
+  const selectedItem = items.find(item => {
+    const itemId = item.id ?? item.label;
+    return value === itemId;
+  }) || items[0];
+  const {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  } = useOverlaidPosition({
+    isShown: isOpen,
+    offsets: {
+      vertical: 4
+    },
+    align: {
+      top: 'bottom',
+      left: 'left'
+    }
+  });
+  const handleToggle = () => setIsOpen(prev => !prev);
+  const handleClose = () => setIsOpen(false);
+  const handleItemSelect = (item, event) => {
+    const itemId = item.id ?? item.label;
+    setIsOpen(false);
+    if (onChange) onChange(itemId, event);
+    if (item.onPress) item.onPress(event);
+  };
+  const listboxItems = items.map(item => ({
+    ...item,
+    onPress: event => handleItemSelect(item, event)
+  }));
+  const isSelected = Boolean(selectedItem && value);
+  const getCopy = useCopy({
+    dictionary: customDictionary,
+    copy
+  });
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      ref: sourceRef,
+      onPress: handleToggle,
+      ...selectedProps,
+      style: styles.pressable,
+      children: pressableState => {
+        // Use resolvePressableTokens like TabBarItem does for proper state handling
+        const resolvedTokens = resolvePressableTokens(getTokens, pressableState, {
+          viewport,
+          expanded: isOpen,
+          selected: isSelected
+        });
+        const textStyles = applyTextStyles({
+          ...selectTokens('Typography', resolvedTokens),
+          themeOptions
+        });
+
+        // Get dropdown icons from resolved tokens
+        const dropdownIcon = isOpen ? resolvedTokens.dropdownIconExpanded : resolvedTokens.dropdownIcon;
+        return /*#__PURE__*/_jsxs(View, {
+          style: [styles.buttonContent, selectButtonContentStyles(resolvedTokens)],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: textStyles,
+            children: selectedItem?.label || getCopy('selectTab')
+          }), dropdownIcon && /*#__PURE__*/_jsx(Icon, {
+            icon: dropdownIcon,
+            variant: {
+              size: 'micro'
+            },
+            tokens: {
+              color: textStyles.color
+            }
+          })]
+        });
+      }
+    }), isOpen && /*#__PURE__*/_jsx(Listbox.Overlay, {
+      overlaidPosition: overlaidPosition,
+      maxWidth: 400,
+      minWidth: 200,
+      isReady: isReady,
+      onLayout: onTargetLayout,
+      children: /*#__PURE__*/_jsx(Listbox, {
+        items: listboxItems,
+        firstItemRef: targetRef,
+        parentRef: sourceRef,
+        selectedId: value,
+        onClose: handleClose,
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps
+      })
+    })]
+  });
+});
+TabsDropdown.displayName = 'TabsDropdown';
+const dictionaryContentShape = PropTypes.shape({
+  selectTab: PropTypes.string.isRequired
+});
+TabsDropdown.propTypes = {
+  ...selectedSystemPropTypes,
+  ...withLinkRouter.propTypes,
+  /**
+   * Array of tab items
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    ...withLinkRouter.propTypes,
+    /** URL to navigate to when the tab is pressed */
+    href: PropTypes.string,
+    /** Display text for the tab */
+    label: PropTypes.string,
+    /** Unique identifier for the tab */
+    id: PropTypes.string,
+    /** Reference to the tab element */
+    ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    /** Custom render function for the tab content */
+    render: PropTypes.func
+  })),
+  /**
+   * Current selected tab id
+   */
+  value: PropTypes.string,
+  /**
+   * Callback for when the selected tab changes
+   */
+  onChange: PropTypes.func,
+  /**
+   * Custom tokens for the main Tabs container
+   */
+  tokens: getTokensPropType('Tabs'),
+  /**
+   * Custom tokens for `TabsItem`
+   */
+  itemTokens: getTokensPropType('TabsItem'),
+  /**
+   * Visual and behavioral variants for the tabs dropdown
+   */
+  variant: variantProp.propType,
+  /**
+   * Select English or French copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%'
+  },
+  pressable: {
+    outlineWidth: 0,
+    outlineStyle: 'none',
+    outlineColor: 'transparent'
+  },
+  buttonContent: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    minHeight: 44,
+    outline: 'none',
+    boxSizing: 'border-box'
+  }
+});
+export default TabsDropdown;

package/lib/esm/Tabs/TabsItem.js

@@ -72,8 +72,10 @@ const selectContainerStyles = _ref3 => {
     borderRadius,
     paddingHorizontal: paddingHorizontal - borderWidth,
     paddingVertical: paddingVertical - borderWidth,
-    marginHorizontal,
-    marginVertical
+    marginLeft: marginHorizontal,
+    marginRight: marginHorizontal,
+    marginTop: marginVertical,
+    marginBottom: marginVertical
   };
 };
 

package/lib/esm/Tabs/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    selectTab: 'Select tab'
+  },
+  fr: {
+    selectTab: 'Sélectionner un onglet'
+  }
+};

package/lib/esm/ViewportProvider/ViewportProvider.js

@@ -6,15 +6,20 @@ import useViewportListener from './useViewportListener';
 
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
+ *
+ * @param {React.ReactNode} children - Child components that will have access to viewport context
+ * @param {string} [defaultViewport] - Default viewport to use during server-side rendering.
+ *   Must be one of the viewport keys from system-constants. If not provided, defaults to the smallest viewport.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const ViewportProvider = _ref => {
   let {
-    children
+    children,
+    defaultViewport
   } = _ref;
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = React.useState(viewports.keys[0]);
+  const [viewport, setViewport] = React.useState(defaultViewport || viewports.keys[0]);
   useViewportListener(setViewport);
   return /*#__PURE__*/_jsx(ViewportContext.Provider, {
     value: viewport,
@@ -22,6 +27,7 @@ const ViewportProvider = _ref => {
   });
 };
 ViewportProvider.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  defaultViewport: PropTypes.oneOf(viewports.keys)
 };
 export default ViewportProvider;

package/lib/esm/utils/props/inputSupportsProps.js

@@ -37,7 +37,7 @@ export default {
      * 1. `tooltip` as a string - The content of the tooltip.
      * 2. `tooltip` as an object - Tooltip component props to be passed.
      */
-    tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+    tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
     /**
      * Use to visually mark an input as valid or invalid.
      */

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.11.0",
+    "@telus-uds/system-theme-tokens": "^4.13.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.12.2",
+  "version": "3.14.0",
   "types": "types/index.d.ts"
 }