@telus-uds/components-base 1.8.1 → 1.8.4

package/lib/StepTracker/StepTracker.js

@@ -39,37 +39,46 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.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
-}) => (0, _ThemeProvider.applyTextStyles)({
-  color: labelColor,
-  fontSize: labelFontSize,
-  lineHeight: labelLineHeight,
-  fontWeight: labelFontWeight,
-  fontName: labelFontName
-});
+const selectStepTrackerLabelStyles = _ref3 => {
+  let {
+    labelColor,
+    labelFontSize,
+    labelFontWeight,
+    labelFontName,
+    labelLineHeight
+  } = _ref3;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color: labelColor,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight,
+    fontName: labelFontName
+  });
+};
 /**
  * StepTracker component shows the current position in a sequence of steps.
  *
@@ -104,15 +113,16 @@ const selectStepTrackerLabelStyles = ({
  */
 
 
-const StepTracker = /*#__PURE__*/(0, _react.forwardRef)(({
-  current = 0,
-  copy = 'en',
-  dictionary = _dictionary.default,
-  steps = [],
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    current = 0,
+    copy = 'en',
+    dictionary = _dictionary.default,
+    steps = [],
+    tokens,
+    variant,
+    ...rest
+  } = _ref4;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     showStepTrackerLabel,

package/lib/Tabs/Tabs.js

@@ -34,24 +34,45 @@ 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)(({
-  tokens,
-  itemTokens,
-  scrollButtonTokens,
-  variant,
-  value,
-  initialValue,
-  onChange,
-  items = [],
-  LinkRouter,
-  linkRouterProps,
-  ...rest
-}, ref) => {
+
+const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  var _restProps$accessibil;
+
+  let {
+    tokens,
+    itemTokens,
+    scrollButtonTokens,
+    variant,
+    value,
+    initialValue,
+    onChange,
+    items = [],
+    LinkRouter,
+    linkRouterProps,
+    ...rest
+  } = _ref;
   const {
     space,
     ...themeTokens
@@ -66,32 +87,40 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   });
   const [itemPositions, isPositioningReady] = useItemPositions();
   (0, _utils.useHash)((0, _react.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__*/(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",
-      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);
@@ -105,6 +134,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
           selected: isSelected,
           itemPositions: itemPositions,
           index: index,
+          accessibilityRole: accessibilityRole,
           LinkRouter: ItemLinkRouter,
           linkRouterProps: { ...linkRouterProps,
             ...itemLinkRouterProps

package/lib/Tabs/TabsItem.js

@@ -41,56 +41,65 @@ const {
   getItemPositionLayoutHandler
 } = _HorizontalScroll.horizontalScrollUtils;
 
-const selectHighlightBarStyles = ({
-  highlightColor,
-  highlightBarBorderRadius = 0,
-  highlightBarBorderWidth = 0,
-  highlightBarHeight = 0
-}) => ({
-  backgroundColor: highlightColor,
-  borderColor: highlightColor,
-  height: highlightBarHeight + highlightBarBorderWidth * 2,
-  borderRadius: highlightBarBorderRadius,
-  borderWidth: highlightBarBorderWidth,
-  bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
-  left: -1 * highlightBarBorderWidth,
-  right: -1 * highlightBarBorderWidth,
-  zIndex: 1 + highlightBarBorderWidth
-});
+const selectHighlightBarStyles = _ref => {
+  let {
+    highlightColor,
+    highlightBarBorderRadius = 0,
+    highlightBarBorderWidth = 0,
+    highlightBarHeight = 0
+  } = _ref;
+  return {
+    backgroundColor: highlightColor,
+    borderColor: highlightColor,
+    height: highlightBarHeight + highlightBarBorderWidth * 2,
+    borderRadius: highlightBarBorderRadius,
+    borderWidth: highlightBarBorderWidth,
+    bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
+    left: -1 * highlightBarBorderWidth,
+    right: -1 * highlightBarBorderWidth,
+    zIndex: 1 + highlightBarBorderWidth
+  };
+};
 
-const selectHighlightTriangleStyles = ({
-  highlightColor,
-  highlightTriangleSize
-}) => ({
-  container: {
-    bottom: 0 - highlightTriangleSize * 2
-  },
-  triangle: {
-    height: 0,
-    width: 0,
-    borderWidth: highlightTriangleSize,
-    borderTopColor: highlightColor,
-    borderBottomColor: 'transparent',
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent'
-  }
-});
+const selectHighlightTriangleStyles = _ref2 => {
+  let {
+    highlightColor,
+    highlightTriangleSize
+  } = _ref2;
+  return {
+    container: {
+      bottom: 0 - highlightTriangleSize * 2
+    },
+    triangle: {
+      height: 0,
+      width: 0,
+      borderWidth: highlightTriangleSize,
+      borderTopColor: highlightColor,
+      borderBottomColor: 'transparent',
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent'
+    }
+  };
+};
 
-const selectContainerStyles = ({
-  backgroundColor,
-  borderColor,
-  borderWidth = 0,
-  borderRadius,
-  paddingHorizontal = 0,
-  paddingVertical = 0
-}) => ({
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  borderRadius,
-  paddingHorizontal: paddingHorizontal - borderWidth,
-  paddingVertical: paddingVertical - borderWidth
-});
+const selectContainerStyles = _ref3 => {
+  let {
+    backgroundColor,
+    borderColor,
+    borderWidth = 0,
+    borderRadius,
+    paddingHorizontal = 0,
+    paddingVertical = 0
+  } = _ref3;
+  return {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal: paddingHorizontal - borderWidth,
+    paddingVertical: paddingVertical - borderWidth
+  };
+};
 /**
  * Item within a Tabs component representing one tab of content. May be rendered as a link
  * or as a "menuitem" button depending on whether 'href' is passed.
@@ -99,23 +108,23 @@ const selectContainerStyles = ({
  */
 
 
-const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
-  href,
-  variant,
-  tokens,
-  selected,
-  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
-  } : {
-    selected
-  },
-  ...rawRest
-}, ref) => {
+const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    href,
+    variant,
+    tokens,
+    selected,
+    itemPositions,
+    index,
+    children,
+    accessibilityRole,
+    accessibilityCurrent = _Platform.default.OS === 'web' && accessibilityRole === 'link' && selected ? 'page' : undefined,
+    accessibilityState = accessibilityRole === 'tab' ? {
+      selected
+    } : undefined,
+    ...rawRest
+  } = _ref4;
+
   // Convert onClick etc to onPress etc if used in an integration
   const {
     onPress,
@@ -145,12 +154,13 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
     href
   });
 
-  const handlePress = onPress || openHref ? (...args) => {
-    if (onPress) onPress(...args);
-    if (openHref) openHref(...args);
+  const handlePress = onPress || openHref ? function () {
+    if (onPress) onPress(...arguments);
+    if (openHref) openHref(...arguments);
   } : undefined;
   const selectedProps = selectProps({
     accessibilityRole,
+    accessibilityCurrent,
     accessibilityState,
     ...rest
   });

package/lib/Tags/Tags.js

@@ -42,58 +42,62 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 
-const selectIconTextTokens = ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconSize,
-  iconColor,
-  iconBackground,
-  iconBorderRadius,
-  iconAlignSelf,
-  iconPadding,
-  iconTranslateX,
-  iconTranslateY
-}) => ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconWrapperStyle: {
-    backgroundColor: iconBackground,
-    borderRadius: iconBorderRadius,
-    alignSelf: iconAlignSelf,
-    padding: iconPadding,
-    ..._Platform.default.select({
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      web: {
-        transition: 'color 200ms, background 200ms'
-      }
-    })
-  },
-  iconTokens: {
-    size: iconSize,
-    color: iconColor,
-    translateX: iconTranslateX,
-    translateY: iconTranslateY
-  }
-});
+const selectIconTextTokens = _ref => {
+  let {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref;
+  return {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconWrapperStyle: {
+      backgroundColor: iconBackground,
+      borderRadius: iconBorderRadius,
+      alignSelf: iconAlignSelf,
+      padding: iconPadding,
+      ..._Platform.default.select({
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        web: {
+          transition: 'color 200ms, background 200ms'
+        }
+      })
+    },
+    iconTokens: {
+      size: iconSize,
+      color: iconColor,
+      translateX: iconTranslateX,
+      translateY: iconTranslateY
+    }
+  };
+};
 
-const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  accessibilityRole = _Platform.default.select({
-    web: 'group',
-    default: 'none'
-  }),
-  ...rest
-}, ref) => {
+const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    readOnly = false,
+    inactive = false,
+    accessibilityRole = _Platform.default.select({
+      web: 'group',
+      default: 'none'
+    }),
+    ...rest
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
     viewport
@@ -125,7 +129,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
   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, {
@@ -134,12 +138,13 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
     space: space,
     direction: direction,
     tokens: stackTokens,
-    children: items.map(({
-      label,
-      id = label,
-      ref: itemRef,
-      ...itemRest
-    }, index) => {
+    children: items.map((_ref3, index) => {
+      let {
+        label,
+        id = label,
+        ref: itemRef,
+        ...itemRest
+      } = _ref3;
       const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
       const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
@@ -169,10 +174,11 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
         selected: isSelected,
         inactive: inactive,
         ...itemProps,
-        children: ({
-          textStyles,
-          ...buttonState
-        }) => {
+        children: _ref4 => {
+          let {
+            textStyles,
+            ...buttonState
+          } = _ref4;
           // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
           // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
           // - Icon: https://github.com/telus/universal-design-system/issues/327

package/lib/TextInput/TextArea.js

@@ -53,21 +53,24 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
 
-const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  variant = {},
-  ...rest
-}, ref) => {
+const TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
 
-  const onHeightChange = ({
-    nativeEvent: {
-      contentSize: {
-        height
+  const onHeightChange = _ref2 => {
+    let {
+      nativeEvent: {
+        contentSize: {
+          height
+        }
       }
-    }
-  }) => {
+    } = _ref2;
+
     // on native this is happens out of the box
     if (_Platform.default.OS === 'web') {
       setInputHeight(height);
@@ -88,15 +91,18 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
     tokens: themeTokens
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
-      ref: ref,
-      ...inputProps,
-      nativeID: inputId,
-      ...props
-    })
+    children: _ref3 => {
+      let {
+        inputId,
+        ...props
+      } = _ref3;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+        ref: ref,
+        ...inputProps,
+        nativeID: inputId,
+        ...props
+      });
+    }
   });
 });
 TextArea.displayName = 'TextArea';

package/lib/TextInput/TextInput.js

@@ -45,12 +45,14 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * their implementation on the web.
  */
 
-const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  variant = {},
-  pattern,
-  ...rest
-}, ref) => {
+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
@@ -69,15 +71,18 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
-      ref: ref,
-      ...inputProps,
-      nativeID: inputId,
-      ...props
-    })
+    children: _ref2 => {
+      let {
+        inputId,
+        ...props
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+        ref: ref,
+        ...inputProps,
+        nativeID: inputId,
+        ...props
+      });
+    }
   });
 });
 TextInput.displayName = 'TextInput';