@telus-uds/components-base 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -1,12 +1,46 @@
 # Change Log - @telus-uds/components-base
 
-<!-- This log was last generated on Fri, 06 Dec 2024 02:03:26 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 05:02:20 GMT
+
+### Minor changes
+
+- `Autocomplete`: Enable `tokens` prop to set custom styles for the `maxHeight` and `scroll` behavior. (jaime.tuyuc@telus.com)
+- `FileUpload`: add minFilesCount and minFileSize props (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v3.2.0
+
+### Patches
+
+- `Card`: Include additional `tokenKeys` to remove warnings. (jaime.tuyuc@telus.com)
+- `StepTracker`: elements must only use supported ARIA attributes (sergio.ramirez@telus.com)
+
 ## 2.2.0
 
-Fri, 06 Dec 2024 02:03:26 GMT
+Fri, 06 Dec 2024 02:06:03 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -6,7 +6,7 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import throttle from 'lodash.throttle';
 import matchAll from 'string.prototype.matchall';
-import { inputSupportsProps, selectSystemProps, textInputProps, textInputHandlerProps, useCopy, htmlAttrs, useOverlaidPosition, useSafeLayoutEffect } from '../utils';
+import { inputSupportsProps, selectSystemProps, textInputProps, textInputHandlerProps, useCopy, htmlAttrs, useOverlaidPosition, useSafeLayoutEffect, getTokensPropType } from '../utils';
 import { useThemeTokens } from '../ThemeProvider';
 import Listbox from '../Listbox';
 import Typography from '../Typography';
@@ -105,13 +105,16 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     value,
     helpText = '',
     loadingLabel,
+    tokens,
     ...rest
   } = _ref2;
   const {
-    color: resultsTextColor
-  } = useThemeTokens('Search', {}, {
+    color: resultsTextColor,
+    ...restOfTokens
+  } = useThemeTokens('Autocomplete', tokens, {
     focus: true
   });
+
   // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
   // but we also need to adjust suggestions based on the mode:
   // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
@@ -371,6 +374,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         minWidth: fullWidth ? inputWidth : MIN_LISTBOX_WIDTH,
         maxWidth: inputWidth,
         onLayout: handleMeasure,
+        tokens: restOfTokens,
         ref: openOverlayRef,
         children: isLoading ? /*#__PURE__*/_jsx(Loading, {
           label: loadingLabel ?? getCopy('loading')
@@ -423,6 +427,7 @@ Autocomplete.propTypes = {
    * </Autocomplete>
    */
   children: PropTypes.func,
+  tokens: getTokensPropType('Autocomplete'),
   /**
    * Copy language identifier
    */

package/lib/Card/CardBase.js

@@ -25,7 +25,9 @@ const selectStyles = _ref => {
     minWidth,
     shadow,
     backgroundGradient,
-    gradient
+    gradient,
+    maxHeight,
+    overflowY
   } = _ref;
   return {
     flex,
@@ -47,6 +49,10 @@ const selectStyles = _ref => {
     } : {}),
     ...(backgroundGradient && Platform.OS === 'web' ? {
       backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+    } : {}),
+    ...(Platform.OS === 'web' ? {
+      maxHeight,
+      overflowY
     } : {})
   };
 };

package/lib/Card/PressableCardBase.js

@@ -11,7 +11,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
 const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
-'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
+'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'icon', 'iconBackgroundColor', 'iconColor', 'iconSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderRadius', 'inputBorderWidth', 'inputHeight', 'inputShadow', 'inputWidth'];
 export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
 
 /**

package/lib/FileUpload/FileUpload.js

@@ -73,6 +73,8 @@ const selectComponentTokens = (tokens, componentIdentifier) => {
  * @param {boolean} props.allowMultipleFiles - Whether multiple files can be uploaded.
  * @param {number} props.maxFileSize - The maximum file size in megabytes.
  * @param {number} props.maxFilesCount - The maximum number of files that can be uploaded.
+ * @param {number} props.minFilesCount - The minimum number of files that can be uploaded.
+ * @param {number} props.minFileSize - The minimum file size in megabytes.
  * @param {Function} props.onUpload - The callback function for file upload.
  * @param {Function} props.onDelete - The callback function for file deletion.
  * @param {Object} props.documentPicker - The document picker object.
@@ -88,11 +90,16 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     allowMultipleFiles = false,
     maxFileSize,
     maxFilesCount = 1,
+    minFilesCount = 1,
+    minFileSize = 0,
     onUpload,
     onDelete,
     documentPicker,
     ...rest
   } = _ref2;
+  if (minFilesCount <= 0) {
+    throw new Error('minFilesCount should be greater than 0');
+  }
   const themeTokens = useThemeTokens('FileUpload', tokens, variant);
   const getCopy = useCopy({
     dictionary,
@@ -104,9 +111,12 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   React.useEffect(() => {
     setRenderTrigger(prev => prev + 1);
   }, [filesStatus]);
-  const areFileTypesExtensionsValid = files => files.some(file => {
-    const fileExtension = file.name.split('.').pop().toLowerCase();
-    if (!fileTypes.includes(fileExtension)) {
+  const areFileTypesExtensionsValid = files => {
+    const invalidFiles = files.filter(file => {
+      const fileExtension = file.name.split('.').pop().toLowerCase();
+      return !fileTypes.includes(fileExtension);
+    });
+    if (invalidFiles.length > 0) {
       setFilesStatus([{
         description: getCopy('wrongFileType').replace('%{fileType}', stringifyFileTypesList(fileTypes, getCopy)),
         style: 'error'
@@ -114,26 +124,46 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       return false;
     }
     return true;
-  });
-  const areFileSizesWithinLimit = files => files.some(file => {
-    if (file.size > convertFromMegaByteToByte(maxFileSize)) {
+  };
+  const areFileSizesWithinLimit = files => {
+    const invalidFiles = files.filter(file => {
+      const fileSize = file.size;
+      return fileSize < convertFromMegaByteToByte(minFileSize) || fileSize > convertFromMegaByteToByte(maxFileSize);
+    });
+    if (invalidFiles.length > 0) {
+      const invalidFile = invalidFiles[0];
+      const fileSize = invalidFile.size;
+      if (fileSize < convertFromMegaByteToByte(minFileSize)) {
+        setFilesStatus([{
+          description: getCopy('fileTooSmall').replace('%{size}', minFileSize),
+          style: 'error'
+        }]);
+      } else {
+        setFilesStatus([{
+          description: getCopy('fileTooBig').replace('%{size}', maxFileSize),
+          style: 'error'
+        }]);
+      }
+      return false;
+    }
+    return true;
+  };
+  const areFilesCountWithinLimit = files => {
+    if (maxFilesCount && files.length > maxFilesCount) {
       setFilesStatus([{
-        description: getCopy('fileTooBig').replace('%{size}', maxFileSize),
+        description: getCopy('tooManyFiles').replace('%{maxFilesCount}', maxFilesCount),
         style: 'error'
       }]);
       return false;
     }
-    return true;
-  });
-  const areMoreFilesUploadedThanAllowed = files => {
-    if (files.length > maxFilesCount) {
+    if (minFilesCount && files.length < minFilesCount) {
       setFilesStatus([{
-        description: getCopy('tooManyFiles').replace('%{maxFilesCount}', maxFilesCount),
+        description: getCopy('fewFiles').replace('%{minFilesCount}', minFilesCount),
         style: 'error'
       }]);
-      return true;
+      return false;
     }
-    return false;
+    return true;
   };
   const handleFilesUpload = async files => {
     try {
@@ -169,11 +199,8 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }
   };
   const handleFileDeletion = async file => {
-    const copyFile = {
-      ...file
-    };
     try {
-      const result = await onDelete(copyFile);
+      const result = await onDelete(file);
       setFilesStatus(prevStatus => {
         const filteredFilesStatus = prevStatus.filter(f => f.file && f.file.name !== file.name);
         return result.error ? [...filteredFilesStatus, {
@@ -212,7 +239,7 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     if (files.length === 0) return;
     if (fileTypes && !areFileTypesExtensionsValid(files)) return;
     if (maxFileSize && !areFileSizesWithinLimit(files)) return;
-    if (maxFilesCount && areMoreFilesUploadedThanAllowed(files)) return;
+    if ((maxFilesCount || minFilesCount) && !areFilesCountWithinLimit(files)) return;
     await handleFilesUpload(files);
     if (inputFileRef.current) inputFileRef.current.value = '';
   };
@@ -225,8 +252,8 @@ const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           multiple: allowMultipleFiles
         });
         if (result) {
-          const files = Array.isArray(result) ? result : [result];
-          if (files.find(file => file.type === 'cancel')) return;
+          if (result.canceled) return;
+          const files = Array.isArray(result.assets) ? result.assets : [result.assets];
           const event = {
             target: {
               files
@@ -323,6 +350,14 @@ FileUpload.propTypes = {
   /**
    * The document picker to use for mobile
    */
-  documentPicker: PropTypes.object
+  documentPicker: PropTypes.object,
+  /**
+   * The minimum number of files allowed for upload.
+   */
+  minFilesCount: PropTypes.number,
+  /**
+   * The minimum file size allowed for upload in MB.
+   */
+  minFileSize: PropTypes.number
 };
 export default FileUpload;

package/lib/FileUpload/dictionary.js

@@ -16,7 +16,9 @@ export default {
     uploadSuccess: 'uploaded successfully.',
     uploadError: 'was not uploaded due to',
     deleteProblem: 'was not deleted due to',
-    tooManyFiles: 'You can only select up to %{maxFilesCount} files at the same time.'
+    tooManyFiles: 'You can only select up to %{maxFilesCount} files at the same time.',
+    fileTooSmall: 'The selected file must be at least %{size}MB.',
+    fewFiles: 'You must select at least %{minFilesCount} files.'
   },
   fr: {
     label: 'Téléverser les fichiers"',
@@ -35,6 +37,8 @@ export default {
     uploadSuccess: 'téléchargé avec succès.',
     uploadError: `n'a pas été téléchargé en raison de`,
     deleteProblem: `n'a pas été supprimé en raison de`,
-    tooManyFiles: `Vous ne pouvez sélectionner que jusqu'à %{maxFilesCount} fichiers en même temps.`
+    tooManyFiles: `Vous ne pouvez sélectionner que jusqu'à %{maxFilesCount} fichiers en même temps.`,
+    fileTooSmall: `Le fichier sélectionné doit faire au moins %{size}Mo.`,
+    fewFiles: `Vous devez sélectionner au moins %{minFilesCount} fichiers.`
   }
 };

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/Listbox/ListboxOverlay.js

@@ -29,7 +29,8 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     overlaidPosition,
     maxWidth,
     minWidth,
-    onLayout
+    onLayout,
+    tokens
   } = _ref;
   const systemTokens = useThemeTokens('Listbox', {}, {});
   return /*#__PURE__*/_jsx(View, {
@@ -45,7 +46,8 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
         paddingLeft: paddingHorizontal,
-        paddingRight: paddingHorizontal
+        paddingRight: paddingHorizontal,
+        ...tokens
       },
       children: children
     })
@@ -72,6 +74,7 @@ DropdownOverlay.propTypes = {
   }),
   maxWidth: PropTypes.number,
   minWidth: PropTypes.number,
-  onLayout: PropTypes.func
+  onLayout: PropTypes.func,
+  tokens: PropTypes.object
 };
 export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

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) {