@telus-uds/components-base 3.28.1 → 3.29.0

package/lib/esm/ExpandCollapse/Panel.js

@@ -97,6 +97,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     onPress,
     control,
     controlTokens,
+    controlAlign,
     children,
     tokens,
     variant,
@@ -166,6 +167,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         ...selectedProps,
         isExpanded: isExpanded,
         tokens: controlTokens,
+        controlAlign: controlAlign,
         variant: variant,
         onPress: handleControlPress,
         ref: controlRef,
@@ -265,6 +267,10 @@ ExpandCollapsePanel.propTypes = {
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -6,6 +6,11 @@ import { variantProp } from '../utils/props';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps]);
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
 const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -14,6 +19,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     nativeID,
     initialOpen = false,
     dataSet,
+    align,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel');
@@ -41,12 +47,14 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         textLine: tokens.textLine ?? 'none',
         backgroundColor: 'transparent'
-      }
+      },
+      controlAlign: align && alignMap[align]
       // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
       control: pressableState => /*#__PURE__*/_jsx(ExpandCollapseMiniControl, {
         pressableState: pressableState,
+        align: align,
         ...rest
       }),
       controlRef: ref,
@@ -86,6 +94,10 @@ ExpandCollapseMini.propTypes = {
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 };
 export default ExpandCollapseMini;

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -6,6 +6,11 @@ import { useThemeTokens } from '../ThemeProvider';
 import { htmlAttrs, viewProps, selectSystemProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const alignSelfMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
 
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
@@ -24,6 +29,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconPosition = 'right',
     tokens,
     variant = {},
+    align,
     ...rest
   } = _ref;
   const {
@@ -92,7 +98,10 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...getTokens(linkState),
       iconSize,
       blockFontSize: fontSize,
-      blockLineHeight: lineHeight
+      blockLineHeight: lineHeight,
+      ...(align && {
+        alignSelf: alignSelfMap[align]
+      })
     }),
     ref: ref,
     ...presentationOnly,
@@ -123,6 +132,10 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: PropTypes.object
+  variant: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 };
 export default ExpandCollapseMiniControl;

package/lib/esm/Link/ChevronLink.js

@@ -42,6 +42,7 @@ const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant);
   return /*#__PURE__*/_jsx(LinkBase, {
     ...otherlinkProps,
+    useMeasuredMobileIconLayout: true,
     iconPosition: direction,
     tokens: getTokens,
     dataSet: dataSet,

package/lib/esm/Link/LinkBase.js

@@ -7,6 +7,7 @@ import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, sel
 import { resolvePressableTokens } from '../utils/pressability';
 import { withLinkRouter } from '../utils';
 import InlinePressable from './InlinePressable';
+import MobileIconTextContent from './MobileIconTextContent';
 import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -137,6 +138,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     tokens = {},
     children,
     dataSet,
+    useMeasuredMobileIconLayout = false,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -180,8 +182,8 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      const mobileCompensation = null;
-      return [outerBorderStyles, mobileCompensation, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      const shouldUseMeasuredMobileContent = Platform.OS !== 'web' && useMeasuredMobileIconLayout;
+      return [outerBorderStyles, shouldUseMeasuredMobileContent ? staticStyles.measuredMobileOuterBorderCompensation : null, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -196,19 +198,32 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       } = themeTokens;
       const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
       const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
+      const shouldUseMeasuredMobileContent = Platform.OS !== 'web' && useMeasuredMobileIconLayout;
+      const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline;
+      const linkTextContent = /*#__PURE__*/_jsx(Text, {
+        style: [textStyles, blockTextStyles, textBaselineStyle, staticStyles.bubblePointerEvents],
+        children: typeof children === 'function' ? children(linkState) : children
+      });
+      const sharedIconProps = {
+        ...iconProps,
+        tokens: iconTokens,
+        style: staticStyles.bubblePointerEvents
+      };
+      if (shouldUseMeasuredMobileContent) {
+        return /*#__PURE__*/_jsx(MobileIconTextContent, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: adjustedIconSpace,
+          iconProps: sharedIconProps,
+          children: linkTextContent
+        });
+      }
       return /*#__PURE__*/_jsx(IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: adjustedIconSpace,
-        iconProps: {
-          ...iconProps,
-          tokens: iconTokens,
-          style: staticStyles.bubblePointerEvents
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
-          children: typeof children === 'function' ? children(linkState) : children
-        })
+        iconProps: sharedIconProps,
+        children: linkTextContent
       });
     }
   });
@@ -266,11 +281,12 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(Platform.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
-      paddingTop: Platform.OS === 'android' ? 2 : 0
+      paddingVertical: Platform.OS === 'android' ? 2 : 0
     })
   }
 });

package/lib/esm/Link/MobileIconTextContent.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Icon, { iconComponentPropTypes } from '../Icon/Icon';
+import { spacingProps } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MobileIconTextContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    space = 0,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps = {},
+    children
+  } = _ref;
+  const [translateY, setTranslateY] = React.useState(0);
+  const latestTranslateYRef = React.useRef(0);
+  const layoutsRef = React.useRef({
+    container: null,
+    text: null,
+    icon: null
+  });
+  const applyAlignment = React.useCallback(() => {
+    const {
+      container,
+      text,
+      icon
+    } = layoutsRef.current;
+    if (!container || !icon || !icon.height) return;
+    const targetY = text ? text.y + text.height / 2 : container.height / 2;
+    const iconY = icon.y + icon.height / 2;
+    const nextTranslateY = Math.round((targetY - iconY) * 100) / 100;
+    if (!Number.isFinite(nextTranslateY)) return;
+    if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return;
+    latestTranslateYRef.current = nextTranslateY;
+    setTranslateY(nextTranslateY);
+  }, []);
+  const handleContainerLayout = React.useCallback(_ref2 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref2;
+    layoutsRef.current.container = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleTextLayout = React.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref3;
+    layoutsRef.current.text = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleIconLayout = React.useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref4;
+    layoutsRef.current.icon = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const iconContent = IconComponent ? /*#__PURE__*/_jsx(Icon, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }) : null;
+  const iconWrapper = IconComponent ? /*#__PURE__*/_jsx(View, {
+    onLayout: handleIconLayout,
+    style: [staticStyles.iconContainer, {
+      transform: [{
+        translateY
+      }]
+    }],
+    children: iconContent
+  }) : null;
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/_jsxs(Text, {
+      onLayout: handleContainerLayout,
+      children: [/*#__PURE__*/_jsx(Text, {
+        onLayout: handleTextLayout,
+        children: children
+      }), ' ', /*#__PURE__*/_jsx(View, {
+        style: staticStyles.inlineIconContainer,
+        children: iconWrapper
+      })]
+    });
+  }
+  const iconSpaceStyle = iconPosition === 'left' ? {
+    marginRight: space
+  } : {
+    marginLeft: space
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    onLayout: handleContainerLayout,
+    style: staticStyles.rowContainer,
+    children: [iconPosition === 'left' && /*#__PURE__*/_jsx(View, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    }), /*#__PURE__*/_jsx(View, {
+      onLayout: handleTextLayout,
+      children: children
+    }), iconPosition === 'right' && /*#__PURE__*/_jsx(View, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    })]
+  });
+});
+MobileIconTextContent.displayName = 'MobileIconTextContent';
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: PropTypes.node
+};
+const staticStyles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+});
+export default MobileIconTextContent;

package/lib/esm/Listbox/ListboxOverlay.js

@@ -28,6 +28,7 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     isReady = false,
     overlaidPosition,
     maxWidth,
+    maxHeight,
     minWidth,
     onLayout,
     tokens,
@@ -43,12 +44,16 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       maxWidth,
       minWidth
     }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    onMouseDown: e => {
+      e.preventDefault();
+    },
     children: /*#__PURE__*/_jsx(Card, {
       tokens: {
         shadow: systemTokens.shadow,
         borderRadius: systemTokens.borderRadius,
         ...(Platform.OS === 'web' && {
-          overflowY: 'hidden'
+          maxHeight,
+          overflowY: 'auto'
         }),
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
@@ -78,6 +83,7 @@ DropdownOverlay.propTypes = {
     width: PropTypes.number
   }),
   maxWidth: PropTypes.number,
+  maxHeight: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
   tokens: PropTypes.object,

package/lib/esm/Listbox/PressableItem.js

@@ -4,7 +4,7 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import Text from "react-native-web/dist/exports/Text";
 import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils';
 import { useListboxContext } from './ListboxContext';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const getItemStyles = _ref => {
   let {
@@ -122,9 +122,9 @@ const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       onPress(event);
     },
     children: pressableState => {
-      return /*#__PURE__*/_jsxs(Text, {
+      return /*#__PURE__*/_jsx(Text, {
         style: selectTextStyles(resolveButtonTokens(pressableState)),
-        children: [children, " "]
+        children: children
       });
     }
   });

package/lib/esm/TabBar/TabBar.js

@@ -51,6 +51,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
@@ -62,6 +63,7 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     onChange,
     variant,
     tokens,
+    accessibilityLabel,
     ...rest
   } = _ref3;
   const [isSelected, setIsSelected] = React.useState(initiallySelectedItem);
@@ -76,6 +78,8 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      accessibilityRole: "tablist",
+      accessibilityLabel: accessibilityLabel,
       children: items.map((item, index) => /*#__PURE__*/_jsx(TabBarItem, {
         label: item.label,
         href: item.href,
@@ -84,7 +88,6 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist",
         tokens: item.tokens
       }, item.id))
     })
@@ -109,7 +112,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
+  tokens: getTokensPropType('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: PropTypes.string
 };
 const styles = StyleSheet.create({
   tabBar: {

package/lib/esm/TextInput/TextInputBase.js

@@ -271,8 +271,8 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     }
   }, [element, pattern]);
   const handleChangeText = event => {
-    const text = event.nativeEvent?.text || event.target?.value;
-    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') : text;
+    const text = event.nativeEvent?.text ?? event.target?.value;
+    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') || undefined : text;
     if (type === 'card' && filteredText) {
       const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
       const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g');

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.28.1",
+  "version": "3.29.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.28.1",
+  "version": "3.29.0",
   "types": "types/index.d.ts"
 }