@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/utils/withLinkRouter.js

@@ -1,14 +1,7 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import hasOwnProperty from './hasOwnProperty';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * 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.
@@ -36,18 +29,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
  * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
  * ```
- */const withLinkRouter = Component => {
-  const wrappedComponent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const withLinkRouter = Component => {
+  const wrappedComponent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       LinkRouter,
       linkRouterProps,
       ...props
     } = _ref;
-    if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    if (!LinkRouter) return /*#__PURE__*/_jsx(Component, {
       ...props,
       ref: ref
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkRouter, {
+    return /*#__PURE__*/_jsx(LinkRouter, {
       linkRouterProps: linkRouterProps,
       Component: Component,
       ref: ref,
@@ -76,15 +71,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   // Forward any other properties explicitly set e.g. Component.SubComponent
   Object.keys(otherProperties).forEach(key => {
     // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
-    if ((0, _hasOwnProperty.default)(Component, key) && !(0, _hasOwnProperty.default)(wrappedComponent, key)) {
+    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
       wrappedComponent[key] = Component[key];
     }
   });
   return wrappedComponent;
 };
 withLinkRouter.propTypes = {
-  LinkRouter: _propTypes.default.elementType,
-  linkRouterProps: _propTypes.default.object
+  LinkRouter: PropTypes.elementType,
+  linkRouterProps: PropTypes.object
 };
-var _default = withLinkRouter;
-exports.default = _default;
+export default withLinkRouter;

package/package.json

@@ -3,6 +3,7 @@
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
+  "type": "module",
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
   },
@@ -10,44 +11,41 @@
     "@floating-ui/react-dom": "^1.0.1",
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.65.0",
+    "@react-native-picker/picker": "^2.9.0",
+    "@telus-uds/system-constants": "^2.0.0",
+    "@telus-uds/system-theme-tokens": "^3.0.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
+    "expo-document-picker": "~10.3.0",
     "expo-linear-gradient": "^12.5.0",
+    "expo-modules-core": "^1.12.24",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
-    "react-native-picker-select": "^8.0.4",
+    "react-native-picker-select": "^9.3.1",
     "semver": "7.5.2",
-    "string.prototype.matchall": "^4.0.9",
-    "expo-document-picker": "~10.3.0"
+    "string.prototype.matchall": "^4.0.9"
   },
   "description": "Base components",
   "devDependencies": {
+    "@babel/plugin-transform-private-methods": "^7.25.4",
     "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "~7.0.1",
     "@testing-library/react-native": "11.0.0",
-    "@testing-library/react-native-17": "npm:@testing-library/react-native@7.2.0",
     "react-test-renderer": "~18.0.0",
-    "react-test-renderer-17": "npm:react-test-renderer@17.0.2",
     "webpack": "5.x"
   },
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
-  },
   "exports": {
     ".": {
-      "import": "./lib-module/index.js",
-      "require": "./lib/index.js"
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
     },
     "./server": {
-      "import": "./lib-module/server.js",
-      "require": "./lib/server.js"
+      "import": "./lib/server.js",
+      "default": "./lib/server.js"
     }
   },
   "homepage": "https://github.com/telus/universal-design-system#readme",
@@ -56,13 +54,13 @@
   ],
   "license": "MIT",
   "main": "lib/index.js",
-  "module": "lib-module/index.js",
+  "module": "lib/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "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"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "^0.74.5",
+    "react-native-web": "^0.19.10"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -77,15 +75,12 @@
     "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
-    "build": "npm run build:code",
-    "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": "babel src -d lib --env-name module"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.96.0",
+  "version": "1.97.1",
   "types": "types/index.d.ts"
 }

package/src/A11yInfoProvider/index.jsx

@@ -5,7 +5,8 @@ import { AccessibilityInfo, Platform } from 'react-native'
 const ScreenReaderContext = React.createContext(false)
 const ReducedMotionContext = React.createContext(false)
 
-const A11yInfoProvider = ({ children }) => {
+// eslint-disable-next-line no-unused-vars
+const A11yInfoProvider = React.forwardRef(({ children }, _) => {
   const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false)
   const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false)
 
@@ -56,7 +57,9 @@ const A11yInfoProvider = ({ children }) => {
       </ScreenReaderContext.Provider>
     </ReducedMotionContext.Provider>
   )
-}
+})
+
+A11yInfoProvider.displayName = 'A11yInfoProvider'
 
 A11yInfoProvider.propTypes = {
   children: PropTypes.node.isRequired

package/src/ActivityIndicator/index.jsx

@@ -9,12 +9,21 @@ import Spinner from './Spinner'
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = ({ variant, tokens, label, isStatic = false }) => {
+const ActivityIndicator = React.forwardRef(({ variant, tokens, label, isStatic = false }, ref) => {
   const { size, color, thickness } = useThemeTokens('ActivityIndicator', tokens, variant)
   return (
-    <Spinner size={size} color={color} thickness={thickness} label={label} isStatic={isStatic} />
+    <Spinner
+      ref={ref}
+      size={size}
+      color={color}
+      thickness={thickness}
+      label={label}
+      isStatic={isStatic}
+    />
   )
-}
+})
+
+ActivityIndicator.displayName = 'ActivityIndicator'
 
 ActivityIndicator.propTypes = {
   variant: variantProp.propType,

package/src/BaseProvider/index.jsx

@@ -6,7 +6,8 @@ import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
 import { HydrationProvider } from './HydrationContext'
 
-const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
+// eslint-disable-next-line no-unused-vars
+const BaseProvider = React.forwardRef(({ defaultTheme, children, themeOptions }, _) => (
   <HydrationProvider>
     <A11yInfoProvider>
       <ViewportProvider>
@@ -16,7 +17,9 @@ const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
       </ViewportProvider>
     </A11yInfoProvider>
   </HydrationProvider>
-)
+))
+
+BaseProvider.displayName = 'BaseProvider'
 
 BaseProvider.propTypes = {
   children: PropTypes.node.isRequired,

package/src/Carousel/Carousel.jsx

@@ -120,7 +120,7 @@ const selectPreviousNextNavigationButtonStyles = (
 }
 
 const getPeekingProps = (viewport) => {
-  if (viewport === 'xs' || viewport === 'sm') {
+  if (viewport === 'xs' || viewport === 'sm' || viewport === 'md') {
     return {
       peekingFirstSpace: 48,
       peekingGap: 16,

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -20,43 +20,37 @@ const selectContainerStyle = ({
   totalItems,
   enablePeeking,
   peekingMarginLeft,
-  peekingMarginRight,
   peekingFirstSpace,
   peekingLastSpace,
   peekingMiddleSpace,
   peekingGap,
   hidden
 }) => {
-  const isFirst = elementIndex === 0
-  const isLast = elementIndex === totalItems - 1
-  const isMiddle = !isFirst && !isLast
-  const isActive = activeIndex === elementIndex
-
   let adjustedWidth = width
   let marginLeft = 0
-  let marginRight = 0
+  const marginRight = 0
 
   if (enablePeeking) {
-    if (isActive) {
-      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
-    } else if (isMiddle) {
-      adjustedWidth = width - peekingGap
-    }
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
+    const isFirst = elementIndex === 0
+    const isActive = activeIndex === elementIndex
 
-    if (isFirst) {
-      if (isActive) {
+    if (isActive) {
+      if (isFirst) {
         marginLeft = peekingMarginLeft
-      } else if (activeIndex === totalItems - 1) {
-        marginLeft = peekingLastSpace
       } else {
-        marginLeft = peekingMiddleSpace
+        marginLeft = peekingGap
+      }
+    } else if (isFirst) {
+      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace
+      if (activeIndex > 1) {
+        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1)
+      }
+      if (activeIndex === totalItems - 1) {
+        marginLeft += peekingLastSpace - peekingMiddleSpace
       }
-    }
-
-    if (isLast && isActive) {
-      marginRight = peekingMarginRight
     } else {
-      marginRight = peekingGap
+      marginLeft = peekingGap
     }
   }
 

package/src/Icon/IconText.jsx

@@ -66,7 +66,6 @@ const IconText = React.forwardRef(
 IconText.displayName = 'IconText'
 
 IconText.propTypes = {
-  /* eslint-disable react/no-unused-prop-types */ // eslint is having hard time seeing these props through forwardRef
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).

package/src/InputLabel/InputLabel.jsx

@@ -146,8 +146,7 @@ export default InputLabel
 const staticStyles = StyleSheet.create({
   container: {
     flexShrink: 1,
-    flexDirection: 'row',
-    alignItems: 'baseline'
+    flexDirection: 'row'
   },
   label: {
     flexShrink: 1
@@ -157,7 +156,7 @@ const staticStyles = StyleSheet.create({
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
     justifyContent: 'center'
   }
 })

package/src/List/ListItemBase.jsx

@@ -107,7 +107,12 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row'
   },
-  titleAndContentContainer: { flexDirection: 'column', flexShrink: 1, flexGrow: 1 }
+  titleAndContentContainer: {
+    flexDirection: 'column',
+    flexShrink: 1,
+    flexGrow: 1,
+    textAlign: 'justify'
+  }
 })
 
 ListItemBase.propTypes = {

package/src/Listbox/GroupControl.jsx

@@ -48,6 +48,11 @@ const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label,
     itemOutline,
     groupHeight
   } = tokens
+
+  const getTextStyles = () => ({
+    color: groupColor
+  })
+
   return (
     <View
       onPress={() => setSelectedId(id)}
@@ -71,7 +76,7 @@ const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label,
       ]}
       ref={ref}
     >
-      <Text>{label}</Text>
+      <Text style={getTextStyles()}>{label}</Text>
       <Spacer space={1} direction="row" />
       <Icon
         icon={tokens.groupIcon}

package/src/Modal/ModalContent.jsx

@@ -60,6 +60,7 @@ const ModalContent = React.forwardRef(
       borderColor,
       gap,
       direction,
+      footerTopWidth,
       hasBorder
     }) => ({
       flexDirection: direction,
@@ -70,8 +71,8 @@ const ModalContent = React.forwardRef(
       paddingLeft,
       paddingRight,
       paddingTop,
-      borderTopColor: hasBorder ? borderColor : 'transparent',
-      borderTopWidth: hasBorder ? 1 : 0
+      borderTopWidth: footerTopWidth > 0 ? footerTopWidth : (hasBorder && 1) || 0,
+      borderTopColor: borderColor
     })
 
     const headingStyles = {

package/src/Pagination/Pagination.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { View, Text, StyleSheet } from 'react-native'
 
 import {
@@ -42,6 +43,7 @@ const Pagination = React.forwardRef(
       sideButtonTokens,
       LinkRouter,
       linkRouterProps,
+      numberOfPagesBeforeEllipsis = 4,
       ...rest
     },
     ref
@@ -80,7 +82,8 @@ const Pagination = React.forwardRef(
       shouldRenderEllipsis
     } = usePagination({
       items,
-      truncateAbove
+      truncateAbove,
+      numberOfPagesBeforeEllipsis
     })
 
     const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions)
@@ -220,7 +223,11 @@ Pagination.propTypes = {
   /**
    * Custom tokens for `PaginationSideButton`
    */
-  sideButtonTokens: getTokensPropType('PaginationSideButton')
+  sideButtonTokens: getTokensPropType('PaginationSideButton'),
+  /**
+   * The number of pages before the ellipsis is shown
+   */
+  numberOfPagesBeforeEllipsis: PropTypes.number
 }
 
 const staticStyles = StyleSheet.create({

package/src/Pagination/constants.js

@@ -0,0 +1,3 @@
+export const TRUNCATE_ABOVE_VALUE = 4
+export const MIN_PAGES_TO_SHOW = 3
+export const DEFAULT_PAGE_TO_SHOW_VALUE = 1

package/src/Pagination/usePagination.js

@@ -1,11 +1,13 @@
+import { DEFAULT_PAGE_TO_SHOW_VALUE, MIN_PAGES_TO_SHOW, TRUNCATE_ABOVE_VALUE } from './constants'
 /**
  * Handles configurable truncating of pagination items.
  *
  * @param {object} props
  * @param {React.Element[]} items
  * @param {number} truncateAbove
+ * @param {number} numberOfPagesBeforeEllipsis
  */
-function usePagination({ items, truncateAbove }) {
+function usePagination({ items, truncateAbove, numberOfPagesBeforeEllipsis }) {
   const activeItemIndex = Math.max(
     items.findIndex((item) => item.props.isActive),
     0 // default to the first item if none is marked as active
@@ -16,8 +18,17 @@ function usePagination({ items, truncateAbove }) {
     return { onPress, href, hrefAttrs, variant, tokens }
   }
 
-  const windowSize = truncateAbove > 4 ? 3 : 1
-  const truncateEnabled = items.length > truncateAbove
+  let windowSize
+
+  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
+    windowSize = numberOfPagesBeforeEllipsis
+  } else if (truncateAbove > TRUNCATE_ABOVE_VALUE) {
+    windowSize = MIN_PAGES_TO_SHOW
+  } else {
+    windowSize = DEFAULT_PAGE_TO_SHOW_VALUE
+  }
+
+  const truncateEnabled = items.length > windowSize
 
   const truncateWindowStart = windowSize
   const truncateWindowEnd = items.length - 1 - windowSize

package/src/TextInput/TextInputBase.jsx

@@ -347,7 +347,7 @@ const TextInputBase = React.forwardRef(
         <NativeTextInput
           ref={inputRef}
           keyboardType={isNumeric ? 'numeric' : 'default'}
-          inputMode={isNumeric && 'numeric'}
+          inputMode={isNumeric ? 'numeric' : undefined}
           style={nativeInputStyle}
           secureTextEntry={isPassword && !showPassword}
           {...inputProps}

package/src/Timeline/Timeline.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { View } from 'react-native'
+import { Platform, View } from 'react-native'
 
 import { useThemeTokens } from '../ThemeProvider'
 import {
@@ -93,8 +93,12 @@ const Timeline = React.forwardRef(
     return (
       <View {...containerProps} ref={ref} style={selectTimelineContainerStyle(themeTokens)}>
         {children.map((child, index) => {
+          const accessibilityRole = Platform.OS !== 'android' ? 'listitem' : undefined
           const childrenProps = {
-            ...getA11yPropsFromHtmlTag(childrenTag, child?.props?.accessibilityRole || 'listitem')
+            ...getA11yPropsFromHtmlTag(
+              childrenTag,
+              child?.props?.accessibilityRole || accessibilityRole
+            )
           }
 
           return (

package/src/Tooltip/Tooltip.native.jsx

@@ -88,8 +88,8 @@ const selectArrowStyles = (
 }
 
 const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
-const defaultControl = (pressableState, variant) => (
-  <TooltipButton pressableState={pressableState} variant={variant} />
+const defaultControl = (pressableState, variant, tokens) => (
+  <TooltipButton pressableState={pressableState} variant={variant} tokens={tokens} />
 )
 
 /**
@@ -119,6 +119,8 @@ const Tooltip = React.forwardRef(
       variant,
       inline = false,
       nativeID,
+      activateOnHover = false,
+      tooltipButtonTokens,
       ...rest
     },
     ref
@@ -227,6 +229,31 @@ const Tooltip = React.forwardRef(
       tooltipPosition
     ])
 
+    React.useEffect(() => {
+      if (Platform.OS !== 'web') {
+        return undefined
+      }
+
+      const handleHover = (event) => {
+        if (activateOnHover) {
+          const isInsideControl = controlRef.current && controlRef.current.contains(event.target)
+          if (isInsideControl) {
+            if (!isOpen) {
+              setIsOpen(!isOpen)
+            }
+          } else {
+            close()
+          }
+        }
+      }
+
+      document.addEventListener('mouseover', handleHover, { capture: true })
+
+      return () => {
+        document.removeEventListener('mouseover', handleHover, { capture: true })
+      }
+    }, [controlLayout, activateOnHover, isOpen, onPress])
+
     const control = children !== undefined ? children : defaultControl
     const pressableStyles =
       control === defaultControl ? Platform.select({ web: { outline: 'none' } }) : undefined
@@ -256,7 +283,8 @@ const Tooltip = React.forwardRef(
           nativeID={nativeID}
         >
           {typeof control === 'function'
-            ? (pressableState) => control(getPressableState(pressableState), variant)
+            ? (pressableState) =>
+                control(getPressableState(pressableState), variant, tooltipButtonTokens)
             : control}
         </Pressable>
         {isOpen && (

package/src/Tooltip/shared.js

@@ -32,6 +32,11 @@ const propTypes = {
    * The `id` of the tooltip button.
    */
   nativeID: PropTypes.string,
+  /**
+   * Set to `true` to open the tooltip on hover
+   */
+  activateOnHover: PropTypes.bool,
+  tooltipButtonTokens: getTokensPropType('TooltipButton'),
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }

package/src/index.js

@@ -22,10 +22,12 @@ export { default as Feedback } from './Feedback'
 export { default as Fieldset } from './Fieldset'
 export { default as FlexGrid } from './FlexGrid'
 export { default as Footnote } from './Footnote'
-export { default as HorizontalScroll } from './HorizontalScroll'
-export * from './HorizontalScroll'
-export { default as Icon } from './Icon'
-export * from './Icon'
+export {
+  default as HorizontalScroll,
+  horizontalScrollUtils,
+  HorizontalScrollButton
+} from './HorizontalScroll'
+export { default as Icon, IconText, iconComponentPropTypes } from './Icon'
 export { default as IconButton } from './IconButton'
 export { default as InputLabel } from './InputLabel'
 export { default as InputSupports } from './InputSupports'
@@ -42,10 +44,8 @@ export { default as ProductCardGroup } from './ProductCardGroup'
 export { default as Progress } from './Progress'
 export { default as QuickLinks } from './QuickLinks'
 export { default as QuickLinksFeature } from './QuickLinksFeature'
-export { default as Radio } from './Radio'
-export * from './Radio'
-export { default as RadioCard } from './RadioCard'
-export * from './RadioCard'
+export { default as Radio, RadioGroup } from './Radio'
+export { default as RadioCard, RadioCardGroup } from './RadioCard'
 export { default as Responsive } from './Responsive'
 export { default as Search } from './Search'
 export { default as Select } from './Select'
@@ -53,8 +53,7 @@ export { default as SideNav } from './SideNav'
 export { default as Skeleton } from './Skeleton'
 export { default as SkipLink } from './SkipLink'
 export { default as Spacer } from './Spacer'
-export { default as StackView } from './StackView'
-export * from './StackView'
+export { default as StackView, StackWrap, getStackedContent } from './StackView'
 export { default as Status } from './Status'
 export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'