@telus-uds/components-base 1.14.2 → 1.16.0

package/lib-module/List/ListItemMark.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const tokenTypes = {
+  itemIconSize: PropTypes.number.isRequired,
+  itemIconColor: PropTypes.string.isRequired,
+  listGutter: PropTypes.number.isRequired,
+  iconMarginTop: PropTypes.number.isRequired
+};
+
+const selectItemIconTokens = _ref => {
+  let {
+    itemIconSize,
+    itemIconColor
+  } = _ref;
+  return {
+    size: itemIconSize,
+    color: itemIconColor
+  };
+};
+
+const selectSideItemContainerStyles = _ref2 => {
+  let {
+    listGutter,
+    iconMarginTop
+  } = _ref2;
+  return {
+    marginTop: iconMarginTop,
+    marginRight: listGutter
+  };
+}; // Align bullets with the top line of text the same way icons are aligned
+
+
+const selectBulletPositioningStyles = _ref3 => {
+  let {
+    itemIconSize
+  } = _ref3;
+  return {
+    width: itemIconSize,
+    height: itemIconSize
+  };
+};
+
+const selectBulletStyles = _ref4 => {
+  let {
+    itemBulletWidth,
+    itemBulletHeight,
+    itemBulletColor
+  } = _ref4;
+  return {
+    width: itemBulletWidth,
+    height: itemBulletHeight,
+    borderRadius: itemBulletHeight / 2,
+    backgroundColor: itemBulletColor
+  };
+};
+
+const selectBulletContainerStyles = _ref5 => {
+  let {
+    itemBulletContainerWidth,
+    itemBulletContainerAlign
+  } = _ref5;
+  return {
+    width: itemBulletContainerWidth,
+    alignItems: itemBulletContainerAlign
+  };
+};
+/**
+ * Subcomponent used within ListItem and similar components for rendering bullets or icons
+ * that sit alongside a ListIconContent in a { flexDirection: row } container.
+ *
+ * It's the responsibility of themes to make sure that the supplied tokens align the
+ * icon or bullet nicely against the first line of text in a ListIconContent.
+ */
+
+
+const ListItemMark = _ref6 => {
+  let {
+    icon,
+    iconColor,
+    iconSize,
+    tokens = {}
+  } = _ref6;
+
+  const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
+
+  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+
+  if (icon) {
+    const iconTokens = selectItemIconTokens(themeTokens);
+    return /*#__PURE__*/_jsx(View, {
+      style: sideItemContainerStyles,
+      children: /*#__PURE__*/_jsx(IconComponent, {
+        size: iconSize || iconTokens.size,
+        color: iconColor || iconTokens.color
+      })
+    });
+  }
+
+  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
+  const itemBulletStyles = selectBulletStyles(themeTokens);
+  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
+  return /*#__PURE__*/_jsx(View, {
+    style: [sideItemContainerStyles, itemBulletContainerStyles],
+    children: /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
+      children: /*#__PURE__*/_jsx(View, {
+        style: itemBulletStyles,
+        testID: "unordered-item-bullet"
+      })
+    })
+  });
+};
+
+ListItemMark.propTypes = {
+  tokens: PropTypes.shape(tokenTypes).isRequired,
+
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.elementType,
+
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+
+  /**
+   * Allow the user define the icon size
+   */
+  iconSize: PropTypes.number
+};
+const staticStyles = StyleSheet.create({
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default ListItemMark;

package/lib-module/List/PressableListItemBase.js

@@ -0,0 +1,117 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, withLinkRouter } from '../utils';
+import ListItemBase from './ListItemBase';
+import ListItemContent, { tokenTypes as contentTokenTypes } from './ListItemContent';
+import ListItemMark, { tokenTypes as markTokenTypes } from './ListItemMark';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const selectPressableStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    interItemMargin
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    marginBottom: interItemMargin,
+    ...Platform.select({
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+
+const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    href,
+    tokens,
+    icon,
+    children,
+    listItemRef,
+    ...rest
+  } = _ref2;
+  const {
+    onPress,
+    ...props
+  } = clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rest: listItemProps
+  } = hrefAttrsProp.bundle(props);
+  const handlePress = linkProps.handleHref({
+    href,
+    onPress
+  });
+  return /*#__PURE__*/_jsx(ListItemBase, {
+    ref: listItemRef,
+    tokens: tokens(),
+    ...listItemProps,
+    children: _ref3 => {
+      let {
+        isLastItem
+      } = _ref3;
+
+      const getTokens = pressableState => resolvePressableTokens(tokens, pressableState, {
+        last: isLastItem
+      });
+
+      const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
+
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: handlePress,
+        href: href,
+        hrefAttrs: hrefAttrs,
+        style: getPressableStyle,
+        ref: ref,
+        children: pressableState => {
+          const themeTokens = getTokens(pressableState);
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ListItemMark, {
+              icon: icon,
+              tokens: themeTokens
+            }), /*#__PURE__*/_jsx(ListItemContent, {
+              tokens: themeTokens,
+              children: typeof children === 'function' ? children(pressableState) : children
+            })]
+          });
+        }
+      });
+    }
+  });
+});
+PressableListItemBase.displayName = 'PressableListItemBase';
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  tokens: { ...contentTokenTypes,
+    ...markTokenTypes
+  }
+});
+PressableListItemBase.propTypes = {
+  href: PropTypes.string,
+  onPress: PropTypes.func,
+  // TODO - type this better, maybe import the subcomponent token types and run it through util
+  // eslint-disable-next-line react/forbid-prop-types
+  tokens: PropTypes.any,
+  icon: PropTypes.elementType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  listItemRef: ABBPropTypes.ref()
+};
+export default withLinkRouter(PressableListItemBase);

package/lib-module/Notification/Notification.js

@@ -143,7 +143,8 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
 
   const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles
+    textStyles,
+    variant
   }) : children, {
     style: textStyles
   });

package/lib-module/Pagination/Pagination.js

@@ -10,6 +10,7 @@ import usePagination from './usePagination';
 import PageButton from './PageButton';
 import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 const selectTextStyles = (_ref, themeOptions) => {
@@ -93,12 +94,13 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     };
 
     if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/_jsx(PageButton, { ...itemProps,
+      return /*#__PURE__*/_createElement(PageButton, { ...itemProps,
         LinkRouter: ItemLinkRouter,
         linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
         copy: copy,
-        isActive: isItemActive(itemIndex)
+        isActive: isItemActive(itemIndex),
+        key: buttonLabel
       });
     }
 
@@ -106,7 +108,7 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
       return /*#__PURE__*/_jsx(Text, {
         style: ellipsisTextStyles,
         children: "..."
-      });
+      }, "...");
     }
 
     return null;

package/lib-module/Radio/Radio.js

@@ -151,17 +151,20 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
 
   const uniqueId = useUniqueId('radio');
   const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     disabled: inactive,
     onKeyDown: handleKeyDown,
     onPress: handleChange,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      checked: isChecked,
-      disabled: inactive
-    },
-    ...selectProps(rest),
+    ...selectedProps,
     children: _ref5 => {
       let {
         focused: focus,

package/lib-module/RadioCard/RadioCard.js

@@ -87,18 +87,21 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/_jsx(PressableCardBase, {
     ref: ref,
     inactive: inactive,
     checked: isChecked,
     tokens: getCardTokens,
     onPress: handleChange,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      checked: isChecked,
-      disabled: inactive
-    },
-    ...selectProps(rest),
+    ...selectedProps,
     children: cardState => {
       const {
         radioSpace,

package/lib-module/Select/Select.js

@@ -234,6 +234,7 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
   } = useTheme();
   return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
     ...selectedProps,
+    validation: validation,
     children: _ref8 => {
       let {
         inputId,

package/lib-module/Skeleton/Skeleton.js

@@ -1,6 +1,8 @@
 import React, { forwardRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
 import propTypes from 'prop-types';
 import StackView from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
@@ -13,14 +15,12 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectSkeletonStyles = _ref => {
   let {
     color,
-    radius,
-    fadeAnimation
+    radius
   } = _ref;
   return {
     backgroundColor: color,
     borderRadius: radius,
-    maxWidth: '100%',
-    ...fadeAnimation
+    maxWidth: '100%'
   };
 };
 
@@ -78,12 +78,14 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const skeletonHeight = useSpacingScale(spacingScaleValue);
   const nativeAnimation = useSkeletonNativeAnimation();
 
-  const getAnimationBaseOnPlatform = () => {
-    if (Platform.OS !== 'web') {
-      return nativeAnimation;
-    }
+  const getAnimationBasedOnPlatform = () => {
+    const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    // @see https://github.com/necolas/react-native-web/issues/2387
 
-    return skeletonWebAnimation;
+    const styles = StyleSheet.create({
+      animation
+    });
+    return styles.animation;
   };
 
   const getLineWidth = () => {
@@ -117,11 +119,11 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
 
   const renderSkeleton = function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return /*#__PURE__*/_jsx(Animated.View, {
+    // @see https://github.com/necolas/react-native-web/issues/2387
+    const Component = Platform.OS === 'web' ? View : Animated.View;
+    return /*#__PURE__*/_jsx(Component, {
       testID: "skeleton",
-      style: [selectSkeletonStyles({ ...themeTokens,
-        fadeAnimation: getAnimationBaseOnPlatform()
-      }), getStyledBasedOnShape()]
+      style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
     }, "skeleton-".concat(index + 1));
   };
 

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
+import Platform from "react-native-web/dist/exports/Platform";
 import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
 
 const useSkeletonNativeAnimation = () => {
@@ -8,11 +9,11 @@ const useSkeletonNativeAnimation = () => {
     const fade = Animated.sequence([Animated.timing(fadeAnimation, {
       toValue: OPACITY_STOP,
       duration: ANIMATION_DURATION,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS !== 'web'
     }), Animated.timing(fadeAnimation, {
       toValue: DEFAULT_OPACITY,
       duration: ANIMATION_DURATION,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS !== 'web'
     })]);
     Animated.loop(fade).start();
   }, [fadeAnimation]);

package/lib-module/Tabs/Tabs.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import StackView from '../StackView';
-import { a11yProps, getTokensPropType, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
 import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
 import TabsItem from './TabsItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 const {
   selectHorizontalScrollTokens,
   useItemPositions
@@ -94,15 +95,21 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
           label,
           id,
           accessibilityRole = defaultTabItemAccessibiltyRole,
+          onPress,
           ref: itemRef,
           LinkRouter: ItemLinkRouter = LinkRouter,
-          linkRouterProps: itemLinkRouterProps
+          linkRouterProps: itemLinkRouterProps,
+          ...itemRest
         } = _ref3;
         const itemId = id !== null && id !== void 0 ? id : label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
 
-        const handlePress = event => setValue(itemId, event);
+        const handlePress = event => {
+          if (typeof onPress === 'function') onPress(event);
+          setValue(itemId, event);
+        };
 
+        const itemProps = selectItemProps(itemRest);
         return /*#__PURE__*/_jsx(TabsItem, {
           ref: itemRef,
           href: href,
@@ -117,6 +124,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
           linkRouterProps: { ...linkRouterProps,
             ...itemLinkRouterProps
           },
+          ...itemProps,
           children: label
         }, itemId);
       })
@@ -126,7 +134,8 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = { ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
-  items: PropTypes.arrayOf(PropTypes.shape({ ...withLinkRouter.PropTypes,
+  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+    ...withLinkRouter.PropTypes,
     href: PropTypes.string,
     label: PropTypes.string,
     id: PropTypes.string,

package/lib-module/Tags/Tags.js

@@ -131,14 +131,14 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
         toggleOneValue(id, event);
       };
 
-      const itemProps = {
+      const itemProps = selectItemProps({
         accessibilityState: {
           checked: isSelected
         },
         accessibilityRole: itemA11yRole,
         ...a11yProps.getPositionInSet(items.length, index),
-        ...selectItemProps(itemRest)
-      };
+        ...itemRest
+      });
       return /*#__PURE__*/_jsx(ButtonBase, {
         ref: itemRef,
         ...pressHandlers,

package/lib-module/TextInput/TextInput.js

@@ -27,6 +27,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
 const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
+    nativeID,
     variant = {},
     ...rest
   } = _ref;
@@ -41,18 +42,18 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   return /*#__PURE__*/_jsx(InputSupports, {
-    nativeID: selectedProps.nativeID,
+    nativeID: nativeID,
     ...supportsProps,
     children: _ref2 => {
       let {
         inputId,
-        ...props
+        ...propsFromInputSupports
       } = _ref2;
       return /*#__PURE__*/_jsx(TextInputBase, {
         ref: ref,
-        ...inputProps,
         nativeID: inputId,
-        ...props
+        ...propsFromInputSupports,
+        ...inputProps
       });
     }
   });

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -11,32 +11,39 @@ import { a11yProps, focusHandlerProps, getTokensPropType, selectTokens, pressPro
 import { useInputValue } from '../utils/input';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]); // We need to drop the icon before passing it to the `ButtonBase`, because it's
+// being handled separately in this case
 
-const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
-  // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
-  width: null
-}); // Map and rename icon-specific tokens to name used within Icon
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...tokens
+  } = _ref;
+  return selectTokens('Button', { ...tokens,
+    // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+    width: null
+  });
+}; // Map and rename icon-specific tokens to name used within Icon
 
 
-const selectIconTokens = _ref => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref;
+  } = _ref2;
   return {
     size: iconSize,
     color: iconColor
   };
 };
 
-const selectTrackStyles = _ref2 => {
+const selectTrackStyles = _ref3 => {
   let {
     trackBorderWidth,
     trackBorderColor,
     trackBorderRadius,
     width
-  } = _ref2;
+  } = _ref3;
   return {
     borderWidth: trackBorderWidth,
     borderColor: trackBorderColor,
@@ -45,7 +52,7 @@ const selectTrackStyles = _ref2 => {
   };
 };
 
-const selectSwitchStyles = _ref3 => {
+const selectSwitchStyles = _ref4 => {
   let {
     switchSize,
     switchColor,
@@ -53,7 +60,7 @@ const selectSwitchStyles = _ref3 => {
     switchBorderColor,
     switchBorderRadius,
     switchShadow
-  } = _ref3;
+  } = _ref4;
   return {
     width: switchSize,
     height: switchSize,
@@ -71,23 +78,23 @@ const selectSwitchStyles = _ref3 => {
   };
 };
 
-const selectLabelStyles = _ref4 => {
+const selectLabelStyles = _ref5 => {
   let {
     labelMarginLeft
-  } = _ref4;
+  } = _ref5;
   return {
     marginLeft: labelMarginLeft
   };
 };
 
-const selectLabelTokens = _ref5 => {
+const selectLabelTokens = _ref6 => {
   let {
     labelColor,
     labelFontName,
     labelFontSize,
     labelFontWeight,
     labelLineHeight
-  } = _ref5;
+  } = _ref6;
   return {
     color: labelColor,
     fontName: labelFontName,
@@ -97,7 +104,7 @@ const selectLabelTokens = _ref5 => {
   };
 };
 
-const ToggleSwitch = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const ToggleSwitch = /*#__PURE__*/forwardRef((_ref7, ref) => {
   let {
     copy = 'en',
     value,
@@ -112,7 +119,7 @@ const ToggleSwitch = /*#__PURE__*/forwardRef((_ref6, ref) => {
     accessibilityRole = 'switch',
     accessibilityLabel = label,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
   const {
@@ -235,8 +242,6 @@ ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
 };
 const staticStyles = StyleSheet.create({
   track: {
-    flexGrow: 1,
-    alignSelf: 'stretch',
     flexDirection: 'row'
   },
   switch: {