@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/src/Typography/Typography.jsx

@@ -1,20 +1,22 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
 
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
-import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier } from '../utils'
-
+import {
+  a11yProps,
+  variantProp,
+  getTokensPropType,
+  getMaxFontMultiplier,
+  headingTags,
+  textTags,
+  getA11yPropsFromHtmlTag
+} from '../utils'
 /**
- * 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,
@@ -23,7 +25,8 @@ const selectTextStyles = ({
   lineHeight,
   fontName,
   textAlign,
-  textTransform
+  textTransform,
+  letterSpacing
 }) =>
   applyTextStyles({
     fontWeight,
@@ -32,55 +35,76 @@ const selectTextStyles = ({
     lineHeight,
     fontName,
     textAlign,
-    textTransform
+    textTransform,
+    letterSpacing
   })
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = ({
-  children,
-  variant,
-  heading,
-  block = false,
-  align = undefined,
-  accessibilityRole = heading ? 'header' : 'text',
-  tokens,
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
-  const textProps = {
-    style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
-    maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
-  }
+const Typography = forwardRef(
+  (
+    {
+      children,
+      variant,
+      heading,
+      tag = typeof heading === 'string' ? heading : undefined,
+      accessibilityRole = heading === true ? 'header' : undefined,
+      block = false,
+      align = undefined,
+      tokens,
+      dataSet,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
+    const textProps = {
+      style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
+      dataSet,
+      maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+    }
 
-  const headingLevel = getHeadingLevel(heading)
-  const a11y = {
-    ...a11yProps.select(rest),
-    accessibilityRole,
-    // On React Native Web, `aria-level` controls which heading tag (h1, h2 etc) is used.
-    // Must be hyphenated, not camel case; `accessibilityLevel` only works on RNW >=0.15.1
-    [headingLevel && 'aria-level']: headingLevel
-  }
+    const a11y = {
+      ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+      ...a11yProps.select(rest)
+    }
 
-  return block ? (
-    <View {...a11y}>
-      <Text {...textProps}>{children}</Text>
-    </View>
-  ) : (
-    <Text {...textProps} {...a11y}>
-      {children}
-    </Text>
-  )
-}
+    return block ? (
+      <View ref={ref} {...a11y}>
+        <Text {...textProps}>{children}</Text>
+      </View>
+    ) : (
+      <Text ref={ref} {...textProps} {...a11y}>
+        {children}
+      </Text>
+    )
+  }
+)
+Typography.displayName = 'Typography'
 
 Typography.propTypes = {
   ...a11yProps.types,
   tokens: getTokensPropType('Typography'),
   variant: 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.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".
    */
-  heading: PropTypes.oneOf([true, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  tag: PropTypes.oneOf(textTags),
   /**
    * If true, forces the element to behave as a View block even if nested in other text
    */

package/src/index.js

@@ -2,24 +2,39 @@ 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 } from './Card'
+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 } 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 { default as ToggleSwitch } from './ToggleSwitch'
@@ -30,6 +45,12 @@ export { default as Typography } from './Typography'
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
 export { default as ViewportProvider, useViewport } from './ViewportProvider'
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens } from './ThemeProvider'
+export {
+  default as ThemeProvider,
+  useTheme,
+  useSetTheme,
+  useThemeTokens,
+  getThemeTokens
+} from './ThemeProvider'
 
 export * from './utils'

package/src/utils/a11y/index.js

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

package/src/utils/a11y/semantics.js

@@ -0,0 +1,162 @@
+import { Platform } from 'react-native'
+/**
+ * @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(([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
+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) {
+    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
+}

package/src/utils/children.jsx

@@ -0,0 +1,119 @@
+import React, { Children, Fragment } from 'react'
+import { Text } from 'react-native'
+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}
+ */
+export const unpackFragment = (child) => {
+  // 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?.type === Fragment) return unpackFragment(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) => isStringOrNumber(child) || child.type === A11yText
+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 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 = (children, textProps = {}) => {
+  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)) ? (
+        // 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.
+        <Text key={combineKeys(group) || index} {...textProps}>
+          {group.length === 1 ? group[0] : group}
+        </Text>
+      ) : (
+        group
+      )
+    ]
+  }, [])
+  return items.length === 1 ? items[0] : items
+}

package/src/utils/index.js

@@ -1,10 +1,13 @@
 export * from './a11y'
 export * from './animation'
+export * from './children'
 export * from './input'
 export * from './pressability'
 export * from './propTypes'
 
 export { default as info } from './info'
+export { default as useCopy } from './useCopy'
+export { default as useHash } from './useHash'
 export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
 export * from './useResponsiveProp'

package/src/utils/info/platform/platform.js

@@ -0,0 +1 @@
+export default '.web (default)'

package/src/utils/info/versions.js

@@ -1,6 +1,6 @@
-import { version } from '../../../package.json'
+import pkgJson from '../../../package.json'
 
 // Add more versions if they are useful e.g. theme schema version
 export default {
-  uds: version
+  uds: pkgJson.version
 }

package/src/utils/input.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 const pluralHooks = ['useMultipleInputValues']
 
@@ -44,16 +44,18 @@ Consumers of this hook must be one of:
  * management tools such as Formik and React Hooks Form.
  *
  * @param {object} props
- * @param {any} [props.value] - for a controlled input, the active values as set by a parent
- * @param {any} [props.initialValue] - for an uncontrolled input, the default active values
+ * @param {string|number|null} [props.value] - for a controlled input, the active values as set by a parent
+ * @param {string|number} [props.initialValue] - for an uncontrolled input, the default active values
  * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
  * @param {boolean} [props.readOnly] - if true, stops the input values from changing
  *
  * @param {string} hookName - optional, used for tailoring error messages
  *
+ * @typedef {(oldValue: string|number|null) => string|number|null} UpdaterFunction - `setValue` takes a value or
+ *          a function returning a new value from the old value
  * @returns {{
- *   currentValue: any
- *   setValue: (value: any) => void
+ *   currentValue: string|number|null
+ *   setValue: (newValue: string|number|null|UpdaterFunction) => void
  *   resetValue: () => void
  *   isControlled: bool
  * }}
@@ -70,17 +72,21 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
 
   // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
   // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
-  const [initializedValue] = useState(currentValue)
+  const valueRef = useRef({ initial: currentValue, value: currentValue })
+  // Make current value accessible inside useCallback without rememoizing every time the value changes
+  valueRef.current.value = currentValue
 
   const setValue = useCallback(
-    (newValue) => {
+    (arg, event) => {
       if (readOnly) return
-      if (onChange) onChange(newValue)
+      const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg
       if (!isControlled) setOwnValue(newValue)
+      // Call onChange handler if there's something for it to handle (event or a changed value)
+      if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event)
     },
     [isControlled, onChange, readOnly]
   )
-  const resetValue = useCallback(() => setValue(initializedValue), [initializedValue, setValue])
+  const resetValue = useCallback((event) => setValue(valueRef.current.initial, event), [setValue])
 
   return { currentValue, setValue, resetValue, isControlled }
 }
@@ -94,18 +100,20 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
  * management tools such as Formik and React Hooks Form.
  *
  * @param {object} props
- * @param {any[]} [props.values] - for a controlled input, the active values as set by a parent
- * @param {any[]} [props.initialValues] - for an uncontrolled input, the default active values
+ * @param {string[]|number[]} [props.values] - for a controlled input, the active values as set by a parent
+ * @param {string[]|number[]} [props.initialValues] - for an uncontrolled input, the default active values
  * @param {number?} [props.maxValues] - maximum number of values that may be selected at once (no limit if null)
  * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
  * @param {boolean} [props.readOnly] - if true, stops the input values from changing
  *
  * @param {string} componentName - optional, used in error messages
  *
+ * @typedef {(oldValues: string[]|number[]) => string[]|number[]} UpdaterFunction - `setValues` takes values or
+ *          a function returning new values from old values
  * @returns {{
  *   currentValues: any
  *   resetValues: () => void
- *   setValues: (newValues: any[]) => void
+ *   setValues: (newValues: string[]|number[]|UpdaterFunction) => void
  *   toggleOneValue: (value: string|number) => void
  *   unsetValues: () => void
  * }}
@@ -138,23 +146,26 @@ export const useMultipleInputValues = ({
   )
   const currentValues = enforceMaxValues(currentValue)
 
-  const setValues = useCallback((newValues) => setValue(enforceMaxValues(newValues)), [
-    setValue,
-    enforceMaxValues
-  ])
+  const setValues = useCallback(
+    (newValues, event) => {
+      const validNewValues = enforceMaxValues(newValues)
+      setValue(validNewValues, event)
+    },
+    [setValue, enforceMaxValues]
+  )
 
   const resetValues = resetValue
-  const unsetValues = useCallback(() => setValues([]), [setValues])
+  const unsetValues = useCallback((event) => setValues([], event), [setValues])
   const toggleOneValue = useCallback(
-    (newValue) => {
+    (newValue, event) => {
       if (readOnly) return
-      setValues(
-        // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
-        // a deepEqual() function if there's any use case for toggling stored objects or arrays.
-        currentValues.includes(newValue)
-          ? currentValues.filter((oldValue) => oldValue !== newValue)
-          : [...currentValues, newValue]
-      )
+      // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
+      // a deepEqual() function if there's any use case for toggling stored objects or arrays.
+      const newValues = currentValues.includes(newValue)
+        ? currentValues.filter((oldValue) => oldValue !== newValue)
+        : [...currentValues, newValue]
+
+      setValues(newValues, event)
     },
     [currentValues, readOnly, setValues]
   )

package/src/utils/pressability.js

@@ -1,6 +1,10 @@
 import { Platform, StyleSheet } from 'react-native'
 import { pressProps } from './propTypes'
 
+/**
+ * @typedef {import('react').ReactNode} ReactNode
+ */
+
 // These roles should result in cursor: pointer but don't in current RNW releases
 const shouldUseCursor = ['checkbox', 'radio', 'switch']