@telus-uds/components-base 1.65.0 → 1.67.0

package/lib-module/IconButton/IconButton.js

@@ -6,19 +6,17 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
 import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import Icon from '../Icon'; // function to get the dimentionals of the conditionals
+import Icon from '../Icon';
 
+// function to get the dimentionals of the conditionals
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const getPasswordDimensions = (password, width, height) => {
   return password ? {
     width,
     height
   } : {};
 };
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectOuterStyle = (_ref, password) => {
   let {
     backgroundColor,
@@ -58,10 +56,8 @@ const selectOuterStyle = (_ref, password) => {
     })
   }, staticStyles.outer];
 };
-
 const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
 
-
 const selectInnerStyle = (_ref2, password) => {
   let {
     borderColor,
@@ -112,13 +108,12 @@ const selectInnerStyle = (_ref2, password) => {
     ...getPasswordDimensions(password, width, height)
   };
 };
+
 /**
  * A pressable themeless base component that handles pressable states and passes tokens
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-
-
 const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
@@ -134,13 +129,12 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     onPress,
     ...rest
   } = clickProps.toPressProps(rawRest);
-  const selectedProps = selectProps({ ...rest,
+  const selectedProps = selectProps({
+    ...rest,
     accessibilityRole
   });
-
   const handlePress = () => {
     var _ref$current;
-
     linkProps.handleHref({
       href,
       onPress
@@ -150,11 +144,8 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
       }
     });
   };
-
   const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
-
   const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password));
-
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -178,31 +169,27 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
 });
 IconButton.displayName = 'IconButton';
-IconButton.propTypes = { ...selectedSystemPropTypes,
+IconButton.propTypes = {
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
-
   /**
    * A unique identifier for testing purposes.
    * Will be added as a `data-testid` attribute.
    */
   testID: PropTypes.string,
-
   /**
    * Defines the icon to be rendered
    */
   icon: PropTypes.elementType,
-
   /**
    * URL to navigate to when the `Iconbutton` is pressed
    */
   href: PropTypes.string,
-
   /**
    * URL options to navigate to when the `Iconbutton` is pressed
    */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
-
   /**
    * Function to execute when the `Iconbutton` is pressed
    */

package/lib-module/InputLabel/InputLabel.js

@@ -11,11 +11,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectLabelStyles = (tokens, themeOptions) => applyTextStyles({ ...selectTokens('Typography', tokens),
+const selectLabelStyles = (tokens, themeOptions) => applyTextStyles({
+  ...selectTokens('Typography', tokens),
   themeOptions
 });
-
 const selectHintStyles = (_ref, themeOptions) => {
   let {
     hintColor,
@@ -33,7 +32,6 @@ const selectHintStyles = (_ref, themeOptions) => {
     themeOptions
   });
 };
-
 const selectGapStyles = _ref2 => {
   let {
     gap
@@ -42,7 +40,6 @@ const selectGapStyles = _ref2 => {
     marginRight: gap
   };
 };
-
 const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
@@ -95,38 +92,32 @@ const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
 });
 InputLabel.displayName = 'InputLabel';
-InputLabel.propTypes = { ...selectedSystemPropTypes,
-
+InputLabel.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Whether the English or French copy will be used (e.g. for accessibility labels).
    */
   copy: PropTypes.oneOf(['en', 'fr']),
-
   /**
    * The input label.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * The id attribute of the input which this label refers to.
    */
   forId: PropTypes.string,
-
   /**
    * A short description of the expected input.
    */
   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']),
-
   /**
    * The id attribute passed down to the hint element.
    */
   hintId: PropTypes.string,
-
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib-module/InputLabel/LabelContent.js

@@ -17,8 +17,9 @@ LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: PropTypes.string,
   forId: PropTypes.string
-}; // Note that <label> is not React Native, so we can't use `StyleSheet.create` here
+};
 
+// Note that <label> is not React Native, so we can't use `StyleSheet.create` here
 const staticStyles = {
   inheritCursor: {
     cursor: 'inherit'

package/lib-module/InputLabel/LabelContent.native.js

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View"; // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/lib-module/InputSupports/InputSupports.js

@@ -60,48 +60,39 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
 InputSupports.displayName = 'InputSupports';
 InputSupports.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
   /**
    * Whether the English or French copy will be used (e.g. for accessibility labels).
    */
   copy: PropTypes.oneOf(['en', 'fr']),
-
   /**
    * The input label.
    */
   label: PropTypes.string,
-
   /**
    * A short description of the expected input.
    */
   hint: PropTypes.string,
-
   /**
    * Position of the hint relative to label.
    */
   hintPosition: PropTypes.oneOf(['inline', 'below']),
-
   /**
    * A detailed description of validation error/success or additional instructions.
    * Visual variant is determined based on the `validation` prop.
    */
   feedback: PropTypes.string,
-
   /**
    * Additional tokens to override the default feedback tokens.
    */
   feedbackTokens: PropTypes.objectOf(PropTypes.string),
-
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
   tooltip: PropTypes.string,
-
   /**
    * Use to visually mark an input as valid or invalid.
    */
   validation: PropTypes.oneOf(['error', 'success']),
-
   /**
    * ID for DOM element on web
    */

package/lib-module/InputSupports/useInputSupports.js

@@ -1,7 +1,5 @@
 import useUniqueId from '../utils/useUniqueId';
-
 const joinDefined = array => array.filter(item => item !== undefined).join(' ');
-
 const useInputSupports = _ref => {
   let {
     label,
@@ -18,7 +16,8 @@ const useInputSupports = _ref => {
     accessibilityLabel: label,
     accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
     // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
+    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId,
+    // feedback receives a11yRole=alert on error, so there's no need to include it here
     hint && hintId]),
     accessibilityInvalid: hasValidationError
   };
@@ -29,5 +28,4 @@ const useInputSupports = _ref => {
     a11yProps
   };
 };
-
 export default useInputSupports;

package/lib-module/Link/ChevronLink.js

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { selectTokens, getTokensPropType, linkProps } from '../utils';
 import LinkBase from './LinkBase';
+
 /**
  * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
  * It effectively pre-binds left and right icons, and a directional translation of the icon on hover.
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -21,7 +21,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
-
   const applyChevronTokens = linkState => {
     const {
       leftIcon,
@@ -32,16 +31,17 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
       ...otherTokens
     } = getChevronTokens(linkState);
     const linkTokens = selectTokens('Link', otherTokens);
-    return { ...linkTokens,
+    return {
+      ...linkTokens,
       height,
       blockFontSize: tokens.fontSize ?? fontSize,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };
   };
-
   const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant);
-  return /*#__PURE__*/_jsx(LinkBase, { ...otherlinkProps,
+  return /*#__PURE__*/_jsx(LinkBase, {
+    ...otherlinkProps,
     iconPosition: direction,
     tokens: getTokens,
     dataSet: dataSet,
@@ -50,7 +50,8 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 ChevronLink.displayName = 'ChevronLink';
-ChevronLink.propTypes = { ...LinkBase.propTypes,
+ChevronLink.propTypes = {
+  ...LinkBase.propTypes,
   children: PropTypes.node,
   variant: PropTypes.exact({
     size: PropTypes.oneOf(['large', 'small', 'micro']),
@@ -59,7 +60,6 @@ ChevronLink.propTypes = { ...LinkBase.propTypes,
   }),
   ...linkProps.types,
   tokens: getTokensPropType('ChevronLink', 'Link'),
-
   /**
    * Changes direction of chevron icon
    */

package/lib-module/Link/InlinePressable.js

@@ -4,7 +4,6 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
-
 /**
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
@@ -15,7 +14,6 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/lib-module/Link/InlinePressable.native.js

@@ -6,9 +6,7 @@ import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWit
  * @typedef {import('react-native').PressableProps} PressableProps
  */
 // TouchableWithoutFeedback and Pressable have similar but not identical props APIs
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const pressablePropsToTouchable = _ref => {
   let {
     unstable_pressDelay,
@@ -17,11 +15,13 @@ const pressablePropsToTouchable = _ref => {
     // Unsupported, discard it
     ...props
   } = _ref;
-  return { ...props,
+  return {
+    ...props,
     touchSoundDisabled: android_disableSound,
     delayPressIn: unstable_pressDelay
   };
 };
+
 /**
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
@@ -42,8 +42,6 @@ const pressablePropsToTouchable = _ref => {
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-
-
 const InlinePressable = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     onPress,
@@ -52,24 +50,18 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const [isFocused, setIsFocused] = useState(false);
-
   const handleFocus = () => setIsFocused(true);
-
   const handleBlur = () => setIsFocused(false);
-
   const [isPressed, setIsPressed] = useState(false);
-
   const handlePressIn = () => setIsPressed(true);
-
   const handlePressOut = () => setIsPressed(false);
-
   const pressState = {
     pressed: isPressed,
     focus: isFocused,
     // limited support on native
     hover: false // not yet supported on native
-
   };
+
   const currentStyle = typeof style === 'function' ? style(pressState) : style;
   return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
     onPress: onPress,

package/lib-module/Link/LinkBase.js

@@ -11,7 +11,6 @@ import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
-
 const selectOuterBorderStyles = _ref => {
   let {
     outerBorderColor,
@@ -20,7 +19,8 @@ const selectOuterBorderStyles = _ref => {
     borderRadius,
     outerBorderOutline
   } = _ref;
-  return (// A view wrapper with a border on native messes up inline text alignment
+  return (
+    // A view wrapper with a border on native messes up inline text alignment
     // so for now make focus styles strictly web-only
     Platform.OS === 'web' ? {
       // Allow theme to define outline, or, turn off outline and use border if rounded corners required
@@ -34,7 +34,6 @@ const selectOuterBorderStyles = _ref => {
     } : {}
   );
 };
-
 const selectTextStyles = _ref2 => {
   let {
     color,
@@ -53,7 +52,6 @@ const selectTextStyles = _ref2 => {
     })
   };
 };
-
 const selectBlockStyles = (_ref3, themeOptions) => {
   let {
     blockFontWeight,
@@ -69,7 +67,6 @@ const selectBlockStyles = (_ref3, themeOptions) => {
     themeOptions
   });
 };
-
 const selectDecorationStyles = _ref4 => {
   let {
     color,
@@ -90,7 +87,6 @@ const selectDecorationStyles = _ref4 => {
     })
   };
 };
-
 const selectIconTokens = _ref5 => {
   let {
     color,
@@ -105,6 +101,7 @@ const selectIconTokens = _ref5 => {
     size: iconSize
   };
 };
+
 /**
  * Renders a pressable text link, with optional icon. This is rendered as a block element
  * only (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.
@@ -127,8 +124,6 @@ const selectIconTokens = _ref5 => {
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-
-
 const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   let {
     href,
@@ -159,20 +154,21 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     hrefAttrs,
     ...rest
   });
-
   const resolveLinkTokens = pressState => resolvePressableTokens(tokens, pressState, {
     iconPosition
   });
-
   const defaultThemeTokens = resolveLinkTokens({});
-  const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
+  const hasIcon = Boolean(icon || defaultThemeTokens.icon);
 
+  // On web, this makes focus rings wrap only the link, not the entire block
   const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
   const {
     themeOptions
   } = useTheme();
-  return /*#__PURE__*/_jsx(InlinePressable, { ...selectedProps,
-    inlineFlex: hasIcon // assuming links without icons should be inline (even if they are long)
+  return /*#__PURE__*/_jsx(InlinePressable, {
+    ...selectedProps,
+    inlineFlex: hasIcon
+    // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
     style: linkState => {
@@ -184,9 +180,9 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const textStyles = selectTextStyles(themeTokens);
-      const iconTokens = selectIconTokens(themeTokens); // TODO: may need to apply some smarter text inheritance here if inline to avoid native
+      const iconTokens = selectIconTokens(themeTokens);
+      // TODO: may need to apply some smarter text inheritance here if inline to avoid native
       // issues like double-application of line heights breaking align-items: baseline
-
       const blockTextStyles = selectBlockStyles(themeTokens, themeOptions);
       const IconComponent = icon || themeTokens.icon;
       const {
@@ -196,7 +192,8 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: iconSpace,
-        iconProps: { ...iconProps,
+        iconProps: {
+          ...iconProps,
           tokens: iconTokens,
           style: staticStyles.bubblePointerEvents
         },
@@ -209,40 +206,34 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   });
 });
 LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = { ...selectedSystemPropTypes,
+LinkBase.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
-
   /**
    * href for the Link
    */
   href: PropTypes.string,
-
   /**
    * AccesibilityRole for the link base
    */
   accessibilityrole: PropTypes.string,
-
   /**
    * Children nodes that can be added
    */
   variant: variantProp.propType,
-
   /**
    * Optional variant that may be passed down to the link's icon if there is one
    */
   iconProps: PropTypes.exact(iconComponentPropTypes),
-
   /**
    * 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.
    */
   icon: PropTypes.elementType,
-
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
    */
   iconPosition: PropTypes.oneOf(['left', 'right']),
-
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
@@ -260,7 +251,8 @@ const staticStyles = StyleSheet.create({
   baseline: {
     alignSelf: 'baseline'
   },
-  bubblePointerEvents: { ...Platform.select({
+  bubblePointerEvents: {
+    ...Platform.select({
       web: {
         pointerEvents: 'none'
       }

package/lib-module/Link/TextButton.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { variantProp } from '../utils';
+
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const TextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -30,15 +30,13 @@ const TextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 TextButton.displayName = 'TextButton';
-TextButton.propTypes = { ...LinkBase.propTypes,
-
+TextButton.propTypes = {
+  ...LinkBase.propTypes,
   /** onPress function */
   onPress: PropTypes.func.isRequired,
-
   /** Children node that can be added */
   children: PropTypes.node.isRequired,
   variant: variantProp.propType,
-
   /** Accesibility role for TextButton */
   accessibilityRole: PropTypes.string
 };

package/lib-module/List/List.js

@@ -5,20 +5,17 @@ import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const isListItem = element => {
   var _element$type, _element$type2;
-
-  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name); // Match our own ListItem, and also, custom list items
-
+  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
+  // Match our own ListItem, and also, custom list items
   return Boolean(elementName.match(/Item/));
 };
+
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-
-
 const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -42,7 +39,6 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
         ...child.props
       });
     }
-
     return child;
   });
   return /*#__PURE__*/_jsx(View, {
@@ -57,11 +53,11 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 List.displayName = 'List';
-List.propTypes = { ...selectedSystemPropTypes,
+List.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: PropTypes.node,
-
   /**
    * In case it is not the last item allow display divider
    */

package/lib-module/List/ListItem.js

@@ -2,10 +2,10 @@ import React, { forwardRef } from 'react';
 import ListItemBase from './ListItemBase';
 import { useThemeTokens } from '../ThemeProvider';
 import { variantProp } from '../utils';
+
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {