@telus-uds/components-base 1.97.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.66.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.97.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/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/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/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'

package/src/utils/a11y/semantics.js

@@ -22,7 +22,6 @@ import { Platform } from 'react-native'
  * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js
  */
 // Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
-// eslint-disable-next-line prettier/prettier
 const rolesToTags = /** @type {const} */ {
   article: 'article',
   banner: 'header',
@@ -44,7 +43,6 @@ const rolesToTags = /** @type {const} */ {
 
   // Add special cases that are in RNW's function logic but not in its mapping object
   label: 'label'
-  // eslint-disable-next-line prettier/prettier
 }
 
 // Invert React Native Web's mapping, so a tag gets the role that gets that tag
@@ -56,7 +54,6 @@ export const tagsToRoles = Object.fromEntries(
  * Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
  * to headings on web but without the expectation of a hierarchy of headings within one screen.
  */
-// eslint-disable-next-line prettier/prettier
 export const headingTags = /** @type {const} */ ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
 /**
  * @typedef {typeof headingTags[number]} HeadingTag
@@ -80,7 +77,6 @@ export const supportedTags = [...Object.keys(tagsToRoles), ...headingTags]
  *
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
-// eslint-disable-next-line prettier/prettier
 export const layoutTags = /** @type {const} */ [
   ...headingTags,
   'article',
@@ -96,7 +92,6 @@ export const layoutTags = /** @type {const} */ [
   'nav',
   'section',
   'label'
-  // eslint-disable-next-line prettier/prettier
 ]
 /**
  * @typedef {typeof layoutTags[number]} LayoutTag
@@ -107,7 +102,6 @@ export const layoutTags = /** @type {const} */ [
  *
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
-// eslint-disable-next-line prettier/prettier
 export const textTags = /** @type {const} */ [
   ...headingTags,
   'blockquote',
@@ -118,7 +112,6 @@ export const textTags = /** @type {const} */ [
   'li',
   'strong',
   'label'
-  // eslint-disable-next-line prettier/prettier
 ]
 /**
  * @typedef {typeof layoutTags[number]} TextTag

package/lib-module/A11yInfoProvider/index.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import AccessibilityInfo from "react-native-web/dist/exports/AccessibilityInfo";
-import Platform from "react-native-web/dist/exports/Platform";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ScreenReaderContext = /*#__PURE__*/React.createContext(false);
-const ReducedMotionContext = /*#__PURE__*/React.createContext(false);
-const A11yInfoProvider = _ref => {
-  let {
-    children
-  } = _ref;
-  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false);
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'test') {
-      // On Jest these effects do nothing but can cause `act` state change warnings
-      // and "...after the Jest environment has been torn down" errors, so skip them.
-      return () => {};
-    }
-    const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    const setInitialA11yInfo = async () => {
-      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]);
-
-      // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
-      // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
-      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled);
-
-      // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
-      setReduceMotionEnabled(!!initialReduceMotionEnabled);
-    };
-    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
-      setInitialA11yInfo();
-    }
-    return () => {
-      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
-      if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
-        motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove();
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-      }
-    };
-  }, []);
-  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
-    value: reduceMotionEnabled,
-    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
-      value: screenReaderEnabled,
-      children: children
-    })
-  });
-};
-A11yInfoProvider.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default A11yInfoProvider;
-export const useA11yInfo = () => {
-  const screenReaderEnabled = React.useContext(ScreenReaderContext);
-  const reduceMotionEnabled = React.useContext(ReducedMotionContext);
-  return {
-    reduceMotionEnabled,
-    screenReaderEnabled
-  };
-};

package/lib-module/A11yText/index.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * A11yText is a zero-size invisible element that adds text to be read by screen readers.
- *
- * It should be used to add selectable screen-reader-only text to the main document flow,
- * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
- */
-const A11yText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    text,
-    heading,
-    role = 'text',
-    ...rest
-  } = _ref;
-  const selectedProps = selectProps({
-    // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
-    // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
-    // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
-    // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
-    accessible: Platform.OS === 'ios',
-    accessibilityLabel: text,
-    accessibilityRole: heading ? 'header' : role,
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.invisible,
-    ref: ref,
-    ...selectedProps
-  });
-});
-A11yText.displayName = 'A11yText';
-A11yText.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Text to be read by screen readers
-   */
-  text: PropTypes.string.isRequired,
-  /**
-   * Whether text should be rendered as a heading
-   */
-  heading: PropTypes.bool,
-  /**
-   * Role of the element
-   */
-  role: PropTypes.string
-};
-const styles = StyleSheet.create({
-  invisible: {
-    // Without width or height it is not shown
-    minHeight: 1,
-    minWidth: 1,
-    // Ensures it doesn't occupy space
-    // position: 'absolute' causes it to be read first in its container
-    marginEnd: -1,
-    marginBottom: -1,
-    // Ensures it is in the correct position on Native
-    top: -1
-  }
-});
-export default A11yText;