feat(multi-select): add direction prop

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                                                         |

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",

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..."

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 &&

tests/MultiSelect.test.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <MultiSelect
+  direction="top"
   titleText="Contact"
   label="Select contact methods..."
   items="{[

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"