@telus-uds/components-base 1.14.3 → 1.15.0

package/lib-module/utils/props/getPropSelector.js

@@ -1,9 +1,48 @@
-export default function getPropSelector(propTypes, regexp) {
-  const keys = Object.keys(propTypes);
+import merge from 'lodash.merge';
+import hasOwnProperty from '../hasOwnProperty';
+/**
+ * @callback PropSelectorCallback - a callback called for each prop passed to a component
+ * @param {string} key - the key for the prop to be tested
+ * @param {*} value - the value of the prop being passed in to the component
+ * @returns {object|undefined}
+ */
+
+/**
+ * @param {PropSelectorCallback} callback
+ * @param {object} items
+ * @param {string} key
+ * @param {*} value
+ * @returns {object|undefined}
+ */
+
+const applyCallback = (callback, items, key, value) => {
+  // If there's no callback, continue and look up keys as normal
+  if (typeof callback !== 'function') return undefined;
+  const newItems = callback(key, value); // If the callback doesn't return anything, continue and look up keys as normal
+
+  if (!newItems) return undefined; // If the callback returns items, merge them in, deep merging props that are objects
+
+  return merge({}, items, newItems);
+};
+/**
+ * Generates a function to filter an object of props down to a subset of allowed props, with
+ * optional prop alteration and re-mapping via an optional callback.
+ *
+ * @param {object} propTypes - an object where every defined key is a valid prop
+ * @param {*} [regexp] - an optional regular expression where any match is a valid prop
+ * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
+ * @returns {object} - valid props for this component
+ */
+
+
+export default function getPropSelector(propTypes, regexp, callback) {
   return props => Object.entries(props).reduce((items, _ref) => {
     let [key, value] = _ref;
-    return keys.includes(key) || regexp && regexp.test(key) ? { ...items,
-      [key]: value
-    } : items;
+    return (// If there's a callback and it matches something, applyCallback merges it in; return that
+      applyCallback(callback, items, key, value) || ( // If there's no callback match, check if this prop is valid and merge it in if it is
+      hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? { ...items,
+        [key]: value
+      } : items)
+    );
   }, {});
 }

package/lib-module/utils/useResponsiveProp.js

@@ -1,9 +1,8 @@
 import { viewports } from '@telus-uds/system-constants';
 import { useViewport } from '../ViewportProvider';
+import hasOwnProperty from './hasOwnProperty';
 
-const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
-
-const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwn(objectProp, key));
+const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwnProperty(objectProp, key));
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
  *
@@ -21,7 +20,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
   const value = viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
   viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
-  prop[viewports.keys.find(key => hasOwn(prop, key))];
+  prop[viewports.keys.find(key => hasOwnProperty(prop, key))];
   return value === undefined ? defaultValue : value;
 };
 /**

package/lib-module/utils/withLinkRouter.js

@@ -1,9 +1,6 @@
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types'; // Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
+import PropTypes from 'prop-types';
+import hasOwnProperty from './hasOwnProperty';
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
  * This may be used to provide custom wrappers for integrations with third party libraries.
@@ -33,6 +30,7 @@ const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(ob
  * ```
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
 
 const withLinkRouter = Component => {
   const wrappedComponent = /*#__PURE__*/forwardRef((_ref, ref) => {

package/package.json

@@ -18,17 +18,14 @@
   },
   "description": "Base components",
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/cli": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
     "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-native": "^4.0.1",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/react-native": "^7.2.0",
-    "react-test-renderer": "^16.3.2",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-native": "11.0.0",
+    "react-test-renderer": "~18.0.0",
+    "@testing-library/react-hooks": "~7.0.1",
+    "@testing-library/react-native-17": "npm:@testing-library/react-native@7.2.0",
+    "react-test-renderer-17": "npm:react-test-renderer@17.0.2",
     "webpack": "5.x"
   },
   "directories": {
@@ -44,10 +41,10 @@
   "module": "lib-module/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.2 || ~18.0.0",
+    "react-dom": "^17.0.2 || ~18.0.0",
     "react-native": "*",
-    "react-native-web": "~0.17.5"
+    "react-native-web": "~0.17.7 || ~0.18.7"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -63,13 +60,11 @@
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
     "build:code": "npm run build:main && npm run build:module",
-    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
-    "storybook": "start-storybook",
-    "build-storybook": "build-storybook"
+    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.14.3"
+  "version": "1.15.0"
 }

package/src/A11yInfoProvider/index.jsx

@@ -16,8 +16,14 @@ const A11yInfoProvider = ({ children }) => {
       return () => {}
     }
 
-    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled)
-    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled)
+    const motionSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setReduceMotionEnabled
+    )
+    const screenReaderSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      setScreenReaderEnabled
+    )
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([
@@ -38,8 +44,18 @@ const A11yInfoProvider = ({ children }) => {
     }
 
     return () => {
-      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
-      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
+      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
+      if (typeof motionSubscription?.remove === 'function') {
+        motionSubscription?.remove()
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
+      }
+
+      if (typeof screenReaderSubscription?.remove === 'function') {
+        screenReaderSubscription?.remove()
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
+      }
     }
   }, [])
 

package/src/Button/ButtonGroup.jsx

@@ -141,8 +141,10 @@ const ButtonGroup = forwardRef(
                   tokens={getButtonTokens}
                   selected={isSelected}
                   inactive={inactive}
-                  {...itemA11y}
-                  {...selectItemProps(itemRest)}
+                  {...selectItemProps({
+                    ...itemRest,
+                    ...itemA11y
+                  })}
                 >
                   {label}
                 </ButtonBase>

package/src/Checkbox/Checkbox.jsx

@@ -176,6 +176,12 @@ const Checkbox = forwardRef(
     const inputId = id ?? uniqueId
     const { themeOptions } = useTheme()
 
+    const selectedProps = selectProps({
+      accessibilityRole: 'checkbox',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
     return (
       <View style={staticStyles.wrapper} ref={ref}>
         <StackView direction={feedbackPosition === 'top' ? 'column-reverse' : 'column'} space={0}>
@@ -183,9 +189,7 @@ const Checkbox = forwardRef(
             disabled={inactive}
             onKeyDown={handleKeyDown}
             onPress={handleChange}
-            accessibilityRole="checkbox"
-            accessibilityState={{ checked: isChecked, disabled: inactive }}
-            {...selectProps(rest)}
+            {...selectedProps}
           >
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })

package/src/ExpandCollapse/Control.jsx

@@ -56,11 +56,14 @@ const ExpandCollapseControl = forwardRef(
   ) => {
     const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
 
-    const selectedProps = selectProps({ ...rest, accessibilityRole })
-    selectedProps.accessibilityState = {
-      ...(selectedProps.accessibilityState || {}),
-      expanded: isExpanded
-    }
+    const selectedProps = selectProps({
+      accessibilityRole,
+      ...rest,
+      accessibilityState: {
+        ...(rest.accessibilityState || {}),
+        expanded: isExpanded
+      }
+    })
 
     const getControlState = ({ pressed, hovered, focused }) => ({
       pressed,

package/src/ExpandCollapse/Panel.jsx

@@ -60,11 +60,13 @@ const ExpandCollapsePanel = forwardRef(
     const [containerHeight, setContainerHeight] = useState(null)
     const isExpanded = openIds.includes(panelId)
 
-    const selectedProps = selectProps(rest)
-    selectedProps.accessibilityState = {
-      ...(selectedProps.accessibilityState || {}),
-      expanded: isExpanded
-    }
+    const selectedProps = selectProps({
+      ...rest,
+      accessibilityState: {
+        ...(rest.accessibilityState || {}),
+        expanded: isExpanded
+      }
+    })
 
     const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
       expanded: isExpanded

package/src/List/ListItem.jsx

@@ -1,204 +1,25 @@
 import React, { forwardRef } from 'react'
-import { View, Platform, StyleSheet } from 'react-native'
-import PropTypes from 'prop-types'
-import { useTheme, useThemeTokens, applyTextStyles } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  variantProp,
-  viewProps,
-  wrapStringsInText
-} from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
-
-const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
-  width: itemBulletWidth,
-  height: itemBulletHeight,
-  borderRadius: itemBulletHeight / 2,
-  backgroundColor: itemBulletColor
-})
-
-const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
-  width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign
-})
-
-const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
-  size: itemIconSize,
-  color: itemIconColor
-})
-
-const selectSideItemContainerStyles = ({ listGutter, iconMarginTop }) => ({
-  marginTop: iconMarginTop,
-  marginRight: listGutter
-})
-
-// Align bullets with the top line of text the same way icons are aligned
-const selectBulletPositioningStyles = ({ itemIconSize }) => ({
-  width: itemIconSize,
-  height: itemIconSize
-})
-
-const selectItemStyles = (
-  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName },
-  themeOptions
-) =>
-  applyTextStyles({
-    fontWeight: itemFontWeight,
-    fontSize: itemFontSize,
-    lineHeight: itemLineHeight,
-    fontName: itemFontName,
-    themeOptions
-  })
-
-const selectItemBlockStyles = ({ interItemMargin }) => ({
-  marginBottom: interItemMargin
-})
-
-const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDivider }) => ({
-  borderBottomWidth: dividerSize,
-  borderColor: dividerColor,
-  marginBottom: interItemMarginWithDivider,
-  paddingBottom: interItemMarginWithDivider
-})
+import ListItemBase from './ListItemBase'
+import { useThemeTokens } from '../ThemeProvider'
+import { variantProp } from '../utils'
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = forwardRef(
-  (
-    {
-      tokens,
-      variant,
-      icon,
-      iconColor,
-      iconSize,
-      showDivider,
-      children,
-      isLastItem,
-      accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
-      ...rest
-    },
-    ref
-  ) => {
-    const themeTokens = useThemeTokens('List', tokens, variant)
-    const { themeOptions } = useTheme()
-
-    const itemStyles = selectItemStyles(themeTokens, themeOptions)
-    const itemBlockStyles = selectItemBlockStyles(themeTokens)
-    const dividerStyles = selectDividerStyles(themeTokens)
-    const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
-    const itemBulletStyles = selectBulletStyles(themeTokens)
-    const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
-    const iconTokens = selectItemIconTokens(themeTokens)
-    const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
-
-    const renderItem = () => (
-      <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: itemStyles })}</View>
-    )
-
-    /**
-     * Function responsible returning styling, in case the item is the last shouldn't
-     * add extra margin on the bottom, if "showDivider" is true it should add a divider
-     * and custom margin and padding, otherwise just adds a margin to the bottom
-     */
-    const getContainerStyle = () => {
-      if (isLastItem) {
-        return undefined
-      }
-
-      if (showDivider) {
-        return dividerStyles
-      }
-
-      return itemBlockStyles
-    }
-
-    /**
-     * Renders item bullet or Icon in case it's defined
-     * in case children are string the icon is centered otherwise
-     * it will align itself at start of the container
-     */
-    const renderMarker = () => {
-      const IconComponent = icon || <></>
-
-      if (icon) {
-        return (
-          <View style={sideItemContainerStyles}>
-            <IconComponent
-              size={iconSize || iconTokens.size}
-              color={iconColor || iconTokens.color}
-            />
-          </View>
-        )
-      }
-
-      return (
-        <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
-          <View style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}>
-            <View style={itemBulletStyles} testID="unordered-item-bullet" />
-          </View>
-        </View>
-      )
-    }
-
-    return (
-      <View
-        ref={ref}
-        style={[staticStyles.itemContainer, getContainerStyle()]}
-        accessibilityRole={accessibilityRole}
-        {...selectProps(rest)}
-      >
-        {renderMarker()}
-        {renderItem()}
-      </View>
-    )
-  }
-)
-ListItem.displayName = 'ListItem'
-
-const staticStyles = StyleSheet.create({
-  itemContainer: {
-    flexDirection: 'row'
-  },
-  wrap: {
-    flex: 1
-  },
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
+const ListItem = forwardRef(({ tokens, variant, children, ...listItemProps }, ref) => {
+  const themeTokens = useThemeTokens('List', tokens, variant)
+  return (
+    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
+      {children}
+    </ListItemBase>
+  )
 })
+ListItem.displayName = 'ListItem'
 
 ListItem.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('List'),
   variant: variantProp.propType,
-  children: PropTypes.node.isRequired,
-  /**
-   * Renders side item icon
-   */
-  icon: PropTypes.elementType,
-  /**
-   * Will set display icon color
-   */
-  iconColor: PropTypes.string,
-  /**
-   * Allow the user define the icon size if not defined the theme's file
-   */
-  iconSize: PropTypes.number,
-  /**
-   * @ignore
-   * Defined by parent if it's last item on the list
-   */
-  isLastItem: PropTypes.bool,
-  /**
-   * @ignore
-   * In case it is not the last item allow display divider
-   */
-  showDivider: PropTypes.bool
+  ...ListItemBase.propTypes
 }
 
 export default ListItem

package/src/List/ListItemBase.jsx

@@ -0,0 +1,118 @@
+import React, { forwardRef } from 'react'
+import { View, Platform, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+
+import ListItemContent from './ListItemContent'
+import ListItemMark from './ListItemMark'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const selectItemBlockStyles = ({ interItemMargin }) => ({
+  marginBottom: interItemMargin
+})
+
+const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDivider }) => ({
+  borderBottomWidth: dividerSize,
+  borderColor: dividerColor,
+  marginBottom: interItemMarginWithDivider,
+  paddingBottom: interItemMarginWithDivider
+})
+
+/**
+ * ListItem is responsible for rendering icon or a bullet as side item
+ */
+const ListItemBase = forwardRef(
+  (
+    {
+      tokens,
+      icon,
+      iconColor,
+      iconSize,
+      showDivider,
+      children,
+      isLastItem,
+      accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
+      ...rest
+    },
+    ref
+  ) => {
+    const themeTokens = typeof tokens === 'function' ? tokens() : tokens
+
+    const itemBlockStyles = selectItemBlockStyles(themeTokens)
+    const dividerStyles = selectDividerStyles(themeTokens)
+
+    /**
+     * Function responsible returning styling, in case the item is the last shouldn't
+     * add extra margin on the bottom, if "showDivider" is true it should add a divider
+     * and custom margin and padding, otherwise just adds a margin to the bottom
+     */
+    const getContainerStyle = () => {
+      if (isLastItem) {
+        return undefined
+      }
+
+      if (showDivider) {
+        return dividerStyles
+      }
+
+      return itemBlockStyles
+    }
+
+    return (
+      <View
+        ref={ref}
+        style={[staticStyles.itemContainer, getContainerStyle()]}
+        accessibilityRole={accessibilityRole}
+        {...selectProps(rest)}
+      >
+        {typeof children === 'function' ? (
+          children({ tokens, icon, iconColor, iconSize, isLastItem })
+        ) : (
+          <>
+            <ListItemMark tokens={tokens} icon={icon} iconColor={iconColor} iconSize={iconSize} />
+            <ListItemContent tokens={tokens}>{children}</ListItemContent>
+          </>
+        )}
+      </View>
+    )
+  }
+)
+ListItemBase.displayName = 'ListItem'
+
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row'
+  }
+})
+
+ListItemBase.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+  /**
+   * Allow the user define the icon size if not defined the theme's file
+   */
+  iconSize: PropTypes.number,
+  /**
+   * @ignore
+   * Defined by parent if it's last item on the list
+   */
+  isLastItem: PropTypes.bool,
+  /**
+   * @ignore
+   * In case it is not the last item allow display divider
+   */
+  showDivider: PropTypes.bool
+}
+
+export default ListItemBase

package/src/List/ListItemContent.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View, StyleSheet } from 'react-native'
+import { wrapStringsInText } from '../utils'
+import { useTheme, applyTextStyles } from '../ThemeProvider'
+
+export const tokenTypes = {
+  itemFontWeight: PropTypes.string.isRequired,
+  itemFontSize: PropTypes.number.isRequired,
+  itemLineHeight: PropTypes.number.isRequired,
+  itemFontName: PropTypes.string.isRequired
+}
+
+const selectItemTextStyles = (
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName },
+  themeOptions
+) =>
+  applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName,
+    themeOptions
+  })
+
+/**
+ * Subcomponent used within ListItem and similar components for rendering content that fills
+ * and wraps available space in a { flexDirection: row } container alongside a ListIconMark,
+ * and that applies text styles to strings via supplied tokens.
+ *
+ * It's the responsibility of themes to make sure that these text tokens align the first line of
+ * text nicely against the bullet or icon rendered by ListIconMark.
+ */
+const ListItemContent = ({ tokens, children }) => {
+  const { themeOptions } = useTheme()
+  const textStyles = selectItemTextStyles(tokens, themeOptions)
+  return <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: textStyles })}</View>
+}
+
+const staticStyles = StyleSheet.create({
+  wrap: {
+    flex: 1
+  }
+})
+
+ListItemContent.propTypes = {
+  tokens: PropTypes.shape(tokenTypes).isRequired,
+  children: PropTypes.node.isRequired
+}
+
+export default ListItemContent