@telus-uds/components-base 1.8.3 → 1.8.4

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 15 Jun 2022 19:23:06 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Jun 2022 15:03:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.8.4
+
+Wed, 22 Jun 2022 15:03:03 GMT
+
+### Patches
+
+- fix published lib-modules (cody.zuschlag@nearform.com)
+- don't override List.Item props with less-specific List props (alan.slater@nearform.com)
+- better tabs roles for tablist/navigation usage (simon.lawrence@nearform.com)
+- better ExpandCollapse style timing (alan.slater@nearform.com)
+- Bump @telus-uds/browserslist-config to v1.0.4
+
 ## 1.8.3
 
-Wed, 15 Jun 2022 19:23:06 GMT
+Wed, 15 Jun 2022 19:23:57 GMT
 
 ### Patches
 

package/component-docs.json

@@ -7043,7 +7043,7 @@
     },
     "Tabs": {
       "docs": {
-        "description": "Tabs renders a horizontally-scrolling menu of selectable buttons which may link\nto a page or control what content is displayed on this page.",
+        "description": "Tabs renders a horizontally-scrolling menu of selectable buttons which may link\nto a page or control what content is displayed on this page.\n\nIf you are using Tabs to navigate to a new page (web-only) you should pass\n`navigation`as the `accessibilityRole` to te Tabs component, this will cause\nTabItems to default to a role of link and obtain aria-current behaviour.",
         "props": {
           "items": {
             "defaultValue": {

package/lib/ActivityIndicator/Spinner.js

@@ -23,14 +23,14 @@ const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
 const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: `${_shared.DURATION}ms`,
+  dur: "".concat(_shared.DURATION, "ms"),
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: `${_shared.BEZIER.join(', ')} ; ${_shared.BEZIER.join(', ')}`
+  keySplines: "".concat(_shared.BEZIER.join(', '), " ; ").concat(_shared.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.
 
@@ -46,8 +46,8 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _A11yInfoProvider.useA11yInfo)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     ref: ref,
-    width: `${size}px`,
-    height: `${size}px`,
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px"),
     viewBox: "0 0 48 48",
     "aria-valuetext": label,
     role: "progressbar",
@@ -56,7 +56,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       children: [reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
         attributeName: "transform",
         type: "rotate",
-        values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
+        values: "-180 24 24;".concat(360 + _shared.MIN_STROKE_ANGLE - 180, " 24 24"),
         ...animationProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
         fill: "none",
@@ -71,12 +71,12 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         children: reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dashoffset",
-            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
+            values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
             ...animationProps,
             ...bezierProps
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dasharray",
-            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
+            values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
             ...animationProps,
             ...bezierProps
           })]

package/lib/ActivityIndicator/Spinner.native.js

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

package/lib/Button/ButtonBase.js

@@ -98,7 +98,7 @@ const selectOuterWidthStyles = _ref3 => {
 
 
   if (_Platform.default.OS === 'web') {
-    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
+    widthStyles.width = "calc(".concat(width, " + ").concat(outerBorderOffset * 2, "px)");
     return widthStyles;
   } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
 
@@ -180,7 +180,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   return _Platform.default.select({
     web: {
       // if it would overflow the container, wraps instead
-      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      maxWidth: "calc(100% + ".concat(getOuterBorderOffset(themeTokens) * 2, "px)"),
       outline: 'none',
       // removes the default browser :focus outline
       ...(0, _utils2.getCursorStyle)(inactive, accessibilityRole)

package/lib/Button/ButtonGroup.js

@@ -91,7 +91,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("ButtonGroup items must have unique ".concat(uniqueFields.join(', ')));
   } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
 
 

package/lib/Checkbox/Checkbox.js

@@ -214,7 +214,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   };
 
   const uniqueId = (0, _useUniqueId.default)('checkbox');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.wrapper,
     ref: ref,

package/lib/Checkbox/CheckboxGroup.js

@@ -119,7 +119,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("CheckboxGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   const checkboxes = items.map((_ref2, index) => {
@@ -130,7 +130,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       ref: itemRef,
       ...itemRest
     } = _ref2;
-    const checkboxId = id || `Checkbox[${index}]`;
+    const checkboxId = id || "Checkbox[".concat(index, "]");
 
     const handleChange = (newCheckedState, event) => {
       if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib/Divider/Divider.js

@@ -116,9 +116,9 @@ const Divider = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
-      testID: testID ? `${testID}-Spacer-before` : undefined
+      testID: testID ? "".concat(testID, "-Spacer-before") : undefined
     }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
-      testID: testID ? `${testID}-Spacer-after` : undefined
+      testID: testID ? "".concat(testID, "-Spacer-after") : undefined
     })]
   });
 });

package/lib/ExpandCollapse/Panel.js

@@ -11,8 +11,6 @@ var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
-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"));
@@ -105,13 +103,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     containerHeight,
     isExpanded,
     tokens: themeTokens
-  }); // on web we can hide the contents until we have the container measured and avoid occasional jitter
-  // this won't work on native platforms
-
-  const overflowContainerStyles = containerHeight === null && _Platform.default.OS === 'web' ? {
-    height: 0,
-    visibility: 'hidden'
-  } : undefined;
+  });
   const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
@@ -123,7 +115,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       children: control
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
       ref: animatedRef,
-      style: [overflowContainerStyles, animatedStyles, staticStyles.itemsContainer],
+      style: animatedStyles,
       ...focusabilityProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         onLayout: onContainerLayout,
@@ -177,12 +169,5 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
    */
   controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl')
 };
-
-const staticStyles = _StyleSheet.default.create({
-  itemsContainer: {
-    overflow: 'hidden'
-  }
-});
-
 var _default = ExpandCollapsePanel;
 exports.default = _default;

package/lib/FlexGrid/Col/Col.js

@@ -69,7 +69,7 @@ const Col = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const horizontalAlignLevel = getHorizontalAlignLevel();
 
   const toPercent = num => {
-    return `${num / 12 * 100}%`;
+    return "".concat(num / 12 * 100, "%");
   };
 
   const calculateWidth = value => {

package/lib/Icon/Icon.js

@@ -48,7 +48,7 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? "scale(".concat(themeTokens.scale, ")") : '', themeTokens.translateX ? "translateX(".concat(themeTokens.translateX, "px)") : '', themeTokens.translateY ? "translateY(".concat(themeTokens.translateY, "px)") : ''].filter(exists => exists).join(' ')
     },
     dataSet: dataSet,
     children: iconContent

package/lib/List/List.js

@@ -45,12 +45,18 @@ const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
 
   const items = _react.Children.map(children, (child, index) => {
-    if (child.type.name === _ListItem.default.name) {
+    var _child$type, _child$type2;
+
+    // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
+    const isListItem = componentName => Boolean(componentName === _ListItem.default.displayName);
+
+    if (isListItem(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || isListItem(child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) {
       return /*#__PURE__*/(0, _react.cloneElement)(child, {
         showDivider,
         isLastItem: index + 1 === _react.Children.count(children),
         tokens,
-        variant
+        variant,
+        ...child.props
       });
     }
 

package/lib/Pagination/PageButton.js

@@ -54,8 +54,8 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     key: 'active-item'
   } : {};
   const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
-  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
+  const activeLabel = isActive ? " ".concat(getCopy('currentLabel')) : '';
+  const accessibilityLabel = "".concat(getCopy('goToLabel'), " ").concat(label).concat(activeLabel);
 
   const {
     hrefAttrs,

package/lib/Pagination/Pagination.js

@@ -106,9 +106,11 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
   }), ...items.map((_child, itemIndex) => {
-    const buttonLabel = `${itemIndex + 1}`;
+    var _itemProps$LinkRouter;
+
+    const buttonLabel = "".concat(itemIndex + 1);
     const itemProps = getItemProps(itemIndex);
-    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
+    const ItemLinkRouter = (_itemProps$LinkRouter = itemProps.LinkRouter) !== null && _itemProps$LinkRouter !== void 0 ? _itemProps$LinkRouter : LinkRouter;
     const itemLinkRouterProps = { ...linkRouterProps,
       ...itemProps.linkRouterProps
     };
@@ -144,7 +146,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     ...selectProps(rest),
     children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
+    .map((element, index) => [element, "page-".concat(index + 1)]).filter(_ref3 => {
       let [element] = _ref3;
       return element !== null;
     }).map(_ref4 => {

package/lib/Pagination/usePagination.js

@@ -21,7 +21,7 @@ function usePagination(_ref) {
   );
 
   const getItemProps = index => {
-    var _items$index;
+    var _items$index$props, _items$index;
 
     const {
       onPress,
@@ -29,7 +29,7 @@ function usePagination(_ref) {
       hrefAttrs,
       variant,
       tokens
-    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
+    } = (_items$index$props = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) !== null && _items$index$props !== void 0 ? _items$index$props : {};
     return {
       onPress,
       href,

package/lib/Progress/ProgressBar.js

@@ -43,7 +43,7 @@ const selectBarStyles = (_ref, percentage) => {
     borderRadius,
     outlineWidth,
     outlineColor,
-    width: `${percentage}%`
+    width: "".concat(percentage, "%")
   };
 };
 /**
@@ -104,7 +104,7 @@ const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       min: 0,
       max: 100,
       now: percentage,
-      text: `${percentage}%`
+      text: "".concat(percentage, "%")
     },
     ...rest
   });
@@ -112,7 +112,7 @@ const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...selectedProps,
-    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
+    children: children !== null && children !== void 0 ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
       variant: variant
     })
   }) : null;

package/lib/Progress/ProgressBarBackground.js

@@ -21,8 +21,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
-const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
+const inactiveBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E";
+const negativeBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E";
 const ProgressBarBackground = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     variant
@@ -40,7 +40,7 @@ const ProgressBarBackground = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) =>
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
     ref: ref,
     source: {
-      uri: `data:image/svg+xml,${source}`
+      uri: "data:image/svg+xml,".concat(source)
     },
     style: staticStyles.imageBackground
   });

package/lib/Radio/Radio.js

@@ -70,7 +70,7 @@ const selectDescriptionStyles = _ref2 => {
     labelMarginLeft = 0
   } = _ref2;
   return {
-    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
+    marginLeft: descriptionMarginLeft !== null && descriptionMarginLeft !== void 0 ? descriptionMarginLeft : containerPaddingLeft + inputSize + labelMarginLeft,
     ...(0, _ThemeProvider.applyTextStyles)({
       fontSize: descriptionFontSize,
       lineHeight: descriptionLineHeight
@@ -174,7 +174,7 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   };
 
   const uniqueId = (0, _utils.useUniqueId)('radio');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     disabled: inactive,

package/lib/Radio/RadioGroup.js

@@ -121,7 +121,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("RadioGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   const radios = items.map((_ref2, index) => {
@@ -132,7 +132,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       ref: itemRef,
       ...itemRest
     } = _ref2;
-    const radioId = id || `Radio[${index}]`;
+    const radioId = id || "Radio[".concat(index, "]");
     const isChecked = currentValue === radioId;
 
     const handleChange = (newCheckedState, event) => {

package/lib/RadioCard/RadioCard.js

@@ -102,7 +102,7 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
 
   const uniqueId = (0, _utils.useUniqueId)('RadioCard');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('RadioCard', tokens, variant);
 
   const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));

package/lib/RadioCard/RadioCardGroup.js

@@ -126,7 +126,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("RadioCardGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
@@ -153,7 +153,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           onChange: itemOnChange,
           ...itemRest
         } = _ref2;
-        const cardId = id || `RadioCard[${index}]`;
+        const cardId = id || "RadioCard[".concat(index, "]");
 
         const handleChange = (newCheckedState, event) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib/Search/Search.js

@@ -158,7 +158,7 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
 
   const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
 
-  const placeholderText = placeholder ?? a11yLabelText;
+  const placeholderText = placeholder !== null && placeholder !== void 0 ? placeholder : a11yLabelText;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
     ...selectContainerProps(rest),

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
   });