@telus-uds/components-base 3.23.0 → 3.25.0

package/lib/esm/Shortcuts/Shortcuts.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { viewports } from '@telus-uds/system-constants';
+import { useTheme, useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, useResponsiveProp, variantProp, viewProps } from '../utils';
+import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const {
+  selectHorizontalScrollTokens,
+  useItemPositions
+} = horizontalScrollUtils;
+const selectStyles = (themeTokens, maxWidth, viewport) => {
+  const isDesktop = viewport === viewports.md || viewport === viewports.lg || viewport === viewports.xl;
+  return {
+    wrapper: {
+      alignItems: isDesktop ? 'center' : 'flex-start'
+    },
+    scrollContainer: {
+      width: '100%',
+      ...(isDesktop && {
+        maxWidth
+      })
+    },
+    container: {
+      paddingTop: themeTokens.mainContainerTopPadding,
+      paddingBottom: themeTokens.mainContainerBottomPadding,
+      paddingLeft: themeTokens.mainContainerLeftPadding,
+      paddingRight: themeTokens.mainContainerRightPadding,
+      gap: themeTokens.mainContainerGap,
+      ...(isDesktop && {
+        alignItems: 'flex-start',
+        justifyContent: 'center'
+      })
+    }
+  };
+};
+
+/**
+ * A horizontal scrollable shortcuts component that displays a collection of shortcut items.
+ * This component automatically injects shared configuration props to all ShortcutsItem children
+ * via React.cloneElement, including variant settings, hideLabels, and iconVariant.
+ *
+ * @component
+ * @param {Object} props - Component properties
+ * @param {Object} [props.tokens] - Theme tokens to customize the component's appearance
+ * @param {Object} [props.variant] - Visual variant configuration for the shortcuts container and its items
+ * @param {string} [props.variant.width] - Width variant to apply to all items (e.g., 'equal', 'dynamic')
+ * @param {Object} [props.scrollButtonTokens] - Tokens to customize scroll button appearance
+ * @param {boolean} [props.hideLabels=false] - Whether to hide labels on all shortcut items (can be overridden per item)
+ * @param {Object} [props.iconVariant] - Icon variant to apply to all shortcut items (can be overridden per item)
+ * @param {React.ReactNode} props.children - ShortcutsItem components to render
+ * @param {React.Ref} ref - Forwarded ref to the component's root element
+ * @returns {React.ReactElement} Rendered shortcuts component with horizontal scroll functionality
+ *
+ * @example
+ * <Shortcuts hideLabels={false} variant={{ width: 'equal' }}>
+ *   <ShortcutsItem icon={HomeIcon} label="Home" href="/home" />
+ *   <ShortcutsItem icon={SettingsIcon} label="Settings" href="/settings" />
+ * </Shortcuts>
+ *
+ * @example
+ * // Item-level props override container props
+ * <Shortcuts hideLabels iconVariant={{ size: 'small' }}>
+ *   <ShortcutsItem icon={HomeIcon} label="Home" hideLabel={false} />
+ *   <ShortcutsItem icon={SettingsIcon} label="Settings" />
+ * </Shortcuts>
+ */
+const Shortcuts = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    scrollButtonTokens,
+    hideLabels = false,
+    iconVariant,
+    children,
+    ...rest
+  } = _ref;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Shortcuts', tokens, variant, {
+    viewport
+  });
+  const {
+    themeOptions
+  } = useTheme();
+  const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth, viewports.map.get(viewports.xl));
+  const [itemPositions] = useItemPositions();
+  const [maxItemWidth, setMaxItemWidth] = React.useState(null);
+  const registerWidth = React.useCallback(width => setMaxItemWidth(prev => prev == null || width > prev ? width : prev), []);
+  const styles = selectStyles(themeTokens, maxWidth, viewport);
+  const childrenWithProps = React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+    return /*#__PURE__*/React.cloneElement(child, {
+      maxWidth: maxItemWidth,
+      registerWidth,
+      containerVariant: variant,
+      containerHideLabels: hideLabels,
+      containerIconVariant: iconVariant
+    });
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [staticStyles.wrapper, styles.wrapper],
+    ref: ref,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.scrollContainer,
+      children: /*#__PURE__*/_jsx(HorizontalScroll, {
+        ScrollButton: HorizontalScrollButton,
+        itemPositions: itemPositions,
+        tokens: selectHorizontalScrollTokens(themeTokens),
+        scrollButtonTokens: scrollButtonTokens,
+        variant: {
+          hideNavigationButtons: Platform.OS !== 'web'
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: [staticStyles.container, styles.container],
+          children: childrenWithProps
+        })
+      })
+    })
+  });
+});
+Shortcuts.displayName = 'Shortcuts';
+Shortcuts.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Shortcuts'),
+  variant: variantProp.propType,
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
+  scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
+  /**
+   * Hide labels for all ShortcutsItem children. When true, labels are visually hidden but remain accessible to screen readers via the icon's accessibilityLabel.
+   */
+  hideLabels: PropTypes.bool,
+  /**
+   * Icon variant to apply to all ShortcutsItem children.
+   */
+  iconVariant: variantProp.propType,
+  /**
+   * ShortcutsItem components to be rendered within the Shortcuts container
+   */
+  children: PropTypes.node
+};
+const staticStyles = StyleSheet.create({
+  wrapper: {
+    flexGrow: 1
+  },
+  container: {
+    flexDirection: 'row',
+    flex: 1
+  }
+});
+export default Shortcuts;

package/lib/esm/Shortcuts/ShortcutsItem.js

@@ -0,0 +1,273 @@
+import React from 'react';
+import Image from "react-native-web/dist/exports/Image";
+import Platform from "react-native-web/dist/exports/Platform";
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
+import Icon from '../Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DYNAMIC_WIDTH_VARIANT = 'dynamic';
+const EQUAL_WIDTH_VARIANT = 'equal';
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
+const selectPressableStyles = (tokens, widthVariant, equalWidth) => {
+  const styles = {
+    borderColor: tokens.borderColor,
+    borderRadius: tokens.borderRadius,
+    borderWidth: tokens.borderWidth,
+    ...Platform.select({
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+  if (widthVariant === DYNAMIC_WIDTH_VARIANT) {
+    styles.width = 'auto';
+  } else if (widthVariant === EQUAL_WIDTH_VARIANT) {
+    if (equalWidth) {
+      styles.width = equalWidth;
+    } else {
+      styles.minWidth = tokens.width;
+    }
+  } else {
+    styles.width = tokens.width;
+  }
+  return styles;
+};
+const selectIconContainerStyles = tokens => ({
+  paddingBottom: tokens.iconContainerPaddingBottom,
+  paddingLeft: tokens.iconContainerPaddingLeft,
+  paddingRight: tokens.iconContainerPaddingRight,
+  paddingTop: tokens.iconContainerPaddingTop
+});
+const selectIconVariant = () => ({
+  background: true,
+  padding: 'medium'
+});
+const selectIconTokens = tokens => ({
+  backgroundColor: tokens.iconBackgroundColor,
+  color: tokens.iconColor,
+  size: tokens.iconSize,
+  width: tokens.iconWidth
+});
+const selectImageStyles = tokens => ({
+  width: tokens.imageWidth,
+  height: tokens.imageHeight
+});
+const selectLabelContainerStyles = tokens => ({
+  paddingBottom: tokens.labelContainerPaddingBottom,
+  paddingLeft: tokens.labelContainerPaddingLeft,
+  paddingRight: tokens.labelContainerPaddingRight,
+  paddingTop: tokens.labelContainerPaddingTop
+});
+const selectTitleTextStyles = tokens => applyTextStyles({
+  fontColor: tokens.labelFontColor,
+  fontName: tokens.labelFontName,
+  fontSize: tokens.labelFontSize,
+  fontWeight: tokens.labelFontWeight,
+  lineHeight: tokens.labelLineHeight,
+  textDecorationLine: tokens.labelUnderline,
+  textAlign: tokens.labelTextAlign
+});
+
+/**
+ * A clickable shortcut item component that displays an icon or image with an optional label.
+ * Can be used within a Shortcuts container to create a grid of navigation shortcuts.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.icon] - Icon identifier to display
+ * @param {Object} [props.image={ src: '', alt: '' }] - Image object with src and alt properties
+ * @param {string} [props.image.src] - Image source URL
+ * @param {string} [props.image.alt] - Image alt text for accessibility
+ * @param {string|React.ReactNode} props.label - Label text or content to display below the icon/image
+ * @param {boolean} [props.hideLabel=false] - Whether to hide the label for this specific item
+ * @param {string} [props.href] - Link URL for navigation
+ * @param {Object} [props.iconVariant] - Icon variant to apply to this specific item
+ * @param {Object} [props.tokens] - Theme tokens to customize appearance
+ * @param {Object} [props.variant] - Variant configuration object for this specific item
+ * @param {string} [props.variant.width] - Width variant (e.g., 'dynamic', 'equal')
+ * @param {Function} [props.onPressableStateChange] - Callback function that receives the pressable state object (pressed, hovered, focused)
+ * @param {number} [props.maxWidth] - Maximum width for equal width variant (injected by Shortcuts container)
+ * @param {Function} [props.registerWidth] - Callback to register width for equal width variant (injected by Shortcuts container)
+ * @param {Object} [props.containerVariant] - Variant configuration from Shortcuts container (injected by Shortcuts container)
+ * @param {boolean} [props.containerHideLabels] - Hide labels setting from Shortcuts container (injected by Shortcuts container)
+ * @param {Object} [props.containerIconVariant] - Icon variant from Shortcuts container (injected by Shortcuts container)
+ * @param {React.Ref} ref - Forwarded ref to the Pressable component
+ * @returns {React.ReactElement} The rendered shortcut item
+ *
+ * @example
+ * <ShortcutsItem
+ *   icon={HomeIcon}
+ *   label="Home"
+ *   href="/home"
+ *   onPressableStateChange={(state) => console.log(state)}
+ * />
+ */
+const ShortcutsItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    icon,
+    image = {
+      src: '',
+      alt: ''
+    },
+    label,
+    hideLabel = false,
+    href,
+    iconVariant,
+    tokens,
+    variant,
+    onPressableStateChange,
+    maxWidth,
+    registerWidth,
+    containerVariant,
+    containerHideLabels,
+    containerIconVariant,
+    ...rest
+  } = _ref;
+  const mergedVariant = {
+    ...containerVariant,
+    ...variant
+  };
+  const widthVariant = mergedVariant?.width;
+  const shouldHideLabel = hideLabel || containerHideLabels;
+  const mergedIconVariant = iconVariant ?? containerIconVariant;
+  const getThemeTokens = useThemeTokensCallback('ShortcutsItem', tokens, mergedVariant);
+  const getTokens = pressableState => getThemeTokens(resolvePressableState(pressableState));
+  const {
+    onPress,
+    ...props
+  } = clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rawRest
+  } = hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    href,
+    onPress: linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rawRest
+  });
+  const handleLayout = event => {
+    if (widthVariant === EQUAL_WIDTH_VARIANT && registerWidth) {
+      const {
+        width
+      } = event.nativeEvent.layout;
+      registerWidth(width);
+    }
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    style: pressableState => selectPressableStyles(getTokens(pressableState), widthVariant, maxWidth),
+    onLayout: handleLayout,
+    ...selectedProps,
+    children: pressableState => {
+      const themeTokens = getTokens(pressableState);
+      if (onPressableStateChange) {
+        onPressableStateChange(resolvePressableState(pressableState));
+      }
+      return /*#__PURE__*/_jsxs(View, {
+        style: staticStyles.container,
+        children: [icon && /*#__PURE__*/_jsx(View, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: icon,
+            variant: mergedIconVariant ?? selectIconVariant(),
+            tokens: mergedIconVariant ? {} : selectIconTokens(themeTokens),
+            ...(Platform.OS === 'web' && {
+              accessibilityLabel: label
+            })
+          })
+        }), !icon && image && /*#__PURE__*/_jsx(Image, {
+          source: image.src,
+          alt: image.alt,
+          style: selectImageStyles(themeTokens),
+          resizeMethod: "resize",
+          accessibilityIgnoresInvertColors: true
+        }), label && !shouldHideLabel && /*#__PURE__*/_jsx(View, {
+          style: [staticStyles.label, selectLabelContainerStyles(themeTokens)],
+          children: wrapStringsInText(label, {
+            style: selectTitleTextStyles(themeTokens)
+          })
+        })]
+      });
+    }
+  });
+});
+ShortcutsItem.displayName = 'ShortcutsItem';
+ShortcutsItem.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('ShortcutsItem'),
+  variant: variantProp.propType,
+  /**
+   * Icon for the ShortcutsItem
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Image for the ShortcutsItem
+   */
+  image: PropTypes.shape({
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+    alt: PropTypes.string
+  }),
+  /**
+   * Label for the ShortcutsItem
+   */
+  label: PropTypes.string,
+  /**
+   * Hide the label for this specific ShortcutsItem. When true, the label is visually hidden but remains accessible to screen readers via the icon's accessibilityLabel.
+   */
+  hideLabel: PropTypes.bool,
+  /**
+   * href for the ShortcutsItem
+   */
+  href: PropTypes.string,
+  /**
+   * Icon variant for this specific ShortcutsItem
+   */
+  iconVariant: variantProp.propType,
+  /**
+   * Callback function that receives the pressable state object containing pressed, hovered, and focused boolean properties
+   */
+  onPressableStateChange: PropTypes.func,
+  /**
+   * Maximum width for equal width variant (automatically injected by Shortcuts container)
+   * @private
+   */
+  maxWidth: PropTypes.number,
+  /**
+   * Callback to register width for equal width variant (automatically injected by Shortcuts container)
+   * @private
+   */
+  registerWidth: PropTypes.func,
+  /**
+   * Variant configuration from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerVariant: variantProp.propType,
+  /**
+   * Hide labels setting from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerHideLabels: PropTypes.bool,
+  /**
+   * Icon variant from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerIconVariant: variantProp.propType
+};
+const staticStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  label: {
+    flexWrap: 'wrap'
+  }
+});
+export default ShortcutsItem;

package/lib/esm/Shortcuts/index.js

@@ -0,0 +1,3 @@
+import Shortcuts from './Shortcuts';
+export { default as ShortcutsItem } from './ShortcutsItem';
+export default Shortcuts;

package/lib/esm/TextInput/TextInputBase.js

@@ -325,7 +325,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       icon: ClearButtonIcon,
       onPress: handleClear,
       variant: {
-        compact: true
+        subtle: true
       }
     }, "clear"));
   }
@@ -335,8 +335,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
       onPress: handleShowOrHide,
       variant: {
-        compact: true,
-        password: true,
+        subtle: true,
         inactive: variant.inactive,
         size: 'large'
       },

package/lib/esm/Tooltip/Tooltip.native.js

@@ -162,6 +162,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     nativeID,
     activateOnHover = false,
     tooltipButtonTokens,
+    testID,
     ...rest
   } = _ref7;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -305,6 +306,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
         display: inline ? 'inline-block' : 'flex'
       }
     })],
+    testID: testID,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Pressable, {
       onPress: toggleIsOpen,

package/lib/esm/index.js

@@ -47,6 +47,7 @@ export { default as RadioCard, RadioCardGroup } from './RadioCard';
 export { default as Responsive } from './Responsive';
 export { default as Search } from './Search';
 export { default as Select } from './Select';
+export { default as Shortcuts, ShortcutsItem } from './Shortcuts';
 export { default as SideNav } from './SideNav';
 export { default as Skeleton } from './Skeleton';
 export { default as SkipLink } from './SkipLink';

package/lib/esm/utils/index.js

@@ -26,4 +26,5 @@ export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByt
 export { default as formatImageSource } from './formatImageSource';
 export { default as getSpacingScale } from './getSpacingScale';
 export { default as useVariants } from './useVariants';
-export { default as isTouchDevice } from './isTouchDevice';
+export { default as isTouchDevice } from './isTouchDevice';
+export { default as resolveContentMaxWidth } from './resolveContentMaxWidth';

package/lib/esm/utils/resolveContentMaxWidth.js

@@ -0,0 +1,24 @@
+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} contentMaxWidthValue - The maximum 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 contentMaxWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
+ */
+const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
+  if (!contentMaxWidthValue || contentMaxWidthValue === CONTENT_FULL_WIDTH) {
+    return null;
+  }
+  if (Number.isFinite(contentMaxWidthValue)) {
+    return contentMaxWidthValue;
+  }
+  if (contentMaxWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth;
+  }
+  return contentMaxWidthValue;
+};
+export default resolveContentMaxWidth;

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.16.0",
+    "@telus-uds/system-theme-tokens": "^4.18.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.23.0",
+  "version": "3.25.0",
   "types": "types/index.d.ts"
 }

package/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.16.0",
+    "@telus-uds/system-theme-tokens": "^4.18.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.23.0",
+  "version": "3.25.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonGroup.jsx

@@ -151,7 +151,17 @@ const ButtonGroup = React.forwardRef(
       >
         <View accessibilityRole={innerRole} style={viewStyles}>
           {items.map(
-            ({ label, id = label, accessibilityLabel, ref: itemRef, ...itemRest }, index) => {
+            (
+              {
+                label,
+                id = label,
+                accessibilityLabel,
+                ref: itemRef,
+                inactive: itemInactive,
+                ...itemRest
+              },
+              index
+            ) => {
               const isSelected = currentValues.includes(id)
 
               // Pass an object of relevant component state as first argument for any passed-in press handlers
@@ -171,6 +181,8 @@ const ButtonGroup = React.forwardRef(
                 ...a11yProps.getPositionInSet(items.length, index)
               }
 
+              const isInactive = itemInactive !== undefined ? itemInactive : inactive
+
               // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
               // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
               return (
@@ -182,7 +194,7 @@ const ButtonGroup = React.forwardRef(
                   onPress={handlePress}
                   tokens={getButtonTokens}
                   selected={isSelected}
-                  inactive={inactive}
+                  inactive={isInactive}
                   icon={iconProp}
                   {...selectItemProps({
                     ...itemRest,
@@ -243,7 +255,12 @@ ButtonGroup.propTypes = {
       /**
        * An optional ref for one individual button in the ButtonGroup
        */
-      ref: ABBPropTypes.ref()
+      ref: ABBPropTypes.ref(),
+      /**
+       * If true, this individual button cannot be interacted with. Takes precedence
+       * over the group-level `inactive` prop. Useful for disabling specific options.
+       */
+      inactive: PropTypes.bool
     })
   ),
   /**