From 89a500e5236da0b0013646d494dae4ce5aaed02a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 19 Feb 2021 15:58:24 -0800
Subject: [PATCH] feat(multi-select): add direction prop

---
 COMPONENT_INDEX.md                        |  1 +
 docs/src/COMPONENT_API.json               | 10 ++++++++++
 docs/src/pages/components/MultiSelect.svx | 10 ++++++++++
 src/MultiSelect/MultiSelect.svelte        |  9 ++++++++-
 tests/MultiSelect.test.svelte             |  1 +
 types/MultiSelect/MultiSelect.d.ts        |  6 ++++++
 6 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 97627bb2..8b970752 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2156,6 +2156,7 @@ export interface MultiSelectItem {
 | itemToString      | <code>let</code> | No       | <code>(item: MultiSelectItem) => string</code>                                                 | <code>(item) => item.text &#124;&#124; item.id</code>                               | Override the display of a multiselect item                                            |
 | size              | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                                                      | --                                                                                  | Set the size of the combobox                                                          |
 | type              | <code>let</code> | No       | <code>"default" &#124; "inline"</code>                                                         | <code>"default"</code>                                                              | Specify the type of multiselect                                                       |
+| direction         | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                                                             | <code>"bottom"</code>                                                               | Specify the direction of the multiselect dropdown menu                                |
 | selectionFeedback | <code>let</code> | No       | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code>                                    | <code>"top-after-reopen"</code>                                                     | Specify the selection feedback after selecting items                                  |
 | disabled          | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to disable the dropdown                                                 |
 | filterable        | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to filter items                                                         |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index ea9ad857..34654213 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -5182,6 +5182,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "direction",
+          "kind": "let",
+          "description": "Specify the direction of the multiselect dropdown menu",
+          "type": "\"bottom\" | \"top\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "selectionFeedback",
           "kind": "let",
diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index 41daaa33..3ac22723 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@@ -51,6 +51,16 @@ Use the `itemToString` prop to format the display of individual items.
     sortItem="{() => {}}"
   />
 
+### Top direction
+
+Set `direction` to `"top"` for the dropdown menu to appear above the input.
+
+<MultiSelect direction="top" titleText="Contact" label="Select contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
 ### Light variant
 
 <MultiSelect light titleText="Contact" label="Select contact methods..."
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 65154034..1a85cf09 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -32,6 +32,12 @@
    */
   export let type = "default";
 
+  /**
+   * Specify the direction of the multiselect dropdown menu
+   * @type {"bottom" | "top"}
+   */
+  export let direction = "bottom";
+
   /**
    * Specify the selection feedback after selecting items
    * @type {"top" | "fixed" | "top-after-reopen"}
@@ -252,7 +258,8 @@
     size="{size}"
     warn="{warn}"
     warnText="{warnText}"
-    class="bx--multi-select {filterable && 'bx--combo-box'}
+    class="bx--multi-select {direction === 'top' &&
+      'bx--list-box--up'} {filterable && 'bx--combo-box'}
       {filterable &&
       'bx--multi-select--filterable'}
       {invalid &&
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
index 1b3f18c9..23720a04 100644
--- a/tests/MultiSelect.test.svelte
+++ b/tests/MultiSelect.test.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <MultiSelect
+  direction="top"
   titleText="Contact"
   label="Select contact methods..."
   items="{[
diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts
index 60b31afc..e2f52fb2 100644
--- a/types/MultiSelect/MultiSelect.d.ts
+++ b/types/MultiSelect/MultiSelect.d.ts
@@ -47,6 +47,12 @@ export interface MultiSelectProps
    */
   type?: "default" | "inline";
 
+  /**
+   * Specify the direction of the multiselect dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
   /**
    * Specify the selection feedback after selecting items
    * @default "top-after-reopen"