@telus-uds/components-base 1.8.3 → 1.9.0

package/lib-module/Typography/Typography.js

@@ -0,0 +1,124 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { applyTextStyles } from '../ThemeProvider/utils';
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
+/**
+ * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
+
+const selectTextStyles = _ref => {
+  let {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing
+  } = _ref;
+  return applyTextStyles({
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing
+  });
+}; // General-purpose flexible theme-neutral base component for text
+
+
+const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    variant,
+    heading,
+    tag = typeof heading === 'string' ? heading : undefined,
+    accessibilityRole = heading === true ? 'header' : undefined,
+    block = false,
+    align = undefined,
+    tokens,
+    dataSet,
+    ...rest
+  } = _ref2;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Typography', tokens, variant, {
+    viewport
+  });
+  const resolvedTextProps = { ...selectTextProps(rest),
+    style: selectTextStyles(align ? { ...themeTokens,
+      textAlign: align
+    } : themeTokens),
+    dataSet,
+    maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+  };
+  const containerProps = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+    ...selectContainerProps(rest)
+  };
+  return block ? /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    ...containerProps,
+    children: /*#__PURE__*/_jsx(Text, { ...resolvedTextProps,
+      children: children
+    })
+  }) : /*#__PURE__*/_jsx(Text, {
+    ref: ref,
+    ...containerProps,
+    ...resolvedTextProps,
+    children: children
+  });
+});
+Typography.displayName = 'Typography';
+Typography.propTypes = { ...selectedContainerPropTypes,
+  ...selectedTextPropTypes,
+  tokens: getTokensPropType('Typography'),
+  variant: variantProp.propType,
+
+  /**
+   * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
+   *
+   * Does not affect styling: <Typography heading="h2"> will render a <h2> that looks like plain text.
+   * Use both `heading` and `variant` props to render semantic headings that look like headings.
+   *
+   * In native apps, if this is `true` or any html heading tag string and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  heading: PropTypes.oneOf([...headingTags, true]),
+
+  /**
+   * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
+   *
+   * `tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: PropTypes.oneOf(textTags),
+
+  /**
+   * If true, forces the element to behave as a View block even if nested in other text
+   */
+  block: PropTypes.bool,
+
+  /**
+   * Works the same as css text-align, note that RN doesn't support "start" or "end" (see https://reactnative.dev/docs/text-style-props#textalign)
+   * Justify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)
+   */
+  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+
+  /**
+   * Same children allowed as a React Native <Text> node
+   */
+  children: PropTypes.node
+};
+export default Typography;

package/lib-module/Typography/index.js

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

package/lib-module/ViewportProvider/ViewportProvider.js

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { ViewportContext } from './useViewport';
+import useViewportListener from './useViewportListener';
+/**
+ * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const ViewportProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
+  // by useViewportListener in a layout effect before anything is shown to the user.
+  const [viewport, setViewport] = useState(viewports.keys[0]);
+  useViewportListener(setViewport);
+  return /*#__PURE__*/_jsx(ViewportContext.Provider, {
+    value: viewport,
+    children: children
+  });
+};
+
+ViewportProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default ViewportProvider;

package/lib-module/ViewportProvider/index.js

@@ -0,0 +1,3 @@
+import ViewportProvider from './ViewportProvider';
+export default ViewportProvider;
+export * from './useViewport';

package/lib-module/ViewportProvider/useViewport.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const ViewportContext = /*#__PURE__*/createContext({});
+export const useViewport = () => useContext(ViewportContext);

package/lib-module/ViewportProvider/useViewportListener.js

@@ -0,0 +1,46 @@
+import { useLayoutEffect } from 'react';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import { viewports } from '@telus-uds/system-constants'; // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
+// to update on every pixel change during window resize; but we only want rerenders to occur
+// when a viewport threshold has been crossed.
+
+const lookupViewport = () => viewports.select(Dimensions.get('window').width);
+/**
+ * In SSR, React gets spooked if it sees `useLayoutEffect` and fires warnings assuming the
+ * developer doesn't realise the effect won't run: https://reactjs.org/link/uselayouteffect-ssr
+ *
+ * To avoid these warnings while still conforming to the rules of hooks, always use this
+ * explicitly no-op hook, instead of the useLayoutEffect that is implicitly no-op on SSR.
+ */
+
+
+const useViewportListenerSSR = () => {};
+/**
+ * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
+ * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
+ * is shown to the user. Then bind events to update the viewport if it changes.
+ */
+
+
+const useViewportListenerCSR = setViewport => {
+  useLayoutEffect(() => {
+    setViewport(lookupViewport());
+
+    const onChange = _ref => {
+      let {
+        window
+      } = _ref;
+      return setViewport(viewports.select(window.width));
+    };
+
+    const listener = Dimensions.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
+    // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
+
+    return (listener === null || listener === void 0 ? void 0 : listener.remove) || (() => Dimensions.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+  }, [setViewport]);
+}; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
+
+
+const isSSR = typeof window === 'undefined';
+const useViewportListener = isSSR ? useViewportListenerSSR : useViewportListenerCSR;
+export default useViewportListener;

package/lib-module/index.js

@@ -0,0 +1,48 @@
+export { default as A11yText } from './A11yText';
+export { default as ActivityIndicator } from './ActivityIndicator';
+export { default as Box } from './Box';
+export * from './Button';
+export { default as Card, PressableCardBase } from './Card';
+export { default as Checkbox } from './Checkbox';
+export * from './Checkbox';
+export { default as Divider } from './Divider';
+export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
+export { default as Feedback } from './Feedback';
+export { default as Fieldset } from './Fieldset';
+export { default as FlexGrid } from './FlexGrid';
+export { default as HorizontalScroll } from './HorizontalScroll';
+export * from './HorizontalScroll';
+export { default as Icon } from './Icon';
+export * from './Icon';
+export { default as IconButton } from './IconButton';
+export { default as InputLabel } from './InputLabel';
+export * from './Link';
+export { default as List, ListItem, ListBase } from './List';
+export { default as Modal } from './Modal';
+export { default as Notification } from './Notification';
+export { default as Pagination } from './Pagination';
+export { default as Progress } from './Progress';
+export { default as Radio } from './Radio';
+export * from './Radio';
+export { default as RadioCard } from './RadioCard';
+export * from './RadioCard';
+export { default as Search } from './Search';
+export { default as Select } from './Select';
+export { default as SideNav } from './SideNav';
+export { default as Skeleton } from './Skeleton';
+export { default as Spacer } from './Spacer';
+export { default as StackView } from './StackView';
+export * from './StackView';
+export { default as StepTracker } from './StepTracker';
+export { default as Tabs } from './Tabs';
+export { default as Tags } from './Tags';
+export * from './TextInput';
+export * from './ToggleSwitch';
+export { default as Tooltip } from './Tooltip';
+export { default as TooltipButton } from './TooltipButton';
+export { default as Typography } from './Typography';
+export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
+export { default as BaseProvider } from './BaseProvider';
+export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
+export * from './utils';

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

@@ -0,0 +1,2 @@
+export * from './textSize';
+export * from './semantics';

package/lib-module/utils/a11y/semantics.js

@@ -0,0 +1,157 @@
+import Platform from "react-native-web/dist/exports/Platform";
+/**
+ * @typedef {import('react-native').AccessibilityRole} AccessibilityRole
+ */
+
+/**
+ * This is based on the role-to-tag mapping that React Native Web uses to set HTML tags.
+ * It's not exported in any way from RNW, so we need to keep this up-to-date manually.
+ * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
+ *
+ * Note: every role in this list is a web-only aria-role. There is no overlap between _these_ web tags
+ * or roles and native accessibilityRoles. Only h1, h2, h3 etc map to an RN equivalent ("heading").
+ *
+ * - RN "summary" native role maps to "region" aria-role, but setting `<section>`/"region" does not
+ *   set React Native's "summary" role, which has a much narrower use case.
+ * - `<Header>`/"Banner" also do not map to RN's "heading". Only h1 / h2 etc map to RN "heading".
+ *
+ * Therefore, all of these tags / roles default to no accessibilityRole in native apps. This is not wrong:
+ * in general, RN accessibilityRoles tend to be more about interaction and less about semantics than web roles.
+ *
+ * RNW's one-way mapping of React Native accessibilityRoles to web aria-roles:
+ * 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',
+  blockquote: 'blockquote',
+  code: 'code',
+  complementary: 'aside',
+  contentinfo: 'footer',
+  deletion: 'del',
+  emphasis: 'em',
+  figure: 'figure',
+  insertion: 'ins',
+  form: 'form',
+  list: 'ul',
+  listitem: 'li',
+  main: 'main',
+  navigation: 'nav',
+  region: 'section',
+  strong: 'strong',
+  // 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
+
+export const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(_ref => {
+  let [key, value] = _ref;
+  return [value, key];
+}));
+/**
+ * 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
+ */
+
+/**
+ * All HTML tags that may be set via RNW accesibility props alone and therefore may be set using
+ * the getA11yPropsFromHtmlTag function without changing other behaviour.
+ *
+ * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
+ */
+
+export const supportedTags = [...Object.keys(tagsToRoles), ...headingTags];
+/**
+ * Uses readonly mapping keys/values to generate static types for IDEs that support TS in JSDoc.
+ * @typedef {keyof rolesToTags} RoleWithTag
+ * @typedef {typeof rolesToTags[RoleWithTag] | typeof headingTags[number]} SupportedTag
+ */
+
+/**
+ * Subset of supported HTML tags that may be used with layout containers like Box.
+ *
+ * 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', 'aside', 'blockquote', 'footer', 'figure', 'form', 'header', 'ul', 'li', 'main', 'nav', 'section', 'label' // eslint-disable-next-line prettier/prettier
+];
+/**
+ * @typedef {typeof layoutTags[number]} LayoutTag
+ */
+
+/**
+ * Subset of supported HTML tags that may be used with text elements like Typography.
+ *
+ * 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', 'code', 'del', 'em', 'ins', 'li', 'strong', 'label' // eslint-disable-next-line prettier/prettier
+];
+/**
+ * @typedef {typeof layoutTags[number]} TextTag
+ */
+
+/**
+ * If passed a heading tag string like 'h1', 'h2' etc, returns the heading number as a number
+ * ready for use in `accessibilityLevel` props and similar.
+ *
+ * @param {string} [tag] - HTML tag string; returns undefined if not a {@link HeadingTag}
+ * @returns {'1' | '2' | '3' | '4' | '5' | '6' | undefined}
+ */
+
+export const getHeadingLevel = tag => headingTags.includes(tag) ? Number(tag[1]) : undefined;
+/**
+ * Takes a supported HTML tag, and returns the accessibility props that, on web, make React Native Web
+ * render that tag.
+ *
+ * For cross-platform apps, a second argument may be passed with an [accessibilityRole](https://reactnative.dev/docs/accessibility#accessibilityrole)
+ * to use in native apps. Heading tags (h1, h2, ...h5, h6) map to "heading" role by default;
+ * no other supported semantic HTML tags have an equivalent native accessibilityRole.
+ *
+ * @param {SupportedTag} tag - HTML tag to use on web
+ * @param {AccessibilityRole | null} [nativeRole] - optional accessibilityRole for native apps
+ * @returns {{ accessibilityRole: string, accessibilityLevel?: string } | undefined}
+ */
+
+export const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
+  // Allow cross-platform apps to set accessibilityRoles alongside a web tag without conflict
+  if (nativeRole !== undefined && Platform.OS !== 'web') return {
+    accessibilityRole: nativeRole
+  };
+
+  if (tag) {
+    // aria roles don't have native counterparts and RN may throw an error if an unrecognised role is passed
+    const ariaRole = Platform.OS === 'web' && tagsToRoles[tag];
+    if (ariaRole) return {
+      accessibilityRole: ariaRole
+    };
+    const accessibilityLevel = getHeadingLevel(tag);
+    if (accessibilityLevel) return {
+      accessibilityRole: 'header',
+      accessibilityLevel
+    };
+  } // If nothing matches or no tag supplied, return undefined and let component decide how to fall back.
+  // Note that return value may always be spread in objects (it is safe to spread undefined like { ...undefined })
+
+
+  return undefined;
+};

package/lib-module/utils/a11y/textSize.js

@@ -0,0 +1,36 @@
+import PixelRatio from "react-native-web/dist/exports/PixelRatio";
+import Platform from "react-native-web/dist/exports/Platform";
+/**
+ * When a user increases text size using device accessibility settings, some elements
+ * should also scale, such as icons alongside text and space between paragraphs.
+ *
+ * @param {number} [value] - the value to multiply; defaults to system default font size
+ * @param {number} [maxScale] - the maximum multiplier to apply; defaults to no maximum
+ */
+
+export const scaleWithText = function (value) {
+  let maxScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
+  if (!value) return value;
+  const scale = Math.min(PixelRatio.getFontScale(), maxScale) || 1;
+  return value * scale;
+};
+/**
+ * Native only, returns `undefined` on Web.
+ *
+ * Enforces `fontScaleCap` theme tokens as the maximum font size text can become
+ * after iOS or Android font scaling, to give consistent accessible maximum sizes
+ * that don't make the content unusable.
+ *
+ * The return value of this function can be used as a React Native `Text` element's
+ * `maxFontSizeMultiplier` prop value.
+ */
+
+export const getMaxFontMultiplier = _ref => {
+  let {
+    fontSize,
+    fontScaleCap
+  } = _ref;
+  if (Platform.OS === 'web' || !fontScaleCap || !fontSize) return undefined;
+  if (fontScaleCap <= fontSize) return 1;
+  return fontScaleCap / fontSize;
+};

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

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as useVerticalExpandAnimation } from './useVerticalExpandAnimation';

package/lib-module/utils/animation/useVerticalExpandAnimation.js

@@ -0,0 +1,88 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Easing from "react-native-web/dist/exports/Easing";
+import Platform from "react-native-web/dist/exports/Platform"; // TODO: systematise animations
+// https://github.com/telus/universal-design-system/issues/487
+
+function useVerticalExpandAnimation(_ref) {
+  let {
+    containerHeight,
+    isExpanded,
+    tokens
+  } = _ref;
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [wasExpanded, setWasExpanded] = useState(isExpanded);
+  const expandStateChanged = isExpanded !== wasExpanded;
+  const expandAnimatedValue = useRef(new Animated.Value(0)).current;
+  const elementRef = useRef(null);
+  const {
+    expandDuration,
+    collapseDuration
+  } = tokens;
+  useLayoutEffect(() => {
+    if (expandStateChanged) {
+      setIsAnimating(true);
+      setWasExpanded(isExpanded);
+    }
+  }, [expandStateChanged, isExpanded]);
+  useEffect(() => {
+    const onComplete = () => setIsAnimating(false);
+
+    if (Platform.OS === 'web') {
+      if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
+
+      const element = elementRef.current;
+      element.addEventListener('transitionend', onComplete);
+      return () => element.removeEventListener('transitionend', onComplete);
+    }
+
+    const animationConfig = {
+      duration: isExpanded ? expandDuration : collapseDuration,
+      easing: Easing.inOut(Easing.ease),
+      toValue: isExpanded ? containerHeight : 0,
+      useNativeDriver: false
+    };
+    const animation = Animated.timing(expandAnimatedValue, animationConfig);
+    animation.start(onComplete);
+    return () => animation.stop();
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
+  const containerStyles = {};
+  if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
+
+  if (!isExpanded && !isAnimating && !expandStateChanged) {
+    if (Platform.OS === 'web') {
+      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
+      containerStyles.visibility = 'hidden';
+    } else {
+      // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
+      // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
+      containerStyles.opacity = 0;
+    }
+  } // don't visually collapse the container until we have it measured
+
+
+  if (containerHeight === null) {
+    if (Platform.OS === 'web') {
+      // on web we can hide the contents until we have the container measured and avoid occasional jitter
+      // this won't work on native platforms
+      containerStyles.height = 0;
+      containerStyles.visibility = 'hidden';
+    }
+  } else if (Platform.OS === 'web') {
+    const transitionDuration = isExpanded ? expandDuration : collapseDuration;
+    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.height = isExpanded ? containerHeight : 0;
+  } else if (Platform.OS === 'ios' && isExpanded && !isAnimating && !expandStateChanged && typeof containerHeight === 'number') {
+    // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where
+    // it fails to reflow properly after the last animation frame, leaving the last line of text not visible.
+    // Force reflow after animation completes with a static height non-identical to the last animated height.
+    containerStyles.height = containerHeight + 1;
+  } else {
+    containerStyles.height = expandAnimatedValue;
+  }
+
+  return [containerStyles, elementRef];
+}
+
+export default useVerticalExpandAnimation;

package/lib-module/utils/children.js

@@ -0,0 +1,119 @@
+import React, { Children, Fragment } from 'react';
+import Text from "react-native-web/dist/exports/Text";
+import A11yText from '../A11yText';
+/**
+ * Unpacks top-level fragments, so that common compositional patterns such as the following examples
+ * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
+ *
+ * - Setting `children` as a property wrapped in a fragment:
+ *
+ * ```jsx
+ * args.children = <><Child1 /><Child2 /><Child3 /></>
+ * ```
+ *
+ * - Defining `children` as a variable wrapped in a fragment:
+ *
+ * ```jsx
+ * const content = <><Child1 /><Child2 /><Child3 /></>
+ * if (someCondition) return <SomeWrapper>{content}</SomeWrapper>
+ * ```
+ *
+ * - Using fragments at the top level of a JSX block for conditional rendering:
+ *
+ * ```jsx
+ * <Child1 />
+ * {someCondition && (
+ *   <>
+ *     <Child2 />
+ *     <Child3 />
+ *   </>
+ * )}
+ * ```
+ *
+ * @param {ReactChildren} child
+ * @returns {ReactChildren}
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export const unpackFragment = child => {
+  var _child$props;
+
+  // If this level is a set of top-level siblings rather than one child, check each in turn
+  if (Children.count(child) > 1) return Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
+
+  if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children); // Stop unpacking as soon as any non-fragment child is found
+
+  return child;
+};
+
+const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number'; // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
+
+
+const isWrapable = child => {
+  var _child$type;
+
+  return isStringOrNumber(child) || child.type === A11yText || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
+};
+
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => "".concat(newKey).concat(child.key || ''), ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+
+
+const wrapChild = (child, wrappedText) => {
+  const lastIndex = wrappedText.length - 1; // If possible, simplify content by combining text nodes into one string.
+  // jest-native's `.toHaveTextContent` is buggy about array of text nodes in <Text> elements.
+
+  if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
+    /* eslint-disable-next-line no-param-reassign */
+    wrappedText[lastIndex] = "".concat(wrappedText[lastIndex]).concat(child);
+  } else {
+    wrappedText.push(child);
+  }
+};
+/**
+ * React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
+ * text style inheritance behaves differently with text compared to regular HTML.
+ *
+ * Call this function on children that may contain text (strings or numbers) at the top level,
+ * and any that are found will be wrapped in a React Native `<Text>` element with supplied props.
+ *
+ * Note that this does not wrap strings that are nested children of rendered top level children:
+ * `wrapStringsInText(<View>Some text</View>)` will not wrap the inner text and will still crash,
+ * but `wrapStringsInText(<>{someString}{anotherString}</>)` wraps the strings inside the fragment.
+ *
+ * @param {ReactChildren} children
+ * @param {TextProps} props
+ * @returns {ReactChildren}
+ */
+
+
+export const wrapStringsInText = function (children) {
+  let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const childrenArray = unpackFragment(Children.toArray(children)); // Group adjacent wrapable children together in one Text element to create as few Text elements
+  // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>
+
+  const wrapables = [[]];
+  let wrapablesIndex = 0;
+  childrenArray.forEach(child => {
+    if (isWrapable(child)) {
+      // Make this child a child of the current `Text`
+      wrapChild(child, wrapables[wrapablesIndex]);
+    } else {
+      // Close current `Text` and start a new one after this child
+      wrapables.push(child, []);
+      wrapablesIndex += 2;
+    }
+  });
+  const items = wrapables.reduce((flatChildren, group, index) => {
+    // Skip nullish children and empty arrays
+    if (!group || Array.isArray(group) && !group.length) return flatChildren;
+    return [...flatChildren, Array.isArray(group) && group.some(child => isStringOrNumber(child)) ?
+    /*#__PURE__*/
+    // Wrap text nodes and their wrappable neighbours in Text with as stable a key as possible.
+    // Avoid one-item arrays because jest-native's `.toHaveTextContent` is buggy
+    // and sometimes fails to match text content in arrays.
+    _jsx(Text, { ...textProps,
+      children: group.length === 1 ? group[0] : group
+    }, combineKeys(group) || index) : group];
+  }, []);
+  return items.length === 1 ? items[0] : items;
+};