@telus-uds/components-base 1.19.0 → 1.19.1

package/lib/utils/BaseView/BaseView.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../../ThemeProvider");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Identical to React Native's View and supporting all the same props, but with:
+ *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
+ */
+const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const styleProp = Array.isArray(style) ? [...style] : [style];
+
+  if (!themeOptions.forceZIndex) {
+    styleProp.unshift(styles.resetZIndex);
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
+    style: styleProp,
+    ref: ref,
+    children: children
+  });
+});
+BaseView.displayName = 'BaseView';
+
+const styles = _StyleSheet.default.create({
+  resetZIndex: {
+    zIndex: 'auto'
+  }
+});
+
+BaseView.propTypes = {
+  children: _propTypes.default.node,
+  style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array])
+};
+var _default = BaseView;
+exports.default = _default;

package/lib/utils/BaseView/BaseView.native.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
+ */
+var _default = _View.default;
+exports.default = _default;

package/lib/utils/BaseView/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _BaseView = _interopRequireDefault(require("./BaseView"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _BaseView.default;
+exports.default = _default;

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -88,7 +88,7 @@ function useVerticalExpandAnimation(_ref) {
     }
   } else if (_Platform.default.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.transition = `height ${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

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) => "".concat(newKey).concat(child.key || ''), ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${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] = "".concat(wrappedText[lastIndex]).concat(child);
+    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
   } else {
     wrappedText.push(child);
   }

package/lib/utils/floating-ui/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "arrow", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.arrow;
+  }
+});
+Object.defineProperty(exports, "autoPlacement", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.autoPlacement;
+  }
+});
+Object.defineProperty(exports, "flip", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.flip;
+  }
+});
+Object.defineProperty(exports, "offset", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.offset;
+  }
+});
+Object.defineProperty(exports, "shift", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.shift;
+  }
+});
+Object.defineProperty(exports, "useFloating", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.useFloating;
+  }
+});
+
+var _reactDom = require("@floating-ui/react-dom");

package/lib/utils/floating-ui/index.native.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "arrow", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.arrow;
+  }
+});
+Object.defineProperty(exports, "autoPlacement", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.autoPlacement;
+  }
+});
+Object.defineProperty(exports, "flip", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.flip;
+  }
+});
+Object.defineProperty(exports, "offset", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.offset;
+  }
+});
+Object.defineProperty(exports, "shift", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.shift;
+  }
+});
+Object.defineProperty(exports, "useFloating", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.useFloating;
+  }
+});
+
+var _reactNative = require("@floating-ui/react-native");

package/lib/utils/input.js

@@ -28,23 +28,29 @@ 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("".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"));
+    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\`.
+`);
   };
 
   if (value && !onChange && !readOnly) {
-    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
+    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
   }
 
   if (initialValue && value) {
-    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
+    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
+    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
+    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
   }
 };
 /**
@@ -158,7 +164,7 @@ const useMultipleInputValues = function () {
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
+    initialValue: 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 ".concat(nameInProp) : typeof props[propName];
-      return new Error("".concat(componentName, ": ").concat(propDescription, " was passed to `").concat(propName, "` prop; should be ").concat(passedNames.join(' or ')));
+      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
+      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${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 `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
+      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${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 ".concat(propHelper));
+      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${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 ".concat(propHelper));
+      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ${propHelper}`);
     }
 
     return { ...acc,

package/lib/utils/props/tokens.js

@@ -22,7 +22,7 @@ const getTokenNames = componentName => {
   const componentTokenSchema = _systemThemeTokens.components[componentName];
 
   if (!componentTokenSchema) {
-    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
+    throw new Error(`No "${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 ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
     const token = tokens[prefixedKey];
     return token !== undefined ? { ...validTokens,
       [key]: token

package/lib/utils/useOverlaidPosition.js

@@ -0,0 +1,243 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
+  const offset = Math.max(0, initialOffset);
+  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+
+    case 'far':
+      return fromEdge + sourceSize;
+
+    default:
+      return 0;
+  }
+};
+
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+
+
+function getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+
+  return positioning;
+}
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * a small task because UDS's tooltip logic only really works for short text - it might be
+ * better to use a third-party library).
+ */
+
+
+const useOverlaidPosition = _ref3 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = (0, _react.useRef)(null);
+  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+
+  const targetRef = (0, _react.useRef)(null);
+  const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
+  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
+  const onTargetLayout = (0, _react.useCallback)(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  (0, _react.useEffect)(() => {
+    const handleDimensionsChange = _ref5 => {
+      var _sourceRef$current;
+
+      let {
+        window
+      } = _ref5;
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
+        // Could add a debouncer here if there's too many rerenders during gradual resizes
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    };
+
+    let subscription;
+
+    const unsubscribe = () => {
+      var _subscription;
+
+      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof _Dimensions.default.removeEventListener === 'function') {
+        // React Native <0.65.0
+        _Dimensions.default.removeEventListener('change', handleDimensionsChange);
+      }
+
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+
+    if (readyToShow) {
+      subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: _Dimensions.default.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+
+    return unsubscribe;
+  }, [readyToShow]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+
+var _default = useOverlaidPosition;
+exports.default = _default;

package/lib/utils/useSpacingScale.js

@@ -110,8 +110,6 @@ 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)();
@@ -121,7 +119,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  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 space = !overridden && ((spaceValue === null || spaceValue === void 0 ? 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 "".concat(prefix, "-").concat(id);
+    return `${prefix}-${id}`;
   });
   return uniqueId;
 }

package/lib-module/ActivityIndicator/Spinner.js

@@ -10,14 +10,14 @@ const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
 const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: "".concat(DURATION, "ms"),
+  dur: `${DURATION}ms`,
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: "".concat(BEZIER.join(', '), " ; ").concat(BEZIER.join(', '))
+  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
 }; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
 
@@ -33,8 +33,8 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = useA11yInfo();
   return /*#__PURE__*/_jsx("svg", {
     ref: ref,
-    width: "".concat(size, "px"),
-    height: "".concat(size, "px"),
+    width: `${size}px`,
+    height: `${size}px`,
     viewBox: "0 0 48 48",
     "aria-valuetext": label,
     role: "progressbar",
@@ -43,7 +43,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
       children: [reduceMotionEnabled ? null : /*#__PURE__*/_jsx("animateTransform", {
         attributeName: "transform",
         type: "rotate",
-        values: "-180 24 24;".concat(360 + MIN_STROKE_ANGLE - 180, " 24 24"),
+        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
         ...animationProps
       }), /*#__PURE__*/_jsx("circle", {
         fill: "none",
@@ -58,12 +58,12 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
         children: reduceMotionEnabled ? null : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",
-            values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
+            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
             ...animationProps,
             ...bezierProps
           }), /*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dasharray",
-            values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
+            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
             ...animationProps,
             ...bezierProps
           })]

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -67,7 +67,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
           }
 
           const direction = index ? -1 : +1;
-          return "".concat(direction * (180 - (sa + ea)) * easing(progress) + rotation, "deg");
+          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
         });
         const layerStyle = {
           width: size,
@@ -82,7 +82,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],
-              outputRange: ["".concat(0 + ea + sa, "deg"), "".concat(2 * 360 + ea + sa, "deg")]
+              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
             })
           }];
           viewportStyle.transform = [{