@telus-uds/components-base 1.15.0 → 1.16.0

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

@@ -36,54 +36,57 @@ const nativeA11yPropTypes = {
   onAccessibilityEscape: PropTypes.func,
   onAccessibilityTap: PropTypes.func
 };
-const a11yPropTypes = Platform.select({
+const a11yPropTypes = { ...nativeA11yPropTypes,
   // React Native Web adds many a11y props that alias aria-* attributes
   // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-  web: { ...nativeA11yPropTypes,
-    accessibilityActiveDescendant: PropTypes.string,
-    accessibilityAtomic: PropTypes.bool,
-    accessibilityAutoComplete: PropTypes.string,
-    accessibilityBusy: PropTypes.bool,
-    accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-    accessibilityColumnCount: PropTypes.number,
-    accessibilityColumnIndex: PropTypes.number,
-    accessibilityColumnSpan: PropTypes.number,
-    accessibilityControls: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
-    accessibilityDescribedBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityDetails: PropTypes.string,
-    accessibilityDisabled: PropTypes.bool,
-    accessibilityErrorMessage: PropTypes.string,
-    accessibilityExpanded: PropTypes.bool,
-    accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityHasPopup: PropTypes.string,
-    accessibilityHidden: PropTypes.bool,
-    accessibilityInvalid: PropTypes.bool,
-    accessibilityKeyShortcuts: PropTypes.string,
-    accessibilityLabelledBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityLevel: PropTypes.number,
-    accessibilityModal: PropTypes.bool,
-    accessibilityMultiline: PropTypes.bool,
-    accessibilityMultiSelectable: PropTypes.bool,
-    accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityPlaceholder: PropTypes.string,
-    accessibilityPosInSet: PropTypes.number,
-    accessibilityPressed: PropTypes.bool,
-    accessibilityReadOnly: PropTypes.bool,
-    accessibilityRequired: PropTypes.bool,
-    accessibilityRoleDescription: PropTypes.string,
-    accessibilityRowCount: PropTypes.number,
-    accessibilityRowIndex: PropTypes.number,
-    accessibilityRowSpan: PropTypes.number,
-    accessibilitySelected: PropTypes.bool,
-    accessibilitySetSize: PropTypes.number,
-    accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-    accessibilityValueMax: PropTypes.number,
-    accessibilityValueMin: PropTypes.number,
-    accessibilityValueNow: PropTypes.number,
-    accessibilityValueText: PropTypes.string
-  },
+  accessibilityActiveDescendant: PropTypes.string,
+  accessibilityAtomic: PropTypes.bool,
+  accessibilityAutoComplete: PropTypes.string,
+  accessibilityBusy: PropTypes.bool,
+  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: PropTypes.number,
+  accessibilityColumnIndex: PropTypes.number,
+  accessibilityColumnSpan: PropTypes.number,
+  accessibilityControls: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityDetails: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  accessibilityErrorMessage: PropTypes.string,
+  accessibilityExpanded: PropTypes.bool,
+  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityHasPopup: PropTypes.string,
+  accessibilityHidden: PropTypes.bool,
+  accessibilityInvalid: PropTypes.bool,
+  accessibilityKeyShortcuts: PropTypes.string,
+  accessibilityLabelledBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityLevel: PropTypes.number,
+  accessibilityModal: PropTypes.bool,
+  accessibilityMultiline: PropTypes.bool,
+  accessibilityMultiSelectable: PropTypes.bool,
+  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityPlaceholder: PropTypes.string,
+  accessibilityPosInSet: PropTypes.number,
+  accessibilityPressed: PropTypes.bool,
+  accessibilityReadOnly: PropTypes.bool,
+  accessibilityRequired: PropTypes.bool,
+  accessibilityRoleDescription: PropTypes.string,
+  accessibilityRowCount: PropTypes.number,
+  accessibilityRowIndex: PropTypes.number,
+  accessibilityRowSpan: PropTypes.number,
+  accessibilitySelected: PropTypes.bool,
+  accessibilitySetSize: PropTypes.number,
+  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: PropTypes.number,
+  accessibilityValueMin: PropTypes.number,
+  accessibilityValueNow: PropTypes.number,
+  accessibilityValueText: PropTypes.string
+};
+const a11yPropTypesByPlatform = Platform.select({
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  web: a11yPropTypes,
   // Ignore web-only props in native builds
   default: nativeA11yPropTypes
 }); // These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
@@ -255,7 +258,7 @@ export default {
    * then spread the returned object into the component's props (usually its outer container).
    */
   select: getPropSelector( // Allow all React Native accessibility props
-  a11yPropTypes, // Allow any `aria-*` attribute on web; ignore them on native
+  a11yPropTypesByPlatform, // Allow any `aria-*` attribute on web; ignore them on native
   Platform.OS === 'web' && /^aria-/, // For the props added and deprecated in React Native Web 0.18, convert them to
   // a form that is platform-appropriate and RNW-version safe
   (key, value) => {

package/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.4.0",
+    "@telus-uds/system-theme-tokens": "^2.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
@@ -41,8 +41,8 @@
   "module": "lib-module/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^17.0.2 || ~18.0.0",
-    "react-dom": "^17.0.2 || ~18.0.0",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0",
     "react-native": "*",
     "react-native-web": "~0.17.7 || ~0.18.7"
   },
@@ -66,5 +66,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.15.0"
+  "version": "1.16.0"
 }

package/src/Carousel/Carousel.jsx

@@ -22,6 +22,8 @@ import SkipLink from '../SkipLink'
 import A11yText from '../A11yText'
 import CarouselStepTracker from './CarouselStepTracker'
 import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
+import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel'
+import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
 
 const staticStyles = StyleSheet.create({
@@ -150,7 +152,8 @@ const Carousel = React.forwardRef(
       onAnimationEnd,
       onIndexChanged,
       skipLinkHref,
-      refocus,
+      tabs,
+      refocus = Boolean(tabs),
       title = 'carousel',
       springConfig = undefined,
       thumbnails = undefined,
@@ -177,6 +180,7 @@ const Carousel = React.forwardRef(
       nextIcon,
       showPreviousNextNavigation,
       showPanelNavigation,
+      showPanelTabs,
       spaceBetweenSlideAndPreviousNextNavigation
     } = themeTokens
     const [activeIndex, setActiveIndex] = React.useState(0)
@@ -415,6 +419,9 @@ const Carousel = React.forwardRef(
       [activeIndex, childrenArray.length, itemLabel, getCopy, title]
     )
 
+    const activePanelNavigation =
+      tabs && showPanelTabs ? <CarouselTabsPanel items={tabs} /> : panelNavigation
+
     return (
       <CarouselProvider
         activeIndex={activeIndex}
@@ -511,7 +518,7 @@ const Carousel = React.forwardRef(
             </View>
           )}
         </View>
-        {showPanelNavigation ? panelNavigation : null}
+        {showPanelNavigation ? activePanelNavigation : null}
       </CarouselProvider>
     )
   }
@@ -587,6 +594,12 @@ Carousel.propTypes = {
    * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
    */
   skipLinkHref: PropTypes.string,
+  /**
+   * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
+   *
+   * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
+   */
+  tabs: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *

package/src/Carousel/CarouselTabs/CarouselTabs.jsx

@@ -3,13 +3,15 @@ import PropTypes from 'prop-types'
 
 import { useResponsiveProp } from '../../utils'
 import Carousel from '../Carousel'
-import CarouselTabsPanel from './CarouselTabsPanel'
 
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */
 const CarouselTabs = forwardRef(({ items, refocus = true, ...carouselProps }, ref) => {
-  const panelNavigation = useResponsiveProp({ md: <CarouselTabsPanel items={items} /> })
+  const tabs = useResponsiveProp({ md: items })
 
   return (
-    <Carousel refocus={refocus} {...carouselProps} ref={ref} panelNavigation={panelNavigation}>
+    <Carousel refocus={refocus} {...carouselProps} ref={ref} tabs={tabs}>
       {items.map(({ title, content }) => (
         <React.Fragment key={title}>{content}</React.Fragment>
       ))}

package/src/Skeleton/Skeleton.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Animated, Platform } from 'react-native'
+import { Animated, Platform, StyleSheet, View } from 'react-native'
 import propTypes from 'prop-types'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
@@ -19,11 +19,10 @@ import skeletonWebAnimation from './skeletonWebAnimation'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectSkeletonStyles = ({ color, radius, fadeAnimation }) => ({
+const selectSkeletonStyles = ({ color, radius }) => ({
   backgroundColor: color,
   borderRadius: radius,
-  maxWidth: '100%',
-  ...fadeAnimation
+  maxWidth: '100%'
 })
 
 const selectLineStyles = ({ skeletonHeight, lineWidth }) => ({
@@ -66,12 +65,13 @@ const Skeleton = forwardRef(
     const skeletonHeight = useSpacingScale(spacingScaleValue)
     const nativeAnimation = useSkeletonNativeAnimation()
 
-    const getAnimationBaseOnPlatform = () => {
-      if (Platform.OS !== 'web') {
-        return nativeAnimation
-      }
+    const getAnimationBasedOnPlatform = () => {
+      const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation
+      // We must pass the animation styles through `StyleSheet.create`
+      // @see https://github.com/necolas/react-native-web/issues/2387
+      const styles = StyleSheet.create({ animation })
 
-      return skeletonWebAnimation
+      return styles.animation
     }
 
     const getLineWidth = () => {
@@ -97,16 +97,22 @@ const Skeleton = forwardRef(
       return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
     }
 
-    const renderSkeleton = (index = 0) => (
-      <Animated.View
-        testID="skeleton"
-        key={`skeleton-${index + 1}`}
-        style={[
-          selectSkeletonStyles({ ...themeTokens, fadeAnimation: getAnimationBaseOnPlatform() }),
-          getStyledBasedOnShape()
-        ]}
-      />
-    )
+    const renderSkeleton = (index = 0) => {
+      // @see https://github.com/necolas/react-native-web/issues/2387
+      const Component = Platform.OS === 'web' ? View : Animated.View
+
+      return (
+        <Component
+          testID="skeleton"
+          key={`skeleton-${index + 1}`}
+          style={[
+            selectSkeletonStyles(themeTokens),
+            getAnimationBasedOnPlatform(),
+            getStyledBasedOnShape()
+          ]}
+        />
+      )
+    }
 
     return (
       <StackView space={themeTokens.spaceBetweenLines} ref={ref} {...selectProps(rest)}>

package/src/Skeleton/useSkeletonNativeAnimation.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { Animated } from 'react-native'
+import { Animated, Platform } from 'react-native'
 import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
 
 const useSkeletonNativeAnimation = () => {
@@ -10,12 +10,12 @@ const useSkeletonNativeAnimation = () => {
       Animated.timing(fadeAnimation, {
         toValue: OPACITY_STOP,
         duration: ANIMATION_DURATION,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       }),
       Animated.timing(fadeAnimation, {
         toValue: DEFAULT_OPACITY,
         duration: ANIMATION_DURATION,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       })
     ])
     Animated.loop(fade).start()

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -26,7 +26,9 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const selectButtonTokens = (tokens) =>
+// We need to drop the icon before passing it to the `ButtonBase`, because it's
+// being handled separately in this case
+const selectButtonTokens = ({ icon: _, ...tokens }) =>
   selectTokens('Button', {
     ...tokens,
     // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
@@ -215,8 +217,6 @@ ToggleSwitch.propTypes = {
 
 const staticStyles = StyleSheet.create({
   track: {
-    flexGrow: 1,
-    alignSelf: 'stretch',
     flexDirection: 'row'
   },
   switch: {

package/src/utils/props/a11yProps.js

@@ -40,75 +40,68 @@ const nativeA11yPropTypes = {
   onAccessibilityTap: PropTypes.func
 }
 
-const a11yPropTypes = Platform.select({
+const a11yPropTypes = {
+  ...nativeA11yPropTypes,
   // React Native Web adds many a11y props that alias aria-* attributes
   // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-  web: {
-    ...nativeA11yPropTypes,
-    accessibilityActiveDescendant: PropTypes.string,
-    accessibilityAtomic: PropTypes.bool,
-    accessibilityAutoComplete: PropTypes.string,
-    accessibilityBusy: PropTypes.bool,
-    accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-    accessibilityColumnCount: PropTypes.number,
-    accessibilityColumnIndex: PropTypes.number,
-    accessibilityColumnSpan: PropTypes.number,
-    accessibilityControls: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    accessibilityCurrent: PropTypes.oneOf([
-      true,
-      false,
-      'page',
-      'step',
-      'location',
-      'date',
-      'time'
-    ]),
-    accessibilityDescribedBy: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    accessibilityDetails: PropTypes.string,
-    accessibilityDisabled: PropTypes.bool,
-    accessibilityErrorMessage: PropTypes.string,
-    accessibilityExpanded: PropTypes.bool,
-    accessibilityFlowTo: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    accessibilityHasPopup: PropTypes.string,
-    accessibilityHidden: PropTypes.bool,
-    accessibilityInvalid: PropTypes.bool,
-    accessibilityKeyShortcuts: PropTypes.string,
-    accessibilityLabelledBy: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    accessibilityLevel: PropTypes.number,
-    accessibilityModal: PropTypes.bool,
-    accessibilityMultiline: PropTypes.bool,
-    accessibilityMultiSelectable: PropTypes.bool,
-    accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityPlaceholder: PropTypes.string,
-    accessibilityPosInSet: PropTypes.number,
-    accessibilityPressed: PropTypes.bool,
-    accessibilityReadOnly: PropTypes.bool,
-    accessibilityRequired: PropTypes.bool,
-    accessibilityRoleDescription: PropTypes.string,
-    accessibilityRowCount: PropTypes.number,
-    accessibilityRowIndex: PropTypes.number,
-    accessibilityRowSpan: PropTypes.number,
-    accessibilitySelected: PropTypes.bool,
-    accessibilitySetSize: PropTypes.number,
-    accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-    accessibilityValueMax: PropTypes.number,
-    accessibilityValueMin: PropTypes.number,
-    accessibilityValueNow: PropTypes.number,
-    accessibilityValueText: PropTypes.string
-  },
+  accessibilityActiveDescendant: PropTypes.string,
+  accessibilityAtomic: PropTypes.bool,
+  accessibilityAutoComplete: PropTypes.string,
+  accessibilityBusy: PropTypes.bool,
+  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: PropTypes.number,
+  accessibilityColumnIndex: PropTypes.number,
+  accessibilityColumnSpan: PropTypes.number,
+  accessibilityControls: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityDetails: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  accessibilityErrorMessage: PropTypes.string,
+  accessibilityExpanded: PropTypes.bool,
+  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityHasPopup: PropTypes.string,
+  accessibilityHidden: PropTypes.bool,
+  accessibilityInvalid: PropTypes.bool,
+  accessibilityKeyShortcuts: PropTypes.string,
+  accessibilityLabelledBy: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityLevel: PropTypes.number,
+  accessibilityModal: PropTypes.bool,
+  accessibilityMultiline: PropTypes.bool,
+  accessibilityMultiSelectable: PropTypes.bool,
+  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityPlaceholder: PropTypes.string,
+  accessibilityPosInSet: PropTypes.number,
+  accessibilityPressed: PropTypes.bool,
+  accessibilityReadOnly: PropTypes.bool,
+  accessibilityRequired: PropTypes.bool,
+  accessibilityRoleDescription: PropTypes.string,
+  accessibilityRowCount: PropTypes.number,
+  accessibilityRowIndex: PropTypes.number,
+  accessibilityRowSpan: PropTypes.number,
+  accessibilitySelected: PropTypes.bool,
+  accessibilitySetSize: PropTypes.number,
+  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: PropTypes.number,
+  accessibilityValueMin: PropTypes.number,
+  accessibilityValueNow: PropTypes.number,
+  accessibilityValueText: PropTypes.string
+}
+
+const a11yPropTypesByPlatform = Platform.select({
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  web: a11yPropTypes,
   // Ignore web-only props in native builds
   default: nativeA11yPropTypes
 })
@@ -214,7 +207,7 @@ export default {
    */
   select: getPropSelector(
     // Allow all React Native accessibility props
-    a11yPropTypes,
+    a11yPropTypesByPlatform,
     // Allow any `aria-*` attribute on web; ignore them on native
     Platform.OS === 'web' && /^aria-/,
     // For the props added and deprecated in React Native Web 0.18, convert them to