@telus-uds/components-base 3.13.0 → 3.14.1

package/lib/cjs/FlexGrid/FlexGrid.js

@@ -24,17 +24,14 @@ 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 (pixels), a string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
- * @param {number|string} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
- * @returns {number|string|null} The resolved maximum width value, which can be a number, a string (e.g., '100%'), or null.
+ *        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) {
+  if (!contentMinWidthValue || contentMinWidthValue === CONTENT_FULL_WIDTH) {
     return null;
   }
-  if (contentMinWidthValue === CONTENT_FULL_WIDTH) {
-    return '100%';
-  }
   if (Number.isFinite(contentMinWidthValue)) {
     return contentMinWidthValue;
   }
@@ -44,6 +41,25 @@ const resolveContentMaxWidth = (contentMinWidthValue, 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 _systemConstants.viewports.map.get(viewportKey === 'xs' ? 'sm' : viewportKey);
+  }
+  if (contentMinWidth) {
+    return maxWidth;
+  }
+  return viewportKey === 'xl' ? _systemConstants.viewports.map.get('xl') : null;
+};
+
 /**
  * A mobile-first flexbox grid.
  */
@@ -80,23 +96,23 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth);
   const stylesByViewport = {
     xs: {
-      maxWidth: limitWidth ? _systemConstants.viewports.map.get('sm') : maxWidth,
+      maxWidth: getMaxWidthForViewport('xs', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
     sm: {
-      maxWidth: limitWidth ? _systemConstants.viewports.map.get('sm') : maxWidth,
+      maxWidth: getMaxWidthForViewport('sm', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
     },
     md: {
-      maxWidth: limitWidth ? _systemConstants.viewports.map.get('md') : maxWidth,
+      maxWidth: getMaxWidthForViewport('md', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
     },
     lg: {
-      maxWidth: limitWidth ? _systemConstants.viewports.map.get('lg') : maxWidth,
+      maxWidth: getMaxWidthForViewport('lg', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
     },
     xl: {
-      maxWidth: limitWidth ? _systemConstants.viewports.map.get('xl') : maxWidth,
+      maxWidth: getMaxWidthForViewport('xl', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
   };

package/lib/cjs/Tabs/Tabs.js

@@ -13,6 +13,7 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 var _utils = require("../utils");
 var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 var _TabsItem = _interopRequireDefault(require("./TabsItem"));
+var _TabsDropdown = _interopRequireDefault(require("./TabsDropdown"));
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -48,6 +49,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.
@@ -93,6 +100,31 @@ const Tabs = /*#__PURE__*/_react.default.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 = (0, _utils.useResponsiveProp)({
+    xs: true,
+    sm: true,
+    md: false,
+    lg: false,
+    xl: false
+  }, false);
+  const shouldRenderDropdown = variant?.dropdown === true && isSmallViewport;
+  if (shouldRenderDropdown) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsDropdown.default, {
+      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__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
     ref: ref,
     ScrollButton: _HorizontalScroll.HorizontalScrollButton,
@@ -152,13 +184,13 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.PropTypes,
+  ..._utils.withLinkRouter.propTypes,
   /**
    * Array of `TabsItem`s
    */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     ...selectedItemPropTypes,
-    ..._utils.withLinkRouter.PropTypes,
+    ..._utils.withLinkRouter.propTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,

package/lib/cjs/Tabs/TabsDropdown.js

@@ -0,0 +1,252 @@
+"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _ViewportProvider = require("../ViewportProvider");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Listbox = _interopRequireDefault(require("../Listbox"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.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.default.forwardRef((_ref2, ref) => {
+  let {
+    itemTokens,
+    variant,
+    value,
+    onChange,
+    items = [],
+    LinkRouter,
+    linkRouterProps,
+    accessibilityRole = 'button',
+    copy = 'en',
+    dictionary: customDictionary = _dictionary.default,
+    ...rest
+  } = _ref2;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const getTokens = (0, _ThemeProvider.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
+  } = (0, _utils.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 = (0, _utils.useCopy)({
+    dictionary: customDictionary,
+    copy
+  });
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      ref: sourceRef,
+      onPress: handleToggle,
+      ...selectedProps,
+      style: styles.pressable,
+      children: pressableState => {
+        // Use resolvePressableTokens like TabBarItem does for proper state handling
+        const resolvedTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
+          viewport,
+          expanded: isOpen,
+          selected: isSelected
+        });
+        const textStyles = (0, _ThemeProvider.applyTextStyles)({
+          ...(0, _utils.selectTokens)('Typography', resolvedTokens),
+          themeOptions
+        });
+
+        // Get dropdown icons from resolved tokens
+        const dropdownIcon = isOpen ? resolvedTokens.dropdownIconExpanded : resolvedTokens.dropdownIcon;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: [styles.buttonContent, selectButtonContentStyles(resolvedTokens)],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: textStyles,
+            children: selectedItem?.label || getCopy('selectTab')
+          }), dropdownIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: dropdownIcon,
+            variant: {
+              size: 'micro'
+            },
+            tokens: {
+              color: textStyles.color
+            }
+          })]
+        });
+      }
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
+      overlaidPosition: overlaidPosition,
+      maxWidth: 400,
+      minWidth: 200,
+      isReady: isReady,
+      onLayout: onTargetLayout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default, {
+        items: listboxItems,
+        firstItemRef: targetRef,
+        parentRef: sourceRef,
+        selectedId: value,
+        onClose: handleClose,
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps
+      })
+    })]
+  });
+});
+TabsDropdown.displayName = 'TabsDropdown';
+const dictionaryContentShape = _propTypes.default.shape({
+  selectTab: _propTypes.default.string.isRequired
+});
+TabsDropdown.propTypes = {
+  ...selectedSystemPropTypes,
+  ..._utils.withLinkRouter.propTypes,
+  /**
+   * Array of tab items
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    ..._utils.withLinkRouter.propTypes,
+    /** URL to navigate to when the tab is pressed */
+    href: _propTypes.default.string,
+    /** Display text for the tab */
+    label: _propTypes.default.string,
+    /** Unique identifier for the tab */
+    id: _propTypes.default.string,
+    /** Reference to the tab element */
+    ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    /** Custom render function for the tab content */
+    render: _propTypes.default.func
+  })),
+  /**
+   * Current selected tab id
+   */
+  value: _propTypes.default.string,
+  /**
+   * Callback for when the selected tab changes
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * Custom tokens for the main Tabs container
+   */
+  tokens: (0, _utils.getTokensPropType)('Tabs'),
+  /**
+   * Custom tokens for `TabsItem`
+   */
+  itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
+  /**
+   * Visual and behavioral variants for the tabs dropdown
+   */
+  variant: _utils.variantProp.propType,
+  /**
+   * Select English or French copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), dictionaryContentShape]),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
+};
+const styles = _StyleSheet.default.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'
+  }
+});
+var _default = exports.default = TabsDropdown;

package/lib/cjs/Tabs/TabsItem.js

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

package/lib/cjs/Tabs/dictionary.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    selectTab: 'Select tab'
+  },
+  fr: {
+    selectTab: 'Sélectionner un onglet'
+  }
+};

package/lib/cjs/ViewportProvider/ViewportProvider.js

@@ -13,13 +13,18 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * 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.
  */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.default.useState(_systemConstants.viewports.keys[0]);
+  const [viewport, setViewport] = _react.default.useState(defaultViewport || _systemConstants.viewports.keys[0]);
   (0, _useViewportListener.default)(setViewport);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useViewport.ViewportContext.Provider, {
     value: viewport,
@@ -27,6 +32,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   });
 };
 ViewportProvider.propTypes = {
-  children: _propTypes.default.node.isRequired
+  children: _propTypes.default.node.isRequired,
+  defaultViewport: _propTypes.default.oneOf(_systemConstants.viewports.keys)
 };
 var _default = exports.default = ViewportProvider;

package/lib/esm/BaseProvider/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { PortalProvider } from '@gorhom/portal';
+import { viewports } from '@telus-uds/system-constants';
 import A11yInfoProvider from '../A11yInfoProvider';
 import ViewportProvider from '../ViewportProvider';
 import ThemeProvider from '../ThemeProvider';
@@ -17,6 +18,7 @@ const BaseProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
   return /*#__PURE__*/_jsx(HydrationProvider, {
     children: /*#__PURE__*/_jsx(A11yInfoProvider, {
       children: /*#__PURE__*/_jsx(ViewportProvider, {
+        defaultViewport: themeOptions?.defaultViewport,
         children: /*#__PURE__*/_jsx(ThemeProvider, {
           defaultTheme: defaultTheme,
           themeOptions: themeOptions,
@@ -34,7 +36,8 @@ BaseProvider.propTypes = {
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
-    forceZIndex: PropTypes.bool
+    forceZIndex: PropTypes.bool,
+    defaultViewport: PropTypes.oneOf(viewports.keys)
   })
 };
 export default BaseProvider;

package/lib/esm/Card/Card.js

@@ -5,7 +5,7 @@ import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTh
 import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps, hrefAttrsProp } from '../utils/props';
-import CardBase from './CardBase';
+import CardBase, { selectStyles } from './CardBase';
 import PressableCardBase from './PressableCardBase';
 import CheckboxButton from '../Checkbox/CheckboxButton';
 import RadioButton from '../Radio/RadioButton';
@@ -182,12 +182,27 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let cardStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens);
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
+      const tokensToTransform = selectionType ? selectStyles({
+        ...viewportTokens,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0
+      }) : selectStyles(viewportTokens);
+      acc[vp] = tokensToTransform;
+      return acc;
+    }, {});
+    const mediaQueryStyleSheet = createMediaQueryStyles(transformedThemeTokens);
     const {
       ids,
       styles
     } = StyleSheet.create({
-      card: mediaQueryStyleSheet
+      card: {
+        ...themeTokens[viewport],
+        ...mediaQueryStyleSheet
+      }
     });
     cardStyles = styles.card;
     mediaIds = ids.card;
@@ -321,7 +336,9 @@ Card.propTypes = {
     // 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']))
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['bottom', 'left', 'right', 'top'])),
+    align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
   }),
   /**
    * Data set for the card.