@telus-uds/components-base 1.8.3 → 1.9.0

package/lib/SideNav/SideNav.js

@@ -82,7 +82,7 @@ const SideNav = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
       const renderItem = (item, index, groupId) => {
         const {
-          itemId = `item-${index}`,
+          itemId = "item-".concat(index),
           onPress
         } = item.props;
 
@@ -110,7 +110,7 @@ const SideNav = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
         if (child.type === _ItemsGroup.default) {
           const {
-            groupId = `group-${index}`
+            groupId = "group-".concat(index)
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
 

package/lib/Skeleton/Skeleton.js

@@ -144,7 +144,7 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
       style: [selectSkeletonStyles({ ...themeTokens,
         fadeAnimation: getAnimationBaseOnPlatform()
       }), getStyledBasedOnShape()]
-    }, `skeleton-${index + 1}`);
+    }, "skeleton-".concat(index + 1));
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {

package/lib/Skeleton/skeletonWebAnimation.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _skeleton = require("./skeleton.constant");
 
 var _default = {
-  animationDuration: `${_skeleton.ANIMATION_DURATION}ms`,
+  animationDuration: "".concat(_skeleton.ANIMATION_DURATION, "ms"),
   animationTimingFunction: 'ease-in-out',
   animationDelay: '0.5s',
   animationIterationCount: 'infinite',

package/lib/StackView/StackWrap.js

@@ -40,11 +40,13 @@ const exampleGapValue = '1px';
  */
 
 const StackWrap = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  var _props$gap;
+
   const {
     space
   } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
 
-  const gap = props.gap ?? space;
+  const gap = (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : space;
   const canUseCSSGap = _Platform.default.OS === 'web' && gap === space && cssSupports('gap', exampleGapValue);
   return canUseCSSGap ?
   /*#__PURE__*/

package/lib/StackView/getStackedContent.js

@@ -65,7 +65,7 @@ const getStackedContent = (children, _ref) => {
   const validChildren = _react.Children.toArray(topLevelChildren).filter(Boolean);
 
   const content = validChildren.reduce((newChildren, child, index) => {
-    const boxID = `Stack-Box-${index}`;
+    const boxID = "Stack-Box-".concat(index);
     const item = box ?
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
@@ -75,7 +75,7 @@ const getStackedContent = (children, _ref) => {
       testID: boxID
     }, child) : child;
     if (!index || !space && !divider) return [...newChildren, item];
-    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
+    const testID = "Stack-".concat(divider ? 'Divider' : 'Spacer', "-").concat(index);
     const commonProps = {
       testID,
       key: testID,

package/lib/Tabs/Tabs.js

@@ -34,12 +34,32 @@ const {
   selectHorizontalScrollTokens,
   useItemPositions
 } = _HorizontalScroll.horizontalScrollUtils;
+
+const getDefaultTabItemAccessibilityRole = parentRole => {
+  switch (parentRole) {
+    case 'tablist':
+      return 'tab';
+
+    case 'navigation':
+      return 'link';
+
+    default:
+      return undefined;
+  }
+};
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
+ *
+ * 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.
  */
 
+
 const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  var _restProps$accessibil;
+
   let {
     tokens,
     itemTokens,
@@ -76,14 +96,17 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     const hashId = hashItem && (hashItem.id || hashItem.label);
     if (hashId) setTimeout(setValue(hashId, event), 500);
   }, [items, setValue]), isPositioningReady);
+  const restProps = selectProps(rest);
+  const parentAccessibilityRole = (_restProps$accessibil = restProps.accessibilityRole) !== null && _restProps$accessibil !== void 0 ? _restProps$accessibil : 'tablist';
+  const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
     ref: ref,
     ScrollButton: _HorizontalScroll.HorizontalScrollButton,
     itemPositions: itemPositions,
     tokens: selectHorizontalScrollTokens(themeTokens),
     scrollButtonTokens: scrollButtonTokens,
-    accessibilityRole: "tablist",
-    ...selectProps(rest),
+    accessibilityRole: parentAccessibilityRole,
+    ...restProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
       space: space,
       direction: "row",
@@ -92,11 +115,12 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           href,
           label,
           id,
+          accessibilityRole = defaultTabItemAccessibiltyRole,
           ref: itemRef,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps
         } = _ref3;
-        const itemId = id ?? label;
+        const itemId = id !== null && id !== void 0 ? id : label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
 
         const handlePress = event => setValue(itemId, event);
@@ -110,6 +134,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           selected: isSelected,
           itemPositions: itemPositions,
           index: index,
+          accessibilityRole: accessibilityRole,
           LinkRouter: ItemLinkRouter,
           linkRouterProps: { ...linkRouterProps,
             ...itemLinkRouterProps

package/lib/Tabs/TabsItem.js

@@ -117,13 +117,11 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     itemPositions,
     index,
     children,
-    accessibilityRole = href ? 'link' : 'tab',
-    accessibilityState = _Platform.default.OS === 'web' && accessibilityRole === 'link' ? // Web links can't be aria-selected but can be aria-current
-    {
-      current: selected ? 'page' : false
-    } : {
+    accessibilityRole,
+    accessibilityCurrent = _Platform.default.OS === 'web' && accessibilityRole === 'link' && selected ? 'page' : undefined,
+    accessibilityState = accessibilityRole === 'tab' ? {
       selected
-    },
+    } : undefined,
     ...rawRest
   } = _ref4;
 
@@ -162,6 +160,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   } : undefined;
   const selectedProps = selectProps({
     accessibilityRole,
+    accessibilityCurrent,
     accessibilityState,
     ...rest
   });

package/lib/Tags/Tags.js

@@ -129,7 +129,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("Tags items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {

package/lib/TextInput/TextInput.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _utils = require("../utils");
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
@@ -49,17 +47,8 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     tokens,
     variant = {},
-    pattern,
     ...rest
   } = _ref;
-
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern;
-    }
-  }, [ref, pattern]);
-
   const {
     supportsProps,
     ...selectedProps

package/lib/TextInput/TextInputBase.js

@@ -156,6 +156,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onBlur,
     onMouseOver,
     onMouseOut,
+    pattern,
     tokens,
     variant = {},
     ...rest
@@ -194,6 +195,14 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onChange,
     readOnly
   });
+  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  (0, _react.useEffect)(() => {
+    if (_Platform.default.OS === 'web' && pattern && element) {
+      // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+      // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+      element.pattern = pattern;
+    }
+  }, [element, pattern]);
 
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;

package/lib/TextInput/propTypes.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
@@ -38,12 +38,7 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: _propTypes.default.func,
-  ..._Platform.default.select({
-    web: {
-      pattern: _propTypes.default.string
-    }
-  })
+  onChange: _propTypes.default.func
 };
 var _default = textInputPropTypes;
 exports.default = _default;

package/lib/ThemeProvider/utils/styles.js

@@ -51,7 +51,7 @@ function applyTextStyles(_ref) {
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
+    styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
@@ -101,7 +101,7 @@ function applyWebShadow(_ref2) {
   } = _ref2;
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
-    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
+    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
   };
   return boxShadow;
 }

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -28,19 +28,19 @@ const getComponentTheme = (theme, componentName) => {
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
-    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
+    throw new Error("Called useTheme's getStyle on \"".concat(componentName, "\" with no theme provided"));
   }
 
   const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
+    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
+    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
   }
 
   return componentTheme;
@@ -49,9 +49,11 @@ const getComponentTheme = (theme, componentName) => {
 exports.getComponentTheme = getComponentTheme;
 
 const doesThemeConditionApply = (_ref, appearances) => {
+  var _appearances$key;
+
   let [key, value] = _ref;
   // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = appearances[key] ?? null;
+  const appearanceValue = (_appearances$key = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
 
@@ -192,11 +194,7 @@ const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error(`Invalid UDS token schema version detected.
-
-The UDS base components ${_package.default.name} v${_package.default.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
-
-If you see this error than most likely you have attempted to install ${_package.default.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md`);
+    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md"));
   }
 };
 

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -153,7 +153,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: 2,
     direction: "row",

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -86,7 +86,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("ToggleSwitchGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   const toggleSwitches = items.map((_ref2, index) => {

package/lib/Tooltip/Backdrop.js

@@ -19,15 +19,7 @@ function createPortalNode(nodeId) {
   // this way the backdrop stays in place when scrolling the window - that's why we need to
   // position it at the scroll position when rendering
 
-  node.style.cssText = `
-  position: absolute; 
-  top: ${window.scrollY}px;
-  left: ${window.scrollX}px; 
-  right: 0; 
-  bottom: 0; 
-  z-index: 9999; 
-  pointer-events: none;
-  `;
+  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
   document.body.appendChild(node);
   return node;
 }
@@ -48,7 +40,7 @@ function Backdrop(_ref) {
   } = _ref;
   const [portalNode, setPortalNode] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    const nodeId = `tooltip-backdrop-${Date.now()}`;
+    const nodeId = "tooltip-backdrop-".concat(Date.now());
     const node = createPortalNode(nodeId);
     setPortalNode(node);
     return () => {

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -24,16 +24,22 @@ function useVerticalExpandAnimation(_ref) {
     tokens
   } = _ref;
   const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [wasExpanded, setWasExpanded] = (0, _react.useState)(isExpanded);
+  const expandStateChanged = isExpanded !== wasExpanded;
   const expandAnimatedValue = (0, _react.useRef)(new _Animated.default.Value(0)).current;
   const elementRef = (0, _react.useRef)(null);
   const {
     expandDuration,
     collapseDuration
-  } = tokens; // Treat as animating from when expanded state changes, until animation completes
-
-  (0, _react.useEffect)(() => setIsAnimating(true), [isExpanded]);
+  } = tokens;
+  (0, _react.useLayoutEffect)(() => {
+    if (expandStateChanged) {
+      setIsAnimating(true);
+      setWasExpanded(isExpanded);
+    }
+  }, [expandStateChanged, isExpanded]);
   (0, _react.useEffect)(() => {
-    const onComplete = () => !isExpanded && setIsAnimating(false);
+    const onComplete = () => setIsAnimating(false);
 
     if (_Platform.default.OS === 'web') {
       if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
@@ -55,20 +61,40 @@ function useVerticalExpandAnimation(_ref) {
 
     animation.start(onComplete);
     return () => animation.stop();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]); // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
+  const containerStyles = {};
+  if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
 
-  const containerStyles = !isExpanded && !isAnimating ? {
-    visibility: 'hidden'
-  } : {}; // don't visually collapse the container until we have it measured
-
-  if (containerHeight !== null) {
+  if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (_Platform.default.OS === 'web') {
-      const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
-      containerStyles.height = isExpanded ? containerHeight : 0;
+      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
+      containerStyles.visibility = 'hidden';
     } else {
-      containerStyles.height = expandAnimatedValue;
+      // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
+      // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
+      containerStyles.opacity = 0;
+    }
+  } // don't visually collapse the container until we have it measured
+
+
+  if (containerHeight === null) {
+    if (_Platform.default.OS === 'web') {
+      // on web we can hide the contents until we have the container measured and avoid occasional jitter
+      // this won't work on native platforms
+      containerStyles.height = 0;
+      containerStyles.visibility = 'hidden';
     }
+  } else if (_Platform.default.OS === 'web') {
+    const transitionDuration = isExpanded ? expandDuration : collapseDuration;
+    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.height = isExpanded ? containerHeight : 0;
+  } else if (_Platform.default.OS === 'ios' && isExpanded && !isAnimating && !expandStateChanged && typeof containerHeight === 'number') {
+    // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where
+    // it fails to reflow properly after the last animation frame, leaving the last line of text not visible.
+    // Force reflow after animation completes with a static height non-identical to the last animated height.
+    containerStyles.height = containerHeight + 1;
+  } else {
+    containerStyles.height = expandAnimatedValue;
   }
 
   return [containerStyles, elementRef];

package/lib/utils/children.js

@@ -73,7 +73,7 @@ const isWrapable = child => {
   return isStringOrNumber(child) || child.type === _A11yText.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
 };
 
-const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => "".concat(newKey).concat(child.key || ''), ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
 
 
 const wrapChild = (child, wrappedText) => {
@@ -82,7 +82,7 @@ const wrapChild = (child, wrappedText) => {
 
   if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
     /* eslint-disable-next-line no-param-reassign */
-    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
+    wrappedText[lastIndex] = "".concat(wrappedText[lastIndex]).concat(child);
   } else {
     wrappedText.push(child);
   }

package/lib/utils/input.js

@@ -28,29 +28,23 @@ const validateProps = (_ref, _ref2, hookName) => {
   const usageError = error => {
     // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
     // Help devs out by telling them exactly which hook threw the error as well as why.
-    throw new Error(`${hookName} ${error}.
-
-Consumers of this hook must be one of:
-1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
-2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
-3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
-`);
+    throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
   };
 
   if (value && !onChange && !readOnly) {
-    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
+    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
   }
 
   if (initialValue && value) {
-    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
+    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
+    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
+    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
   }
 };
 /**
@@ -164,7 +158,7 @@ const useMultipleInputValues = function () {
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues ?? (values === undefined ? [] : undefined)
+    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
   }, 'useMultipleInputValues');
   const enforceMaxValues = (0, _react.useCallback)(newValues => {
     if (!maxValues) return newValues;

package/lib/utils/props/componentPropType.js

@@ -33,8 +33,8 @@ function componentPropType(passedName) {
     const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
 
     if (!nameInProp || !passedNames.includes(nameInProp)) {
-      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
-      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
+      const propDescription = nameInProp ? "Component ".concat(nameInProp) : typeof props[propName];
+      return new Error("".concat(componentName, ": ").concat(propDescription, " was passed to `").concat(propName, "` prop; should be ").concat(passedNames.join(' or ')));
     }
 
     return undefined;
@@ -42,7 +42,7 @@ function componentPropType(passedName) {
 
   const checkRequired = (props, propName, componentName) => {
     if (props[propName] === undefined) {
-      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
+      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
     }
 
     return undefined;

package/lib/utils/props/selectSystemProps.js

@@ -10,7 +10,7 @@ exports.default = selectSystemProps;
 function selectSystemProps(systemPropHelpers) {
   const selectProps = props => systemPropHelpers.reduce((acc, propHelper) => {
     if (typeof (propHelper === null || propHelper === void 0 ? void 0 : propHelper.select) !== 'function') {
-      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);
+      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ".concat(propHelper));
     }
 
     return { ...acc,
@@ -20,7 +20,7 @@ function selectSystemProps(systemPropHelpers) {
 
   const selectedPropTypes = systemPropHelpers.reduce((acc, propHelper) => {
     if (!(propHelper !== null && propHelper !== void 0 && propHelper.types)) {
-      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ${propHelper}`);
+      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ".concat(propHelper));
     }
 
     return { ...acc,

package/lib/utils/props/textInputProps.js

@@ -147,7 +147,14 @@ const crossPlatform = { ...textProps,
 const webOnly = {
   disabled: _propTypes.default.bool,
   dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
-  lang: _propTypes.default.string
+  lang: _propTypes.default.string,
+
+  /**
+   * Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
+   * Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
+   */
+  pattern: _propTypes.default.string
 };
 /**
  * These props are supported in React Native but not React Native Web.

package/lib/utils/props/tokens.js

@@ -22,7 +22,7 @@ const getTokenNames = componentName => {
   const componentTokenSchema = _systemThemeTokens.components[componentName];
 
   if (!componentTokenSchema) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
+    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
   }
 
   return Object.keys(componentTokenSchema);
@@ -63,7 +63,7 @@ exports.getTokenNames = getTokenNames;
 const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
+    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
     const token = tokens[prefixedKey];
     return token !== undefined ? { ...validTokens,
       [key]: token

package/lib/utils/useSpacingScale.js

@@ -110,6 +110,8 @@ const resolveSpacingOptions = space => {
 
 
 const useSpacingScale = spaceValue => {
+  var _spaceValue$space;
+
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -119,7 +121,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
+  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
   const {
     size
   } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {

package/lib/utils/useUniqueId.js

@@ -13,7 +13,7 @@ function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [uniqueId] = (0, _react.useState)(() => {
     id += 1;
-    return `${prefix}-${id}`;
+    return "".concat(prefix, "-").concat(id);
   });
   return uniqueId;
 }