@telus-uds/components-base 1.14.2 → 1.16.0

package/lib/List/ListItemMark.js

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokenTypes = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const tokenTypes = {
+  itemIconSize: _propTypes.default.number.isRequired,
+  itemIconColor: _propTypes.default.string.isRequired,
+  listGutter: _propTypes.default.number.isRequired,
+  iconMarginTop: _propTypes.default.number.isRequired
+};
+exports.tokenTypes = tokenTypes;
+
+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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+
+  if (icon) {
+    const iconTokens = selectItemIconTokens(themeTokens);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: sideItemContainerStyles,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+        size: iconSize || iconTokens.size,
+        color: iconColor || iconTokens.color
+      })
+    });
+  }
+
+  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
+  const itemBulletStyles = selectBulletStyles(themeTokens);
+  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [sideItemContainerStyles, itemBulletContainerStyles],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: itemBulletStyles,
+        testID: "unordered-item-bullet"
+      })
+    })
+  });
+};
+
+ListItemMark.propTypes = {
+  tokens: _propTypes.default.shape(tokenTypes).isRequired,
+
+  /**
+   * Renders side item icon
+   */
+  icon: _propTypes.default.elementType,
+
+  /**
+   * Will set display icon color
+   */
+  iconColor: _propTypes.default.string,
+
+  /**
+   * Allow the user define the icon size
+   */
+  iconSize: _propTypes.default.number
+};
+
+const staticStyles = _StyleSheet.default.create({
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+var _default = ListItemMark;
+exports.default = _default;

package/lib/List/PressableListItemBase.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _utils = require("../utils");
+
+var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
+
+var _ListItemContent = _interopRequireWildcard(require("./ListItemContent"));
+
+var _ListItemMark = _interopRequireWildcard(require("./ListItemMark"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const selectPressableStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    interItemMargin
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    marginBottom: interItemMargin,
+    ..._Platform.default.select({
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+
+const PressableListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    href,
+    tokens,
+    icon,
+    children,
+    listItemRef,
+    ...rest
+  } = _ref2;
+
+  const {
+    onPress,
+    ...props
+  } = _utils.clickProps.toPressProps(rest);
+
+  const {
+    hrefAttrs,
+    rest: listItemProps
+  } = _utils.hrefAttrsProp.bundle(props);
+
+  const handlePress = _utils.linkProps.handleHref({
+    href,
+    onPress
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+    ref: listItemRef,
+    tokens: tokens(),
+    ...listItemProps,
+    children: _ref3 => {
+      let {
+        isLastItem
+      } = _ref3;
+
+      const getTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, {
+        last: isLastItem
+      });
+
+      const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+        onPress: handlePress,
+        href: href,
+        hrefAttrs: hrefAttrs,
+        style: getPressableStyle,
+        ref: ref,
+        children: pressableState => {
+          const themeTokens = getTokens(pressableState);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
+              icon: icon,
+              tokens: themeTokens
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+              tokens: themeTokens,
+              children: typeof children === 'function' ? children(pressableState) : children
+            })]
+          });
+        }
+      });
+    }
+  });
+});
+PressableListItemBase.displayName = 'PressableListItemBase';
+
+const staticStyles = _StyleSheet.default.create({
+  itemContainer: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  tokens: { ..._ListItemContent.tokenTypes,
+    ..._ListItemMark.tokenTypes
+  }
+});
+
+PressableListItemBase.propTypes = {
+  href: _propTypes.default.string,
+  onPress: _propTypes.default.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.default.any,
+  icon: _propTypes.default.elementType,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  listItemRef: _airbnbPropTypes.default.ref()
+};
+
+var _default = (0, _utils.withLinkRouter)(PressableListItemBase);
+
+exports.default = _default;

package/lib/Notification/Notification.js

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

package/lib/Pagination/Pagination.js

@@ -120,12 +120,13 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     };
 
     if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageButton.default, { ...itemProps,
+      return /*#__PURE__*/(0, _react.createElement)(_PageButton.default, { ...itemProps,
         LinkRouter: ItemLinkRouter,
         linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
         copy: copy,
-        isActive: isItemActive(itemIndex)
+        isActive: isItemActive(itemIndex),
+        key: buttonLabel
       });
     }
 
@@ -133,7 +134,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: ellipsisTextStyles,
         children: "..."
-      });
+      }, "...");
     }
 
     return null;

package/lib/Radio/Radio.js

@@ -175,17 +175,20 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
 
   const uniqueId = (0, _utils.useUniqueId)('radio');
   const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     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/RadioCard/RadioCard.js

@@ -110,18 +110,21 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.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/Select/Select.js

@@ -258,6 +258,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     ...selectedProps,
+    validation: validation,
     children: _ref8 => {
       let {
         inputId,

package/lib/Skeleton/Skeleton.js

@@ -11,6 +11,10 @@ var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
@@ -36,14 +40,12 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectSkeletonStyles = _ref => {
   let {
     color,
-    radius,
-    fadeAnimation
+    radius
   } = _ref;
   return {
     backgroundColor: color,
     borderRadius: radius,
-    maxWidth: '100%',
-    ...fadeAnimation
+    maxWidth: '100%'
   };
 };
 
@@ -101,12 +103,15 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
   const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
 
-  const getAnimationBaseOnPlatform = () => {
-    if (_Platform.default.OS !== 'web') {
-      return nativeAnimation;
-    }
+  const getAnimationBasedOnPlatform = () => {
+    const animation = _Platform.default.OS === 'web' ? _skeletonWebAnimation.default : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    // @see https://github.com/necolas/react-native-web/issues/2387
+
+    const styles = _StyleSheet.default.create({
+      animation
+    });
 
-    return _skeletonWebAnimation.default;
+    return styles.animation;
   };
 
   const getLineWidth = () => {
@@ -140,11 +145,11 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
 
   const renderSkeleton = function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+    // @see https://github.com/necolas/react-native-web/issues/2387
+    const Component = _Platform.default.OS === 'web' ? _View.default : _Animated.default.View;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
       testID: "skeleton",
-      style: [selectSkeletonStyles({ ...themeTokens,
-        fadeAnimation: getAnimationBaseOnPlatform()
-      }), getStyledBasedOnShape()]
+      style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
     }, "skeleton-".concat(index + 1));
   };
 

package/lib/Skeleton/useSkeletonNativeAnimation.js

@@ -9,6 +9,8 @@ var _react = require("react");
 
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _skeleton = require("./skeleton.constant");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,11 +21,11 @@ const useSkeletonNativeAnimation = () => {
     const fade = _Animated.default.sequence([_Animated.default.timing(fadeAnimation, {
       toValue: _skeleton.OPACITY_STOP,
       duration: _skeleton.ANIMATION_DURATION,
-      useNativeDriver: true
+      useNativeDriver: _Platform.default.OS !== 'web'
     }), _Animated.default.timing(fadeAnimation, {
       toValue: _skeleton.DEFAULT_OPACITY,
       duration: _skeleton.ANIMATION_DURATION,
-      useNativeDriver: true
+      useNativeDriver: _Platform.default.OS !== 'web'
     })]);
 
     _Animated.default.loop(fade).start();

package/lib/Tabs/Tabs.js

@@ -30,6 +30,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 const {
   selectHorizontalScrollTokens,
   useItemPositions
@@ -116,15 +117,21 @@ const Tabs = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_TabsItem.default, {
           ref: itemRef,
           href: href,
@@ -139,6 +146,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           linkRouterProps: { ...linkRouterProps,
             ...itemLinkRouterProps
           },
+          ...itemProps,
           children: label
         }, itemId);
       })
@@ -148,7 +156,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = { ...selectedSystemPropTypes,
   ..._utils.withLinkRouter.PropTypes,
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ..._utils.withLinkRouter.PropTypes,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
+    ..._utils.withLinkRouter.PropTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,

package/lib/Tags/Tags.js

@@ -158,14 +158,14 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         toggleOneValue(id, event);
       };
 
-      const itemProps = {
+      const itemProps = selectItemProps({
         accessibilityState: {
           checked: isSelected
         },
         accessibilityRole: itemA11yRole,
         ..._utils.a11yProps.getPositionInSet(items.length, index),
-        ...selectItemProps(itemRest)
-      };
+        ...itemRest
+      });
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
         ref: itemRef,
         ...pressHandlers,

package/lib/TextInput/TextInput.js

@@ -46,6 +46,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     tokens,
+    nativeID,
     variant = {},
     ...rest
   } = _ref;
@@ -60,18 +61,18 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
-    nativeID: selectedProps.nativeID,
+    nativeID: nativeID,
     ...supportsProps,
     children: _ref2 => {
       let {
         inputId,
-        ...props
+        ...propsFromInputSupports
       } = _ref2;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
         ref: ref,
-        ...inputProps,
         nativeID: inputId,
-        ...props
+        ...propsFromInputSupports,
+        ...inputProps
       });
     }
   });