Merge ad7ee2c into 50172d5

src/components/CheckMarkCard/CheckMarkCard.css.js

@@ -1,6 +1,6 @@
 import { d400, d400Effect } from '../../styles/mixins/depth.css'
 
-import Avatar from '../Avatar'
+import Avatar from '../Avatar/Avatar'
 import ChoiceGroup from '../ChoiceGroup'
 
 import { getColor } from '../../styles/utilities/color'

src/components/CheckMarkCard/CheckMarkCard.test.js

@@ -82,47 +82,47 @@ describe('Checked', () => {
 })
 
 describe('with status', () => {
-  const withStatus = {
+  const statusProps = {
     status: 'locked',
     iconName: 'lock-closed',
     iconSize: '20',
-    color: 'lavender',
+    markColor: 'lavender',
   }
   test('Applies withStatus styles', () => {
-    const wrapper = mount(<CheckMarkCard withStatus={withStatus} />)
+    const wrapper = mount(<CheckMarkCard {...statusProps} />)
 
     expect(wrapper.getDOMNode().classList.contains('with-status')).toBeTruthy()
     expect(wrapper.getDOMNode().classList.contains('is-lavender')).toBeTruthy()
     expect(
-      wrapper.getDOMNode().classList.contains(`is-${withStatus.status}`)
+      wrapper.getDOMNode().classList.contains(`is-${statusProps.status}`)
     ).toBeTruthy()
     expect(wrapper.find(Icon).first().props().name).toBe('lock-closed')
     expect(wrapper.find(Tooltip).length).toBeFalsy()
 
-    wrapper.setProps({ withStatus: undefined })
+    wrapper.setProps({ status: undefined, markColor: undefined })
 
     expect(wrapper.getDOMNode().classList.contains('with-status')).toBeFalsy()
   })
 
   test('the input should be disabled', () => {
-    const wrapper = mount(<CheckMarkCard withStatus={withStatus} />)
+    const wrapper = mount(<CheckMarkCard {...statusProps} />)
 
     expect(wrapper.find(Checkbox).first().props().disabled).toBeTruthy()
   })
 
   test('adds tooltip to mark if provided', () => {
-    withStatus.tooltipText = 'hello'
-    const wrapper = mount(<CheckMarkCard withStatus={withStatus} />)
+    statusProps.tooltipText = 'hello'
+    const wrapper = mount(<CheckMarkCard {...statusProps} />)
 
     expect(wrapper.find(Tooltip).length).toBeTruthy()
     expect(wrapper.find(Tooltip).first().props().title).toBe('hello')
   })
 
   test('with status styles take precedent over checked', () => {
-    const wrapper = mount(<CheckMarkCard withStatus={withStatus} checked />)
+    const wrapper = mount(<CheckMarkCard {...statusProps} checked />)
 
     expect(
-      wrapper.getDOMNode().classList.contains(`is-${withStatus.status}`)
+      wrapper.getDOMNode().classList.contains(`is-${statusProps.status}`)
     ).toBeTruthy()
     expect(wrapper.getDOMNode().classList.contains('is-checked')).toBeFalsy()
     expect(wrapper.find(Icon).first().props().name).toBe('lock-closed')

src/components/DropList/DropList.downshift.common.js

@@ -74,12 +74,12 @@ export function stateReducerCommon({
 
     case `${COMBOBOX}.${useCombobox.stateChangeTypes.InputKeyDownArrowUp}`:
     case `${SELECT}.${useSelect.stateChangeTypes.MenuKeyDownArrowUp}`: {
-      const { highlightedIndex } = changes
+      const { highlightedIndex: nextHighlightedIndex } = changes
 
       return {
         ...changes,
         highlightedIndex: getEnabledItemIndex({
-          highlightedIndex,
+          nextHighlightedIndex,
           items,
           arrowKey: 'UP',
         }),
@@ -88,12 +88,14 @@ export function stateReducerCommon({
 
     case `${COMBOBOX}.${useCombobox.stateChangeTypes.InputKeyDownArrowDown}`:
     case `${SELECT}.${useSelect.stateChangeTypes.MenuKeyDownArrowDown}`: {
-      const { highlightedIndex } = changes
+      const { highlightedIndex: currentHighlightedIndex } = state
+      const { highlightedIndex: nextHighlightedIndex } = changes
 
       return {
         ...changes,
         highlightedIndex: getEnabledItemIndex({
-          highlightedIndex,
+          nextHighlightedIndex,
+          currentHighlightedIndex,
           items,
           arrowKey: 'DOWN',
         }),

src/components/DropList/DropList.test.js

@@ -1,9 +1,10 @@
 import React from 'react'
-import { getByLabelText, render, waitFor } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import user from '@testing-library/user-event'
 import { css } from 'styled-components'
 import DropList from './DropList'
 import { SimpleButton, SelectTag, SplittedButton } from './DropList.togglers'
+import { flattenListItems, getEnabledItemIndex } from './DropList.utils'
 import {
   itemsWithDivider,
   groupAndDividerItems,
@@ -1278,3 +1279,104 @@ describe('Selection', () => {
     })
   })
 })
+
+describe('getEnabledItemIndex', () => {
+  test('Regular Items', () => {
+    expect(
+      getEnabledItemIndex({
+        currentHighlightedIndex: -1,
+        nextHighlightedIndex: 0,
+        items: someItems,
+        arrowKey: 'DOWN',
+      })
+    ).toBe(0)
+    expect(
+      getEnabledItemIndex({
+        currentHighlightedIndex: 0,
+        nextHighlightedIndex: 1,
+        items: someItems,
+        arrowKey: 'DOWN',
+      })
+    ).toBe(1)
+    expect(
+      getEnabledItemIndex({
+        currentHighlightedIndex: 6,
+        nextHighlightedIndex: 6,
+        items: someItems,
+        arrowKey: 'DOWN',
+      })
+    ).toBe(0)
+    expect(
+      getEnabledItemIndex({
+        nextHighlightedIndex: 1,
+        items: someItems,
+        arrowKey: 'UP',
+      })
+    ).toBe(1)
+    expect(
+      getEnabledItemIndex({
+        nextHighlightedIndex: 0,
+        items: someItems,
+        arrowKey: 'UP',
+      })
+    ).toBe(6)
+  })
+
+  test('Grouped and divider Items', () => {
+    const items = flattenListItems(groupAndDividerItems)
+
+    expect(
+      getEnabledItemIndex({
+        currentHighlightedIndex: -1,
+        nextHighlightedIndex: 0,
+        items,
+        arrowKey: 'DOWN',
+      })
+    ).toBe(1)
+    expect(
+      getEnabledItemIndex({
+        currentHighlightedIndex: 2,
+        nextHighlightedIndex: 3,
+        items,
+        arrowKey: 'DOWN',
+      })
+    ).toBe(3)
+    expect(
+      getEnabledItemIndex({
+        currentHighlightedIndex: 6,
+        nextHighlightedIndex: 7,
+        items,
+        arrowKey: 'DOWN',
+      })
+    ).toBe(9)
+    expect(
+      getEnabledItemIndex({
+        currentHighlightedIndex: 13,
+        nextHighlightedIndex: 13,
+        items,
+        arrowKey: 'DOWN',
+      })
+    ).toBe(1)
+    expect(
+      getEnabledItemIndex({
+        nextHighlightedIndex: 8,
+        items,
+        arrowKey: 'UP',
+      })
+    ).toBe(6)
+    expect(
+      getEnabledItemIndex({
+        nextHighlightedIndex: 7,
+        items,
+        arrowKey: 'UP',
+      })
+    ).toBe(6)
+    expect(
+      getEnabledItemIndex({
+        nextHighlightedIndex: 0,
+        items,
+        arrowKey: 'UP',
+      })
+    ).toBe(13)
+  })
+})

src/components/DropList/DropList.utils.js

@@ -189,14 +189,26 @@ export function requiredItemPropsCheck(props, propName, componentName) {
   }
 }
 
-export function getEnabledItemIndex({ highlightedIndex, items, arrowKey }) {
+function checkIfGroupOrDividerItem(item) {
+  return isItemADivider(item) || isItemAGroup(item) || isItemAGroupLabel(item)
+}
+
+export function getEnabledItemIndex({
+  currentHighlightedIndex,
+  nextHighlightedIndex,
+  items,
+  arrowKey,
+}) {
   let enabledItemIndex = 0
 
   if (arrowKey === 'UP') {
     for (let index = items.length - 1; index >= 0; index--) {
+      const isGroupOrDividerItem = checkIfGroupOrDividerItem(items[index])
+
       if (
-        (highlightedIndex === 0 && !items[index].isDisabled) ||
-        (index <= highlightedIndex && !items[index].isDisabled)
+        !isGroupOrDividerItem &&
+        !items[index].isDisabled &&
+        (nextHighlightedIndex === 0 || index <= nextHighlightedIndex)
       ) {
         enabledItemIndex = index
         break
@@ -205,10 +217,22 @@ export function getEnabledItemIndex({ highlightedIndex, items, arrowKey }) {
   }
 
   if (arrowKey === 'DOWN') {
+    if (currentHighlightedIndex === nextHighlightedIndex) {
+      return getEnabledItemIndex({
+        currentHighlightedIndex,
+        nextHighlightedIndex: 0,
+        items,
+        arrowKey,
+      })
+    }
+
     for (let index = 0; index < items.length; index++) {
+      const isGroupOrDividerItem = checkIfGroupOrDividerItem(items[index])
+
       if (
-        (highlightedIndex === items.length - 1 && !items[index].isDisabled) ||
-        (index >= highlightedIndex && !items[index].isDisabled)
+        !isGroupOrDividerItem &&
+        !items[index].isDisabled &&
+        index >= nextHighlightedIndex
       ) {
         enabledItemIndex = index
         break