@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/StackView/StackWrapBox.js

@@ -20,6 +20,7 @@ const spaceSides = {
   row: 'right',
   column: 'bottom'
 };
+
 /**
  * An alternative fallback implementation of `StackWrap` that doesn't use CSS `gap`.
  *
@@ -32,7 +33,6 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-
 const StackWrapBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     space = 1,
@@ -55,8 +55,9 @@ const StackWrapBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     accessibilityRole,
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...rest
-  }); // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
+  });
 
+  // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
   const gapSize = useSpacingScale(gap);
   const offsetStyle = {
     [offsetSides[direction]]: -1 * gapSize
@@ -78,28 +79,25 @@ const StackWrapBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 StackWrapBox.displayName = 'StackWrapBox';
-StackWrapBox.propTypes = { ...selectedSystemPropTypes,
+StackWrapBox.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('StackView'),
-
   /**
    * Sets the `flexDirection` of the container
    */
   direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
-
   /**
    * The size of the space between items according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
   space: spacingProps.types.spacingValue,
-
   /**
    * The size of the space between lines of content, according to the theme's spacing scale. By default, matches `space`.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
   gap: spacingProps.types.spacingValue,
-
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
@@ -107,7 +105,6 @@ StackWrapBox.propTypes = { ...selectedSystemPropTypes,
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: PropTypes.oneOf(layoutTags),
-
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib-module/StackView/StackWrapGap.js

@@ -8,6 +8,7 @@ import getStackedContent from './getStackedContent';
 import { staticStyles, selectFlexStyles } from './common';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  * The primary implementation of StackWrap.
  *
@@ -18,7 +19,6 @@ const [selectProps] = selectSystemProps([a11yProps, viewProps]);
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-
 const StackWrapGap = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     space = 1,

package/lib-module/StackView/getStackedContent.js

@@ -2,6 +2,7 @@ import React, { Children, Fragment } from 'react';
 import Box from '../Box';
 import Divider from '../Divider';
 import Spacer from '../Spacer';
+
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
@@ -28,10 +29,8 @@ import Spacer from '../Spacer';
  * @param {boolean} [options.preserveFragments]
  * @returns {ReactElement[]}
  */
-
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const getStackedContent = (children, _ref) => {
   let {
     divider,
@@ -43,8 +42,9 @@ const getStackedContent = (children, _ref) => {
   const boxProps = box && typeof box === 'object' ? box : {
     space
   };
-  const dividerProps = divider && typeof divider === 'object' ? divider : {}; // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
+  const dividerProps = divider && typeof divider === 'object' ? divider : {};
 
+  // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
   const topLevelChildren = preserveFragments ? children : unpackFragment(children);
   const validChildren = Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
@@ -53,7 +53,8 @@ const getStackedContent = (children, _ref) => {
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
     // If possible, use an existing content key; use an index-based key only if necessary.
-    _createElement(Box, { ...boxProps,
+    _createElement(Box, {
+      ...boxProps,
       key: child.key || boxID,
       testID: boxID
     }, child) : child;
@@ -76,6 +77,7 @@ const getStackedContent = (children, _ref) => {
   }, []);
   return content;
 };
+
 /**
  * Unpacks top-level fragments, so that common compositional patterns such as the following examples
  * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
@@ -108,17 +110,15 @@ const getStackedContent = (children, _ref) => {
  * @param {ReactChildren} child
  * @returns {ReactChildren}
  */
-
-
 const unpackFragment = child => {
   var _child$props;
-
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
+  if (Children.count(child) > 1) return Children.map(child, unpackFragment);
 
-  if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children); // Stop unpacking as soon as any non-fragment child is found
+  // When a fragment is found, unpack its children to the top level and check them
+  if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
 
+  // Stop unpacking as soon as any non-fragment child is found
   return child;
 };
-
 export default getStackedContent;

package/lib-module/StepTracker/Step.js

@@ -10,7 +10,6 @@ import { applyTextStyles, useTheme } from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectCompletedIconTokens = _ref => {
   let {
     completedIconColor,
@@ -21,7 +20,6 @@ const selectCompletedIconTokens = _ref => {
     color: completedIconColor
   };
 };
-
 const selectConnectorStyles = (_ref2, isCompleted) => {
   let {
     connectorColor,
@@ -40,7 +38,6 @@ const selectConnectorStyles = (_ref2, isCompleted) => {
     })
   };
 };
-
 const selectCurrentInnerStyles = _ref3 => {
   let {
     knobCurrentInnerColor,
@@ -53,7 +50,6 @@ const selectCurrentInnerStyles = _ref3 => {
     width: knobCurrentInnerSize
   };
 };
-
 const selectKnobStyles = (_ref4, isCompleted, isCurrent) => {
   let {
     knobBackgroundColor,
@@ -93,7 +89,6 @@ const selectKnobStyles = (_ref4, isCompleted, isCurrent) => {
     })
   };
 };
-
 const selectLabelContainerStyles = _ref5 => {
   let {
     labelDirection,
@@ -110,7 +105,6 @@ const selectLabelContainerStyles = _ref5 => {
     gap: labelGap
   };
 };
-
 const selectStepLabelStyles = (_ref6, themeOptions, isCurrent) => {
   let {
     stepLabelColor,
@@ -129,7 +123,6 @@ const selectStepLabelStyles = (_ref6, themeOptions, isCurrent) => {
     themeOptions
   });
 };
-
 const selectLabelStyles = (_ref7, themeOptions, isCurrent) => {
   let {
     labelColor,
@@ -149,23 +142,19 @@ const selectLabelStyles = (_ref7, themeOptions, isCurrent) => {
     themeOptions
   });
 };
-
 const getStepTestID = (isCompleted, isCurrent) => {
   let testID = 'StepTracker-Step';
-
   if (isCompleted) {
     testID += '-Completed';
   } else if (isCurrent) {
     testID += '-Current';
   }
-
   return testID;
 };
+
 /**
  * A single step of a StepTracker.
  */
-
-
 const Step = _ref8 => {
   let {
     label,
@@ -238,8 +227,8 @@ const Step = _ref8 => {
     })]
   });
 };
-
-Step.propTypes = { ...selectedSystemPropTypes,
+Step.propTypes = {
+  ...selectedSystemPropTypes,
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   status: PropTypes.number.isRequired,

package/lib-module/StepTracker/StepTracker.js

@@ -13,7 +13,6 @@ import defaultDictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectContainerStyles = _ref => {
   let {
     containerPaddingBottom,
@@ -28,7 +27,6 @@ const selectContainerStyles = _ref => {
     paddingTop: containerPaddingTop
   };
 };
-
 const selectStepTrackerLabelContainerStyles = _ref2 => {
   let {
     labelMarginTop
@@ -37,7 +35,6 @@ const selectStepTrackerLabelContainerStyles = _ref2 => {
     marginTop: labelMarginTop
   };
 };
-
 const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
   let {
     labelColor,
@@ -55,6 +52,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
     themeOptions
   });
 };
+
 /**
  * StepTracker component shows the current position in a sequence of steps.
  *
@@ -87,8 +85,6 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-
-
 const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     current = 0,
@@ -114,9 +110,7 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
     copy
   });
   const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
-
   const getStepLabel = index => themeTokens.showStepLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepLabel : getCopy('stepLabel')).replace('%{stepNumber}', index + 1) : '';
-
   const {
     themeOptions
   } = useTheme();
@@ -161,24 +155,23 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
     })
   });
 });
-StepTracker.displayName = 'StepTracker'; // If a language dictionary entry is provided, it must contain every key
+StepTracker.displayName = 'StepTracker';
 
+// If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = PropTypes.shape({
   stepLabel: PropTypes.string.isRequired,
   stepTrackerLabel: PropTypes.string.isRequired
 });
-StepTracker.propTypes = { ...selectedSystemPropTypes,
-
+StepTracker.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The current step, 0-based number
    */
   current: PropTypes.number,
-
   /**
    * The language to use for the labels
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
-
   /**
    * Custom dictionary containing the labels to use for the steps
    */
@@ -186,7 +179,6 @@ StepTracker.propTypes = { ...selectedSystemPropTypes,
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
-
   /**
    * An array of strings defining the step titles
    */

package/lib-module/Tabs/Tabs.js

@@ -14,20 +14,16 @@ const {
   selectHorizontalScrollTokens,
   useItemPositions
 } = horizontalScrollUtils;
-
 const getDefaultTabItemAccessibilityRole = parentRole => {
   switch (parentRole) {
     case 'tablist':
       return 'tab';
-
     case 'navigation':
       return 'link';
-
     default:
       return undefined;
   }
 };
-
 const getStackViewTokens = variant => {
   const equalWidth = variant === null || variant === void 0 ? void 0 : variant.equalWidth;
   return Platform.select({
@@ -38,6 +34,7 @@ const getStackViewTokens = variant => {
     default: {}
   });
 };
+
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
@@ -46,8 +43,6 @@ const getStackViewTokens = variant => {
  * `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((_ref, ref) => {
   let {
     tokens,
@@ -115,12 +110,10 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
         } = _ref3;
         const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
-
         const handlePress = event => {
           if (typeof onPress === 'function') onPress(event);
           setValue(itemId, event);
         };
-
         const itemProps = selectItemProps(itemRest);
         return /*#__PURE__*/_jsx(TabsItem, {
           ref: itemRef,
@@ -134,7 +127,8 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
           index: index,
           accessibilityRole: accessibilityRole,
           LinkRouter: ItemLinkRouter,
-          linkRouterProps: { ...linkRouterProps,
+          linkRouterProps: {
+            ...linkRouterProps,
             ...itemLinkRouterProps
           },
           ...itemProps,
@@ -145,37 +139,34 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = { ...selectedSystemPropTypes,
+Tabs.propTypes = {
+  ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
-
   /**
    * Array of `TabsItem`s
    */
-  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    ...selectedItemPropTypes,
     ...withLinkRouter.PropTypes,
     href: PropTypes.string,
     label: PropTypes.string,
     id: PropTypes.string,
     ref: ABBPropTypes.ref()
   })),
-
   /**
    * `id` property of the current tab in the items array
    */
   value: PropTypes.string,
   initialValue: PropTypes.string,
-
   /**
    * Callback for when the selected tab changes
    */
   onChange: PropTypes.func,
   tokens: getTokensPropType('Tabs'),
-
   /**
    * Custom tokens for `TabsItem`
    */
   itemTokens: getTokensPropType('TabsItem'),
-
   /**
    * Custom tokens for `HorizontalScrollButton`
    */

package/lib-module/Tabs/TabsItem.js

@@ -16,7 +16,6 @@ const {
   itemPositionsPropType,
   getItemPositionLayoutHandler
 } = horizontalScrollUtils;
-
 const selectHighlightBarStyles = _ref => {
   let {
     highlightColor,
@@ -36,7 +35,6 @@ const selectHighlightBarStyles = _ref => {
     zIndex: 1 + highlightBarBorderWidth
   };
 };
-
 const selectHighlightTriangleStyles = _ref2 => {
   let {
     highlightColor,
@@ -57,7 +55,6 @@ const selectHighlightTriangleStyles = _ref2 => {
     }
   };
 };
-
 const selectContainerStyles = _ref3 => {
   let {
     backgroundColor,
@@ -76,14 +73,13 @@ const selectContainerStyles = _ref3 => {
     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.
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-
-
 const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     href,
@@ -110,11 +106,9 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     themeOptions
   } = useTheme();
   const getTokens = useThemeTokensCallback('TabsItem', tokens, variant);
-
   const resolveTokens = pressableState => resolvePressableTokens(getTokens, pressableState, {
     selected
   });
-
   const getPressableStyle = pressableState => {
     const {
       maxWidth
@@ -125,9 +119,9 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
       outline: 'none'
     }];
   };
+  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index);
 
-  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index); // On press, update the selection, call any press handler, and open any href in platform-appropriate way
-
+  // On press, update the selection, call any press handler, and open any href in platform-appropriate way
   const openHref = href && linkProps.handleHref({
     href
   });
@@ -146,14 +140,15 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     if (selected) {
       const position = itemPositions.positions[index];
       const scrollEnd = itemPositions.scrollOffset + itemPositions.containerWidth;
-
-      if ( // is off the right edge, or
-      scrollEnd && (position === null || position === void 0 ? void 0 : position.end) > scrollEnd || // is off the left edge
+      if (
+      // is off the right edge, or
+      scrollEnd && (position === null || position === void 0 ? void 0 : position.end) > scrollEnd ||
+      // is off the left edge
       typeof (position === null || position === void 0 ? void 0 : position.start) === 'number' && position.start < itemPositions.scrollOffset) {
         itemPositions.scrollTo(position.start);
       }
-    } // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
-
+    }
+    // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
   }, [selected, index, itemPositions]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
@@ -174,7 +169,8 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
       const hasHighlightTriangle = Boolean(themeTokens.highlightTriangleSize);
       const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
       const containerStyles = selectContainerStyles(themeTokens);
-      const textStyles = applyTextStyles({ ...selectTokens('Typography', themeTokens),
+      const textStyles = applyTextStyles({
+        ...selectTokens('Typography', themeTokens),
         themeOptions,
         textAlign
       });
@@ -201,7 +197,8 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
   });
 });
 TabsItem.displayName = 'TabsItem';
-TabsItem.propTypes = { ...selectedSystemPropTypes,
+TabsItem.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('TabsItem'),
   variant: variantProp.propType,
   onPress: PropTypes.func,

package/lib-module/Tags/Tags.js

@@ -14,7 +14,6 @@ import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-
 const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
@@ -54,11 +53,8 @@ const separateIconTextTokens = (_ref, returnRest) => {
     }
   };
 };
-
 const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
-
 const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
-
 const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     variant,
@@ -86,10 +82,9 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
     space
   } = themeTokens;
   const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
-
-  const getButtonTokens = buttonState => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+  const getButtonTokens = buttonState =>
+  // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
   selectTokens('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
-
   const {
     currentValues,
     toggleOneValue
@@ -106,11 +101,9 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
   const itemA11yRole = 'checkbox';
   const uniqueFields = ['id', 'label'];
-
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
   }
-
   return /*#__PURE__*/_jsx(StackWrap, {
     ref: ref,
     ...selectedProps,
@@ -124,19 +117,18 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
         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 isSelected = currentValues.includes(id);
 
+      // Pass an object of relevant component state as first argument for any passed-in press handlers
       const pressHandlers = getPressHandlersWithArgs(rest, [{
         id,
         label,
         currentValues
       }]);
-
       const handlePress = event => {
         if (pressHandlers.onPress) pressHandlers.onPress(event);
         toggleOneValue(id, event);
       };
-
       const itemProps = selectItemProps({
         accessibilityState: {
           checked: isSelected
@@ -163,6 +155,7 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
           // - Icon: https://github.com/telus/universal-design-system/issues/327
           // - IconButton: https://github.com/telus/universal-design-system/issues/281
           // - Token sets: https://github.com/telus/universal-design-system/issues/782
+
           const itemTokens = getItemTokens(buttonState);
           const {
             iconTokens,
@@ -178,12 +171,10 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
               tokens: iconTokens
             })
           }) : null;
-
           const textContent = /*#__PURE__*/_jsx(Text, {
             style: textStyles,
             children: label
           });
-
           return getStackedContent(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
             space: iconSpace,
             direction: 'row'
@@ -194,51 +185,45 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 Tags.displayName = 'Tags';
-Tags.propTypes = { ...selectedSystemPropTypes,
+Tags.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Tags'),
   variant: variantProp.propType,
-
   /**
    * If provided, sets a maximum number of items a user may select at once.
    */
   maxValues: PropTypes.number,
-
   /**
    * The options a user may select
    */
-  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
-
+  items: PropTypes.arrayOf(PropTypes.shape({
+    ...selectedItemPropTypes,
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.
      */
     label: PropTypes.string.isRequired,
-
     /**
      * An optional accessibility label may be passed to ButtonGroup Buttons
      * which is applied as normal for a React Native accessibilityLabel prop.
      */
     accessibilityLabel: PropTypes.string,
-
     /**
      * An optional unique string may be provided to identify this option,
      * which will be used in code and passed to any onChange function.
      * If not provided, the label is used.
      */
     id: PropTypes.string,
-
     /**
      * An optional ref for one individual Tag button in the tags
      */
     ref: ABBPropTypes.ref()
   })),
-
   /**
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
   onChange: PropTypes.func,
-
   /**
    * If the selected item(s) in the button group are to be controlled externally by
    * a parent component, pass an array of strings as well as an `onChange` handler.
@@ -246,14 +231,12 @@ Tags.propTypes = { ...selectedSystemPropTypes,
    * expects its state to be handled via `onChange` and so doesn't handle it itself.
    */
   values: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * If `values` is not passed, making the ButtonGroup an "uncontrolled" component
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
   initialValues: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * AccesibilityRole for the Tags
    */