@telus-uds/components-base 1.8.3 → 1.8.4

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

@@ -0,0 +1,133 @@
+import PropTypes from 'prop-types';
+import { components as tokenKeys } from '@telus-uds/system-theme-tokens'; // Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
+// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
+// or components (e.g. Icon tokens)
+
+const tokenValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.elementType]);
+const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(tokenValue)]);
+export const getTokenNames = componentName => {
+  const componentTokenSchema = tokenKeys[componentName];
+
+  if (!componentTokenSchema) {
+    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
+  }
+
+  return Object.keys(componentTokenSchema);
+};
+/**
+ * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
+ * or by a provided array of tokens. A prefix may be provided, for example:
+ *
+ * @example
+ * ```jsx
+ * // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
+ * selectTokens('Button', themeTokens)
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns `{ backgroundColor, width }` where the values of those keys come from
+ * // the source object's `{ containerBackgroundColor, containerWidth }` properties.
+ * selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns tokens that are defined in the `Button` theme schema, from tokens with
+ * // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
+ * selectTokens('Button', themeTokens, 'button')
+ * ```
+ *
+ * @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
+ * @param {object} tokens - a source object of theme tokens
+ * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
+ * @returns {object} - subset of theme tokens
+ */
+
+export const selectTokens = (specifier, tokens, prefix) => {
+  const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
+  const filteredTokens = tokenNames.reduce((validTokens, key) => {
+    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
+    const token = tokens[prefixedKey];
+    return token !== undefined ? { ...validTokens,
+      [key]: token
+    } : validTokens;
+  }, {});
+  return filteredTokens;
+};
+/**
+ * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
+ * @typedef {{[key: string]: TokenValue}} TokensSet
+ * @typedef {(AppearanceSet) => TokensSet} TokensGetter
+ * @typedef {TokensSet|TokensGetter} TokensProp
+ */
+
+/**
+ * 'tokens' is an optional object prop on all themable components. Its keys must match the
+ * token keys in the component's theme schema.
+ *
+ * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
+ * where the main theming system doesn't apply. It is intentionally permissive about values.
+ *
+ * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
+ * @return {function} - a custom PropTypes validator
+ *
+ * @example
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in Component schema
+ *   tokens: getTokensPropType('Component')
+ * }
+ *
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in schemas for Component1 and Component2
+ *   tokens: getTokensPropType('Component1', 'Component2')
+ * }
+ */
+
+export const getTokensPropType = function () {
+  for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    componentsNames[_key] = arguments[_key];
+  }
+
+  return (props, propName, componentName) => {
+    PropTypes.checkPropTypes({
+      [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+    }, props, propName, componentName);
+
+    if (typeof props[propName] !== 'function') {
+      PropTypes.checkPropTypes({
+        [propName]: PropTypes.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+      }, props, propName, componentName);
+    }
+  };
+};
+/**
+ * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
+ *
+ * For example, for a set of tokens used in a common style, or for a set of tokens required by
+ * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
+ *
+ * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ *
+ * @param {string[]} componentTokenKeys - array of strings of token names
+ * @param {object} [options]
+ * @param {boolean} [options.partial] - if true, allows tokens to be undefined
+ * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
+ * @returns
+ */
+
+export const getTokensSetPropType = function (componentTokenKeys) {
+  let {
+    partial = false,
+    allowFunction = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const tokensObjectValidator = PropTypes.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+  function (props, propName) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+      args[_key2 - 2] = arguments[_key2];
+    }
+
+    return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
+  }])));
+  return allowFunction ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func]) : tokensObjectValidator;
+};

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

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+/**
+ * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
+ * @typedef {AppearanceSet} VariantProp
+ */
+
+export default {
+  /**
+   * 'variant' is an optional object prop on all themable components.
+   *
+   * Contains an object with keys that correspond to the current component theme's allowed
+   * appearances and values that correspond to the allowed values of that component.
+   *
+   * Since the particular keys and values depend on which theme is currently active,
+   * the exact shape of variant props is not enforced using PropTypes.
+   */
+  propType: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]))
+};

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

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import getPropSelector from './getPropSelector';
+const viewPropTypes = {
+  pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
+  onLayout: PropTypes.func,
+  nativeID: PropTypes.string,
+  testID: PropTypes.string,
+  dataSet: PropTypes.object
+};
+export default {
+  /**
+   * Subset of `View` proptypes that could conceivably be needed on any component
+   * that renders a single View.
+   */
+  types: viewPropTypes,
+
+  /**
+   * Filters a props object, returning only cross-platform View props that are potentially
+   * relevant to any basic layout component that renders one View.
+   */
+  select: getPropSelector(viewPropTypes)
+};

package/lib-module/utils/ssr.js

@@ -0,0 +1,38 @@
+import AppRegistry from "react-native-web/dist/exports/AppRegistry";
+/** @typedef {import('react').ComponentType} ReactComponent */
+
+/** @typedef {import('react').ReactElement} ReactElement */
+
+/**
+ * Registers the app's root component with React Native Web and generates
+ * the main <style> tag containing React Native Web stylesheet styles.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @returns {ReactElement[]}
+ */
+
+export const getReactNativeWebSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+  AppRegistry.registerComponent(appName, () => AppRoot);
+  const {
+    getStyleElement
+  } = AppRegistry.getApplication(appName);
+  return [getStyleElement()];
+};
+/**
+ * Gets style tags for each currently supported CSS-in-JS library and returns
+ * them alongside any existing style tags.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @param {ReactElement[]} [existingStyles]
+ * @returns {ReactElement[]}
+ */
+
+export const getSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+  let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName) // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
+  ];
+};

package/lib-module/utils/useCopy.js

@@ -0,0 +1,44 @@
+export const DEFAULT_COPY = 'en';
+/**
+ * Extract translations from a keyed dictionary for a given language.
+ * Returns a getter.
+ *
+ * @example
+ * const getCopy = useCopy({
+ *   copy: 'en',
+ *   dictionary: {
+ *     en: { label: 'english label' },
+ *     fr: { label: 'french label' }
+ *   }
+ * })
+ *
+ * getCopy('label') => 'english label'
+ *
+ * @description The entire dictionary may be overridden by simply passing a single language object as `copy`:
+ * @example
+ * const getCopy = useCopy({
+ *   copy: { label: 'custom label' }
+ * })
+ *
+ * getCopy('label') => 'custom label'
+ *
+ * @param {object} [dictionary]
+ * @param {'en'|'fr'|object} copy - language
+ * @return {function(string): string}
+ */
+
+function useCopy(_ref) {
+  let {
+    dictionary,
+    copy = DEFAULT_COPY
+  } = _ref;
+
+  if (typeof copy === 'string') {
+    return key => key ? dictionary[copy][key] : dictionary[copy];
+  } // support overriding the entire copy dictionary with an object for a single language
+
+
+  return key => copy[key];
+}
+
+export default useCopy;

package/lib-module/utils/useHash.js

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+
+const doAction = (action, event) => {
+  var _window, _window$location;
+
+  return typeof action === 'function' && action((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hash, event);
+};
+/**
+ * @typedef {import('react').SyntheticEvent} SyntheticEvent
+ */
+
+/**
+ * Calls a function (passing it the current hash) based on the current hash state on mount,
+ * and binds it to call it again any time the hash changes.
+ *
+ * Consider using `useCallback` on the function to minimise adding and removing of event listeners.
+ *
+ * On Native, this is replaced with a harmless no-op function as there is no direct equivalent.
+ *
+ * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
+ * @returns
+ */
+
+
+const useHash = function (action) {
+  let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const [isDone, setIsDone] = useState(false); // Do the action just once when ready after component mount, from hash on page load
+
+  const isToDo = isReady && !isDone;
+  useEffect(() => {
+    if (isToDo) {
+      setIsDone(true);
+      doAction(action);
+    }
+  }, [isToDo, action]); // Bind the action for each hash change; do re-bind if the function changes.
+
+  useEffect(() => {
+    const handleChange = event => doAction(action, event);
+
+    window.addEventListener('hashchange', handleChange);
+    return () => window.removeEventListener('hashchange', handleChange);
+  }, [action]);
+};
+
+export default useHash;

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

@@ -0,0 +1,7 @@
+/**
+ * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
+ * is handled at OS level and deep links have completely different usage.
+ */
+const useHash = () => {};
+
+export default useHash;

package/lib-module/utils/useResponsiveProp.js

@@ -0,0 +1,47 @@
+import { viewports } from '@telus-uds/system-constants';
+import { useViewport } from '../ViewportProvider';
+
+const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
+
+const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwn(objectProp, key));
+/**
+ * Resolves a prop which may be a responsive object with keys for viewports.
+ *
+ * Used internally in useResponsiveProp - see that for more details.
+ *
+ * @param {*} prop
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} viewport
+ * @param {*} [defaultValue]
+ * @returns {*}
+ */
+
+
+export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
+  if (prop === undefined) return defaultValue;
+  if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
+  const value = viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
+  viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
+  prop[viewports.keys.find(key => hasOwn(prop, key))];
+  return value === undefined ? defaultValue : value;
+};
+/**
+ * Takes any value and, if that value is a responsive prop (an object with one or more
+ * keys matching system viewport names), returns the value corresponding to the largest
+ * viewport key smaller than the current screen's viewport.
+ *
+ * For example, if passed `{ sm: 4, lg: 8 }`, it will return 8 on `xl` and `lg` viewports,
+ * 4 on `md` and `sm` viewports, and `undefined` (or a provided `defaultValue`) on `xs` viewports.
+ *
+ * To generate propTypes for responsive props, see `responsiveProps` in `./utils/props/responsiveProps.js`.
+ *
+ * @param {*} prop - any value which may be an object with viewport keys
+ * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
+ * @returns {*}
+ */
+
+const useResponsiveProp = (prop, defaultValue) => {
+  const viewport = useViewport();
+  return resolveResponsiveProp(prop, viewport, defaultValue);
+};
+
+export default useResponsiveProp;

package/lib-module/utils/useSpacingScale.js

@@ -0,0 +1,125 @@
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import { resolveResponsiveProp } from './useResponsiveProp';
+/**
+ * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
+ * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('./props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
+ * @typedef {import('./props/spacingProps.js').SpacingOptions} SpacingOptions
+ */
+
+const resolveSpacingOptions = space => {
+  if (!(space !== null && space !== void 0 && space.options)) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
+  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
+  // https://github.com/telus/universal-design-system/issues/583
+
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
+/**
+ * Pass a {@link SpacingValue}, which is one of:
+ *
+ * - A number 0-11 ({@link SpacingIndex}) pointing to an index on the theme's spacing scale
+ * - Or, an object ({@link SpacingObject}), with optional properties:
+ *   -  `xs`, `sm`, `md`, `lg`, `xl`: {@link SpacingIndex} to apply at or above these specified {@link Viewport}
+ *   - `options`: an optional {@link SpacingOptions} object, see below
+ *   - `space`: a {@link SpacingIndex} to apply to all viewports (can be used alongside `options`)
+ *
+ * ## Example
+ *
+ * If the theme's spacing scale is `[0, 4, 8, 12, 16, 24, 48]` with no theme rules:
+ *
+ * - `useSpacingScale(0)` returns `0`
+ * - `useSpacingScale(2)` returns `8`
+ * - `useSpacingScale({ xs: 3, lg: 4 })` returns `12` at 'xs', 'sm' or 'md' viewports, and `16` at 'lg' or 'xl'.
+ *
+ * These viewport properties are intended to support case-specific responsive layout changes, for example, where a
+ * grid item drops or adds spacing on a particular side at viewports where the parent changes the layout shape.
+ *
+ * ## Theming
+ *
+ * A theme's `'spacingScale'` has theme rules and appearances same as components, and may support `viewport`.
+ * For example, a theme with the following rule would change index [2] above from `8` to `12` on large viewports:
+ *
+ * ```json
+ * { if: { space: 2, viewport: ['lg', 'xl'] }, tokens: { size: 12 }}
+ * ```
+ *
+ * Setting responsive spacing in the theme is the preferred way to adapt the aesthetic tightness or looseness of
+ * a theme to the available space without changing the shape of the layout itself.
+ *
+ * ## Options
+ *
+ * Space values passed as objects may have an `options` key, with the following optional properties:
+ *
+ * - `variant`: Themes may choose to have spacing scale variants, same as variants in component themes.
+ *   For example, if a theme rule contains `{ if: { space: 2, compact: true }, tokens: { size: 6 }}`,
+ *   this tighter spacing can be accessed with:
+ *
+ * ```jsx
+ * const compactSize = useSpacingScale({ space: 2, options: { variant: { compact: true }}})`
+ * ```
+ *
+ * - `subtract`: Sometimes on-brand spacing needs to be reduced by another value to achieve an on-brand result.
+ *   For example, a component with a variable border may want to subtract its border width from its padding so
+ *   the total distance from content edge to bounding box is a valid theme value, regardless of border width:
+ *
+ * ```jsx
+ * const padding = useSpacingScale({ space: 2, options: { subtract: themeTokens.borderWidth }})
+ * ```
+ *
+ * - `size`: In exceptional cases, the theme's spacing scale may be bypassed by passing a `size` option.
+ *   This can result in layouts that may be rejected for being off-brand so should only be used as a
+ *   last resort for fixing layout problems (e.g. when working around non-branded embedded content).
+ *   Where possible, fixing layout issues using a spacing scale value and the `subtract` option is preferred.
+ *
+ * ```jsx
+ * // Comments should be included when `size` is used, stating why this off-brand size is needed
+ * const iframeOffset = useSpacingScale({ options: { size: 13 }})`
+ * ```
+ *
+ * ## References
+ *
+ * `/ADRs/inter-component-spacing/README.md` - ADR on this structure
+ *
+ * @param {SpacingValue} [spaceValue] - a {@link SpacingIndex} number, or a {@link SpacingObject}
+ * @returns {number}
+ */
+
+
+const useSpacingScale = spaceValue => {
+  var _spaceValue$space;
+
+  // In future, may need to consider window height as well as width, particularly for native apps,
+  // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
+  const viewport = useViewport();
+  const {
+    tokens,
+    variant,
+    overridden,
+    subtract = 0
+  } = resolveSpacingOptions(spaceValue);
+  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : resolveResponsiveProp(spaceValue, viewport, 0));
+  const {
+    size
+  } = useThemeTokens('spacingScale', tokens, variant, {
+    space: typeof space === 'number' ? space : 0,
+    viewport
+  });
+  return Math.max(size - subtract, 0);
+};
+
+export default useSpacingScale;

package/lib-module/utils/useUniqueId.js

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+let id = 0;
+
+function useUniqueId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const [uniqueId] = useState(() => {
+    id += 1;
+    return "".concat(prefix, "-").concat(id);
+  });
+  return uniqueId;
+}
+
+export default useUniqueId;

package/lib-module/utils/withLinkRouter.js

@@ -0,0 +1,83 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types'; // Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
+/**
+ * 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.
+ *
+ * If LinkRouter is passed, LinkRouter is rendered in place of the main component and is passed:
+ *
+ *  - `linkRouterProps`: an optional object passed alongside LinkRouter, for props needed by the wrapper
+ *    that are not valid props for the wrapped component.
+ *  - `Component`: automatically provided, the original component to render inside the wrapper.
+ *  - `ref`: forwarded `ref` passed down to `Component`
+ *  - All other props passed to the outer component
+ *
+ * @example A LinkRouter component to be used with link-like components might look like:
+ *
+ * ```jsx
+ * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
+ *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
+ * })
+ * ```
+ *
+ * Any component that takes href and onPress props may then use this wrapper:
+ *
+ * ```jsx
+ * <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__*/forwardRef((_ref, ref) => {
+    let {
+      LinkRouter,
+      linkRouterProps,
+      ...props
+    } = _ref;
+    if (!LinkRouter) return /*#__PURE__*/_jsx(Component, { ...props,
+      ref: ref
+    });
+    return /*#__PURE__*/_jsx(LinkRouter, {
+      linkRouterProps: linkRouterProps,
+      Component: Component,
+      ref: ref,
+      ...props
+    });
+  }); // Ensure the returned component has appropriate outer properties set:
+
+  /* eslint-disable-next-line react/forbid-foreign-prop-types */
+
+  const {
+    displayName,
+    name,
+    propTypes,
+    ...otherProperties
+  } = Component; // Apply unique component name as a displayName
+
+  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+
+  wrappedComponent.propTypes = { ...Component.propTypes,
+    ...withLinkRouter.propTypes
+  }; // 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 (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
+      wrappedComponent[key] = Component[key];
+    }
+  });
+  return wrappedComponent;
+};
+
+withLinkRouter.propTypes = {
+  LinkRouter: PropTypes.elementType,
+  linkRouterProps: PropTypes.object
+};
+export default withLinkRouter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "Base components",
   "keywords": [
     "base"
@@ -56,7 +56,7 @@
     "@storybook/react": "^6.5.6",
     "@storybook/builder-webpack5": "^6.5.6",
     "@storybook/manager-webpack5": "^6.5.6",
-    "@telus-uds/browserslist-config": "^1.0.3",
+    "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",

package/src/ExpandCollapse/Panel.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useState } from 'react'
-import { Animated, Platform, StyleSheet, View } from 'react-native'
+import { Animated, Platform, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import ExpandCollapseControl from './Control'
@@ -86,13 +86,6 @@ const ExpandCollapsePanel = forwardRef(
       tokens: themeTokens
     })
 
-    // on web we can hide the contents until we have the container measured and avoid occasional jitter
-    // this won't work on native platforms
-    const overflowContainerStyles =
-      containerHeight === null && Platform.OS === 'web'
-        ? { height: 0, visibility: 'hidden' }
-        : undefined
-
     const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
 
     return (
@@ -105,11 +98,7 @@ const ExpandCollapsePanel = forwardRef(
         >
           {control}
         </ExpandCollapseControl>
-        <Animated.View
-          ref={animatedRef}
-          style={[overflowContainerStyles, animatedStyles, staticStyles.itemsContainer]}
-          {...focusabilityProps}
-        >
+        <Animated.View ref={animatedRef} style={animatedStyles} {...focusabilityProps}>
           <View onLayout={onContainerLayout}>
             <View style={selectContainerStyles(themeTokens)}>{children}</View>
           </View>
@@ -156,10 +145,4 @@ ExpandCollapsePanel.propTypes = {
   controlTokens: getTokensPropType('ExpandCollapseControl')
 }
 
-const staticStyles = StyleSheet.create({
-  itemsContainer: {
-    overflow: 'hidden'
-  }
-})
-
 export default ExpandCollapsePanel

package/src/List/List.jsx

@@ -30,12 +30,16 @@ const List = forwardRef(
     ref
   ) => {
     const items = Children.map(children, (child, index) => {
-      if (child.type.name === ListItem.name) {
+      // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
+      const isListItem = (componentName) => Boolean(componentName === ListItem.displayName)
+
+      if (isListItem(child?.type?.displayName) || isListItem(child?.type?.name)) {
         return cloneElement(child, {
           showDivider,
           isLastItem: index + 1 === Children.count(children),
           tokens,
-          variant
+          variant,
+          ...child.props
         })
       }
       return child