@telus-uds/components-base 3.22.0 → 3.24.0

package/lib/cjs/Shortcuts/ShortcutsItem.js

@@ -0,0 +1,280 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DYNAMIC_WIDTH_VARIANT = 'dynamic';
+const EQUAL_WIDTH_VARIANT = 'equal';
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+const selectPressableStyles = (tokens, widthVariant, equalWidth) => {
+  const styles = {
+    borderColor: tokens.borderColor,
+    borderRadius: tokens.borderRadius,
+    borderWidth: tokens.borderWidth,
+    ..._Platform.default.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 => (0, _ThemeProvider.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.default.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 = (0, _ThemeProvider.useThemeTokensCallback)('ShortcutsItem', tokens, mergedVariant);
+  const getTokens = pressableState => getThemeTokens((0, _utils.resolvePressableState)(pressableState));
+  const {
+    onPress,
+    ...props
+  } = _utils.clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rawRest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rawRest
+  });
+  const handleLayout = event => {
+    if (widthVariant === EQUAL_WIDTH_VARIANT && registerWidth) {
+      const {
+        width
+      } = event.nativeEvent.layout;
+      registerWidth(width);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: pressableState => selectPressableStyles(getTokens(pressableState), widthVariant, maxWidth),
+    onLayout: handleLayout,
+    ...selectedProps,
+    children: pressableState => {
+      const themeTokens = getTokens(pressableState);
+      if (onPressableStateChange) {
+        onPressableStateChange((0, _utils.resolvePressableState)(pressableState));
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.container,
+        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: icon,
+            variant: mergedIconVariant ?? selectIconVariant(),
+            tokens: mergedIconVariant ? {} : selectIconTokens(themeTokens),
+            ...(_Platform.default.OS === 'web' && {
+              accessibilityLabel: label
+            })
+          })
+        }), !icon && image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+          source: image.src,
+          alt: image.alt,
+          style: selectImageStyles(themeTokens),
+          resizeMethod: "resize",
+          accessibilityIgnoresInvertColors: true
+        }), label && !shouldHideLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.label, selectLabelContainerStyles(themeTokens)],
+          children: (0, _utils.wrapStringsInText)(label, {
+            style: selectTitleTextStyles(themeTokens)
+          })
+        })]
+      });
+    }
+  });
+});
+ShortcutsItem.displayName = 'ShortcutsItem';
+ShortcutsItem.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ShortcutsItem'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Icon for the ShortcutsItem
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * Image for the ShortcutsItem
+   */
+  image: _propTypes.default.shape({
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]),
+    alt: _propTypes.default.string
+  }),
+  /**
+   * Label for the ShortcutsItem
+   */
+  label: _propTypes.default.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.default.bool,
+  /**
+   * href for the ShortcutsItem
+   */
+  href: _propTypes.default.string,
+  /**
+   * Icon variant for this specific ShortcutsItem
+   */
+  iconVariant: _utils.variantProp.propType,
+  /**
+   * Callback function that receives the pressable state object containing pressed, hovered, and focused boolean properties
+   */
+  onPressableStateChange: _propTypes.default.func,
+  /**
+   * Maximum width for equal width variant (automatically injected by Shortcuts container)
+   * @private
+   */
+  maxWidth: _propTypes.default.number,
+  /**
+   * Callback to register width for equal width variant (automatically injected by Shortcuts container)
+   * @private
+   */
+  registerWidth: _propTypes.default.func,
+  /**
+   * Variant configuration from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerVariant: _utils.variantProp.propType,
+  /**
+   * Hide labels setting from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerHideLabels: _propTypes.default.bool,
+  /**
+   * Icon variant from Shortcuts container (automatically injected by Shortcuts container)
+   * @private
+   */
+  containerIconVariant: _utils.variantProp.propType
+};
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  label: {
+    flexWrap: 'wrap'
+  }
+});
+var _default = exports.default = ShortcutsItem;

package/lib/cjs/Shortcuts/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ShortcutsItem", {
+  enumerable: true,
+  get: function () {
+    return _ShortcutsItem.default;
+  }
+});
+exports.default = void 0;
+var _Shortcuts = _interopRequireDefault(require("./Shortcuts"));
+var _ShortcutsItem = _interopRequireDefault(require("./ShortcutsItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Shortcuts.default;

package/lib/cjs/TextInput/TextInputBase.js

@@ -286,6 +286,10 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       // Add a space every 4 digits starting from the 5th position
       filteredText = formattedValue.replace(regex, '$1 ').trim();
     }
+    // Apply maxLength if provided
+    if (rest.maxLength && filteredText && filteredText.length > rest.maxLength) {
+      filteredText = filteredText.substring(0, rest.maxLength);
+    }
     setValue(filteredText, event);
     if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
@@ -358,7 +362,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
-    maxLength: type === 'card' ? 19 : undefined,
+    maxLength: type === 'card' ? 19 : rest.maxLength,
     value: isControlled ? currentValue : undefined,
     onKeyPress
   };

package/lib/cjs/Tooltip/Tooltip.native.js

@@ -169,6 +169,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     nativeID,
     activateOnHover = false,
     tooltipButtonTokens,
+    testID,
     ...rest
   } = _ref7;
   const [isOpen, setIsOpen] = _react.default.useState(false);
@@ -312,6 +313,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
         display: inline ? 'inline-block' : 'flex'
       }
     })],
+    testID: testID,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
       onPress: toggleIsOpen,