@telus-uds/components-base 3.3.0 → 3.5.0

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -104,6 +104,7 @@ const MultiSelectFilter = React.forwardRef(
     const [isOpen, setIsOpen] = React.useState(false)
     const [checkedIds, setCheckedIds] = React.useState(currentValues ?? [])
     const [maxWidth, setMaxWidth] = React.useState(false)
+    const isSelected = currentValues.length > 0
 
     const {
       headerFontColor,
@@ -137,7 +138,7 @@ const MultiSelectFilter = React.forwardRef(
     } = useThemeTokens(
       'MultiSelectFilter',
       tokens,
-      { ...variant, maxHeight, maxWidth },
+      { ...variant, maxHeight, maxWidth, selected: isSelected },
       { viewport }
     )
     const dropdownTokens = {
@@ -166,7 +167,6 @@ const MultiSelectFilter = React.forwardRef(
     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(() => {

package/src/utils/containUniqueFields.js

@@ -4,12 +4,12 @@
 // Note that if a value of a field in an item is not set, it will be
 // excluded from comparison.
 const containUniqueFields = (items, fields) => {
-  const map = []
+  const map = new Map()
 
   const itemsHaveDuplicateFields = items.some((item) =>
     fields.some((field) => {
-      if (!map[field]) {
-        map[field] = []
+      if (!map.has(field)) {
+        map.set(field, new Map())
       }
 
       if (!item[field]) {
@@ -18,9 +18,9 @@ const containUniqueFields = (items, fields) => {
       }
 
       // Duplicate found!
-      if (map[field][item[field]]) return true
+      if (map.get(field).has(item[field])) return true
 
-      map[field][item[field]] = true
+      map.get(field).set(item[field], true)
 
       return false
     })

package/src/utils/useUniqueId.js

@@ -1,14 +1,9 @@
-import { useState } from 'react'
-
-let id = 0
+import { useId } from 'react'
 
 function useUniqueId(prefix = '') {
-  const [uniqueId] = useState(() => {
-    id += 1
-    return `${prefix}-${id}`
-  })
+  const id = useId()
 
-  return uniqueId
+  return `${prefix ? `${prefix}-` : ''}${id}`
 }
 
 export default useUniqueId