@telus-uds/components-base 1.19.0 → 1.21.0

package/lib-module/utils/BaseView/BaseView.js

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+import NativeView from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useTheme } from '../../ThemeProvider';
+/**
+ * Identical to React Native's View and supporting all the same props, but with:
+ *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaseView = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  const {
+    themeOptions
+  } = useTheme();
+  const styleProp = Array.isArray(style) ? [...style] : [style];
+
+  if (!themeOptions.forceZIndex) {
+    styleProp.unshift(styles.resetZIndex);
+  }
+
+  return /*#__PURE__*/_jsx(NativeView, { ...rest,
+    style: styleProp,
+    ref: ref,
+    children: children
+  });
+});
+BaseView.displayName = 'BaseView';
+const styles = StyleSheet.create({
+  resetZIndex: {
+    zIndex: 'auto'
+  }
+});
+BaseView.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
+export default BaseView;

package/lib-module/utils/BaseView/BaseView.native.js

@@ -0,0 +1,6 @@
+import BaseView from "react-native-web/dist/exports/View";
+/**
+ * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
+ */
+
+export default BaseView;

package/lib-module/utils/BaseView/index.js

@@ -0,0 +1,2 @@
+import BaseView from './BaseView';
+export default BaseView;

package/lib-module/utils/index.js

@@ -15,4 +15,5 @@ export * from './useResponsiveProp';
 export { default as useUniqueId } from './useUniqueId';
 export { default as withLinkRouter } from './withLinkRouter';
 export * from './ssr';
-export { default as containUniqueFields } from './containUniqueFields';
+export { default as containUniqueFields } from './containUniqueFields';
+export { default as BaseView } from './BaseView';

package/lib-module/utils/input.js

@@ -77,6 +77,7 @@ export const useInputValue = function () {
   const {
     value,
     initialValue,
+    inputRef,
     onChange,
     readOnly = false
   } = props;
@@ -90,19 +91,26 @@ export const useInputValue = function () {
   }); // Make current value accessible inside useCallback without rememoizing every time the value changes
 
   valueRef.current.value = currentValue;
+  const isDirty = currentValue !== valueRef.current.initial;
   const setValue = useCallback((arg, event) => {
     if (readOnly) return;
     const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
-    if (!isControlled) setOwnValue(newValue); // Call onChange handler if there's something for it to handle (event or a changed value)
+
+    if (!isControlled) {
+      setOwnValue(newValue);
+      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue !== null && newValue !== void 0 ? newValue : '';
+    } // Call onChange handler if there's something for it to handle (event or a changed value)
+
 
     if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
-  }, [isControlled, onChange, readOnly]);
+  }, [inputRef, isControlled, onChange, readOnly]);
   const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
   return {
     currentValue,
     setValue,
     resetValue,
-    isControlled
+    isControlled,
+    isDirty
   };
 };
 /**

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

@@ -27,6 +27,11 @@ const textInputHandlerProps = {
      */
     onChangeText: PropTypes.func,
 
+    /**
+     * onClear handler
+     */
+    onClear: PropTypes.func,
+
     /**
      * onSubmit handler
      */

package/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.1.0",
-    "@telus-uds/system-theme-tokens": "^2.7.0",
+    "@telus-uds/system-constants": "^1.2.0",
+    "@telus-uds/system-theme-tokens": "^2.8.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -70,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.19.0"
+  "version": "1.21.0"
 }

package/src/BaseProvider/index.jsx

@@ -21,7 +21,10 @@ const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
 BaseProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
-  themeOptions: PropTypes.shape({ forceAbsoluteFontSizing: PropTypes.bool })
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool
+  })
 }
 
 export default BaseProvider

package/src/Box/Box.jsx

@@ -24,7 +24,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  */
 
 const selectBoxStyles = (tokens) => {
-  const styles = { backgroundColor: tokens.backgroundColor }
+  let styles = { backgroundColor: tokens.backgroundColor }
+  if (tokens.gradient) {
+    const {
+      gradient: {
+        angle,
+        stops: [stopOne, stopTwo]
+      }
+    } = tokens
+    styles = {
+      ...styles,
+      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
+    }
+  }
+
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
   // Only set on styles if token provided because we spread this object after the spacing scale values
   paddings.forEach((side) => {

package/src/Button/ButtonDropdown.jsx

@@ -0,0 +1,179 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { Platform, Text, View } from 'react-native'
+import buttonPropTypes, { textAndA11yText } from './propTypes'
+import ButtonBase from './ButtonBase'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import {
+  a11yProps,
+  focusHandlerProps,
+  resolvePressableState,
+  selectTokens,
+  useInputValue
+} from '../utils'
+import Icon from '../Icon'
+import { getStackedContent } from '../StackView'
+import { getPressHandlersWithArgs } from '../utils/pressability'
+
+const selectIconTokens = ({
+  icon,
+  iconPosition,
+  iconSpace,
+  iconSize,
+  iconColor,
+  iconBackground,
+  iconBorderRadius,
+  iconAlignSelf,
+  iconPadding,
+  iconTranslateX,
+  iconTranslateY
+}) => ({
+  icon,
+  iconPosition,
+  iconSpace,
+  iconWrapperStyle: {
+    backgroundColor: iconBackground,
+    borderRadius: iconBorderRadius,
+    alignSelf: iconAlignSelf,
+    padding: iconPadding,
+    ...Platform.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: { transition: 'color 200ms, background 200ms' }
+    })
+  },
+  iconTokens: {
+    size: iconSize,
+    color: iconColor,
+    translateX: iconTranslateX,
+    translateY: iconTranslateY
+  }
+})
+
+const ButtonDropdown = forwardRef(
+  (
+    {
+      value,
+      initialValue,
+      onChange,
+      label,
+      tokens,
+      variant,
+      inactive = false,
+      readOnly = false,
+      children = null,
+      accessibilityRole = 'radio',
+      ...props
+    },
+    ref
+  ) => {
+    const { currentValue: isOpen, setValue: setIsOpen } = useInputValue(
+      {
+        value,
+        initialValue,
+        onChange,
+        readOnly
+      },
+      'useButtonDropdownValues'
+    )
+
+    const extraState = {
+      open: isOpen,
+      inactive,
+      ...variant
+    }
+
+    const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState)
+
+    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+
+    // Pass an object of relevant component state as first argument for any passed-in press handlers
+    const pressHandlers = getPressHandlersWithArgs(props, [{ label, open: isOpen }])
+
+    const handlePress = (event) => {
+      if (!inactive) {
+        if (pressHandlers.onPress) pressHandlers?.onPress(event)
+        setIsOpen(!isOpen, event)
+      }
+    }
+
+    return (
+      <ButtonBase
+        ref={ref}
+        {...pressHandlers}
+        onPress={handlePress}
+        tokens={getButtonTokens}
+        inactive={inactive}
+        icon={() => null}
+        accessibilityRole={accessibilityRole}
+        {...props}
+      >
+        {({ textStyles, ...buttonState }) => {
+          // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
+          // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
+          // - Icon: https://github.com/telus/universal-design-system/issues/327
+          // - IconButton: https://github.com/telus/universal-design-system/issues/281
+          // - Token sets: https://github.com/telus/universal-design-system/issues/782
+
+          const itemTokens = getTokens(buttonState)
+
+          const {
+            iconTokens,
+            iconPosition,
+            iconSpace,
+            iconWrapperStyle,
+            icon: IconComponent
+          } = selectIconTokens(itemTokens)
+
+          const iconContent = IconComponent ? (
+            <View style={iconWrapperStyle}>
+              <Icon icon={IconComponent} tokens={iconTokens} />
+            </View>
+          ) : null
+
+          const childrenContent = () =>
+            typeof children === 'function'
+              ? children({ ...resolvePressableState(buttonState, extraState), textStyles })
+              : children
+
+          const content = children ? childrenContent() : <Text style={textStyles}>{label}</Text>
+
+          return getStackedContent(
+            iconPosition === 'left' ? [iconContent, content] : [content, iconContent],
+            { space: iconSpace, direction: 'row' }
+          )
+        }}
+      </ButtonBase>
+    )
+  }
+)
+ButtonDropdown.displayName = 'ButtonDropdown'
+
+ButtonDropdown.propTypes = {
+  ...a11yProps.types,
+  ...focusHandlerProps.types,
+  ...buttonPropTypes,
+  children: textAndA11yText,
+  /**
+   * Callback called when a controlled ButtonDropdown gets interacted with.
+   */
+  onChange: PropTypes.func,
+  /**
+   * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
+   *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
+   */
+  value: PropTypes.bool,
+  /**
+   * Use `initialValue` to provide the initial value for an uncontrolled version.
+   */
+  initialValue: PropTypes.bool,
+  /**
+   * The label of ButtonDropdown.
+   */
+  label: PropTypes.string,
+  /**
+   * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
+   */
+  accessibilityRole: PropTypes.string
+}
+
+export default ButtonDropdown

package/src/Button/index.js

@@ -1,5 +1,6 @@
 import Button from './Button'
 import ButtonLink from './ButtonLink'
 import ButtonGroup from './ButtonGroup'
+import ButtonDropdown from './ButtonDropdown'
 
-export { Button, ButtonGroup, ButtonLink }
+export { Button, ButtonDropdown, ButtonGroup, ButtonLink }

package/src/Carousel/Carousel.jsx

@@ -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]
@@ -520,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>
@@ -609,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,10 +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 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
 
@@ -41,6 +52,7 @@ const CarouselTabsPanel = forwardRef(({ items }, ref) => {
               title={title}
               selected={selected}
               onPress={handlePress}
+              variant={{ inverse: isInverse }}
               {...panelItemProps}
             />
           )
@@ -48,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) =>