@telus-uds/components-base 2.3.0 → 2.4.0

package/lib/TextInput/TextArea.js

@@ -61,10 +61,6 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = selectProps(rest);
   const inputProps = {
     ...selectedProps,
-    variant: {
-      ...variant,
-      validation: supportsProps.validation
-    },
     multiline: true,
     onContentSizeChange: onHeightChange,
     height: inputHeight,
@@ -72,6 +68,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
+    inputValue: selectedProps === null || selectedProps === void 0 ? void 0 : selectedProps.value,
     children: _ref3 => {
       let {
         inputId,
@@ -79,9 +76,13 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       } = _ref3;
       return /*#__PURE__*/_jsx(TextInputBase, {
         ref: ref,
-        ...inputProps,
         nativeID: inputId,
-        ...props
+        ...props,
+        ...inputProps,
+        variant: {
+          ...variant,
+          validation: props.validation
+        }
       });
     }
   });

package/lib/TextInput/TextInput.js

@@ -38,16 +38,13 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = selectProps(rest);
   const inputProps = {
     ...selectedProps,
-    tokens,
-    variant: {
-      ...variant,
-      validation: supportsProps.validation
-    }
+    tokens
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(InputSupports, {
       nativeID: nativeID,
       ...supportsProps,
+      inputValue: selectedProps === null || selectedProps === void 0 ? void 0 : selectedProps.value,
       children: _ref2 => {
         let {
           inputId,
@@ -57,7 +54,11 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           ref: ref,
           nativeID: inputId,
           ...propsFromInputSupports,
-          ...inputProps
+          ...inputProps,
+          variant: {
+            ...variant,
+            validation: propsFromInputSupports.validation
+          }
         });
       }
     }), rest.children]

package/lib/TextInput/TextInputBase.js

@@ -37,6 +37,9 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
   let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
   let isPassword = arguments.length > 7 ? arguments[7] : undefined;
+  let iconLeftWidth = arguments.length > 8 ? arguments[8] : undefined;
+  let iconLeftGap = arguments.length > 9 ? arguments[9] : undefined;
+  let direction = arguments.length > 10 ? arguments[10] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -63,6 +66,15 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
       resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
     }
   });
+  const getPaddingLeft = () => {
+    if (type === 'card') {
+      return offsetBorder(paddingLeft + 34);
+    }
+    if (direction === 'left') {
+      return offsetBorder(iconLeftWidth + iconLeftGap + staticStyles.iconLeftContainer.paddingLeft);
+    }
+    return offsetBorder(paddingLeft);
+  };
   const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
   const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
   const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
@@ -73,7 +85,7 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
+    paddingLeft: getPaddingLeft(),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -123,20 +135,26 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
     paddingBottom
   };
 };
-const selectLeftIconContainerStyles = _ref5 => {
+const selectIconCardLeftContainerStyles = _ref5 => {
   let {
     leftIconPaddingBottom
   } = _ref5;
   return {
-    // not tokenizing paddingLeft as it remains same across brands for now
-    paddingLeft: 10,
     paddingBottom: leftIconPaddingBottom
   };
 };
-const selectButtonsContainerStyle = _ref6 => {
+const selectIconLeftContainerStyles = _ref6 => {
   let {
-    buttonsPaddingRight
+    iconLeftPaddingBottom
   } = _ref6;
+  return {
+    paddingBottom: iconLeftPaddingBottom
+  };
+};
+const selectButtonsContainerStyle = _ref7 => {
+  let {
+    buttonsPaddingRight
+  } = _ref7;
   return {
     paddingRight: buttonsPaddingRight
   };
@@ -180,7 +198,7 @@ const getIcon = function () {
     testID: selectedIcon.testID
   });
 };
-const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -201,8 +219,9 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     variant = {},
     type,
     onKeyPress,
+    direction,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const [isFocused, setIsFocused] = React.useState(false);
   const [showPassword, setShowPassword] = React.useState(false);
   const handleFocus = event => {
@@ -288,14 +307,16 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     defaultCreditIcon,
     amexIcon,
     visaIcon,
-    masterCardIcon
+    masterCardIcon,
+    iconLeftGap
   } = themeTokens;
   const buttonsGapSize = useSpacingScale(buttonsGap);
   const getCopy = useCopy({
     dictionary,
     copy
   });
-  const textInputButtons = buttons;
+  const textInputButtons = direction === 'left' ? buttons.filter(button => button && button.key !== 'submitIcon') : buttons;
+  const submitIcon = direction === 'left' ? buttons.find(button => button && button.key === 'submitIcon') : null;
   if (onClear && isDirty) {
     textInputButtons === null || textInputButtons === void 0 || textInputButtons.unshift(/*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
@@ -339,15 +360,20 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const iconLeftWidth = submitIcon ? submitIcon.props.tokens.size ?? 0 : 0;
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword, iconLeftWidth, iconLeftGap, direction);
+  const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive;
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [type === 'card' && /*#__PURE__*/_jsx(View, {
+    children: [shouldShowSubmitIcon && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.iconLeftContainer, selectIconLeftContainerStyles(themeTokens)],
+      children: submitIcon
+    }), type === 'card' && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
-      style: [staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)],
+      style: [staticStyles.iconCardLeftContainer, selectIconCardLeftContainerStyles(themeTokens)],
       children: getIcon(currentValue, {
         defaultCreditIcon,
         amexIcon,
@@ -425,7 +451,15 @@ const staticStyles = StyleSheet.create({
     right: 0,
     bottom: 0
   },
-  leftIconContainer: {
+  iconCardLeftContainer: {
+    paddingLeft: 10,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  iconLeftContainer: {
+    paddingLeft: 10,
     position: 'absolute',
     left: 0,
     bottom: 0,

package/lib/utils/props/inputSupportsProps.js

@@ -37,7 +37,15 @@ export default {
     /**
      * Use to visually mark an input as valid or invalid.
      */
-    validation: PropTypes.oneOf(['error', 'success'])
+    validation: PropTypes.oneOf(['error', 'success']),
+    /**
+     * The text value from an input field.
+     */
+    inputValue: PropTypes.string,
+    /**
+     * Max number of characters allowed id an input text.
+     */
+    maxCharacterAllowed: PropTypes.number
   },
   select: _ref => {
     let {
@@ -49,7 +57,9 @@ export default {
       feedbackTokens,
       feedbackProps,
       tooltip,
-      validation
+      validation,
+      inputValue,
+      maxCharacterAllowed
     } = _ref;
     return {
       supportsProps: {
@@ -61,7 +71,9 @@ export default {
         feedbackTokens,
         feedbackProps,
         tooltip,
-        validation
+        validation,
+        inputValue,
+        maxCharacterAllowed
       }
     };
   }

package/package.json

@@ -13,7 +13,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^2.0.0",
-    "@telus-uds/system-theme-tokens": "^3.2.0",
+    "@telus-uds/system-theme-tokens": "^3.3.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "2.3.0",
+  "version": "2.4.0",
   "types": "types/index.d.ts"
 }

package/src/InputLabel/InputLabel.jsx

@@ -47,6 +47,8 @@ const InputLabel = React.forwardRef(
       tooltip,
       tokens,
       variant,
+      characterCount,
+      maxCharacterAllowed,
       ...rest
     },
     ref
@@ -95,12 +97,30 @@ const InputLabel = React.forwardRef(
               <Tooltip content={tooltip} copy={copy} />
             </View>
           )}
+          {maxCharacterAllowed && isHintInline && (
+            <Text style={[selectHintStyles({ ...themeTokens }), staticStyles.characterCountlabel]}>
+              {characterCount}/{maxCharacterAllowed}
+            </Text>
+          )}
         </View>
-        {hint && !isHintInline && (
+        {hint && !maxCharacterAllowed && !isHintInline && (
           <Text style={[selectHintStyles(themeTokens), staticStyles.hintBelow]} nativeID={hintId}>
             {hint}
           </Text>
         )}
+        {hint && maxCharacterAllowed && !isHintInline && (
+          <View style={staticStyles.container}>
+            <Text
+              style={[selectHintStyles(themeTokens), staticStyles.flexHintBelow]}
+              nativeID={hintId}
+            >
+              {hint}
+            </Text>
+            <Text style={[selectHintStyles(themeTokens), staticStyles.characterCountlabel]}>
+              {characterCount}/{maxCharacterAllowed}
+            </Text>
+          </View>
+        )}
       </>
     )
   }
@@ -137,6 +157,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
 }
@@ -148,13 +176,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/src/InputSupports/InputSupports.jsx

@@ -6,7 +6,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'
 
 const InputSupports = React.forwardRef(
   (
@@ -21,18 +22,31 @@ const InputSupports = React.forwardRef(
       feedbackProps = {},
       tooltip,
       validation,
+      maxCharacterAllowed,
+      inputValue,
       nativeID
     },
     ref
   ) => {
     const { space } = useThemeTokens('InputSupports')
+    const getCopy = useCopy({ dictionary, copy })
+
+    const maxCharsReachedErrorMessage =
+      inputValue?.length > maxCharacterAllowed
+        ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed)
+        : ''
+
+    const feedbackValidation = inputValue?.length > maxCharacterAllowed ? 'error' : validation
 
     const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
       feedback,
       hint,
       label,
       validation,
-      nativeID
+      nativeID,
+      copy,
+      maxCharacterAllowed,
+      charactersCount: maxCharacterAllowed - inputValue?.length
     })
 
     return (
@@ -46,14 +60,18 @@ const InputSupports = React.forwardRef(
             hintId={hintId}
             tooltip={tooltip}
             forId={inputId}
+            characterCount={inputValue?.length}
+            maxCharacterAllowed={maxCharacterAllowed}
           />
         )}
-        {typeof children === 'function' ? children({ inputId, ...a11yProps }) : children}
-        {feedback ? (
+        {typeof children === 'function'
+          ? children({ inputId, ...a11yProps, validation: feedbackValidation })
+          : children}
+        {feedback || maxCharsReachedErrorMessage ? (
           <Feedback
             id={feedbackId}
-            title={feedback}
-            validation={validation}
+            title={feedback || maxCharsReachedErrorMessage}
+            validation={feedbackValidation}
             tokens={feedbackTokens}
             variant={{ icon: feedbackProps.showFeedbackIcon }}
             {...feedbackProps}
@@ -107,7 +125,15 @@ 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/src/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/src/InputSupports/useInputSupports.js

@@ -1,8 +1,20 @@
 import useUniqueId from '../utils/useUniqueId'
+import { useCopy } from '../utils'
+import dictionary from './dictionary'
 
 const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
 
-const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
+const useInputSupports = ({
+  label,
+  feedback,
+  validation,
+  hint,
+  nativeID,
+  copy,
+  maxCharacterAllowed,
+  charactersCount
+}) => {
+  const getCopy = useCopy({ dictionary, copy })
   const hasValidationError = validation === 'error'
 
   const inputId = useUniqueId('input')
@@ -11,10 +23,19 @@ const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
 
   const a11yProps = {
     accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]), // native only -> replaced with describedBy on web
+    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
   }

package/src/Link/LinkBase.jsx

@@ -32,21 +32,15 @@ const selectOuterBorderStyles = ({
   outerBorderGap,
   borderRadius,
   outerBorderOutline
-}) =>
-  // 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
-      }
-    : {}
+}) => ({
+  outline: outerBorderOutline,
+  ...applyOuterBorder({
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap
+  }),
+  borderRadius
+})
 
 const selectTextStyles = ({ color, blockFontSize }) => {
   return {
@@ -174,6 +168,7 @@ const LinkBase = React.forwardRef(
           const decorationStyles = selectDecorationStyles(themeTokens)
           return [
             outerBorderStyles,
+            staticStyles.outerBorderStyles,
             blockLeftStyle,
             decorationStyles,
             hasIcon && staticStyles.rowContainer
@@ -273,6 +268,13 @@ const staticStyles = StyleSheet.create({
         pointerEvents: 'none'
       }
     })
+  },
+  outerBorderStyles: {
+    ...(Platform.OS !== 'web' && {
+      margin: 0,
+      marginHorizontal: 2,
+      padding: 0
+    })
   }
 })
 

package/src/Modal/Modal.jsx

@@ -149,7 +149,7 @@ const Modal = React.forwardRef(
       a[href], button, textarea, input, select, 
       [tabindex]:not([tabindex="-1"]),
       [contenteditable="true"]
-    `)
+    `) || []
           )
 
           const firstElement = focusableElements[0]

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -30,14 +30,6 @@ import ModalOverlay from './ModalOverlay'
 
 const { Col, Row } = FlexGrid
 
-const selectSubTitleTokens = ({ subtitleColor }) => ({
-  color: subtitleColor
-})
-
-const selectDividerTokens = ({ dividerColor }) => ({
-  color: dividerColor
-})
-
 const selectHeaderTokens = ({
   contentMarginLeft,
   contentMarginRight,
@@ -113,23 +105,6 @@ const MultiSelectFilter = React.forwardRef(
     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,
@@ -143,6 +118,20 @@ const MultiSelectFilter = React.forwardRef(
       subHeaderLineHeight,
       minHeight,
       minWidth,
+      labelFontName,
+      labelFontSize,
+      labelFontWeight,
+      labelColor,
+      labelLineHeight,
+      labelPaddingTop,
+      labelPaddingBottom,
+      labelPaddingLeft,
+      labelPaddingRight,
+      buttonBorderColor,
+      buttonIconSize,
+      buttonIconPadding,
+      subtitleColor,
+      dividerColor,
       ...restTokens
     } = useThemeTokens(
       'MultiSelectFilter',
@@ -150,6 +139,40 @@ const MultiSelectFilter = React.forwardRef(
       { ...variant, maxHeight, maxWidth },
       { 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)) {
@@ -199,7 +222,7 @@ const MultiSelectFilter = React.forwardRef(
     const subeHeaderStyles = applyTextStyles({
       fontSize: subHeaderFontSize,
       fontWeight: subHeaderFontWeight,
-      fontColor: selectSubTitleTokens(themeTokens)
+      fontColor: subtitleColor
     })
 
     const { overlaidPosition, onTargetLayout, isReady, sourceRef } = useOverlaidPosition({
@@ -275,7 +298,12 @@ const MultiSelectFilter = React.forwardRef(
     const controlsContent = (
       <>
         {isScrolling ? (
-          <Divider tokens={selectDividerTokens(themeTokens)} space={4} />
+          <Divider
+            tokens={{
+              color: dividerColor
+            }}
+            space={4}
+          />
         ) : (
           <Spacer space={4} />
         )}