feat(Dropdown): arrow navigation between selected items

CHANGELOG.md

@@ -52,6 +52,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `hasMention`, `isImportant`, `hasMentionColor` and `isImportantColor` in ChatMessage variables in Teams theme @mnajdova ([#841](https://github.com/stardust-ui/react/pull/841))
 - Add `actionMenu` prop to `ChatMessage` component @layershifter ([#811](https://github.com/stardust-ui/react/pull/811))
 - Add `rtl` field in the `SvgIconFuncArg`, and used it in Teams theme's number-list icon ([#851](https://github.com/stardust-ui/react/pull/851))
+- Add keyboard navigation between selected items in `Dropdown` multiple version @silviuavram ([#842](https://github.com/stardust-ui/react/pull/842))
 
 ### Fixes
 - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))

docs/src/examples/components/Dropdown/Types/DropdownExampleSearch.shorthand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Dropdown, Header } from '@stardust-ui/react'
+import { Dropdown } from '@stardust-ui/react'
 
 const inputItems = [
   'Bruce Wayne',
@@ -15,21 +15,12 @@ const inputItems = [
 
 const DropdownExampleSearch = () => (
   <>
-    <Header as="h3">Single Search:</Header>
     <Dropdown
       search
       items={inputItems}
       placeholder="Start typing a name"
       noResultsMessage="We couldn't find any matches."
     />
-    <Header as="h3">Multiple Search:</Header>
-    <Dropdown
-      search
-      multiple
-      items={inputItems}
-      placeholder="Start typing a name"
-      noResultsMessage="We couldn't find any matches."
-    />
   </>
 )
 

docs/src/examples/components/Dropdown/Types/DropdownExampleSearchMultiple.shorthand.steps.ts

@@ -0,0 +1,19 @@
+import { Dropdown, List, Indicator, Input, Label } from '../../../../../../packages/react/src'
+import * as Keys from 'screener-runner/src/keys'
+
+const steps = [
+  steps =>
+    steps
+      .click(`.${Dropdown.className} .${Indicator.className}`)
+      .click(`.${List.className} li:nth-child(2)`)
+      .click(`.${Dropdown.className} .${Indicator.className}`)
+      .click(`.${List.className} li:nth-child(2)`)
+      .keys(`.${Input.slotClassNames.input}`, Keys.leftArrow)
+      .snapshot('Selects last selected element'),
+  steps =>
+    steps
+      .hover(`.${Dropdown.slotClassNames.selectedItems} .${Label.className}:nth-child(1)`)
+      .snapshot('Hovers first selected element'),
+]
+
+export default steps

docs/src/examples/components/Dropdown/Types/DropdownExampleSearchMultiple.shorthand.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { Dropdown } from '@stardust-ui/react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+const DropdownExampleSearchMultiple = () => (
+  <Dropdown
+    search
+    multiple
+    items={inputItems}
+    placeholder="Start typing a name"
+    noResultsMessage="We couldn't find any matches."
+  />
+)
+
+export default DropdownExampleSearchMultiple

docs/src/examples/components/Dropdown/Types/index.tsx

@@ -5,20 +5,25 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 const Types = () => (
   <ExampleSection title="Types">
     <ComponentExample
-      title="Default"
+      title="Selection"
       description="A dropdown can be used to select between choices in a form."
       examplePath="components/Dropdown/Types/DropdownExample"
     />
     <ComponentExample
-      title="Multiple"
+      title="Multiple Selection"
       description="A dropdown can be used to select multiple items from a form."
       examplePath="components/Dropdown/Types/DropdownExampleMultiple"
     />
     <ComponentExample
-      title="Search"
+      title="Search Selection"
       description="A dropdown can be searchable."
       examplePath="components/Dropdown/Types/DropdownExampleSearch"
     />
+    <ComponentExample
+      title="Search Multiple Selection"
+      description="A dropdown can be searchable and allow a multiple selection."
+      examplePath="components/Dropdown/Types/DropdownExampleSearchMultiple"
+    />
     <ComponentExample
       title="Inline"
       description="A dropdown can be used inline with text."

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx → docs/src/examples/components/Dropdown/Variations/DropdownExampleSearchMultipleFluid.shorthand.tsx

@@ -13,7 +13,7 @@ const inputItems = [
   'Selina Kyle',
 ]
 
-const DropdownExampleMultipleSearchFluid = () => (
+const DropdownExampleSearchMultipleFluid = () => (
   <Dropdown
     multiple
     search
@@ -30,4 +30,4 @@ const getA11ySelectionMessage = {
   onRemove: item => `${item} has been removed.`,
 }
 
-export default DropdownExampleMultipleSearchFluid
+export default DropdownExampleSearchMultipleFluid

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFrenchLanguage.shorthand.tsx → docs/src/examples/components/Dropdown/Variations/DropdownExampleSearchMultipleFrenchLanguage.shorthand.tsx

@@ -19,7 +19,7 @@ const inputItems = [
   },
 }))
 
-const DropdownExampleMultipleSearchFrenchLanguage = () => (
+const DropdownExampleSearchMultipleFrenchLanguage = () => (
   <Dropdown
     multiple
     search
@@ -57,4 +57,4 @@ const getA11ySelectionMessage = {
   onRemove: item => `${item.header} a été éliminé.`,
 }
 
-export default DropdownExampleMultipleSearchFrenchLanguage
+export default DropdownExampleSearchMultipleFrenchLanguage

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx → docs/src/examples/components/Dropdown/Variations/DropdownExampleSearchMultipleImageAndContent.shorthand.tsx

@@ -49,7 +49,7 @@ const inputItems = [
   },
 ]
 
-const DropdownExampleMultipleSearchImageAndContent = () => (
+const DropdownExampleSearchMultipleImageAndContent = () => (
   <Dropdown
     multiple
     search
@@ -65,4 +65,4 @@ const getA11ySelectionMessage = {
   onRemove: item => `${item.header} has been removed.`,
 }
 
-export default DropdownExampleMultipleSearchImageAndContent
+export default DropdownExampleSearchMultipleImageAndContent

docs/src/examples/components/Dropdown/Variations/index.tsx

@@ -7,17 +7,17 @@ const Variations = () => (
     <ComponentExample
       title="Multiple Search with Image and Content"
       description="A multiple search dropdown which items have header, content and image."
-      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent"
+      examplePath="components/Dropdown/Variations/DropdownExampleSearchMultipleImageAndContent"
     />
     <ComponentExample
       title="Multiple Search Fluid"
       description="A multiple search dropdown that fits the width of the container."
-      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid"
+      examplePath="components/Dropdown/Variations/DropdownExampleSearchMultipleFluid"
     />
     <ComponentExample
       title="Multiple Search Using French Language"
       description="A multiple search dropdown that uses French to provide information and accessibility."
-      examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFrenchLanguage"
+      examplePath="components/Dropdown/Variations/DropdownExampleSearchMultipleFrenchLanguage"
     />
   </ExampleSection>
 )

package.json

@@ -151,7 +151,7 @@
     "request-promise-native": "^1.0.5",
     "rimraf": "^2.6.1",
     "satisfied": "^1.1.1",
-    "screener-runner": "^0.10.7",
+    "screener-runner": "^0.10.30",
     "semantic-ui-css": "^2.3.1",
     "semantic-ui-react": "^0.81.1",
     "simulant": "^0.2.2",