@telus-uds/components-base 1.18.1 → 1.20.0

package/src/Carousel/Carousel.jsx

@@ -164,7 +164,7 @@ const Carousel = React.forwardRef(
       ),
       tag = 'ul',
       accessibilityRole,
-      accessibilityLabel = title,
+      accessibilityLabel,
       accessibilityLiveRegion = 'polite',
       copy,
       ...rest
@@ -296,7 +296,7 @@ const Carousel = React.forwardRef(
 
         animate(toValue, index)
 
-        if (onIndexChanged) onIndexChanged(calcDelta)
+        if (onIndexChanged) onIndexChanged(calcDelta, index)
         return calcDelta
       },
       [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]
@@ -422,6 +422,32 @@ const Carousel = React.forwardRef(
     const activePanelNavigation =
       tabs && showPanelTabs ? <CarouselTabsPanel items={tabs} /> : panelNavigation
 
+    const isFirstFocusContainer = Boolean(refocus && !skipLinkHref)
+    const containerRef = (element) => {
+      // Apply both firstFocusRef to the container
+      firstFocusRef.current = element
+      // Also apply forwarded ref if there is one (which could be a function ref)
+      if (ref) {
+        if (typeof ref === 'object') {
+          // eslint-disable-next-line no-param-reassign
+          ref.current = element
+        } else if (typeof ref === 'function') {
+          ref(element)
+        }
+      }
+    }
+    // If container isn't used for focus, give it a label of title if none is passed in,
+    // otherwise read the current position on focus
+    const containerAccessibilityLabel =
+      systemProps.accessibilityLabel ?? isFirstFocusContainer
+        ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}`
+        : title
+    const containerProps = {
+      accessibilityLabel: containerAccessibilityLabel,
+      // If used for focus, attach the ref and draw a focus box around the whole carousel
+      ...(isFirstFocusContainer && { ref: containerRef, focusable: true })
+    }
+
     return (
       <CarouselProvider
         activeIndex={activeIndex}
@@ -434,7 +460,13 @@ const Carousel = React.forwardRef(
         refocus={refocus}
         width={containerLayout.width}
       >
-        <View style={staticStyles.root} onLayout={onContainerLayout} ref={ref} {...systemProps}>
+        <View
+          style={staticStyles.root}
+          onLayout={onContainerLayout}
+          ref={ref}
+          {...systemProps}
+          {...containerProps}
+        >
           {showPreviousNextNavigation && (
             <View
               style={selectPreviousNextNavigationButtonStyles(
@@ -464,14 +496,14 @@ const Carousel = React.forwardRef(
               {getCopyWithPlaceholders('skipLink')}
             </SkipLink>
           )}
-          <A11yText
-            // Read the current slide position to screen readers on slide.
-            // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
-            ref={!skipLinkHref && refocus ? firstFocusRef : null}
-            accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
-            focusable={!skipLinkHref && refocus}
-            text={getCopyWithPlaceholders('stepTrackerLabel')}
-          />
+          {!isFirstFocusContainer && (
+            <A11yText
+              // Read the current slide position to screen readers on slide.
+              // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
+              accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
+              text={getCopyWithPlaceholders('stepTrackerLabel')}
+            />
+          )}
           <View style={selectContainerStyles(containerLayout.width)}>
             <Animated.View
               style={StyleSheet.flatten([
@@ -488,7 +520,10 @@ const Carousel = React.forwardRef(
             >
               {childrenArray.map((element, index) => {
                 const hidden = !isAnimating && index !== activeIndex
-                const clonedElement = React.cloneElement(element, { elementIndex: index, hidden })
+                const clonedElement = React.cloneElement(element, {
+                  elementIndex: index,
+                  hidden
+                })
                 return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
               })}
             </Animated.View>
@@ -577,7 +612,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
    * Use it as follows:
    * ```js
-   *    const onIndexChangedCallback = React.useCallback((changedIndex) => {
+   *    const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -6,7 +6,8 @@ import {
   getA11yPropsFromHtmlTag,
   selectSystemProps,
   a11yProps,
-  viewProps
+  viewProps,
+  variantProp
 } from '../../utils'
 import { useCarousel } from '../CarouselContext'
 
@@ -18,6 +19,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  */
 const CarouselItem = ({ children, elementIndex, tag = 'li', hidden, ...rest }) => {
   const { width, activeIndex } = useCarousel()
+
   const selectedProps = selectProps({
     ...rest,
     ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
@@ -38,6 +40,7 @@ const CarouselItem = ({ children, elementIndex, tag = 'li', hidden, ...rest }) =
 
 CarouselItem.propTypes = {
   ...selectedSystemPropTypes,
+  variant: variantProp.propType,
   /**
    * Index of the current slide
    * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
@@ -58,7 +61,11 @@ CarouselItem.propTypes = {
    * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
    * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
    */
-  tag: PropTypes.oneOf(layoutTags)
+  tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Function to set carousel content background color when slide is being display
+   */
+  setContentBackgroundColor: PropTypes.func
 }
 
 CarouselItem.displayName = 'Carousel.Item'

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -7,10 +7,15 @@ import StackView from '../../StackView'
 import { useCarousel } from '../CarouselContext'
 import CarouselTabsPanelItem from './CarouselTabsPanelItem'
 
+const selectTabPanelStyle = () => ({
+  backgroundColor: 'transparent'
+})
+
 const CarouselTabsPanel = forwardRef(({ items }, ref) => {
   const { activeIndex, goTo } = useCarousel()
   const nextFocusRef = useRef()
   const firstTabRef = useRef()
+  const [isInverse, setIsInverse] = useState(false)
 
   // TODO: figure out a better cross-brand way to specify subcomponent variants.
   // For now, this picks an Allium variant, and does nothing in brands that lack it.
@@ -19,20 +24,16 @@ const CarouselTabsPanel = forwardRef(({ items }, ref) => {
 
   const lastTabSelected = activeIndex === items.length - 1
 
+  // Get current select tab style
+  useEffect(() => {
+    const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex)
+    setIsInverse(selectedVariantIsInverse?.inverse)
+  }, [items, activeIndex])
+
   return (
-    <>
-      <View
-        focusable
-        accessible
-        onFocus={(event) => {
-          // When user forward-tabs into this section, focus the next tab; if they backwards-tab
-          // (shift-tab) back into the carousel content, don't interfere.
-          const previousWebFocus = event.relatedTarget
-          if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus()
-        }}
-      />
+    <View style={selectTabPanelStyle()}>
       <StackView direction="row" space={3} divider={{ variant: dividerVariant }} ref={ref}>
-        {items.map(({ title, onPress, ...panelItemProps }, index) => {
+        {items.map(({ title, onPress, inverse, ...panelItemProps }, index) => {
           const selected = index === activeIndex
           const isNext = index === activeIndex + 1
 
@@ -51,6 +52,7 @@ const CarouselTabsPanel = forwardRef(({ items }, ref) => {
               title={title}
               selected={selected}
               onPress={handlePress}
+              variant={{ inverse: isInverse }}
               {...panelItemProps}
             />
           )
@@ -58,12 +60,14 @@ const CarouselTabsPanel = forwardRef(({ items }, ref) => {
       </StackView>
       {/* TODO: integrate with skiplink, replace this with focusing skiplink target */}
       <View focusable accessible ref={lastTabSelected ? nextFocusRef : null} />
-    </>
+    </View>
   )
 })
 CarouselTabsPanel.displayName = 'CarouselTabsPanel'
 CarouselTabsPanel.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {}))
+  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
+  // Color defined by `Carousel.item` variant otherwise fallback to transparent
+  contentBackgroundColor: PropTypes.string
 }
 
 export default CarouselTabsPanel

package/src/FlexGrid/Col/Col.jsx

@@ -1,12 +1,12 @@
 import React, { forwardRef, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
 import { viewports } from '@telus-uds/system-constants'
 
 import GutterContext from '../providers/GutterContext'
 import { useViewport } from '../../ViewportProvider'
 import applyInheritance from '../helpers'
-import { responsiveProps } from '../../utils'
+import { responsiveProps, BaseView } from '../../utils'
 
 const Col = forwardRef(
   (
@@ -162,7 +162,7 @@ const Col = forwardRef(
       xl: offsetsWithIheritance[4]
     }
     return (
-      <View
+      <BaseView
         ref={ref}
         {...viewProps}
         style={[
@@ -174,7 +174,7 @@ const Col = forwardRef(
         ]}
       >
         {children}
-      </View>
+      </BaseView>
     )
   }
 )

package/src/FlexGrid/FlexGrid.jsx

@@ -1,21 +1,22 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { viewports } from '@telus-uds/system-constants'
-
-import Row from './Row'
-import Col from './Col'
-import { useViewport } from '../ViewportProvider'
-import GutterContext from './providers/GutterContext'
-import applyInheritance from './helpers'
 import {
   a11yProps,
   viewProps,
   getA11yPropsFromHtmlTag,
   layoutTags,
-  selectSystemProps
+  selectSystemProps,
+  BaseView
 } from '../utils'
 
+import Row from './Row'
+import Col from './Col'
+import { useViewport } from '../ViewportProvider'
+import GutterContext from './providers/GutterContext'
+import applyInheritance from './helpers'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
@@ -75,7 +76,7 @@ const FlexGrid = forwardRef(
 
     return (
       <GutterContext.Provider value={gutter}>
-        <View
+        <BaseView
           ref={ref}
           {...props}
           style={[
@@ -84,7 +85,7 @@ const FlexGrid = forwardRef(
           ]}
         >
           {children}
-        </View>
+        </BaseView>
       </GutterContext.Provider>
     )
   }

package/src/FlexGrid/Row/Row.jsx

@@ -1,10 +1,11 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { viewports } from '@telus-uds/system-constants'
 
 import { useViewport } from '../../ViewportProvider'
 import applyInheritance from '../helpers'
+import { BaseView } from '../../utils'
 
 const horizontalAlignStyles = (horizontalAlign) => {
   switch (horizontalAlign) {
@@ -96,7 +97,7 @@ const Row = forwardRef(
     }
 
     return (
-      <View
+      <BaseView
         ref={ref}
         {...rest}
         style={[
@@ -111,7 +112,7 @@ const Row = forwardRef(
         ]}
       >
         {children}
-      </View>
+      </BaseView>
     )
   }
 )

package/src/IconButton/IconButton.jsx

@@ -68,7 +68,9 @@ const IconButton = forwardRef(
       ...rest,
       accessibilityRole
     })
-    const handlePress = linkProps.handleHref({ href, onPress })
+    const handlePress = () => {
+      linkProps.handleHref({ href, onPress })({ nativeEvent: { target: ref?.current?.id } })
+    }
 
     const getTokens = useThemeTokensCallback('IconButton', tokens, variant)
     const getOuterStyle = (pressableState) =>

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -0,0 +1,227 @@
+import React, { forwardRef, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { useThemeTokensCallback } from '../ThemeProvider'
+import {
+  containUniqueFields,
+  getTokensPropType,
+  getPressHandlersWithArgs,
+  selectTokens,
+  useCopy,
+  useMultipleInputValues,
+  variantProp
+} from '../utils'
+import dictionary from './dictionary'
+
+import Box from '../Box'
+import { Button, ButtonDropdown } from '../Button'
+import { CheckboxGroup } from '../Checkbox'
+import Divider from '../Divider'
+import FlexGrid from '../FlexGrid'
+import Modal from '../Modal'
+import Spacer from '../Spacer'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import { TextButton } from '../Link'
+
+const { Col, Row } = FlexGrid
+
+const MultiSelectFilter = forwardRef(
+  (
+    {
+      label,
+      id = label,
+      variant,
+      tokens,
+      items = [],
+      values,
+      initialValues,
+      maxValues,
+      onChange,
+      copy = 'en',
+      readOnly = false,
+      inactive = false,
+      rowLimit = 12,
+      ...rest
+    },
+    ref
+  ) => {
+    const { currentValues, setValues } = useMultipleInputValues({
+      initialValues,
+      values,
+      maxValues,
+      onChange,
+      readOnly
+    })
+
+    const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
+    const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
+    const getCopy = useCopy({ dictionary, copy })
+
+    const [isOpen, setIsOpen] = useState(false)
+    const [checkedIds, setCheckedIds] = useState(currentValues ?? [])
+
+    const colSize = items.length > rowLimit ? 2 : 1
+    const isSelected = currentValues.length > 0
+
+    const uniqueFields = ['id', 'label']
+    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 }])
+
+    const handleChange = (event) => {
+      if (pressHandlers.onPress) pressHandlers?.onPress(event)
+      setIsOpen(true)
+    }
+
+    const onApply = (e) => {
+      setValues(e)
+      setIsOpen(false)
+    }
+
+    return (
+      <>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          variant={{ width: colSize > 1 ? 'size576' : 's' }}
+        >
+          <Row>
+            <Typography variant={{ size: 'h4' }}>
+              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+            </Typography>
+          </Row>
+          <Spacer space={4} />
+          <Spacer space={1} />
+          <Box scroll={true}>
+            <Row distribute="between">
+              {[...Array(colSize).keys()].map((i) => (
+                <Col xs={12 / colSize} key={i}>
+                  <CheckboxGroup
+                    items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
+                    checkedIds={checkedIds}
+                    onChange={(e) => setCheckedIds(e, i)}
+                  />
+                  <Spacer size={4} />
+                </Col>
+              ))}
+            </Row>
+          </Box>
+          <Divider
+            variant={{ width: 'full', color: 'E3E6E8', decorative: true, weight: 'thin' }}
+            space={4}
+          />
+          <Row>
+            <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
+              <Button
+                onPress={() => onApply(checkedIds)}
+                variant={{ size: 'small', priority: 'high' }}
+              >
+                {getCopy('applyButtonLabel')}
+              </Button>
+              <Box>
+                <TextButton onPress={() => setCheckedIds([])}>
+                  {getCopy('clearButtonLabel')}
+                </TextButton>
+              </Box>
+            </StackView>
+          </Row>
+        </Modal>
+        <ButtonDropdown
+          ref={ref}
+          key={id}
+          {...pressHandlers}
+          value={isOpen}
+          selected={isSelected}
+          label={label}
+          onChange={handleChange}
+          tokens={getButtonTokens}
+          inactive={inactive}
+        />
+      </>
+    )
+  }
+)
+MultiSelectFilter.displayName = 'MultiSelectFilter'
+
+MultiSelectFilter.propTypes = {
+  /**
+   * The text displayed to the user in a ButtonDropdown.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: PropTypes.string,
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: variantProp.propType,
+  /**
+   * Sets the tokens for ButtonDropdown element.
+   */
+  tokens: getTokensPropType('ButtonDropdown'),
+  /**
+   * The options a user may select.
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      /**
+       * The text displayed to the user with a checkbox, describing this option.
+       */
+      label: PropTypes.string.isRequired,
+      /**
+       * An optional unique string may be provided to identify this option.
+       * If not provided, the label is used.
+       */
+      id: PropTypes.string
+    })
+  ),
+  /**
+   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: PropTypes.number,
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
+   */
+  readOnly: PropTypes.string,
+  /**
+   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
+   * set as `disabled` and if the theme supports `inactive` appearances rules, these
+   * are applied.
+   */
+  inactive: PropTypes.string,
+  /**
+   * Sets the maximum number of items in one column. If number of items are more
+   * than the `rowLimit`, they will be rendered in 2 columns.
+   */
+  rowLimit: PropTypes.number
+}
+
+export default MultiSelectFilter

package/src/MultiSelectFilter/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    filterByLabel: 'Filter by %{filterCategory}:',
+    applyButtonLabel: 'Apply',
+    clearButtonLabel: 'Clear'
+  },
+  fr: {
+    filterByLabel: 'Filtrer par %{filterCategory}:',
+    applyButtonLabel: 'Appliquer',
+    clearButtonLabel: 'Effacer'
+  }
+}

package/src/MultiSelectFilter/index.js

@@ -0,0 +1,3 @@
+import MultiSelectFilter from './MultiSelectFilter'
+
+export default MultiSelectFilter

package/src/Pagination/SideButton.jsx

@@ -13,8 +13,9 @@ import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
 
 // We need to drop the icon here since it gets rendered via children and not
-// `ButtonBase` in order to tap into the state of the button
-const selectButtonTokens = ({ icon: _, ...rest }) => selectTokens('Button', rest)
+// `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
+// is also not needed
+const selectButtonTokens = ({ icon: _, displayLabel: __, ...rest }) => selectTokens('Button', rest)
 const selectIconTokens = ({ color, iconSize, iconDisplace }, direction) => {
   return {
     color,
@@ -36,13 +37,12 @@ const SideButton = forwardRef(
 
     const getCopy = useCopy({ dictionary, copy })
 
-    const { icon } = getTokens(tokens, buttonVariant)
+    const { icon, displayLabel } = getTokens(tokens, buttonVariant)
 
     const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
     const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
-    const showLabel = viewport !== 'sm' && viewport !== 'xs'
 
     const accessibilityLabel =
       direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel')
@@ -69,7 +69,7 @@ const SideButton = forwardRef(
               iconPosition={directionToSide[direction]}
               iconProps={iconProps}
             >
-              {showLabel && <Text style={textStyles}>{label}</Text>}
+              {displayLabel && <Text style={textStyles}>{label}</Text>}
             </IconText>
           )
         }}

package/src/Responsive/Responsive.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+import { useResponsiveProp } from '../utils'
+
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+
+const Responsive = ({ min = 'xs', max, children }) => {
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = { [min]: children }
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max)
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
+    if (maxPlusOne) byViewports[maxPlusOne] = null
+  }
+  return <>{useResponsiveProp(byViewports, null)}</>
+}
+
+Responsive.propTypes = {
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+}
+
+export default Responsive

package/src/Responsive/index.js

@@ -0,0 +1,3 @@
+import Responsive from './Responsive'
+
+export default Responsive