@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/StackView/StackView.js

@@ -52,17 +52,18 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * semantic role but only on web, not within native apps).
  */
 
-const StackView = /*#__PURE__*/forwardRef(({
-  space = 1,
-  divider,
-  direction: directionProp = 'column',
-  children,
-  variant,
-  tokens,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
+const StackView = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    space = 1,
+    divider,
+    direction: directionProp = 'column',
+    children,
+    variant,
+    tokens,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
   const viewport = useViewport();
   const direction = useResponsiveProp(directionProp, 'column');
   const selectedProps = selectProps({ ...getA11yPropsFromHtmlTag(tag, accessibilityRole),

package/lib-module/StackView/StackWrap.js

@@ -5,10 +5,10 @@ import StackWrapGap from './StackWrapGap'; // In Jest/CI/SSR, global CSS isn't a
 
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const cssSupports = (...args) => {
+const cssSupports = function () {
   var _window$CSS;
 
-  return typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(...args);
+  return typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(...arguments);
 }; // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
 
@@ -23,11 +23,13 @@ const exampleGapValue = '1px';
  */
 
 const StackWrap = /*#__PURE__*/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.OS === 'web' && gap === space && cssSupports('gap', exampleGapValue);
   return canUseCSSGap ?
   /*#__PURE__*/

package/lib-module/StackView/StackWrapBox.js

@@ -33,17 +33,18 @@ const spaceSides = {
  * between the container and the stacked children, and requires a negative margin on the container.
  */
 
-const StackWrapBox = /*#__PURE__*/forwardRef(({
-  space = 1,
-  gap = space,
-  direction: directionProp = 'row',
-  children,
-  tokens,
-  variant,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
+const StackWrapBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    space = 1,
+    gap = space,
+    direction: directionProp = 'row',
+    children,
+    tokens,
+    variant,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
   const viewport = useViewport();
   const direction = useResponsiveProp(directionProp, 'row');
   const themeTokens = useThemeTokens('StackView', tokens, variant, {

package/lib-module/StackView/StackWrapGap.js

@@ -19,16 +19,17 @@ const [selectProps] = selectSystemProps([a11yProps, viewProps]);
  *   default if `gap` prop is undefined)
  */
 
-const StackWrapGap = /*#__PURE__*/forwardRef(({
-  space = 1,
-  tokens,
-  variant,
-  direction: directionProp = 'row',
-  children,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
+const StackWrapGap = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    space = 1,
+    tokens,
+    variant,
+    direction: directionProp = 'row',
+    children,
+    tag,
+    accessibilityRole,
+    ...rest
+  } = _ref;
   const viewport = useViewport();
   const direction = useResponsiveProp(directionProp, 'row');
   const themeTokens = useThemeTokens('StackView', tokens, variant, {

package/lib-module/StackView/common.js

@@ -1,15 +1,18 @@
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-export const selectFlexStyles = ({
-  alignItems,
-  justifyContent,
-  flexGrow,
-  flexShrink
-}) => ({
-  alignItems,
-  justifyContent,
-  flexGrow,
-  flexShrink
-});
+export const selectFlexStyles = _ref => {
+  let {
+    alignItems,
+    justifyContent,
+    flexGrow,
+    flexShrink
+  } = _ref;
+  return {
+    alignItems,
+    justifyContent,
+    flexGrow,
+    flexShrink
+  };
+};
 export const staticStyles = StyleSheet.create({
   wrap: {
     flexShrink: 1,

package/lib-module/StackView/getStackedContent.js

@@ -32,13 +32,14 @@ import Spacer from '../Spacer';
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const getStackedContent = (children, {
-  divider,
-  space,
-  direction = 'column',
-  box,
-  preserveFragments = false
-}) => {
+const getStackedContent = (children, _ref) => {
+  let {
+    divider,
+    space,
+    direction = 'column',
+    box,
+    preserveFragments = false
+  } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
   };
@@ -47,7 +48,7 @@ const getStackedContent = (children, {
   const topLevelChildren = preserveFragments ? children : unpackFragment(children);
   const validChildren = 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.
@@ -57,7 +58,7 @@ const getStackedContent = (children, {
       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-module/StepTracker/Step.js

@@ -11,105 +11,123 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectCompletedIconTokens = ({
-  completedIconColor,
-  completedIconSize
-}) => ({
-  size: completedIconSize,
-  color: completedIconColor
-});
+const selectCompletedIconTokens = _ref => {
+  let {
+    completedIconColor,
+    completedIconSize
+  } = _ref;
+  return {
+    size: completedIconSize,
+    color: completedIconColor
+  };
+};
 
-const selectConnectorStyles = ({
-  connectorColor,
-  connectorHeight,
-  connectorMinWidth,
-  connectorCompletedHeight,
-  connectorCompletedColor
-}, isCompleted) => ({
-  backgroundColor: connectorColor,
-  height: connectorHeight,
-  minWidth: connectorMinWidth,
-  ...(isCompleted && {
-    height: connectorCompletedHeight,
-    backgroundColor: connectorCompletedColor
-  })
-});
+const selectConnectorStyles = (_ref2, isCompleted) => {
+  let {
+    connectorColor,
+    connectorHeight,
+    connectorMinWidth,
+    connectorCompletedHeight,
+    connectorCompletedColor
+  } = _ref2;
+  return {
+    backgroundColor: connectorColor,
+    height: connectorHeight,
+    minWidth: connectorMinWidth,
+    ...(isCompleted && {
+      height: connectorCompletedHeight,
+      backgroundColor: connectorCompletedColor
+    })
+  };
+};
 
-const selectCurrentInnerStyles = ({
-  knobCurrentInnerColor,
-  knobCurrentInnerSize
-}) => ({
-  backgroundColor: knobCurrentInnerColor,
-  borderRadius: knobCurrentInnerSize / 2,
-  height: knobCurrentInnerSize,
-  width: knobCurrentInnerSize
-});
+const selectCurrentInnerStyles = _ref3 => {
+  let {
+    knobCurrentInnerColor,
+    knobCurrentInnerSize
+  } = _ref3;
+  return {
+    backgroundColor: knobCurrentInnerColor,
+    borderRadius: knobCurrentInnerSize / 2,
+    height: knobCurrentInnerSize,
+    width: knobCurrentInnerSize
+  };
+};
 
-const selectKnobStyles = ({
-  knobBackgroundColor,
-  knobBorderColor,
-  knobBorderWidth,
-  knobCompletedBackgroundColor,
-  knobCompletedBorderColor,
-  knobCompletedPaddingLeft,
-  knobCompletedPaddingTop,
-  knobCurrentBackgroundColor,
-  knobCurrentBorderColor,
-  knobCurrentBorderWidth,
-  knobCurrentPaddingLeft,
-  knobCurrentPaddingTop,
-  knobSize
-}, isCompleted, isCurrent) => ({
-  backgroundColor: knobBackgroundColor,
-  borderColor: knobBorderColor,
-  borderRadius: knobSize / 2,
-  borderWidth: knobBorderWidth,
-  height: knobSize,
-  width: knobSize,
-  ...(isCompleted && {
-    backgroundColor: knobCompletedBackgroundColor,
-    borderColor: knobCompletedBorderColor,
-    paddingLeft: knobCompletedPaddingLeft,
-    paddingTop: knobCompletedPaddingTop
-  }),
-  ...(isCurrent && {
-    backgroundColor: knobCurrentBackgroundColor,
-    borderColor: knobCurrentBorderColor,
-    borderWidth: knobCurrentBorderWidth,
-    paddingLeft: knobCurrentPaddingLeft,
-    paddingTop: knobCurrentPaddingTop
-  })
-});
+const selectKnobStyles = (_ref4, isCompleted, isCurrent) => {
+  let {
+    knobBackgroundColor,
+    knobBorderColor,
+    knobBorderWidth,
+    knobCompletedBackgroundColor,
+    knobCompletedBorderColor,
+    knobCompletedPaddingLeft,
+    knobCompletedPaddingTop,
+    knobCurrentBackgroundColor,
+    knobCurrentBorderColor,
+    knobCurrentBorderWidth,
+    knobCurrentPaddingLeft,
+    knobCurrentPaddingTop,
+    knobSize
+  } = _ref4;
+  return {
+    backgroundColor: knobBackgroundColor,
+    borderColor: knobBorderColor,
+    borderRadius: knobSize / 2,
+    borderWidth: knobBorderWidth,
+    height: knobSize,
+    width: knobSize,
+    ...(isCompleted && {
+      backgroundColor: knobCompletedBackgroundColor,
+      borderColor: knobCompletedBorderColor,
+      paddingLeft: knobCompletedPaddingLeft,
+      paddingTop: knobCompletedPaddingTop
+    }),
+    ...(isCurrent && {
+      backgroundColor: knobCurrentBackgroundColor,
+      borderColor: knobCurrentBorderColor,
+      borderWidth: knobCurrentBorderWidth,
+      paddingLeft: knobCurrentPaddingLeft,
+      paddingTop: knobCurrentPaddingTop
+    })
+  };
+};
 
-const selectLabelContainerStyles = ({
-  labelDirection,
-  labelGap,
-  labelMarginTop,
-  labelPaddingLeft,
-  labelPaddingRight
-}) => ({
-  marginTop: labelMarginTop,
-  paddingLeft: labelPaddingLeft,
-  paddingRight: labelPaddingRight,
-  flexDirection: labelDirection,
-  gap: labelGap
-});
+const selectLabelContainerStyles = _ref5 => {
+  let {
+    labelDirection,
+    labelGap,
+    labelMarginTop,
+    labelPaddingLeft,
+    labelPaddingRight
+  } = _ref5;
+  return {
+    marginTop: labelMarginTop,
+    paddingLeft: labelPaddingLeft,
+    paddingRight: labelPaddingRight,
+    flexDirection: labelDirection,
+    gap: labelGap
+  };
+};
 
-const selectLabelStyles = ({
-  labelColor,
-  labelCurrentColor,
-  labelCurrentFontWeight,
-  labelFontSize,
-  labelFontWeight,
-  labelFontName,
-  labelLineHeight
-}, isCurrent) => applyTextStyles({
-  color: isCurrent ? labelCurrentColor : labelColor,
-  fontSize: labelFontSize,
-  lineHeight: labelLineHeight,
-  fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
-  fontName: labelFontName
-});
+const selectLabelStyles = (_ref6, isCurrent) => {
+  let {
+    labelColor,
+    labelCurrentColor,
+    labelCurrentFontWeight,
+    labelFontSize,
+    labelFontWeight,
+    labelFontName,
+    labelLineHeight
+  } = _ref6;
+  return applyTextStyles({
+    color: isCurrent ? labelCurrentColor : labelColor,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
+    fontName: labelFontName
+  });
+};
 
 const getStepTestID = (isCompleted, isCurrent) => {
   let testID = 'StepTracker-Step';
@@ -127,15 +145,16 @@ const getStepTestID = (isCompleted, isCurrent) => {
  */
 
 
-const Step = ({
-  label,
-  name,
-  status = 0,
-  stepCount = 0,
-  stepIndex = 0,
-  tokens,
-  ...rest
-}) => {
+const Step = _ref7 => {
+  let {
+    label,
+    name,
+    status = 0,
+    stepCount = 0,
+    stepIndex = 0,
+    tokens,
+    ...rest
+  } = _ref7;
   const {
     completedIcon,
     showStepLabel,

package/lib-module/StepTracker/StepTracker.js

@@ -14,37 +14,46 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectContainerStyles = ({
-  containerPaddingBottom,
-  containerPaddingLeft,
-  containerPaddingRight,
-  containerPaddingTop
-}) => ({
-  paddingBottom: containerPaddingBottom,
-  paddingLeft: containerPaddingLeft,
-  paddingRight: containerPaddingRight,
-  paddingTop: containerPaddingTop
-});
+const selectContainerStyles = _ref => {
+  let {
+    containerPaddingBottom,
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop
+  } = _ref;
+  return {
+    paddingBottom: containerPaddingBottom,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop
+  };
+};
 
-const selectStepTrackerLabelContainerStyles = ({
-  labelMarginTop
-}) => ({
-  marginTop: labelMarginTop
-});
+const selectStepTrackerLabelContainerStyles = _ref2 => {
+  let {
+    labelMarginTop
+  } = _ref2;
+  return {
+    marginTop: labelMarginTop
+  };
+};
 
-const selectStepTrackerLabelStyles = ({
-  labelColor,
-  labelFontSize,
-  labelFontWeight,
-  labelFontName,
-  labelLineHeight
-}) => applyTextStyles({
-  color: labelColor,
-  fontSize: labelFontSize,
-  lineHeight: labelLineHeight,
-  fontWeight: labelFontWeight,
-  fontName: labelFontName
-});
+const selectStepTrackerLabelStyles = _ref3 => {
+  let {
+    labelColor,
+    labelFontSize,
+    labelFontWeight,
+    labelFontName,
+    labelLineHeight
+  } = _ref3;
+  return applyTextStyles({
+    color: labelColor,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight,
+    fontName: labelFontName
+  });
+};
 /**
  * StepTracker component shows the current position in a sequence of steps.
  *
@@ -79,15 +88,16 @@ const selectStepTrackerLabelStyles = ({
  */
 
 
-const StepTracker = /*#__PURE__*/forwardRef(({
-  current = 0,
-  copy = 'en',
-  dictionary = defaultDictionary,
-  steps = [],
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    current = 0,
+    copy = 'en',
+    dictionary = defaultDictionary,
+    steps = [],
+    tokens,
+    variant,
+    ...rest
+  } = _ref4;
   const viewport = useViewport();
   const {
     showStepTrackerLabel,

package/lib-module/Tabs/Tabs.js

@@ -12,24 +12,45 @@ const {
   selectHorizontalScrollTokens,
   useItemPositions
 } = 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__*/forwardRef(({
-  tokens,
-  itemTokens,
-  scrollButtonTokens,
-  variant,
-  value,
-  initialValue,
-  onChange,
-  items = [],
-  LinkRouter,
-  linkRouterProps,
-  ...rest
-}, ref) => {
+
+const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var _restProps$accessibil;
+
+  let {
+    tokens,
+    itemTokens,
+    scrollButtonTokens,
+    variant,
+    value,
+    initialValue,
+    onChange,
+    items = [],
+    LinkRouter,
+    linkRouterProps,
+    ...rest
+  } = _ref;
   const {
     space,
     ...themeTokens
@@ -44,32 +65,40 @@ const Tabs = /*#__PURE__*/forwardRef(({
   });
   const [itemPositions, isPositioningReady] = useItemPositions();
   useHash(useCallback((hash, event) => {
-    const hashItem = hash && items.find(({
-      href
-    }) => hash === href);
+    const hashItem = hash && items.find(_ref2 => {
+      let {
+        href
+      } = _ref2;
+      return hash === href;
+    });
     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__*/_jsx(HorizontalScroll, {
     ref: ref,
     ScrollButton: HorizontalScrollButton,
     itemPositions: itemPositions,
     tokens: selectHorizontalScrollTokens(themeTokens),
     scrollButtonTokens: scrollButtonTokens,
-    accessibilityRole: "tablist",
-    ...selectProps(rest),
+    accessibilityRole: parentAccessibilityRole,
+    ...restProps,
     children: /*#__PURE__*/_jsx(StackView, {
       space: space,
       direction: "row",
-      children: items.map(({
-        href,
-        label,
-        id,
-        ref: itemRef,
-        LinkRouter: ItemLinkRouter = LinkRouter,
-        linkRouterProps: itemLinkRouterProps
-      }, index) => {
-        const itemId = id ?? label;
+      children: items.map((_ref3, index) => {
+        let {
+          href,
+          label,
+          id,
+          accessibilityRole = defaultTabItemAccessibiltyRole,
+          ref: itemRef,
+          LinkRouter: ItemLinkRouter = LinkRouter,
+          linkRouterProps: itemLinkRouterProps
+        } = _ref3;
+        const itemId = id !== null && id !== void 0 ? id : label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
 
         const handlePress = event => setValue(itemId, event);
@@ -83,6 +112,7 @@ const Tabs = /*#__PURE__*/forwardRef(({
           selected: isSelected,
           itemPositions: itemPositions,
           index: index,
+          accessibilityRole: accessibilityRole,
           LinkRouter: ItemLinkRouter,
           linkRouterProps: { ...linkRouterProps,
             ...itemLinkRouterProps