@telus-uds/components-base 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 19 Dec 2024 04:54:39 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Jan 2025 21:41:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.4.0
+
+Fri, 10 Jan 2025 21:41:25 GMT
+
+### Minor changes
+
+- `Search`: `showLeftIcon` prop added to display the update icon in the left side for the component. (35577399+JoshHC@users.noreply.github.com)
+- `MultiSelectFilter`: add label and button icon tokens (kristina.kirpichnikova@telus.com)
+- Bump @telus-uds/system-theme-tokens to v3.3.0
+
+### Patches
+
+- `Link`: add missing outer border tokens for mobile devices (guillermo.peitzner@telus.com)
+- `Modal`: add fallback to avoid error when pressing Tab (Mauricio.BatresMontejo@telus.com)
+- `Select`: fix Option not appearing in component when selected on iOS largest text sizes (sergio.ramirez@telus.com)
+- `InputLabel`: add character count to support InputText and TextArea (Mauricio.BatresMontejo@telus.com)
+- `Notification`: add system style variant retrocompatibility (guillermo.peitzner@telus.com)
+- `InputLabel`: static styles of the label modified to fix hint and tooltip misalignment (35577399+JoshHC@users.noreply.github.com)
+
 ## 2.3.0
 
-Thu, 19 Dec 2024 04:54:39 GMT
+Thu, 19 Dec 2024 05:02:20 GMT
 
 ### Minor changes
 

package/lib/InputLabel/InputLabel.js

@@ -49,6 +49,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tooltip,
     tokens,
     variant,
+    characterCount,
+    maxCharacterAllowed,
     ...rest
   } = _ref3;
   const themeTokens = useThemeTokens('InputLabel', tokens, variant);
@@ -81,11 +83,26 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           content: tooltip,
           copy: copy
         })
+      }), maxCharacterAllowed && isHintInline && /*#__PURE__*/_jsxs(Text, {
+        style: [selectHintStyles({
+          ...themeTokens
+        }), staticStyles.characterCountlabel],
+        children: [characterCount, "/", maxCharacterAllowed]
       })]
-    }), hint && !isHintInline && /*#__PURE__*/_jsx(Text, {
+    }), hint && !maxCharacterAllowed && !isHintInline && /*#__PURE__*/_jsx(Text, {
       style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
       nativeID: hintId,
       children: hint
+    }), hint && maxCharacterAllowed && !isHintInline && /*#__PURE__*/_jsxs(View, {
+      style: staticStyles.container,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [selectHintStyles(themeTokens), staticStyles.flexHintBelow],
+        nativeID: hintId,
+        children: hint
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: [selectHintStyles(themeTokens), staticStyles.characterCountlabel],
+        children: [characterCount, "/", maxCharacterAllowed]
+      })]
     })]
   });
 });
@@ -120,6 +137,14 @@ InputLabel.propTypes = {
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
   tooltip: PropTypes.string,
+  /**
+   * Current number of characterts of an input text.
+   */
+  characterCount: PropTypes.number,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: PropTypes.number,
   tokens: getTokensPropType('InputLabel'),
   variant: variantProp.propType
 };
@@ -129,13 +154,22 @@ const staticStyles = StyleSheet.create({
     flexShrink: 1,
     flexDirection: 'row'
   },
+  characterCountlabel: {
+    marginLeft: 'auto',
+    marginTop: 'auto'
+  },
   label: {
-    flexShrink: 1
+    flexShrink: 1,
+    alignSelf: 'center'
   },
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
   },
+  flexHintBelow: {
+    flexBasis: '100%',
+    flexShrink: 1
+  },
   tooltipAlign: {
     alignSelf: 'center',
     justifyContent: 'center'

package/lib/InputSupports/InputSupports.js

@@ -5,7 +5,8 @@ import Feedback from '../Feedback';
 import StackView from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
 import useInputSupports from './useInputSupports';
-import { getTokensPropType } from '../utils';
+import { getTokensPropType, useCopy } from '../utils';
+import dictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -19,11 +20,19 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     feedbackProps = {},
     tooltip,
     validation,
+    maxCharacterAllowed,
+    inputValue,
     nativeID
   } = _ref;
   const {
     space
   } = useThemeTokens('InputSupports');
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const maxCharsReachedErrorMessage = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > maxCharacterAllowed ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed) : '';
+  const feedbackValidation = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > maxCharacterAllowed ? 'error' : validation;
   const {
     inputId,
     hintId,
@@ -34,7 +43,10 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hint,
     label,
     validation,
-    nativeID
+    nativeID,
+    copy,
+    maxCharacterAllowed,
+    charactersCount: maxCharacterAllowed - (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length)
   });
   return /*#__PURE__*/_jsxs(StackView, {
     space: space,
@@ -46,14 +58,17 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       hintPosition: hintPosition,
       hintId: hintId,
       tooltip: tooltip,
-      forId: inputId
+      forId: inputId,
+      characterCount: inputValue === null || inputValue === void 0 ? void 0 : inputValue.length,
+      maxCharacterAllowed: maxCharacterAllowed
     }), typeof children === 'function' ? children({
       inputId,
-      ...a11yProps
-    }) : children, feedback ? /*#__PURE__*/_jsx(Feedback, {
+      ...a11yProps,
+      validation: feedbackValidation
+    }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/_jsx(Feedback, {
       id: feedbackId,
-      title: feedback,
-      validation: validation,
+      title: feedback || maxCharsReachedErrorMessage,
+      validation: feedbackValidation,
       tokens: feedbackTokens,
       variant: {
         icon: feedbackProps.showFeedbackIcon
@@ -105,6 +120,14 @@ InputSupports.propTypes = {
   /**
    * ID for DOM element on web
    */
-  nativeID: PropTypes.string
+  nativeID: PropTypes.string,
+  /**
+   * The text value of a TextArea or TextInput
+   */
+  inputValue: PropTypes.string,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: PropTypes.number
 };
 export default InputSupports;

package/lib/InputSupports/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    maxCharacters: 'Maximum %{charCount} characters',
+    charactersRemaining: '%{charCount} characters remaining',
+    maxCharsMessage: 'Must not exceed %{charCount} characters'
+  },
+  fr: {
+    maxCharacters: '%{charCount} caractères maximum',
+    charactersRemaining: '%{charCount} caractères restants',
+    maxCharsMessage: 'Ne doit pas dépasser %{charCount} caractères'
+  }
+};

package/lib/InputSupports/useInputSupports.js

@@ -1,4 +1,6 @@
 import useUniqueId from '../utils/useUniqueId';
+import { useCopy } from '../utils';
+import dictionary from './dictionary';
 const joinDefined = array => array.filter(item => item !== undefined).join(' ');
 const useInputSupports = _ref => {
   let {
@@ -6,19 +8,26 @@ const useInputSupports = _ref => {
     feedback,
     validation,
     hint,
-    nativeID
+    nativeID,
+    copy,
+    maxCharacterAllowed,
+    charactersCount
   } = _ref;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
   const hasValidationError = validation === 'error';
   const inputId = useUniqueId('input');
   const hintId = useUniqueId('input-hint');
   const feedbackId = useUniqueId('input-feedback');
   const a11yProps = {
     accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint, maxCharacterAllowed ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed) : undefined]),
     // native only -> replaced with describedBy on web
     accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId,
     // feedback receives a11yRole=alert on error, so there's no need to include it here
-    hint && hintId]),
+    hint && hintId, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
     accessibilityInvalid: hasValidationError
   };
   return {

package/lib/Link/LinkBase.js

@@ -19,20 +19,15 @@ const selectOuterBorderStyles = _ref => {
     borderRadius,
     outerBorderOutline
   } = _ref;
-  return (
-    // A view wrapper with a border on native messes up inline text alignment
-    // so for now make focus styles strictly web-only
-    Platform.OS === 'web' ? {
-      // Allow theme to define outline, or, turn off outline and use border if rounded corners required
-      outline: outerBorderOutline,
-      ...applyOuterBorder({
-        outerBorderColor,
-        outerBorderWidth,
-        outerBorderGap
-      }),
-      borderRadius
-    } : {}
-  );
+  return {
+    outline: outerBorderOutline,
+    ...applyOuterBorder({
+      outerBorderColor,
+      outerBorderWidth,
+      outerBorderGap
+    }),
+    borderRadius
+  };
 };
 const selectTextStyles = _ref2 => {
   let {
@@ -182,7 +177,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, staticStyles.outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -264,6 +259,13 @@ const staticStyles = StyleSheet.create({
         pointerEvents: 'none'
       }
     })
+  },
+  outerBorderStyles: {
+    ...(Platform.OS !== 'web' && {
+      margin: 0,
+      marginHorizontal: 2,
+      padding: 0
+    })
   }
 });
 export default withLinkRouter(LinkBase);

package/lib/Modal/Modal.js

@@ -148,11 +148,11 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const manageFocus = React.useCallback(event => {
     if (event.key === 'Tab') {
       var _modalBodyRef$current;
-      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 || (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
+      const focusableElements = Array.from((modalBodyRef === null || modalBodyRef === void 0 || (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
       a[href], button, textarea, input, select, 
       [tabindex]:not([tabindex="-1"]),
       [contenteditable="true"]
-    `));
+    `)) || []);
       const firstElement = focusableElements[0];
       const lastElement = focusableElements[focusableElements.length - 1];
       if (event.shiftKey && document.activeElement === firstElement) {

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -25,30 +25,14 @@ const {
   Col,
   Row
 } = FlexGrid;
-const selectSubTitleTokens = _ref => {
-  let {
-    subtitleColor
-  } = _ref;
-  return {
-    color: subtitleColor
-  };
-};
-const selectDividerTokens = _ref2 => {
-  let {
-    dividerColor
-  } = _ref2;
-  return {
-    color: dividerColor
-  };
-};
-const selectHeaderTokens = _ref3 => {
+const selectHeaderTokens = _ref => {
   let {
     contentMarginLeft,
     contentMarginRight,
     contentMarginTop,
     contentPaddingLeft,
     contentPaddingRight
-  } = _ref3;
+  } = _ref;
   return {
     marginLeft: contentMarginLeft,
     marginRight: contentMarginRight,
@@ -58,14 +42,14 @@ const selectHeaderTokens = _ref3 => {
     flexGrow: 1
   };
 };
-const selectControlsTokens = _ref4 => {
+const selectControlsTokens = _ref2 => {
   let {
     contentMarginBottom,
     contentMarginLeft,
     contentMarginRight,
     contentPaddingLeft,
     contentPaddingRight
-  } = _ref4;
+  } = _ref2;
   return {
     marginBottom: contentMarginBottom,
     marginLeft: contentMarginLeft,
@@ -80,7 +64,7 @@ const selectContainerStyle = (windowHeight, windowWidth) => ({
 });
 const TOTAL_COLUMNS = 12;
 const MAX_ITEMS_THRESHOLD = 12;
-const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     label,
     subtitle,
@@ -102,7 +86,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     rowLimit = 12,
     dictionary = defaultDictionary,
     ...rest
-  } = _ref5;
+  } = _ref3;
   const viewport = useViewport();
   const {
     currentValues,
@@ -117,23 +101,6 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [checkedIds, setCheckedIds] = React.useState(currentValues ?? []);
   const [maxWidth, setMaxWidth] = React.useState(false);
-  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
-  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
-  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
-  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
-  const isSelected = currentValues.length > 0;
-  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
-  React.useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false);
-    return colSize === 2 && setMaxWidth(true);
-  }, [colSize]);
-  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const {
     headerFontColor,
     headerFontSize,
@@ -147,6 +114,20 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     subHeaderLineHeight,
     minHeight,
     minWidth,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelColor,
+    labelLineHeight,
+    labelPaddingTop,
+    labelPaddingBottom,
+    labelPaddingLeft,
+    labelPaddingRight,
+    buttonBorderColor,
+    buttonIconSize,
+    buttonIconPadding,
+    subtitleColor,
+    dividerColor,
     ...restTokens
   } = useThemeTokens('MultiSelectFilter', tokens, {
     ...variant,
@@ -155,6 +136,36 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   }, {
     viewport
   });
+  const dropdownTokens = {
+    borderColor: buttonBorderColor,
+    iconSize: buttonIconSize,
+    iconPadding: buttonIconPadding,
+    lineHeight: labelLineHeight,
+    fontName: labelFontName,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    color: labelColor,
+    paddingTop: labelPaddingTop,
+    paddingBottom: labelPaddingBottom,
+    paddingLeft: labelPaddingLeft,
+    paddingRight: labelPaddingRight
+  };
+  const getButtonDropdownTokens = useThemeTokensCallback('ButtonDropdown', dropdownTokens, variant);
+  const getButtonTokens = buttonState => selectTokens('ButtonDropdown', getButtonDropdownTokens(buttonState));
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
+  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
+  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
+  const isSelected = currentValues.length > 0;
+  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
+  React.useEffect(() => {
+    if (colSize === 1) return setMaxWidth(false);
+    return colSize === 2 && setMaxWidth(true);
+  }, [colSize]);
+  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const uniqueFields = ['id', 'label'];
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
@@ -213,7 +224,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const subeHeaderStyles = applyTextStyles({
     fontSize: subHeaderFontSize,
     fontWeight: subHeaderFontWeight,
-    fontColor: selectSubTitleTokens(themeTokens)
+    fontColor: subtitleColor
   });
   const {
     overlaidPosition,
@@ -299,7 +310,9 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   });
   const controlsContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [isScrolling ? /*#__PURE__*/_jsx(Divider, {
-      tokens: selectDividerTokens(themeTokens),
+      tokens: {
+        color: dividerColor
+      },
       space: 4
     }) : /*#__PURE__*/_jsx(Spacer, {
       space: 4

package/lib/Notification/Notification.js

@@ -274,6 +274,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  var _variant$style;
   let {
     children,
     system,
@@ -290,6 +291,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     dictionary,
     copy
   });
+
+  // TODO: Remove this once the system style variant is deprecated
+  const isSystemEnabled = system || (variant === null || variant === void 0 || (_variant$style = variant.style) === null || _variant$style === void 0 ? void 0 : _variant$style.includes('system'));
   const {
     themeOptions
   } = useTheme();
@@ -298,7 +302,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   } = themeOptions;
   const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
   const themeTokens = useTokens('Notification', tokens, variant, {
-    system,
+    system: isSystemEnabled,
     viewport
   });
   const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
@@ -323,9 +327,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, system);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
   }
   if (isDismissed) {
     return null;

package/lib/Search/Search.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps, contentfulProps } from '../utils';
@@ -7,6 +8,7 @@ import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
+import Icon from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
@@ -33,7 +35,7 @@ const selectInputTokens = _ref => {
     paddingRight: paddingWithButtons
   };
 };
-const selectButtonTokens = tokens => selectTokens('Button', tokens);
+const selectButtonTokens = tokens => selectTokens('SearchButton', tokens);
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
@@ -44,6 +46,26 @@ const selectIconTokens = _ref2 => {
     size: iconSize
   };
 };
+const selectBorderTokens = _ref3 => {
+  let {
+    borderWidth,
+    mobileBorderWidth,
+    ...tokens
+  } = _ref3;
+  return {
+    borderWidth: Platform.OS === 'web' ? borderWidth : mobileBorderWidth,
+    ...tokens
+  };
+};
+const modifyButtonTokens = tokens => {
+  const modifiedTokens = {
+    ...tokens
+  };
+  if (Platform.OS !== 'web') {
+    modifiedTokens.backgroundColor = tokens.mobileBackgroundColor;
+  }
+  return modifiedTokens;
+};
 
 /**
  * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
@@ -58,7 +80,7 @@ const selectIconTokens = _ref2 => {
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const Search = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     initialValue,
     value,
@@ -73,9 +95,10 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tokens,
     variant,
     nativeSubmitBtnID,
+    searchIconPosition = 'right',
     dataSet,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const {
     currentValue = '',
     setValue
@@ -139,8 +162,8 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       testID: testID,
       ...selectInputProps(rest),
       ref: ref,
-      tokens: appearances => selectInputTokens({
-        searchTokens: getThemeTokens(appearances),
+      tokens: pressableStates => selectInputTokens({
+        searchTokens: selectBorderTokens(getThemeTokens(pressableStates)),
         buttonTokens,
         buttonsGapSize,
         isEmpty
@@ -155,16 +178,17 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
       accessibilityLabel: a11yLabelText,
+      direction: searchIconPosition,
       buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
         onPress: handleClear,
-        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
+        tokens: pressableStates => modifyButtonTokens(selectButtonTokens(getButtonTokens(pressableStates))),
         children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, {
           ...selectIconTokens(getButtonTokens(buttonState))
         })
-      }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
+      }, "clear"), SubmitButtonIcon && (searchIconPosition === 'right' ? /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
@@ -180,7 +204,14 @@ const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             priority: 'high'
           }))
         })
-      }, "submit")]
+      }, "submit-right") : /*#__PURE__*/_jsx(Icon, {
+        icon: SubmitButtonIcon,
+        testID: "iconLeft",
+        tokens: {
+          color: themeTokens.iconLeftColor,
+          size: themeTokens.iconLeftSize
+        }
+      }, "submitIcon"))]
     })
   });
 });

package/lib/Select/Picker.native.js

@@ -5,7 +5,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import NativePicker from 'react-native-picker-select';
 import { a11yProps, componentPropType } from '../utils';
 import Group from './Group';
-import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants';
+import { ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING, ALLOW_FONT_SCALING, ADJUSTS_FONT_SIZE_TO_FIT, MAX_FONT_SIZE_MULTIPLIER } from './constants';
 
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
@@ -34,8 +34,7 @@ const selectAndroidContainerStyles = _ref2 => {
     paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
     paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
     paddingBottom: ANDROID_DEFAULT_PADDING,
-    paddingTop: ANDROID_DEFAULT_PADDING,
-    height: rest.height + ANDROID_HEIGHT_OFFSET
+    paddingTop: ANDROID_DEFAULT_PADDING
   };
 };
 const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
@@ -94,7 +93,12 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       inputIOS: style,
       inputAndroid: selectAndroidInputStyles(style)
     },
-    placeholder: placeholder !== undefined ? placeholder : {}
+    placeholder: placeholder !== undefined ? placeholder : {},
+    textInputProps: {
+      allowFontScaling: ALLOW_FONT_SCALING,
+      adjustFontSizeToFit: ADJUSTS_FONT_SIZE_TO_FIT,
+      maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER
+    }
   });
   return /*#__PURE__*/_jsx(_Fragment, {
     children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {

package/lib/Select/constants.js

@@ -1,5 +1,7 @@
 // Because Android
 export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
-export const ANDROID_HEIGHT_OFFSET = 12;
 export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
-export const ANDROID_DEFAULT_PADDING = 0;
+export const ANDROID_DEFAULT_PADDING = 0;
+export const ALLOW_FONT_SCALING = true;
+export const ADJUSTS_FONT_SIZE_TO_FIT = true;
+export const MAX_FONT_SIZE_MULTIPLIER = 3;