@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/Button/ButtonBase.js

@@ -10,7 +10,6 @@ import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, re
 import { IconText } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
-
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,
@@ -18,7 +17,6 @@ const getOuterBorderOffset = _ref => {
   } = _ref;
   return outerBorderGap + outerBorderWidth;
 };
-
 const selectOuterContainerStyles = _ref2 => {
   let {
     opacity,
@@ -28,7 +26,8 @@ const selectOuterContainerStyles = _ref2 => {
     borderRadius,
     outerBackgroundColor
   } = _ref2;
-  return { ...Platform.select({
+  return {
+    ...Platform.select({
       native: {
         alignSelf: 'flex-start'
       }
@@ -43,7 +42,6 @@ const selectOuterContainerStyles = _ref2 => {
     })
   };
 };
-
 const selectOuterSizeStyles = _ref3 => {
   let {
     outerBorderGap,
@@ -57,16 +55,16 @@ const selectOuterSizeStyles = _ref3 => {
     outerBorderGap,
     outerBorderWidth
   });
-  const sizeStyles = {}; // Apply width/height tokens: number === pixels, string === explicit units e.g. %
-
+  const sizeStyles = {};
+  // Apply width/height tokens: number === pixels, string === explicit units e.g. %
   if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
     sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
     sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
     return sizeStyles;
   }
-
   if (!width) {
-    return { ...sizeStyles,
+    return {
+      ...sizeStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ...Platform.select({
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
@@ -75,28 +73,26 @@ const selectOuterSizeStyles = _ref3 => {
         }
       })
     };
-  } // Ensure the negative margin doesn't make element off-centre
-
+  }
 
+  // Ensure the negative margin doesn't make element off-centre
   if (Platform.OS === 'web') {
     sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
     sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`;
     return sizeStyles;
-  } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
-
-
+  }
+  // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
   if (width === '100%') {
     sizeStyles.flexGrow = 1;
     return sizeStyles;
-  } // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
-  // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
-
+  }
 
+  // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
+  // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
   sizeStyles.width = width;
   sizeStyles.height = height;
   return sizeStyles;
 };
-
 const selectInnerContainerStyles = _ref4 => {
   let {
     backgroundColor,
@@ -112,7 +108,6 @@ const selectInnerContainerStyles = _ref4 => {
     borderBottomWidth,
     minWidth
   } = _ref4;
-
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = _ref5 => {
@@ -122,7 +117,6 @@ const selectInnerContainerStyles = _ref4 => {
     } = _ref5;
     return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
   };
-
   return {
     paddingLeft: offsetBorder({
       value: paddingLeft,
@@ -145,7 +139,6 @@ const selectInnerContainerStyles = _ref4 => {
     ...applyShadowToken(shadow)
   };
 };
-
 const selectBorderStyles = _ref6 => {
   let {
     borderColor,
@@ -166,7 +159,6 @@ const selectBorderStyles = _ref6 => {
     borderBottomWidth
   };
 };
-
 const selectTextStyles = (_ref7, themeOptions) => {
   let {
     fontSize,
@@ -190,7 +182,6 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textDecorationStyle: textLineStyle
   });
 };
-
 const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   let {
     accessibilityRole
@@ -207,7 +198,6 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     default: {}
   });
 };
-
 const selectButtonStyles = _ref9 => {
   let {
     textAlign
@@ -217,7 +207,6 @@ const selectButtonStyles = _ref9 => {
     justifyContent: textAlign
   };
 };
-
 const selectItemIconTokens = _ref10 => {
   let {
     color,
@@ -229,7 +218,6 @@ const selectItemIconTokens = _ref10 => {
     color: iconColor || color
   };
 };
-
 const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
   let {
     id,
@@ -255,16 +243,12 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
     selected,
     iconPosition
   };
-
   const resolveButtonTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);
-
   const systemProps = selectProps(rest);
-
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
   };
-
   const {
     themeOptions
   } = useTheme();
@@ -286,15 +270,16 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
       const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, Platform.select({
         web: {
           pointerEvents: 'none' // bubbles press event to parent `Pressable`
-
         }
       })];
+
       const iconTokens = selectItemIconTokens(themeTokens);
       const {
         iconSpace
-      } = themeTokens; // If the container has a width set, fill it instead of sizing from content.
-      // If in future we support text alignments other than center, add here.
+      } = themeTokens;
 
+      // If the container has a width set, fill it instead of sizing from content.
+      // If in future we support text alignments other than center, add here.
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
       const rowStyles = selectButtonStyles(themeTokens);
@@ -315,10 +300,12 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
           icon: IconComponent,
           iconPosition: iconPosition,
           space: iconSpace,
-          iconProps: { ...iconProps,
+          iconProps: {
+            ...iconProps,
             tokens: iconTokens
           },
-          children: wrapStringsInText(typeof children === 'function' ? children({ ...resolvePressableState(pressableState, extraButtonState),
+          children: wrapStringsInText(typeof children === 'function' ? children({
+            ...resolvePressableState(pressableState, extraButtonState),
             textStyles
           }) : children, {
             style: textStyles
@@ -343,7 +330,8 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center'
   },
-  text: { ...Platform.select({
+  text: {
+    ...Platform.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: {
         transition: 'color 200ms'

package/lib-module/Button/ButtonDropdown.js

@@ -11,7 +11,6 @@ import Icon from '../Icon';
 import { getStackedContent } from '../StackView';
 import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const selectIconTokens = _ref => {
   let {
     icon,
@@ -50,7 +49,6 @@ const selectIconTokens = _ref => {
     }
   };
 };
-
 const ButtonDropdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     value,
@@ -80,22 +78,19 @@ const ButtonDropdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...variant
   };
   const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState);
+  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
 
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState)); // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-
+  // Pass an object of relevant component state as first argument for any passed-in press handlers
   const pressHandlers = getPressHandlersWithArgs(props, [{
     label,
     open: isOpen
   }]);
-
   const handlePress = event => {
     if (!inactive) {
       if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
       setIsOpen(!isOpen, event);
     }
   };
-
   return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
     ...pressHandlers,
@@ -115,6 +110,7 @@ const ButtonDropdown = /*#__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 = getTokens(buttonState);
       const {
         iconTokens,
@@ -130,11 +126,10 @@ const ButtonDropdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
           tokens: iconTokens
         })
       }) : null;
-
-      const childrenContent = () => typeof children === 'function' ? children({ ...resolvePressableState(buttonState, extraState),
+      const childrenContent = () => typeof children === 'function' ? children({
+        ...resolvePressableState(buttonState, extraState),
         textStyles
       }) : children;
-
       const content = children ? childrenContent() : /*#__PURE__*/_jsx(Text, {
         style: textStyles,
         children: label
@@ -147,33 +142,29 @@ const ButtonDropdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 ButtonDropdown.displayName = 'ButtonDropdown';
-ButtonDropdown.propTypes = { ...a11yProps.types,
+ButtonDropdown.propTypes = {
+  ...a11yProps.types,
   ...focusHandlerProps.types,
   ...buttonPropTypes,
   children: textAndA11yText,
   tokens: getTokensPropType('ButtonDropdown'),
-
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.
    */
   onChange: PropTypes.func,
-
   /**
    * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
    *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
    */
   value: PropTypes.bool,
-
   /**
    * Use `initialValue` to provide the initial value for an uncontrolled version.
    */
   initialValue: PropTypes.bool,
-
   /**
    * The label of ButtonDropdown.
    */
   label: PropTypes.string,
-
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */

package/lib-module/Button/ButtonGroup.js

@@ -66,14 +66,14 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
   const uniqueFields = ['id', 'label'];
-
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
-  } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
-
+  }
 
+  // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
   const innerRole = Platform.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
-  return /*#__PURE__*/_jsx(Fieldset, { ...systemProps,
+  return /*#__PURE__*/_jsx(Fieldset, {
+    ...systemProps,
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -101,19 +101,18 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
           ref: itemRef,
           ...itemRest
         } = _ref2;
-        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 iconProp = itemRest.icon || undefined;
         const itemA11y = {
           accessibilityState: {
@@ -122,9 +121,10 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
           accessibilityRole: itemA11yRole,
           accessibilityLabel,
           ...a11yProps.getPositionInSet(items.length, index)
-        }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
-        // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
+        };
 
+        // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
+        // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
         return /*#__PURE__*/_jsx(ButtonBase, {
           ref: itemRef,
           ...pressHandlers,
@@ -133,7 +133,8 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
           selected: isSelected,
           inactive: inactive,
           icon: iconProp,
-          ...selectItemProps({ ...itemRest,
+          ...selectItemProps({
+            ...itemRest,
             ...itemA11y
           }),
           iconPosition: iconPosition,
@@ -144,52 +145,46 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 ButtonGroup.displayName = 'ButtonGroup';
-ButtonGroup.propTypes = { ...selectedSystemPropTypes,
+ButtonGroup.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ButtonGroup'),
   variant: variantProp.propType,
-
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
    * like radio buttons. To have no limit and allow any number of selections, pass `null`.
    */
   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 button in the ButtonGroup
      */
     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.
@@ -197,65 +192,53 @@ ButtonGroup.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),
-
   /**
    * Defines if the icon will be displayed on the right or left side of the label.
    */
   iconPosition: PropTypes.oneOf(['left', 'right']),
-
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.
    */
   legend: PropTypes.string,
-
   /**
    * Optional additional text giving more detail to help a user make a choice.
    */
   hint: PropTypes.string,
-
   /**
    * Position of the hint relative to label. Use `below` to display a larger hint below the label.
    */
   hintPosition: PropTypes.oneOf(['inline', 'below']),
-
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */
   tooltip: PropTypes.string,
-
   /**
    * Current validation status of the group, passed to the feedback element if there is one.
    */
   validation: PropTypes.oneOf(['error', 'success']),
-
   /**
    * If provided, a Feedback element is rendered containing this text.
    */
   feedback: PropTypes.string,
-
   /**
    * If true, the buttons cannot be selected by the user and simply show their current state.
    */
   readOnly: PropTypes.bool,
-
   /**
    * If true, the buttons cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: PropTypes.bool,
-
   /**
    * On Web, this is passed to the `name` attribute of the fieldset.
    */
   name: PropTypes.string,
-
   /**
    * Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label).
    */

package/lib-module/Button/ButtonLink.js

@@ -5,11 +5,11 @@ import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
+
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const ButtonLink = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -39,7 +39,8 @@ const ButtonLink = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 ButtonLink.displayName = 'ButtonLink';
-ButtonLink.propTypes = { ...a11yProps.types,
+ButtonLink.propTypes = {
+  ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
   children: textAndA11yText,

package/lib-module/Button/propTypes.js

@@ -6,18 +6,15 @@ import { iconComponentPropTypes } from '../Icon';
 export const textAndA11yText = ABBPropTypes.childrenOf(PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string]));
 const buttonPropTypes = {
   tokens: getTokensPropType('Button'),
-
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme
    */
   inactive: PropTypes.bool,
-
   /**
    * Alias for `inactive`
    */
   disabled: PropTypes.bool,
-
   /**
    * Button's children must be either:
    *  - One or more text strings and / or A11yText components
@@ -27,22 +24,18 @@ const buttonPropTypes = {
    * ```
    */
   children: PropTypes.oneOfType([PropTypes.func, textAndA11yText]).isRequired,
-
   /**
    * Function called when the button is pressed. Required unless the button has a href.
    */
   onPress: PropTypes.func,
-
   /**
    * Optional variant that may be passed down to the link's icon if there is one
    */
   iconProps: PropTypes.exact(iconComponentPropTypes),
-
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
    */
   iconPosition: PropTypes.oneOf(['left', 'right']),
-
   /**
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.

package/lib-module/Card/Card.js

@@ -7,6 +7,7 @@ import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
 import CardBase from './CardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  * A basic card component, unstyled by default.
  *
@@ -55,7 +56,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-
 const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -77,7 +77,8 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 Card.displayName = 'Card';
-Card.propTypes = { ...selectedSystemPropTypes,
+Card.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),
   variant: variantProp.propType

package/lib-module/Card/CardBase.js

@@ -6,8 +6,9 @@ import { applyShadowToken } from '../ThemeProvider';
 import { getTokensPropType } from '../utils';
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]); // Ensure explicit selection of tokens
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
+// Ensure explicit selection of tokens
 const selectStyles = _ref => {
   let {
     flex,
@@ -43,12 +44,11 @@ const selectStyles = _ref => {
     } : {})
   };
 };
+
 /**
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-
-
 const CardBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -67,7 +67,8 @@ const CardBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 CardBase.displayName = 'CardBase';
-CardBase.propTypes = { ...selectedSystemPropTypes,
+CardBase.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card')
 };