@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

package/lib/Typography/Typography.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,15 +25,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
- * If passed a string like 'h1', 'h2' etc, returns the heading number as a string,
- * else returns false
+ * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
-function getHeadingLevel(heading) {
-  const match = typeof heading === 'string' && heading.match(/^h(\d)$/);
-  return match && match[1];
-}
-
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -55,16 +53,18 @@ const selectTextStyles = ({
 }); // General-purpose flexible theme-neutral base component for text
 
 
-const Typography = ({
+const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   variant,
   heading,
+  tag = typeof heading === 'string' ? heading : undefined,
+  accessibilityRole = heading === true ? 'header' : undefined,
   block = false,
   align = undefined,
-  accessibilityRole = heading ? 'header' : 'text',
   tokens,
+  dataSet,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
@@ -73,34 +73,50 @@ const Typography = ({
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
     } : themeTokens),
+    dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  const headingLevel = getHeadingLevel(heading);
-  const a11y = { ..._utils2.a11yProps.select(rest),
-    accessibilityRole,
-    // On React Native Web, `accessibilityLevel` controls which heading tag (h1, h2 etc) is used.
-    ...(headingLevel && {
-      accessibilityLevel: headingLevel
-    })
+  const a11y = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils2.a11yProps.select(rest)
   };
-  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...a11y,
+  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...a11y,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
       children: children
     })
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    ref: ref,
+    ...textProps,
     ...a11y,
     children: children
   });
-};
-
+});
+Typography.displayName = 'Typography';
 Typography.propTypes = { ..._utils2.a11yProps.types,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 
   /**
-   * If truthy, will render a heading; if a html heading tag is provided, uses that tag on Web
+   * 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.default.oneOf([..._utils2.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".
    */
-  heading: _propTypes.default.oneOf([true, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  tag: _propTypes.default.oneOf(_utils2.textTags),
 
   /**
    * If true, forces the element to behave as a View block even if nested in other text

package/lib/index.js

@@ -16,10 +16,13 @@ var _exportNames = {
   Feedback: true,
   Fieldset: true,
   FlexGrid: true,
+  HorizontalScroll: true,
   Icon: true,
   IconButton: true,
   InputLabel: true,
   List: true,
+  ListItem: true,
+  ListBase: true,
   Modal: true,
   Notification: true,
   Pagination: true,
@@ -122,6 +125,12 @@ Object.defineProperty(exports, "FlexGrid", {
     return _FlexGrid.default;
   }
 });
+Object.defineProperty(exports, "HorizontalScroll", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalScroll.default;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function () {
@@ -146,6 +155,18 @@ Object.defineProperty(exports, "List", {
     return _List.default;
   }
 });
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _List.ListItem;
+  }
+});
+Object.defineProperty(exports, "ListBase", {
+  enumerable: true,
+  get: function () {
+    return _List.ListBase;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -367,6 +388,20 @@ var _Fieldset = _interopRequireDefault(require("./Fieldset"));
 
 var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
 
+var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
+
+Object.keys(_HorizontalScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HorizontalScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HorizontalScroll[key];
+    }
+  });
+});
+
 var _Icon = _interopRequireWildcard(require("./Icon"));
 
 Object.keys(_Icon).forEach(function (key) {
@@ -399,7 +434,7 @@ Object.keys(_Link).forEach(function (key) {
   });
 });
 
-var _List = _interopRequireDefault(require("./List"));
+var _List = _interopRequireWildcard(require("./List"));
 
 var _Modal = _interopRequireDefault(require("./Modal"));
 

package/lib/utils/a11y/index.js

@@ -15,4 +15,17 @@ Object.keys(_textSize).forEach(function (key) {
       return _textSize[key];
     }
   });
+});
+
+var _semantics = require("./semantics");
+
+Object.keys(_semantics).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _semantics[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _semantics[key];
+    }
+  });
 });

package/lib/utils/a11y/propTypes.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireDefault(require("./propTypes.native"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = { ..._propTypes2.default,
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  accessibilityActiveDescendant: _propTypes.default.string,
+  accessibilityAtomic: _propTypes.default.bool,
+  accessibilityAutoComplete: _propTypes.default.string,
+  accessibilityBusy: _propTypes.default.bool,
+  accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: _propTypes.default.number,
+  accessibilityColumnIndex: _propTypes.default.number,
+  accessibilityColumnSpan: _propTypes.default.number,
+  accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityDetails: _propTypes.default.string,
+  accessibilityDisabled: _propTypes.default.bool,
+  accessibilityErrorMessage: _propTypes.default.string,
+  accessibilityExpanded: _propTypes.default.bool,
+  accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityHasPopup: _propTypes.default.string,
+  accessibilityHidden: _propTypes.default.bool,
+  accessibilityInvalid: _propTypes.default.bool,
+  accessibilityKeyShortcuts: _propTypes.default.string,
+  accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityLevel: _propTypes.default.number,
+  accessibilityModal: _propTypes.default.bool,
+  accessibilityMultiline: _propTypes.default.bool,
+  accessibilityMultiSelectable: _propTypes.default.bool,
+  accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityPlaceholder: _propTypes.default.string,
+  accessibilityPosInSet: _propTypes.default.number,
+  accessibilityPressed: _propTypes.default.bool,
+  accessibilityReadOnly: _propTypes.default.bool,
+  accessibilityRequired: _propTypes.default.bool,
+  accessibilityRoleDescription: _propTypes.default.string,
+  accessibilityRowCount: _propTypes.default.number,
+  accessibilityRowIndex: _propTypes.default.number,
+  accessibilityRowSpan: _propTypes.default.number,
+  accessibilitySelected: _propTypes.default.bool,
+  accessibilitySetSize: _propTypes.default.number,
+  accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: _propTypes.default.number,
+  accessibilityValueMin: _propTypes.default.number,
+  accessibilityValueNow: _propTypes.default.number,
+  accessibilityValueText: _propTypes.default.string
+};
+exports.default = _default;

package/lib/utils/a11y/propTypes.native.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
+// so we have to define them ourselves.
+var _default = {
+  accessible: _propTypes.default.bool,
+  focusable: _propTypes.default.bool,
+  accessibilityElementsHidden: _propTypes.default.bool,
+  accessibilityHint: _propTypes.default.string,
+  // react-native-web ignores `accessibilityHint`
+  accessibilityIgnoresInvertColors: _propTypes.default.bool,
+  accessibilityLabel: _propTypes.default.string,
+  accessibilityRole: _propTypes.default.string,
+  accessibilityActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string
+  })),
+  accessibilityLiveRegion: _propTypes.default.oneOf(['none', 'polite', 'assertive']),
+  accessibilityState: _propTypes.default.shape({
+    disabled: _propTypes.default.bool,
+    selected: _propTypes.default.bool,
+    checked: _propTypes.default.oneOf([true, false, 'mixed']),
+    busy: _propTypes.default.bool,
+    expanded: _propTypes.default.bool
+  }),
+  accessibilityValue: _propTypes.default.shape({
+    min: _propTypes.default.number,
+    max: _propTypes.default.number,
+    now: _propTypes.default.number,
+    text: _propTypes.default.string
+  }),
+  accessibilityViewIsModal: _propTypes.default.bool,
+  importantForAccessibility: _propTypes.default.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
+  onAccessibilityAction: _propTypes.default.func,
+  onAccessibilityEscape: _propTypes.default.func,
+  onAccessibilityTap: _propTypes.default.func
+};
+exports.default = _default;

package/lib/utils/a11y/semantics.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getA11yPropsFromHtmlTag = exports.getHeadingLevel = exports.textTags = exports.layoutTags = exports.supportedTags = exports.headingTags = exports.tagsToRoles = void 0;
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @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
+
+const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(([key, value]) => [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
+
+exports.tagsToRoles = tagsToRoles;
+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").
+ */
+
+exports.headingTags = headingTags;
+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
+
+exports.supportedTags = supportedTags;
+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
+
+exports.layoutTags = layoutTags;
+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}
+ */
+
+exports.textTags = textTags;
+
+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}
+ */
+
+
+exports.getHeadingLevel = getHeadingLevel;
+
+const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
+  // Allow cross-platform apps to set accessibilityRoles alongside a web tag without conflict
+  if (nativeRole !== undefined && _Platform.default.OS !== 'web') return {
+    accessibilityRole: nativeRole
+  };
+
+  if (tag) {
+    const accessibilityRole = tagsToRoles[tag];
+    if (accessibilityRole) return {
+      accessibilityRole
+    };
+    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;
+};
+
+exports.getA11yPropsFromHtmlTag = getA11yPropsFromHtmlTag;

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -47,7 +47,7 @@ function useVerticalExpandAnimation({
     if (_Platform.default.OS === 'web') {
       const transitionDuration = isExpanded ? expandDuration : collapseDuration;
       containerStyles = {
-        transition: "height ".concat(transitionDuration, "ms ease-in-out"),
+        transition: `height ${transitionDuration}ms ease-in-out`,
         height: isExpanded ? containerHeight : 0
       };
     } else {

package/lib/utils/children.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 
+var _A11yText = _interopRequireDefault(require("../A11yText"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,16 +61,38 @@ const unpackFragment = child => {
 
   return child;
 };
+
+exports.unpackFragment = unpackFragment;
+
+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 => isStringOrNumber(child) || child.type === _A11yText.default;
+
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${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] = `${wrappedText[lastIndex]}${child}`;
+  } else {
+    wrappedText.push(child);
+  }
+};
 /**
  * React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
- * text style inheritance isn't as expected.
+ * 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 the top level children:
+ * 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}</>)` will wrap the strings in the fragment.
+ * but `wrapStringsInText(<>{someString}{anotherString}</>)` wraps the strings inside the fragment.
  *
  * @param {ReactChildren} children
  * @param {TextProps} props
@@ -76,12 +100,35 @@ const unpackFragment = child => {
  */
 
 
-exports.unpackFragment = unpackFragment;
+const wrapStringsInText = (children, textProps = {}) => {
+  const childrenArray = unpackFragment(_react.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 wrapStringsInText = (children, props = {}) => {
-  return _react.Children.map(unpackFragment(children), child => typeof child === 'string' || typeof child === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...props,
-    children: child
-  }) : child);
+  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.
+    (0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+      children: group.length === 1 ? group[0] : group
+    }, combineKeys(group) || index) : group];
+  }, []);
+  return items.length === 1 ? items[0] : items;
 };
 
 exports.wrapStringsInText = wrapStringsInText;