@telus-uds/components-base 1.18.1 → 1.19.0

package/lib-module/Search/Search.js

@@ -1,16 +1,13 @@
 import React, { forwardRef } from 'react';
 import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
-import StackView from '../StackView';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
 
@@ -39,20 +36,11 @@ const selectInputTokens = _ref => {
 
 const selectButtonTokens = tokens => selectTokens('Button', tokens);
 
-const selectIconsContainerStyle = _ref2 => {
-  let {
-    paddingRight
-  } = _ref2;
-  return {
-    paddingRight
-  };
-};
-
-const selectIconTokens = _ref3 => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref3;
+  } = _ref2;
   return {
     color: iconColor,
     size: iconSize
@@ -73,7 +61,7 @@ const selectIconTokens = _ref3 => {
  */
 
 
-const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     initialValue,
     value,
@@ -88,7 +76,7 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref3;
   const {
     currentValue = '',
     setValue
@@ -140,10 +128,8 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
     testID,
     ...containerProps
   } = selectContainerProps(rest);
-  return /*#__PURE__*/_jsxs(View, {
-    style: staticStyles.container,
-    ...containerProps,
-    children: [/*#__PURE__*/_jsx(TextInputBase, {
+  return /*#__PURE__*/_jsx(View, { ...containerProps,
+    children: /*#__PURE__*/_jsx(TextInputBase, {
       nativeID: nativeID,
       testID: testID,
       ...selectInputProps(rest),
@@ -163,35 +149,29 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
       onChange: setValue,
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
-      accessibilityLabel: a11yLabelText
-    }), /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/_jsxs(StackView, {
-        direction: "row",
-        space: buttonsGap,
-        children: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
-          onPress: handleClear,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-          tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-          children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
-          })
-        }), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
-          onPress: handleSubmit,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
-          tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+      accessibilityLabel: a11yLabelText,
+      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
+        accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleClear,
+        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
+        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
+        })
+      }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
+        accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleSubmit,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+          priority: 'high'
+        })),
+        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
-          })),
-          children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
-              priority: 'high'
-            }))
-          })
-        })]
-      })
-    })]
+          }))
+        })
+      }, "submit")]
+    })
   });
 });
 Search.displayName = 'Search';
@@ -255,15 +235,4 @@ Search.propTypes = { ...selectedContainerPropTypes,
   tokens: getTokensPropType('Search'),
   variant: variantProp.propType
 };
-export default Search;
-const staticStyles = StyleSheet.create({
-  container: {// No styles needed here except the View defaults (position: relative etc)
-  },
-  iconsContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-});
+export default Search;

package/lib-module/Tags/Tags.js

@@ -15,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 
-const selectIconTextTokens = _ref => {
+const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
     iconPosition,
@@ -27,9 +27,10 @@ const selectIconTextTokens = _ref => {
     iconAlignSelf,
     iconPadding,
     iconTranslateX,
-    iconTranslateY
+    iconTranslateY,
+    ...rest
   } = _ref;
-  return {
+  return returnRest ? rest : {
     icon,
     iconPosition,
     iconSpace,
@@ -54,6 +55,10 @@ const selectIconTextTokens = _ref => {
   };
 };
 
+const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
+
+const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
+
 const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     variant,
@@ -82,7 +87,8 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = themeTokens;
   const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
 
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+  const getButtonTokens = buttonState => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+  selectTokens('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
 
   const {
     currentValues,

package/lib-module/TextInput/TextInputBase.js

@@ -1,11 +1,12 @@
 import React, { forwardRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
+import StackView from '../StackView';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
@@ -110,35 +111,47 @@ const selectIconTokens = _ref3 => {
   };
 };
 
-const selectIconContainerStyles = _ref4 => {
+const selectIconContainerStyles = (_ref4, buttonCount) => {
   let {
+    buttonSize,
+    buttonsGapSize,
     paddingRight,
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
     paddingBottom
   };
 };
 
-const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const selectButtonsContainerStyle = _ref5 => {
   let {
-    value,
+    buttonsPaddingRight
+  } = _ref5;
+  return {
+    paddingRight: buttonsPaddingRight
+  };
+};
+
+const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    buttons = [],
     height,
-    initialValue,
     inactive,
-    readOnly,
+    initialValue,
+    onBlur,
     onChange,
     onChangeText,
     onFocus,
-    onBlur,
-    onMouseOver,
     onMouseOut,
+    onMouseOver,
     pattern,
+    readOnly,
     tokens,
+    value,
     variant = {},
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = event => {
@@ -197,7 +210,8 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
   };
   const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
   const {
-    icon: IconComponent
+    icon: IconComponent,
+    buttonsGap
   } = themeTokens;
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
@@ -210,7 +224,9 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     // currentValue is being updated even if the input is not controlled, passing it down to the
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
-  };
+  }; // Get the actual gap value for the current viewport
+
+  const buttonsGapSize = useSpacingScale(buttonsGap);
   const {
     themeOptions
   } = useTheme();
@@ -226,30 +242,47 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     }), IconComponent && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+        buttonsGapSize
+      }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
       })
+    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
+      children: /*#__PURE__*/_jsx(StackView, {
+        direction: "row",
+        space: buttonsGap,
+        children: buttons
+      })
     })]
   });
 });
 TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = { ...selectedSystemPropTypes,
-  value: PropTypes.string,
+  buttons: PropTypes.arrayOf(PropTypes.node),
   height: PropTypes.number,
-  initialValue: PropTypes.string,
   inactive: PropTypes.bool,
-  readOnly: PropTypes.bool,
+  initialValue: PropTypes.string,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onChangeText: PropTypes.func,
   onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
+  value: PropTypes.string,
   variant: variantProp.propType
 };
 export default TextInputBase;
 const staticStyles = StyleSheet.create({
+  buttonsContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
   iconContainer: {
     position: 'absolute',
     right: 0,

package/lib-module/index.js

@@ -29,6 +29,7 @@ export { default as Radio } from './Radio';
 export * from './Radio';
 export { default as RadioCard } from './RadioCard';
 export * from './RadioCard';
+export { default as Responsive } from './Responsive';
 export { default as Search } from './Search';
 export { default as Select } from './Select';
 export { default as SideNav } from './SideNav';

package/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.6.0",
+    "@telus-uds/system-constants": "^1.1.0",
+    "@telus-uds/system-theme-tokens": "^2.7.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -54,6 +54,9 @@
   },
   "scripts": {
     "test": "jest",
+    "test:web": "jest --config jest.config-web.js",
+    "test:ios": "jest --config jest.config-ios.js",
+    "test:android": "jest --config jest.config-android.js",
     "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
@@ -67,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.18.1"
+  "version": "1.19.0"
 }

package/src/Button/ButtonBase.jsx

@@ -123,7 +123,7 @@ const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
 })
 
 const selectTextStyles = (
-  { fontSize, color, lineHeight, fontName, fontWeight, textAlign },
+  { fontSize, color, lineHeight, fontName, fontWeight, textAlign, textLine, textLineStyle },
   themeOptions
 ) =>
   applyTextStyles({
@@ -133,7 +133,9 @@ const selectTextStyles = (
     fontName,
     fontWeight,
     themeOptions,
-    textAlign
+    textAlign,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle
   })
 
 const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {

package/src/Carousel/Carousel.jsx

@@ -164,7 +164,7 @@ const Carousel = React.forwardRef(
       ),
       tag = 'ul',
       accessibilityRole,
-      accessibilityLabel = title,
+      accessibilityLabel,
       accessibilityLiveRegion = 'polite',
       copy,
       ...rest
@@ -422,6 +422,32 @@ const Carousel = React.forwardRef(
     const activePanelNavigation =
       tabs && showPanelTabs ? <CarouselTabsPanel items={tabs} /> : panelNavigation
 
+    const isFirstFocusContainer = Boolean(refocus && !skipLinkHref)
+    const containerRef = (element) => {
+      // Apply both firstFocusRef to the container
+      firstFocusRef.current = element
+      // Also apply forwarded ref if there is one (which could be a function ref)
+      if (ref) {
+        if (typeof ref === 'object') {
+          // eslint-disable-next-line no-param-reassign
+          ref.current = element
+        } else if (typeof ref === 'function') {
+          ref(element)
+        }
+      }
+    }
+    // If container isn't used for focus, give it a label of title if none is passed in,
+    // otherwise read the current position on focus
+    const containerAccessibilityLabel =
+      systemProps.accessibilityLabel ?? isFirstFocusContainer
+        ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}`
+        : title
+    const containerProps = {
+      accessibilityLabel: containerAccessibilityLabel,
+      // If used for focus, attach the ref and draw a focus box around the whole carousel
+      ...(isFirstFocusContainer && { ref: containerRef, focusable: true })
+    }
+
     return (
       <CarouselProvider
         activeIndex={activeIndex}
@@ -434,7 +460,13 @@ const Carousel = React.forwardRef(
         refocus={refocus}
         width={containerLayout.width}
       >
-        <View style={staticStyles.root} onLayout={onContainerLayout} ref={ref} {...systemProps}>
+        <View
+          style={staticStyles.root}
+          onLayout={onContainerLayout}
+          ref={ref}
+          {...systemProps}
+          {...containerProps}
+        >
           {showPreviousNextNavigation && (
             <View
               style={selectPreviousNextNavigationButtonStyles(
@@ -464,14 +496,14 @@ const Carousel = React.forwardRef(
               {getCopyWithPlaceholders('skipLink')}
             </SkipLink>
           )}
-          <A11yText
-            // Read the current slide position to screen readers on slide.
-            // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
-            ref={!skipLinkHref && refocus ? firstFocusRef : null}
-            accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
-            focusable={!skipLinkHref && refocus}
-            text={getCopyWithPlaceholders('stepTrackerLabel')}
-          />
+          {!isFirstFocusContainer && (
+            <A11yText
+              // Read the current slide position to screen readers on slide.
+              // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
+              accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
+              text={getCopyWithPlaceholders('stepTrackerLabel')}
+            />
+          )}
           <View style={selectContainerStyles(containerLayout.width)}>
             <Animated.View
               style={StyleSheet.flatten([

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -21,16 +21,6 @@ const CarouselTabsPanel = forwardRef(({ items }, ref) => {
 
   return (
     <>
-      <View
-        focusable
-        accessible
-        onFocus={(event) => {
-          // When user forward-tabs into this section, focus the next tab; if they backwards-tab
-          // (shift-tab) back into the carousel content, don't interfere.
-          const previousWebFocus = event.relatedTarget
-          if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus()
-        }}
-      />
       <StackView direction="row" space={3} divider={{ variant: dividerVariant }} ref={ref}>
         {items.map(({ title, onPress, ...panelItemProps }, index) => {
           const selected = index === activeIndex

package/src/Pagination/SideButton.jsx

@@ -13,8 +13,9 @@ import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
 
 // We need to drop the icon here since it gets rendered via children and not
-// `ButtonBase` in order to tap into the state of the button
-const selectButtonTokens = ({ icon: _, ...rest }) => selectTokens('Button', rest)
+// `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
+// is also not needed
+const selectButtonTokens = ({ icon: _, displayLabel: __, ...rest }) => selectTokens('Button', rest)
 const selectIconTokens = ({ color, iconSize, iconDisplace }, direction) => {
   return {
     color,
@@ -36,13 +37,12 @@ const SideButton = forwardRef(
 
     const getCopy = useCopy({ dictionary, copy })
 
-    const { icon } = getTokens(tokens, buttonVariant)
+    const { icon, displayLabel } = getTokens(tokens, buttonVariant)
 
     const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
     const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
-    const showLabel = viewport !== 'sm' && viewport !== 'xs'
 
     const accessibilityLabel =
       direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel')
@@ -69,7 +69,7 @@ const SideButton = forwardRef(
               iconPosition={directionToSide[direction]}
               iconProps={iconProps}
             >
-              {showLabel && <Text style={textStyles}>{label}</Text>}
+              {displayLabel && <Text style={textStyles}>{label}</Text>}
             </IconText>
           )
         }}

package/src/Responsive/Responsive.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+import { useResponsiveProp } from '../utils'
+
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+
+const Responsive = ({ min = 'xs', max, children }) => {
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = { [min]: children }
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max)
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
+    if (maxPlusOne) byViewports[maxPlusOne] = null
+  }
+  return <>{useResponsiveProp(byViewports, null)}</>
+}
+
+Responsive.propTypes = {
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+}
+
+export default Responsive

package/src/Responsive/index.js

@@ -0,0 +1,3 @@
+import Responsive from './Responsive'
+
+export default Responsive

package/src/Search/Search.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
@@ -17,7 +17,6 @@ import {
 } from '../utils'
 import TextInputBase from '../TextInput/TextInputBase'
 import ButtonBase from '../Button/ButtonBase'
-import StackView from '../StackView'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
@@ -42,7 +41,6 @@ const selectInputTokens = ({ searchTokens, buttonTokens, buttonsGapSize }) => {
 }
 const selectButtonTokens = (tokens) => selectTokens('Button', tokens)
 
-const selectIconsContainerStyle = ({ paddingRight }) => ({ paddingRight })
 const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size: iconSize })
 
 /**
@@ -126,7 +124,7 @@ const Search = forwardRef(
     const { nativeID, testID, ...containerProps } = selectContainerProps(rest)
 
     return (
-      <View style={staticStyles.container} {...containerProps}>
+      <View {...containerProps}>
         <TextInputBase
           nativeID={nativeID}
           testID={testID}
@@ -150,28 +148,28 @@ const Search = forwardRef(
           onSubmitEditing={handleSubmit}
           onFocus={handleFocus}
           accessibilityLabel={a11yLabelText}
-        />
-        <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
-          <StackView direction="row" space={buttonsGap}>
-            {ClearButtonIcon && !isEmpty && (
+          buttons={[
+            ClearButtonIcon && !isEmpty && (
               <ButtonBase
-                onPress={handleClear}
-                inactive={inactive}
-                accessibilityRole="button"
                 accessibilityLabel={getCopy('clearButtonAccessibilityLabel')}
+                accessibilityRole="button"
+                inactive={inactive}
+                key="clear"
+                onPress={handleClear}
                 tokens={(appearances) => selectButtonTokens(getButtonTokens(appearances))}
               >
                 {(buttonState) => (
                   <ClearButtonIcon {...selectIconTokens(getButtonTokens(buttonState))} />
                 )}
               </ButtonBase>
-            )}
-            {SubmitButtonIcon && (
+            ),
+            SubmitButtonIcon && (
               <ButtonBase
-                onPress={handleSubmit}
-                inactive={inactive}
-                accessibilityRole="button"
                 accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
+                accessibilityRole="button"
+                inactive={inactive}
+                key="submit"
+                onPress={handleSubmit}
                 tokens={(buttonState) =>
                   selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
                 }
@@ -182,9 +180,9 @@ const Search = forwardRef(
                   />
                 )}
               </ButtonBase>
-            )}
-          </StackView>
-        </View>
+            )
+          ]}
+        />
       </View>
     )
   }
@@ -248,16 +246,3 @@ Search.propTypes = {
 }
 
 export default Search
-
-const staticStyles = StyleSheet.create({
-  container: {
-    // No styles needed here except the View defaults (position: relative etc)
-  },
-  iconsContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-})