@telus-uds/components-base 1.51.1 → 1.52.0

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.34.0",
+    "@telus-uds/system-theme-tokens": "^2.35.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.51.1"
+  "version": "1.52.0"
 }

package/src/Listbox/ListboxContext.js

@@ -0,0 +1,6 @@
+import React, { useContext } from 'react'
+
+const ListboxContext = React.createContext({})
+const useListboxContext = () => useContext(ListboxContext)
+
+export { ListboxContext, useListboxContext }

package/src/Listbox/PressableItem.jsx

@@ -0,0 +1,143 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Text } from 'react-native'
+import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils'
+import { useListboxContext } from './ListboxContext'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const getItemStyles = ({
+  groupFontName,
+  groupFontWeight,
+  itemFontSize,
+  itemPaddingTop,
+  itemPaddingBottom,
+  itemPaddingLeft,
+  itemBorderLeftWidth,
+  itemPaddingRight,
+  itemBackgroundColor,
+  itemColor,
+  itemDisplay,
+  itemOutline,
+  itemTextDecoration,
+  itemBorderLeftColor,
+  itemBorderRightWidth,
+  itemBorderRightColor,
+  itemBorderTopWidth,
+  itemBorderTopColor,
+  itemBorderBottomWidth,
+  itemBorderBottomColor,
+  itemBorderRadius,
+  itemHeight
+}) => ({
+  fontFamily: `${groupFontName}${groupFontWeight}normal`,
+  fontSize: itemFontSize,
+  paddingTop: itemPaddingTop - itemBorderTopWidth,
+  paddingBottom: itemPaddingBottom - itemBorderBottomWidth,
+  paddingLeft: itemPaddingLeft - itemBorderLeftWidth,
+  paddingRight: itemPaddingRight - itemBorderRightWidth,
+  width: '100%',
+  backgroundColor: itemBackgroundColor,
+  color: itemColor,
+  display: itemDisplay,
+  outline: itemOutline,
+  textDecoration: itemTextDecoration,
+  borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
+  borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
+  borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
+  borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
+  borderRadius: itemBorderRadius,
+  height: itemHeight,
+  justifyContent: 'center'
+})
+
+const PressableItem = forwardRef(
+  (
+    {
+      children,
+      href,
+      isChild = false,
+      onBlur,
+      onPress,
+      tabIndex = 0,
+      nextItemRef,
+      prevItemRef,
+      tokens,
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const { selectedId, setSelectedId } = useListboxContext()
+
+    const selectTextStyles = ({
+      groupFontName,
+      groupFontWeight,
+      itemFontSize,
+      itemColor,
+      lineHeight
+    }) => ({
+      fontFamily: `${groupFontName}${groupFontWeight}normal`,
+      fontSize: itemFontSize,
+      color: itemColor,
+      lineHeight: lineHeight * itemFontSize
+    })
+
+    const resolveButtonTokens = (pressableState) => {
+      const themeTokens = resolvePressableTokens(tokens, pressableState, {
+        isChild,
+        current: id === selectedId && id !== undefined
+      })
+      return themeTokens
+    }
+
+    const handleKeyPress = (event) => {
+      if (['Enter', ' '].includes(event?.key)) {
+        onPress?.(event)
+      } else if (event?.key === 'ArrowDown') {
+        nextItemRef.current.focus()
+      } else if (event?.key === 'ArrowUp' && prevItemRef?.current) {
+        prevItemRef.current.focus()
+      }
+    }
+
+    return (
+      <Pressable
+        isChild={isChild}
+        style={(pressableState) => getItemStyles(resolveButtonTokens(pressableState))}
+        onBlur={onBlur}
+        onClick={onPress}
+        onKeyPress={handleKeyPress}
+        ref={ref}
+        tabIndex={tabIndex}
+        {...(href && { href })}
+        {...(onPress && { onClick: onPress })}
+        {...selectProps(rest)}
+        onPress={() => {
+          setSelectedId(id)
+          onPress()
+        }}
+      >
+        {(pressableState) => {
+          return (
+            <Text style={selectTextStyles(resolveButtonTokens(pressableState))}>{children} </Text>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+PressableItem.displayName = 'PressableItem'
+PressableItem.propTypes = {
+  ...selectedSystemPropTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  onBlur: PropTypes.func,
+  onPress: PropTypes.func,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object
+}
+
+export default PressableItem

package/src/Listbox/index.js

@@ -0,0 +1,2 @@
+export * from './ListboxContext'
+export { default as PressableItem } from './PressableItem'

package/src/Modal/Modal.jsx

@@ -16,8 +16,7 @@ import {
   selectSystemProps,
   useCopy,
   variantProp,
-  viewProps,
-  selectTokens
+  viewProps
 } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import IconButton from '../IconButton'
@@ -138,7 +137,6 @@ const Modal = forwardRef(
                       icon={CloseIconComponent}
                       accessibilityRole="button"
                       accessibilityLabel={closeLabel}
-                      tokens={selectTokens('IconButton', themeTokens, 'close')}
                     />
                   )}
                 </View>

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
+import { View, StyleSheet } from 'react-native'
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
   containUniqueFields,
@@ -104,7 +105,6 @@ const MultiSelectFilter = ({
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`)
   }
-
   // Pass an object of relevant component state as first argument for any passed-in press handlers
   const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
@@ -239,9 +239,11 @@ const MultiSelectFilter = ({
           onLayout={onTargetLayout}
         >
           <Row>
-            <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
-              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-            </Typography>
+            <View style={styles.textContainerStyle}>
+              <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
+                {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+              </Typography>
+            </View>
           </Row>
           {subtitle && (
             <>
@@ -301,6 +303,10 @@ const MultiSelectFilter = ({
 
 MultiSelectFilter.displayName = 'MultiSelectFilter'
 
+const styles = StyleSheet.create({
+  textContainerStyle: { marginRight: 52 }
+})
+
 MultiSelectFilter.propTypes = {
   /**
    * The text displayed to the user in a ButtonDropdown.

package/src/Timeline/Timeline.jsx

@@ -23,10 +23,10 @@ const selectDotStyles = ({ dotWidth, timelineColor, dotBorderWidth, dotColor })
   borderColor: timelineColor
 })
 
-const selectConnectorStyles = ({ timelineColor, connectorHeight, connectorWidth }) => ({
+const selectConnectorStyles = ({ timelineConnectorColor, connectorHeight, connectorWidth }) => ({
   width: connectorWidth,
   height: connectorHeight,
-  backgroundColor: timelineColor
+  backgroundColor: timelineConnectorColor
 })
 
 const selectTimelineContainerStyle = ({ timelineContainerDirection }) => ({

package/src/index.js

@@ -4,6 +4,7 @@ export { default as Box } from './Box'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
 export * from './Carousel'
+export * from './Listbox'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as Divider } from './Divider'

package/src/utils/htmlAttrs.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+
+const htmlAttrTypes = {
+  dataSet: PropTypes.object,
+  id: PropTypes.string,
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  // @todo figure out if we need to enum all the possible roles or maybe use
+  // an npm package
+  role: PropTypes.string,
+  src: PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  testID: PropTypes.string,
+  title: PropTypes.string
+}
+
+export default {
+  types: htmlAttrTypes,
+  select: (props) =>
+    Object.entries(props).reduce(
+      (items, [key, value]) =>
+        Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key)
+          ? {
+              ...items,
+              [key]: value
+            }
+          : items,
+      {}
+    )
+}

package/src/utils/index.js

@@ -19,3 +19,4 @@ export { default as withLinkRouter } from './withLinkRouter'
 export * from './ssr'
 export { default as containUniqueFields } from './containUniqueFields'
 export { default as BaseView } from './BaseView'
+export { default as htmlAttrs } from './htmlAttrs'