From 2a802c15f58ed0596f10565806009bcde475a9f0 Mon Sep 17 00:00:00 2001
From: Logan McCaul <loganmccaul@us.ibm.com>
Date: Tue, 3 Dec 2019 14:18:50 -0600
Subject: [PATCH] feat: add back nestedfilterablemultiselect

---
 package.json                                  |    2 +-
 src/components/GroupLabel/GroupLabel-story.js |   29 +
 src/components/GroupLabel/GroupLabel.js       |   44 +
 src/components/GroupLabel/index.js            |    1 +
 src/components/ListBox/ListBox.js             |  104 +
 src/components/ListBox/ListBoxField.js        |   31 +
 src/components/ListBox/ListBoxMenu.js         |   22 +
 src/components/ListBox/ListBoxMenuIcon.js     |   58 +
 src/components/ListBox/ListBoxMenuItem.js     |   46 +
 src/components/ListBox/ListBoxPropTypes.js    |    3 +
 src/components/ListBox/ListBoxSelection.js    |   91 +
 src/components/ListBox/README.md              |   14 +
 src/components/ListBox/index.js               |   15 +
 src/components/ListBox/test-helpers.js        |   80 +
 .../MultiSelect/MultiSelect-story.js          |  382 ++
 .../MultiSelect/MultiSelectPropTypes.js       |   32 +
 .../NestedFilterableMultiselect.js            |  764 ++++
 .../NestedFilterableMultiselect-test.js       | 1673 ++++++++
 .../NestedFilterableMultiselect-test.js.snap  | 3478 +++++++++++++++++
 src/components/MultiSelect/index.js           |    1 +
 .../tools/__tests__/sorting-test.js           |  230 ++
 src/components/MultiSelect/tools/filter.js    |   68 +
 .../MultiSelect/tools/groupedByCategory.js    |   24 +
 .../MultiSelect/tools/itemToString.js         |   18 +
 src/components/MultiSelect/tools/sorting.js   |  100 +
 25 files changed, 7309 insertions(+), 1 deletion(-)
 create mode 100755 src/components/GroupLabel/GroupLabel-story.js
 create mode 100755 src/components/GroupLabel/GroupLabel.js
 create mode 100755 src/components/GroupLabel/index.js
 create mode 100755 src/components/ListBox/ListBox.js
 create mode 100755 src/components/ListBox/ListBoxField.js
 create mode 100755 src/components/ListBox/ListBoxMenu.js
 create mode 100755 src/components/ListBox/ListBoxMenuIcon.js
 create mode 100755 src/components/ListBox/ListBoxMenuItem.js
 create mode 100755 src/components/ListBox/ListBoxPropTypes.js
 create mode 100755 src/components/ListBox/ListBoxSelection.js
 create mode 100755 src/components/ListBox/README.md
 create mode 100755 src/components/ListBox/index.js
 create mode 100755 src/components/ListBox/test-helpers.js
 create mode 100644 src/components/MultiSelect/MultiSelect-story.js
 create mode 100644 src/components/MultiSelect/MultiSelectPropTypes.js
 create mode 100644 src/components/MultiSelect/NestedFilterableMultiselect.js
 create mode 100644 src/components/MultiSelect/__tests__/NestedFilterableMultiselect-test.js
 create mode 100644 src/components/MultiSelect/__tests__/__snapshots__/NestedFilterableMultiselect-test.js.snap
 create mode 100644 src/components/MultiSelect/index.js
 create mode 100644 src/components/MultiSelect/tools/__tests__/sorting-test.js
 create mode 100644 src/components/MultiSelect/tools/filter.js
 create mode 100644 src/components/MultiSelect/tools/groupedByCategory.js
 create mode 100644 src/components/MultiSelect/tools/itemToString.js
 create mode 100644 src/components/MultiSelect/tools/sorting.js

diff --git a/package.json b/package.json
index 6886035..21885dd 100644
--- a/package.json
+++ b/package.json
@@ -163,5 +163,5 @@
       "enzyme-to-json/serializer"
     ]
   },
-  "version": "2.0.0"
+  "version": "2.0.1"
 }
diff --git a/src/components/GroupLabel/GroupLabel-story.js b/src/components/GroupLabel/GroupLabel-story.js
new file mode 100755
index 0000000..61057e6
--- /dev/null
+++ b/src/components/GroupLabel/GroupLabel-story.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import GroupLabel from './GroupLabel';
+import { Tooltip } from 'carbon-components-react';
+
+const additionalProps = {
+  className: 'some-class',
+};
+
+storiesOf('GroupLabel', module)
+  .add(
+    'Default',
+    withInfo({
+      text: 'Group label.',
+    })(() => <GroupLabel {...additionalProps}>Label</GroupLabel>)
+  )
+  .add(
+    'With tooltip',
+    withInfo({
+      text: 'Form label with tooltip.',
+    })(() => (
+      <GroupLabel {...additionalProps}>
+        <Tooltip triggerText="Label">
+          This is the content of the tooltip.
+        </Tooltip>
+      </GroupLabel>
+    ))
+  );
diff --git a/src/components/GroupLabel/GroupLabel.js b/src/components/GroupLabel/GroupLabel.js
new file mode 100755
index 0000000..6298e1c
--- /dev/null
+++ b/src/components/GroupLabel/GroupLabel.js
@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+const categoryLabel = {
+  color: '#5A6872',
+  fontSize: '12px',
+  fontWeight: '600',
+  letterSpacing: '0.2px',
+  margin: '8px 16px',
+};
+
+const GroupLabel = ({ className, children, id, ...other }) => {
+  const classNames = classnames('bx--group-label', className);
+
+  return (
+    <label
+      htmlFor={id}
+      className="bx--group-label"
+      style={categoryLabel}
+      {...other}>
+      {children}
+    </label>
+  );
+};
+
+GroupLabel.propTypes = {
+  /**
+   * Specify the content of the form label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className to be applied to the containing <label> node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide a unique id for the given <GroupLabel>
+   */
+  id: PropTypes.string,
+};
+
+export default GroupLabel;
diff --git a/src/components/GroupLabel/index.js b/src/components/GroupLabel/index.js
new file mode 100755
index 0000000..c9caaa8
--- /dev/null
+++ b/src/components/GroupLabel/index.js
@@ -0,0 +1 @@
+export default from './GroupLabel';
diff --git a/src/components/ListBox/ListBox.js b/src/components/ListBox/ListBox.js
new file mode 100755
index 0000000..548323c
--- /dev/null
+++ b/src/components/ListBox/ListBox.js
@@ -0,0 +1,104 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListBoxField from './ListBoxField';
+import ListBoxMenu from './ListBoxMenu';
+import { ListBoxType } from './ListBoxPropTypes';
+import childrenOf from '../../prop-types/childrenOf';
+
+const handleOnKeyDown = event => {
+  if (event.keyCode === 27) {
+    event.stopPropagation();
+  }
+};
+
+const handleClick = event => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+/**
+ * `ListBox` is a generic container component that handles creating the
+ * container class name in response to certain props.
+ */
+const ListBox = ({
+  ariaLabel,
+  children,
+  className: containerClassName,
+  disabled,
+  innerRef,
+  type,
+  invalid,
+  invalidText,
+  light,
+  isOpen,
+  ...rest
+}) => {
+  const className = cx({
+    [containerClassName]: !!containerClassName,
+    'bx--list-box': true,
+    'bx--list-box--inline': type === 'inline',
+    'bx--list-box--disabled': disabled,
+    'bx--list-box--light': light,
+    'bx--list-box--expanded': isOpen,
+  });
+  return (
+    <React.Fragment>
+      <div
+        {...rest}
+        role="listbox"
+        aria-label={ariaLabel}
+        className={className}
+        ref={innerRef}
+        onKeyDown={handleOnKeyDown}
+        onClick={handleClick}
+        data-invalid={invalid || undefined}
+        aria-invalid={invalid || undefined}>
+        {children}
+      </div>
+      {invalid ? (
+        <div className="bx--form-requirement">{invalidText}</div>
+      ) : null}
+    </React.Fragment>
+  );
+};
+
+ListBox.propTypes = {
+  children: childrenOf([ListBoxField, ListBoxMenu]),
+
+  /**
+   * Specify a class name to be applied on the containing list box node
+   */
+  className: PropTypes.string,
+
+  /**
+   * `innerRef` hook used for libraries like Downshift that require a reference
+   * on a container node when it is not a native element
+   */
+  innerRef: PropTypes.func.isRequired,
+
+  /**
+   * Specify whether the ListBox is currently disabled
+   */
+  disabled: PropTypes.bool.isRequired,
+
+  /**
+   * Specify the "type" of the ListBox. Currently supports either `default` or
+   * `inline` as an option.
+   */
+  type: ListBoxType.isRequired,
+
+  /**
+   * Specify the "aria-label" of the ListBox.
+   */
+  ariaLabel: PropTypes.string,
+};
+
+ListBox.defaultProps = {
+  innerRef: () => {},
+  disabled: false,
+  type: 'default',
+  ariaLabel: 'Choose an item',
+};
+
+export default ListBox;
diff --git a/src/components/ListBox/ListBoxField.js b/src/components/ListBox/ListBoxField.js
new file mode 100755
index 0000000..4e884e4
--- /dev/null
+++ b/src/components/ListBox/ListBoxField.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListBoxMenuIcon from './ListBoxMenuIcon';
+import ListBoxSelection from './ListBoxSelection';
+import childrenOf from '../../prop-types/childrenOf';
+
+/**
+ * `ListBoxField` is responsible for creating the containing node for valid
+ * elements inside of a field. It also provides a11y-related attributes like
+ * `role` to make sure a user can focus the given field.
+ */
+const ListBoxField = ({ children, tabIndex, ...rest }) => (
+  <div
+    role="button"
+    className="bx--list-box__field"
+    tabIndex={tabIndex}
+    {...rest}>
+    {children}
+  </div>
+);
+
+ListBoxField.propTypes = {
+  children: childrenOf([ListBoxMenuIcon, ListBoxSelection, 'span', 'input']),
+  tabIndex: PropTypes.string,
+};
+
+ListBoxField.defaultProps = {
+  tabIndex: '0',
+};
+
+export default ListBoxField;
diff --git a/src/components/ListBox/ListBoxMenu.js b/src/components/ListBox/ListBoxMenu.js
new file mode 100755
index 0000000..683e048
--- /dev/null
+++ b/src/components/ListBox/ListBoxMenu.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import ListBoxMenuItem from './ListBoxMenuItem';
+import childrenOfType from '../../prop-types/childrenOfType';
+
+/**
+ * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
+ * class into a single component. It is also being used to validate given
+ * `children` components.
+ */
+const ListBoxMenu = ({ children, ...rest }) => {
+  return (
+    <div className="bx--list-box__menu" {...rest}>
+      {children}
+    </div>
+  );
+};
+
+ListBoxMenu.propTypes = {
+  children: childrenOfType(ListBoxMenuItem),
+};
+
+export default ListBoxMenu;
diff --git a/src/components/ListBox/ListBoxMenuIcon.js b/src/components/ListBox/ListBoxMenuIcon.js
new file mode 100755
index 0000000..5157b6e
--- /dev/null
+++ b/src/components/ListBox/ListBoxMenuIcon.js
@@ -0,0 +1,58 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { iconCaretDown } from 'carbon-icons';
+import { Icon } from 'carbon-components-react';
+
+export const translationIds = {
+  'close.menu': 'close.menu',
+  'open.menu': 'open.menu',
+};
+
+const defaultTranslations = {
+  [translationIds['close.menu']]: 'Close menu',
+  [translationIds['open.menu']]: 'Open menu',
+};
+
+/**
+ * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
+ * state of the menu for a given `ListBox`
+ */
+const ListBoxMenuIcon = ({ isOpen, translateWithId: t }) => {
+  const className = cx({
+    'bx--list-box__menu-icon': true,
+    'bx--list-box__menu-icon--open': isOpen,
+  });
+  const description = isOpen ? t('close.menu') : t('open.menu');
+  return (
+    <div className={className}>
+      <Icon
+        icon={iconCaretDown}
+        description={description}
+        name="icon--caret--down"
+        alt={description}
+      />
+    </div>
+  );
+};
+
+ListBoxMenuIcon.propTypes = {
+  /**
+   * Specify whether the menu is currently open, which will influence the
+   * direction of the menu icon
+   */
+  isOpen: PropTypes.bool.isRequired,
+
+  /**
+   * i18n hook used to provide the appropriate description for the given menu
+   * icon. This function takes in an id defined in `translationIds` and should
+   * return a string message for that given message id.
+   */
+  translateWithId: PropTypes.func.isRequired,
+};
+
+ListBoxMenuIcon.defaultProps = {
+  translateWithId: id => defaultTranslations[id],
+};
+
+export default ListBoxMenuIcon;
diff --git a/src/components/ListBox/ListBoxMenuItem.js b/src/components/ListBox/ListBoxMenuItem.js
new file mode 100755
index 0000000..58130b2
--- /dev/null
+++ b/src/components/ListBox/ListBoxMenuItem.js
@@ -0,0 +1,46 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * `ListBoxMenuItem` is a helper component for managing the container class
+ * name, alongside any classes for any corresponding states, for a generic list
+ * box menu item.
+ */
+const ListBoxMenuItem = ({ children, isActive, isHighlighted, ...rest }) => {
+  const className = cx({
+    'bx--list-box__menu-item': true,
+    'bx--list-box__menu-item--active': isActive,
+    'bx--list-box__menu-item--highlighted': isHighlighted,
+  });
+  return (
+    <div className={className} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+ListBoxMenuItem.propTypes = {
+  /**
+   * Specify any children nodes that hsould be rendered inside of the ListBox
+   * Menu Item
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify whether the current menu item is "active".
+   */
+  isActive: PropTypes.bool.isRequired,
+
+  /**
+   * Specify whether the current menu item is "highlighed".
+   */
+  isHighlighted: PropTypes.bool.isRequired,
+};
+
+ListBoxMenuItem.defaultProps = {
+  isActive: false,
+  isHighlighted: false,
+};
+
+export default ListBoxMenuItem;
diff --git a/src/components/ListBox/ListBoxPropTypes.js b/src/components/ListBox/ListBoxPropTypes.js
new file mode 100755
index 0000000..279828b
--- /dev/null
+++ b/src/components/ListBox/ListBoxPropTypes.js
@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+
+export const ListBoxType = PropTypes.oneOf(['default', 'inline']);
diff --git a/src/components/ListBox/ListBoxSelection.js b/src/components/ListBox/ListBoxSelection.js
new file mode 100755
index 0000000..44618e3
--- /dev/null
+++ b/src/components/ListBox/ListBoxSelection.js
@@ -0,0 +1,91 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { iconClose } from 'carbon-icons';
+import { Icon } from 'carbon-components-react';
+
+/**
+ * `ListBoxSelection` is used to provide controls for clearing a selection, in
+ * addition to conditionally rendering a badge if the control has more than one
+ * selection.
+ */
+const ListBoxSelection = ({
+  clearSelection,
+  selectionCount,
+  translateWithId: t,
+}) => {
+  const className = cx({
+    'bx--list-box__selection': true,
+    'bx--list-box__selection--multi': selectionCount,
+  });
+  const handleOnClick = event => {
+    // If we have a mult-select badge, clicking it shouldn't open the menu back
+    // up. However, if we have a clear badge then we want the click to have this
+    // behavior.
+    if (selectionCount) {
+      event.stopPropagation();
+    }
+    clearSelection(event);
+  };
+  const handleOnKeyDown = event => {
+    // When a user hits ENTER, we'll clear the selection
+    if (event.keyCode === 13) {
+      clearSelection(event);
+    }
+  };
+  const description = selectionCount ? t('clear.all') : t('clear.selection');
+  return (
+    <div
+      role="button"
+      className={className}
+      tabIndex="0"
+      onClick={handleOnClick}
+      onKeyDown={handleOnKeyDown}
+      title={description}>
+      {selectionCount}
+      <Icon
+        icon={iconClose}
+        description={description}
+        focusable="false"
+        name="icon--close"
+      />
+    </div>
+  );
+};
+
+export const translationIds = {
+  'clear.all': 'clear.all',
+  'clear.selection': 'clear.selection',
+};
+
+const defaultTranslations = {
+  [translationIds['clear.all']]: 'Clear all selected items',
+  [translationIds['clear.selection']]: 'Clear selected item',
+};
+
+ListBoxSelection.propTypes = {
+  /**
+   * Specify a function to be invoked when a user interacts with the clear
+   * selection element.
+   */
+  clearSelection: PropTypes.func.isRequired,
+
+  /**
+   * Specify an optional `selectionCount` value that will be used to determine
+   * whether the selection should display a badge or a single clear icon.
+   */
+  selectionCount: PropTypes.number,
+
+  /**
+   * i18n hook used to provide the appropriate description for the given menu
+   * icon. This function takes in an id defined in `translationIds` and should
+   * return a string message for that given message id.
+   */
+  translateWithId: PropTypes.func.isRequired,
+};
+
+ListBoxSelection.defaultProps = {
+  translateWithId: id => defaultTranslations[id],
+};
+
+export default ListBoxSelection;
diff --git a/src/components/ListBox/README.md b/src/components/ListBox/README.md
new file mode 100755
index 0000000..36f1acb
--- /dev/null
+++ b/src/components/ListBox/README.md
@@ -0,0 +1,14 @@
+# `ListBox` component
+
+`ListBox` is responsible for powering a variety of dropdown-flavored components in Carbon. This list includes components like: Dropdown, Combobox, MultiSelect, and more!
+
+Currently, a `ListBox` is broken up into the following pieces:
+
+- `ListBox`: container component that wraps all `ListBox*`-related components
+  - `ListBoxField`: component used for handling input and displaying selections in components like Combobox and MultiSelect
+    - `ListBoxMenuIcon`: indicates the status of the menu, e.g. whether it is open or closed.
+    - `ListBoxSelection`: indicates the status of the selection for the control, works for both single selection and multi-selection components
+  - `ListBoxMenu`: container component for the menu of options available in a `ListBox`
+    - `ListBoxMenuItem`: container component for an option in a `ListBoxMenu`
+
+In addition, we have `ListBox`-specific `prop` types in `ListBoxPropTypes`.
diff --git a/src/components/ListBox/index.js b/src/components/ListBox/index.js
new file mode 100755
index 0000000..39d3da0
--- /dev/null
+++ b/src/components/ListBox/index.js
@@ -0,0 +1,15 @@
+import ListBox from './ListBox';
+import ListBoxField from './ListBoxField';
+import ListBoxMenu from './ListBoxMenu';
+import ListBoxMenuIcon from './ListBoxMenuIcon';
+import ListBoxMenuItem from './ListBoxMenuItem';
+import ListBoxSelection from './ListBoxSelection';
+
+ListBox.Field = ListBoxField;
+ListBox.Menu = ListBoxMenu;
+ListBox.MenuIcon = ListBoxMenuIcon;
+ListBox.MenuItem = ListBoxMenuItem;
+ListBox.Selection = ListBoxSelection;
+
+export default ListBox;
+export * as PropTypes from './ListBoxPropTypes';
diff --git a/src/components/ListBox/test-helpers.js b/src/components/ListBox/test-helpers.js
new file mode 100755
index 0000000..3ad58c5
--- /dev/null
+++ b/src/components/ListBox/test-helpers.js
@@ -0,0 +1,80 @@
+// Finding nodes in a ListBox
+export const findMenuNode = wrapper => wrapper.find('.bx--list-box__menu');
+export const findMenuItemNode = (wrapper, index) =>
+  wrapper.find('ListBoxMenuItem').at(index);
+export const findMenuIconNode = wrapper =>
+  wrapper.find('.bx--list-box__menu-icon');
+export const findFieldNode = wrapper => wrapper.find('.bx--list-box__field');
+
+// Actions
+export const openMenu = wrapper => findFieldNode(wrapper).simulate('click');
+
+// Common assertions, useful for validating a11y props are set when needed
+export const assertMenuOpen = (wrapper, mockProps) => {
+  expect(findMenuNode(wrapper).children().length).toBe(mockProps.items.length);
+  expect(findMenuIconNode(wrapper).prop('className')).toEqual(
+    expect.stringContaining('bx--list-box__menu-icon--open')
+  );
+  expect(findFieldNode(wrapper).props()).toEqual(
+    expect.objectContaining({
+      'aria-expanded': true,
+      'aria-haspopup': true,
+      'aria-label': 'close menu',
+    })
+  );
+};
+export const assertMenuClosed = wrapper => {
+  expect(findMenuIconNode(wrapper).prop('className')).toEqual(
+    expect.stringContaining('bx--list-box__menu-icon')
+  );
+  expect(findMenuIconNode(wrapper).prop('className')).not.toEqual(
+    expect.stringContaining('bx--list-box__menu-icon--open')
+  );
+  expect(findFieldNode(wrapper).props()).toEqual(
+    expect.objectContaining({
+      'aria-expanded': false,
+      'aria-haspopup': true,
+      'aria-label': 'open menu',
+    })
+  );
+};
+
+/**
+ * `GenericItem` corresponds to an item in a collection that is passed to
+ * MultiSelect that is in a predictable shape and works with the default
+ * `itemToString` out of the box.
+ * @param {number} index
+ *
+ * @returns {{id: string, label: string, value: string}}
+ */
+export const generateGenericItem = index => ({
+  id: `id-${index}`,
+  label: `Item ${index}`,
+  value: index,
+});
+
+/**
+ * `CustomItem` corresponds to a potentially different item structure that
+ * might be passed into MultiSelect that we would need to supply a custom
+ * `itemToString` method for
+ * @param {number} index
+ *
+ * @returns {{field: string, value: string}}
+ */
+export const generateCustomItem = index => ({
+  field: `Item ${index}`,
+  value: `Custom value ${index}`,
+});
+
+/**
+ * Returns an Array filled by values generated by the `generator` function
+ * @param {number} amount Number of elements to generate
+ *
+ * @returns {Array<Object>} Array of objects generated by `generator`
+ */
+export const generateItems = (amount, generator) =>
+  Array(amount)
+    .fill(null)
+    .map((_, i) => generator(i));
+
+export const customItemToString = ({ field }) => field;
diff --git a/src/components/MultiSelect/MultiSelect-story.js b/src/components/MultiSelect/MultiSelect-story.js
new file mode 100644
index 0000000..8c48871
--- /dev/null
+++ b/src/components/MultiSelect/MultiSelect-story.js
@@ -0,0 +1,382 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withInfo } from '@storybook/addon-info';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+
+import NestedFilterableMultiselect from './NestedFilterableMultiselect';
+
+const items = [
+  {
+    id: 'item-1',
+    text: 'Item 1',
+    category: 'Europe',
+  },
+  {
+    id: 'item-2',
+    text: 'Item 2',
+    category: 'Europe',
+    options: [
+      {
+        id: 'opt-3',
+        text: 'Option 3',
+      },
+      {
+        id: 'opt-4',
+        text: 'Option 4',
+        options: [
+          {
+            id: 'subopt-25',
+            text: 'SubOption 25',
+          },
+          {
+            id: 'subopt-30',
+            text: 'SubOption 30',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'item-3',
+    text: 'Item 3',
+    category: 'Asia',
+    options: [
+      {
+        id: 'opt-5',
+        text: 'Option 5',
+      },
+      {
+        id: 'opt-6',
+        text: 'Option 6',
+      },
+    ],
+  },
+  {
+    id: 'item-4',
+    text: 'Item 4',
+    category: 'America',
+    options: [
+      {
+        id: 'opt-7',
+        text: 'Option 7',
+        options: [
+          {
+            id: 'subopt-20',
+            text: 'SubOption 20',
+          },
+          {
+            id: 'subopt-15',
+            text: 'SubOption 15',
+          },
+          {
+            id: 'subopt-18',
+            text: 'SubOption 18',
+          },
+        ],
+      },
+      {
+        id: 'opt-8',
+        text: 'Option 8',
+        options: [
+          {
+            id: 'subopt-5',
+            text: 'SubOption 5',
+          },
+          {
+            id: 'subopt-10',
+            text: 'SubOption 10',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'item-5',
+    text: 'Item 5',
+    category: 'America',
+    options: [
+      {
+        id: 'opt-9',
+        text: 'Option 9',
+      },
+      {
+        id: 'opt-10',
+        text: 'Option 10',
+      },
+    ],
+  },
+];
+const selectedItems = [
+  {
+    id: 'item-2',
+    text: 'Item 2',
+    category: 'Europe',
+    options: [
+      {
+        id: 'opt-3',
+        text: 'Option 3',
+        checked: true,
+      },
+      {
+        id: 'opt-4',
+        text: 'Option 4',
+        options: [
+          {
+            id: 'subopt-25',
+            text: 'SubOption 25',
+          },
+          {
+            id: 'subopt-30',
+            text: 'SubOption 30',
+            checked: true,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'item-3',
+    text: 'Item 3',
+    category: 'Asia',
+    options: [
+      {
+        id: 'opt-5',
+        text: 'Option 5',
+      },
+      {
+        id: 'opt-6',
+        text: 'Option 6',
+        checked: true,
+      },
+    ],
+  },
+  {
+    id: 'item-4',
+    text: 'Item 4',
+    category: 'America',
+    options: [
+      {
+        id: 'opt-7',
+        text: 'Option 7',
+        checked: true,
+        options: [
+          {
+            id: 'subopt-20',
+            text: 'SubOption 20',
+          },
+          {
+            id: 'subopt-15',
+            text: 'SubOption 15',
+          },
+          {
+            id: 'subopt-18',
+            text: 'SubOption 18',
+          },
+        ],
+      },
+      {
+        id: 'opt-8',
+        text: 'Option 8',
+        options: [
+          {
+            id: 'subopt-5',
+            text: 'SubOption 5',
+          },
+          {
+            id: 'subopt-10',
+            text: 'SubOption 10',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const flattenItems = [
+  {
+    id: 'item-1',
+    text: 'Item 1',
+    category: 'Europe',
+    level: 0,
+  },
+  {
+    id: 'item-2',
+    text: 'Item 2',
+    category: 'Europe',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-3',
+    text: 'Option 3',
+    category: 'Europe',
+    level: 1,
+    parentId: 'item-2',
+  },
+  {
+    id: 'opt-4',
+    text: 'Option 4',
+    category: 'Europe',
+    level: 1,
+    hasChildren: true,
+    parentId: 'item-2',
+  },
+  {
+    id: 'subopt-25',
+    text: 'SubOption 25',
+    category: 'Europe',
+    level: 2,
+    parentId: 'opt-4',
+  },
+  {
+    id: 'subopt-30',
+    text: 'SubOption 30',
+    category: 'Europe',
+    level: 2,
+    parentId: 'opt-4',
+  },
+  {
+    id: 'item-3',
+    text: 'Item 3',
+    category: 'Asia',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-5',
+    text: 'Option 5',
+    category: 'Asia',
+    level: 1,
+    parentId: 'item-3',
+  },
+  {
+    id: 'item-4',
+    text: 'Item 4',
+    category: 'America',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-7',
+    text: 'Option 7',
+    category: 'America',
+    level: 1,
+    hasChildren: true,
+    parentId: 'item-4',
+  },
+  {
+    id: 'subopt-20',
+    text: 'SubOption 20',
+    category: 'America',
+    level: 2,
+    parentId: 'opt-7',
+  },
+  {
+    id: 'subopt-15',
+    text: 'SubOption 15',
+    category: 'America',
+    level: 2,
+    parentId: 'opt-7',
+  },
+  {
+    id: 'opt-8',
+    text: 'Option 8',
+    category: 'America',
+    level: 1,
+    parentId: 'item-4',
+  },
+];
+const flattenSelectedItems = [
+  {
+    id: 'item-2',
+    text: 'Item 2',
+    category: 'Europe',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-3',
+    text: 'Option 3',
+    category: 'Europe',
+    level: 1,
+    parentId: 'item-2',
+  },
+  {
+    id: 'subopt-30',
+    text: 'SubOption 30',
+    category: 'Europe',
+    level: 2,
+    parentId: 'opt-4',
+  },
+  {
+    id: 'item-3',
+    text: 'Item 3',
+    category: 'Asia',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-5',
+    text: 'Option 5',
+    category: 'Asia',
+    level: 1,
+    parentId: 'item-3',
+  },
+  {
+    id: 'item-4',
+    text: 'Item 4',
+    category: 'America',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-7',
+    text: 'Option 7',
+    category: 'America',
+    level: 1,
+    hasChildren: true,
+    parentId: 'item-4',
+  },
+];
+
+const defaultPlaceholder = 'Filter';
+
+const types = {
+  default: 'Default (default)',
+  inline: 'Inline (inline)',
+};
+
+const props = () => ({
+  flatList: boolean('Flat list', false),
+  disabled: boolean('Disabled (disabled)', false),
+  light: boolean('Light variant (light)', false),
+  onChange: action('onChange'),
+});
+
+storiesOf('NestedFilterableMultiselect', module)
+  .addDecorator(withKnobs)
+  .add(
+    'default',
+    withInfo({
+      text: `
+        Nested Filterable Multiselect
+      `,
+    })(() => {
+      const { flatList, ...multiSelectProps } = props();
+      return (
+        <div style={{ width: 300 }}>
+          <NestedFilterableMultiselect
+            {...multiSelectProps}
+            key={flatList ? 'flat' : 'hierarchy'}
+            items={flatList ? flattenItems : items}
+            itemToString={item => (item ? item.text : '')}
+            initialSelectedItems={
+              flatList ? flattenSelectedItems : selectedItems
+            }
+            placeholder={defaultPlaceholder}
+          />
+        </div>
+      );
+    })
+  );
diff --git a/src/components/MultiSelect/MultiSelectPropTypes.js b/src/components/MultiSelect/MultiSelectPropTypes.js
new file mode 100644
index 0000000..b25030b
--- /dev/null
+++ b/src/components/MultiSelect/MultiSelectPropTypes.js
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+
+export const sortingPropTypes = {
+  /**
+   * Provide a compare function that is used to determine the ordering of
+   * options. `compareItems` has the following function signature:
+   *
+   * compareFunction :
+   *  (itemA: string, itemB: string, { locale: string }) => number
+   */
+  compareItems: PropTypes.func.isRequired,
+
+  /**
+   * Provide a method that sorts all options in the control. Overriding this
+   * prop means that you also have to handle the sort logic for selected versus
+   * un-selected items. If you just want to control ordering, consider the
+   * `compareItems` prop instead.
+   *
+   * `sortItems` has the following signature:
+   *
+   * sortItems :
+   *   (items: Array<Item>, {
+   *     selectedItems: Array<Item>,
+   *     itemToString: Item => string,
+   *     compareItems: (itemA: string, itemB: string, {
+   *       locale: string
+   *     }) => number,
+   *     locale: string,
+   *   }) => Array<Item>
+   */
+  sortItems: PropTypes.func.isRequired,
+};
diff --git a/src/components/MultiSelect/NestedFilterableMultiselect.js b/src/components/MultiSelect/NestedFilterableMultiselect.js
new file mode 100644
index 0000000..961baa5
--- /dev/null
+++ b/src/components/MultiSelect/NestedFilterableMultiselect.js
@@ -0,0 +1,764 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+import Downshift from 'downshift';
+import debounce from 'lodash.debounce';
+import isEqual from 'lodash.isequal';
+import ListBox from '../ListBox';
+import { Checkbox } from 'carbon-components-react';
+import GroupLabel from '../GroupLabel';
+import Selection from '../../internal/Selection';
+import { sortingPropTypes } from './MultiSelectPropTypes';
+import { defaultItemToString } from './tools/itemToString';
+import { groupedByCategory } from './tools/groupedByCategory';
+import {
+  buildHierarchy,
+  defaultSortItems,
+  defaultCompareItems,
+  findParent,
+} from './tools/sorting';
+import { defaultFilterItems, getAllChildren } from './tools/filter';
+
+export default class NestedFilterableMultiselect extends React.Component {
+  static propTypes = {
+    ...sortingPropTypes,
+
+    /**
+     * Disable the control
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: PropTypes.array.isRequired,
+
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems: PropTypes.array,
+
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list.
+     */
+    itemToString: PropTypes.func,
+
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * used for sorting the list of items in the control.
+     */
+    locale: PropTypes.string,
+
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occuring.
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * Generic `placeholder` that will be used as the textual representation of
+     * what this field is for
+     */
+    placeholder: PropTypes.string.isRequired,
+
+    /**
+     * `true` to use the light version.
+     */
+    light: PropTypes.bool,
+
+    /**
+     * `customCategorySorting` is use to sort the items by category, aphabetic order if not specify
+     */
+    customCategorySorting: PropTypes.func,
+
+    /**
+     * `true` to show tooltip.
+     */
+    showTooltip: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    compareItems: defaultCompareItems,
+    disabled: false,
+    filterItems: defaultFilterItems,
+    initialSelectedItems: [],
+    itemToString: defaultItemToString,
+    locale: 'en',
+    sortItems: defaultSortItems,
+    light: false,
+    showTooltip: true,
+  };
+
+  static find(items = [], target) {
+    let found;
+    items.some(item => {
+      if (item.id === target.id) {
+        found = item;
+        return true;
+      }
+      return false;
+    });
+    return found;
+  }
+
+  static computeId({ item, itemToString = defaultItemToString, parentId }) {
+    return `${parentId ? `${parentId}-` : ''}${item.id || itemToString(item)}`;
+  }
+
+  static flatten({
+    category,
+    items = [],
+    level,
+    parentId,
+    itemToString = defaultItemToString,
+  }) {
+    return items.reduce((list, item) => {
+      const mappedItem = {
+        ...item,
+        id: NestedFilterableMultiselect.computeId({
+          item,
+          itemToString,
+          parentId,
+        }),
+        category: category || item.category,
+        level: level || 0,
+        hasChildren: !!item.options,
+        parentId,
+      };
+      list.push(mappedItem);
+      if (Array.isArray(item.options) && item.options.length > 0) {
+        list.push(
+          ...NestedFilterableMultiselect.flatten({
+            category: mappedItem.category,
+            items: item.options,
+            level: mappedItem.level + 1,
+            parentId: mappedItem.id,
+            itemToString,
+          })
+        );
+      }
+      return list;
+    }, []);
+  }
+
+  static cleanItem(item) {
+    const result = { ...item };
+    delete result.options;
+    delete result.checked;
+    return result;
+  }
+
+  static getDerivedStateFromProps(nextProps, currentState) {
+    const { items, initialSelectedItems, itemToString } = nextProps;
+    const { flattenedItems, flattenedSelectedItems } = currentState;
+
+    const itemsToProcess = initialSelectedItems
+      ? items.map(obj => initialSelectedItems.find(o => o.id === obj.id) || obj)
+      : items;
+    const isHierarchical = items.some(item => !!item.options);
+    const updatedItems = isHierarchical
+      ? NestedFilterableMultiselect.flatten({
+          items: itemsToProcess,
+          itemToString,
+        }).map(NestedFilterableMultiselect.cleanItem)
+      : itemsToProcess;
+
+    if (!isEqual(updatedItems, flattenedItems)) {
+      const updatedSelectedItems = isHierarchical
+        ? NestedFilterableMultiselect.flatten({
+            items: initialSelectedItems,
+            itemToString,
+          })
+            .filter((item, index, itemArray) => {
+              if (!item.parentId || item.checked) {
+                return true;
+              }
+
+              // Any parent checked will make all its children checked
+              const hierarchy = buildHierarchy(item, itemArray);
+              const parentChecked = hierarchy.some(parent => parent.checked);
+              if (parentChecked) {
+                return true;
+              }
+
+              // Any child checked will make its parent checked
+              const allChildren = getAllChildren(item, itemArray);
+              const childChecked = allChildren.some(child => child.checked);
+              if (childChecked) {
+                return true;
+              }
+
+              // If none of the children has the `checked` flag,
+              // all children are considered checked.
+              const rootAllChildren = getAllChildren(hierarchy[0], itemArray);
+              return (
+                rootAllChildren.length > 0 &&
+                !rootAllChildren.some(child => child.checked)
+              );
+            })
+            .map(NestedFilterableMultiselect.cleanItem)
+        : initialSelectedItems.reduce(
+            (list, item) => {
+              // Any parent checked will make all its children checked
+              const hierarchy = buildHierarchy(item, updatedItems);
+              hierarchy.forEach(parent => {
+                if (!NestedFilterableMultiselect.find(list, parent)) {
+                  list.push({ ...parent });
+                }
+              });
+
+              // If none of the children has the `checked` flag,
+              // all children are considered checked.
+              const allChildren = getAllChildren(item, updatedItems);
+              if (
+                !allChildren.some(child =>
+                  NestedFilterableMultiselect.find(list, child)
+                )
+              ) {
+                list.push(...allChildren.map(child => ({ ...child })));
+              }
+
+              return list;
+            },
+            [...initialSelectedItems]
+          );
+
+      flattenedItems.splice(0, flattenedItems.length, ...updatedItems);
+      flattenedSelectedItems.splice(
+        0,
+        flattenedSelectedItems.length,
+        ...updatedSelectedItems
+      );
+
+      return {
+        ...currentState,
+        flattenedItems,
+        flattenedSelectedItems,
+      };
+    }
+
+    return null;
+  }
+
+  static updateCheckedState({
+    options = [],
+    itemToString = defaultItemToString,
+    parentId,
+    selectedItems,
+  }) {
+    return options.map(option => {
+      const optionId = NestedFilterableMultiselect.computeId({
+        item: option,
+        itemToString,
+        parentId,
+      });
+      const result = { ...option };
+      if (result.options) {
+        result.options = NestedFilterableMultiselect.updateCheckedState({
+          options: result.options,
+          itemToString,
+          parentId: optionId,
+          selectedItems,
+        });
+        // The parent is checked only if all its children is checked
+        result.checked = !result.options.some(option => !option.checked);
+      } else {
+        result.checked = selectedItems.some(
+          selectedItem => selectedItem.id === optionId
+        );
+      }
+      return result;
+    });
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      highlightedIndex: null,
+      isOpen: false,
+      inputValue: '',
+      flattenedItems: [],
+      flattenedSelectedItems: [],
+      expandedItems: [],
+    };
+  }
+
+  handleOnChange = changes => {
+    const { items, itemToString, onChange } = this.props;
+
+    if (onChange) {
+      const { selectedItems = [] } = changes;
+
+      const isHierarchical = items.some(item => !!item.options);
+      const mappedSelectedItems = isHierarchical
+        ? items.reduce((list, item) => {
+            if (NestedFilterableMultiselect.find(selectedItems, item)) {
+              const selectedItem = { ...item };
+              if (item.options) {
+                selectedItem.options = NestedFilterableMultiselect.updateCheckedState(
+                  {
+                    options: item.options,
+                    itemToString,
+                    parentId: NestedFilterableMultiselect.computeId({
+                      item,
+                      itemToString,
+                    }),
+                    selectedItems,
+                  }
+                );
+              }
+              list.push(selectedItem);
+            }
+            return list;
+          }, [])
+        : selectedItems;
+
+      onChange({ selectedItems: mappedSelectedItems });
+    }
+  };
+
+  onToggle = item => {
+    const isExpanded = NestedFilterableMultiselect.find(
+      this.state.expandedItems,
+      item
+    );
+    !isExpanded
+      ? this.setState({ expandedItems: [...this.state.expandedItems, item] })
+      : this.setState(prevState => ({
+          expandedItems: prevState.expandedItems.filter(
+            expandedItem => expandedItem.id !== item.id
+          ),
+        }));
+  };
+
+  handleOnOuterClick = () => {
+    this.setState({
+      isOpen: false,
+      inputValue: '',
+    });
+  };
+
+  handleOnStateChange = changes => {
+    const { type } = changes;
+    switch (type) {
+      case Downshift.stateChangeTypes.changeInput:
+        this.setState({ inputValue: changes.inputValue });
+        break;
+      case Downshift.stateChangeTypes.keyDownArrowUp:
+      case Downshift.stateChangeTypes.itemMouseEnter:
+        this.setState({ highlightedIndex: changes.highlightedIndex });
+        break;
+      case Downshift.stateChangeTypes.keyDownArrowDown:
+        this.setState({
+          highlightedIndex: changes.highlightedIndex,
+          isOpen: true,
+        });
+        break;
+      case Downshift.stateChangeTypes.keyDownEscape:
+      case Downshift.stateChangeTypes.mouseUp:
+        this.setState({ isOpen: false });
+        break;
+      // Opt-in to some cases where we should be toggling the menu based on
+      // a given key press or mouse handler
+      // Reference: https://github.com/paypal/downshift/issues/206
+      case Downshift.stateChangeTypes.clickButton:
+      case Downshift.stateChangeTypes.keyDownSpaceButton:
+        this.setState(() => {
+          let nextIsOpen = changes.isOpen || false;
+          if (changes.isOpen === false) {
+            // If Downshift is trying to close the menu, but we know the input
+            // is the active element in thedocument, then keep the menu open
+            if (this.inputNode === document.activeElement) {
+              nextIsOpen = true;
+            }
+          }
+          return {
+            isOpen: nextIsOpen,
+          };
+        });
+        break;
+    }
+  };
+
+  handleOnInputValueChange = debounce((value, { type }) => {
+    if (type === Downshift.stateChangeTypes.changeInput) {
+      const { filterItems, itemToString } = this.props;
+      const {
+        expandedItems,
+        flattenedItems: items,
+        inputValue: prevInputValue,
+      } = this.state;
+
+      const inputValue = Array.isArray(value) ? prevInputValue : value;
+
+      const itemsToExpand = items.reduce((toExpand, item) => {
+        const allChildren = getAllChildren(item, items);
+        if (allChildren.length > 0) {
+          const filteredChildren = filterItems(allChildren, {
+            itemToString,
+            inputValue,
+          });
+          if (filteredChildren.length > 0) {
+            if (
+              !inputValue ||
+              NestedFilterableMultiselect.find(expandedItems, item)
+            ) {
+              return toExpand;
+            }
+            if (!NestedFilterableMultiselect.find(toExpand, item)) {
+              toExpand.push(item);
+            }
+          }
+        }
+        return toExpand;
+      }, []);
+
+      this.setState(() => {
+        return {
+          expandedItems: [...expandedItems, ...itemsToExpand],
+          inputValue: inputValue || '',
+        };
+      });
+    }
+  }, 200).bind(this);
+
+  clearInputValue = event => {
+    event.stopPropagation();
+    this.setState({ inputValue: '' });
+    this.inputNode && this.inputNode.focus && this.inputNode.focus();
+  };
+
+  getParentItem = item => {
+    const { flattenedItems: items } = this.state;
+    return findParent(item, items);
+  };
+
+  onItemChange = (item, selectedItems, onItemChange) => {
+    const { flattenedItems: items } = this.state;
+
+    const toRemove = !!NestedFilterableMultiselect.find(selectedItems, item);
+
+    const itemsChanged = [item];
+
+    if (item.parentId) {
+      // Walk parents
+      const parents = buildHierarchy(item, items).reverse();
+      parents.shift();
+      parents.some(parent => {
+        const isSelected = !!NestedFilterableMultiselect.find(
+          selectedItems,
+          parent
+        );
+        const children = selectedItems.filter(
+          selectedItem => selectedItem.parentId === parent.id
+        );
+        if (children.length === 1 && toRemove && isSelected) {
+          // Uncheck parent too and keep walking up
+          itemsChanged.push(parent);
+          return false;
+        } else if (!toRemove && !isSelected) {
+          // Check parent too
+          itemsChanged.push(parent);
+          return false;
+        }
+        // If selecting a new item, we need to keep going up to
+        // make sure all parents are checked.
+        // If unselecting an item, we will break out when the
+        // current parent does not need to be removed
+        return toRemove;
+      });
+    }
+
+    // Walk children
+    const children = getAllChildren(item, items);
+    if (children.length > 0) {
+      children.forEach(child => {
+        const isSelected = !!NestedFilterableMultiselect.find(
+          selectedItems,
+          child
+        );
+        if (toRemove && isSelected) {
+          // Uncheck the child too
+          itemsChanged.push(child);
+        } else if (!toRemove && !isSelected) {
+          // Check the child too
+          itemsChanged.push(child);
+        }
+      });
+    }
+
+    onItemChange(itemsChanged);
+  };
+
+  render() {
+    const {
+      highlightedIndex,
+      isOpen,
+      inputValue,
+      expandedItems,
+      flattenedItems: items,
+      flattenedSelectedItems: initialSelectedItems,
+    } = this.state;
+    const {
+      className: containerClassName,
+      disabled,
+      filterItems,
+      itemToString,
+      id,
+      locale,
+      placeholder,
+      sortItems,
+      compareItems,
+      light,
+      customCategorySorting,
+      showTooltip,
+    } = this.props;
+
+    const className = cx(
+      'bx--multi-select',
+      'bx--combo-box',
+      containerClassName,
+      {
+        'bx--list-box--light': light,
+      }
+    );
+
+    let currentIndex = -1;
+    let highlighted;
+
+    return (
+      <Selection
+        onChange={this.handleOnChange}
+        initialSelectedItems={initialSelectedItems}
+        render={({ selectedItems, onItemChange, clearSelection }) => (
+          <Downshift
+            highlightedIndex={highlightedIndex}
+            isOpen={isOpen}
+            inputValue={inputValue}
+            onInputValueChange={this.handleOnInputValueChange}
+            onChange={item => {
+              this.onItemChange(item, selectedItems, onItemChange);
+            }}
+            itemToString={itemToString}
+            onStateChange={this.handleOnStateChange}
+            onOuterClick={this.handleOnOuterClick}
+            selectedItem={selectedItems}
+            render={({
+              getButtonProps,
+              getInputProps,
+              getItemProps,
+              getRootProps,
+              isOpen,
+              inputValue,
+              selectedItem,
+            }) => (
+              <ListBox
+                className={className}
+                disabled={disabled}
+                {...getRootProps({ refKey: 'innerRef' })}>
+                <ListBox.Field tabIndex="-1" {...getButtonProps({ disabled })}>
+                  {selectedItem.length > 0 && (
+                    <ListBox.Selection
+                      clearSelection={clearSelection}
+                      selectionCount={
+                        selectedItem.filter(item => !item.hasChildren).length
+                      }
+                    />
+                  )}
+                  <input
+                    className="bx--text-input"
+                    aria-label={placeholder}
+                    ref={el => (this.inputNode = el)}
+                    {...getInputProps({
+                      disabled,
+                      id,
+                      placeholder,
+                      onKeyDown: e => {
+                        e.stopPropagation();
+                        const highlightedItem = highlighted && highlighted.item;
+                        if (highlightedItem) {
+                          if (e.which === 40) {
+                            // Down arrow
+                            if (
+                              highlightedItem.hasChildren &&
+                              !expandedItems.includes(highlightedItem)
+                            ) {
+                              this.onToggle(highlightedItem);
+                            }
+                          } else if (e.which === 38) {
+                            // Up arrow
+                            const parentItem = this.getParentItem(
+                              highlightedItem
+                            );
+                            if (
+                              parentItem &&
+                              highlighted.parentIndex > -1 &&
+                              highlighted.index ===
+                                highlighted.parentIndex + 1 &&
+                              expandedItems.includes(parentItem)
+                            ) {
+                              this.onToggle(parentItem);
+                            }
+                          }
+                        }
+                      },
+                      onKeyUp: e => {
+                        const which = e.which;
+                        if (which === 27) {
+                          this.setState({ isOpen: false });
+                        }
+                      },
+                    })}
+                  />
+                  {inputValue && isOpen && (
+                    <ListBox.Selection clearSelection={this.clearInputValue} />
+                  )}
+                  <ListBox.MenuIcon isOpen={isOpen} />
+                </ListBox.Field>
+                {isOpen && (
+                  <ListBox.Menu
+                    style={{
+                      maxHeight: '424px',
+                      overflowX: 'hidden',
+                      paddingTop: '8px',
+                    }}>
+                    {groupedByCategory(items, customCategorySorting).map(
+                      (group, index) => {
+                        const hasGroups =
+                          group[0] !== 'undefined' ? true : false;
+                        const filteredItems = filterItems(group[1], {
+                          itemToString,
+                          inputValue,
+                          expandedItems,
+                        });
+                        let categoryName = '';
+                        hasGroups
+                          ? (categoryName = group[0].toUpperCase())
+                          : null;
+
+                        return (
+                          <Fragment key={group[0] || index}>
+                            {hasGroups && filteredItems.length > 0 && (
+                              <div>
+                                <GroupLabel key={index}>
+                                  {categoryName}
+                                </GroupLabel>
+                              </div>
+                            )}
+                            {sortItems(filteredItems, {
+                              selectedItems,
+                              itemToString,
+                              compareItems,
+                              locale,
+                            }).map((item, itemIndex, itemArr) => {
+                              currentIndex++;
+
+                              if (highlightedIndex === currentIndex) {
+                                const parentItem = this.getParentItem(item);
+                                highlighted = {
+                                  item,
+                                  index: itemIndex,
+                                  parentIndex: parentItem
+                                    ? itemArr.indexOf(parentItem)
+                                    : -1,
+                                };
+                              }
+
+                              const itemProps = getItemProps({
+                                item,
+                                index: currentIndex,
+                              });
+                              const itemText = itemToString(item);
+
+                              const isChecked =
+                                selectedItem.filter(
+                                  selected => selected.id == item.id
+                                ).length > 0;
+                              const subOptions = getAllChildren(item, items);
+                              const groupIsOpen = !!NestedFilterableMultiselect.find(
+                                expandedItems,
+                                item
+                              );
+
+                              const myCheckedOptions = subOptions.filter(
+                                subOption =>
+                                  selectedItem.filter(
+                                    selected => selected.id === subOption.id
+                                  ).length > 0
+                              );
+                              const myUncheckedOptions = subOptions.filter(
+                                subOption =>
+                                  selectedItem.filter(
+                                    selected => selected.id === subOption.id
+                                  ).length === 0
+                              );
+
+                              const itemStyle = item.level
+                                ? {
+                                    paddingLeft: `${item.level * 19 + 16}px`,
+                                  }
+                                : undefined;
+
+                              return (
+                                <ListBox.MenuItem
+                                  style={itemStyle}
+                                  isActive={isChecked}
+                                  isHighlighted={
+                                    highlightedIndex === currentIndex
+                                  }
+                                  {...itemProps}
+                                  onClick={e => {
+                                    {
+                                      const clickOutOfCheckBox =
+                                        subOptions.length > 0 &&
+                                        (e.target.localName !== 'label' &&
+                                          e.target.localName !== 'input');
+                                      if (clickOutOfCheckBox) {
+                                        this.onToggle(item);
+                                      } else {
+                                        this.onItemChange(
+                                          item,
+                                          selectedItems,
+                                          onItemChange
+                                        );
+                                      }
+                                    }
+                                  }}>
+                                  <Checkbox
+                                    id={itemProps.id}
+                                    name={itemText}
+                                    checked={isChecked}
+                                    indeterminate={
+                                      myCheckedOptions &&
+                                      myUncheckedOptions &&
+                                      myCheckedOptions.length > 0 &&
+                                      myUncheckedOptions.length > 0
+                                    }
+                                    readOnly={true}
+                                    tabIndex="-1"
+                                    labelText={itemText}
+                                    tooltipText={showTooltip && itemText}
+                                    hasGroups={subOptions.length > 0}
+                                    isExpanded={groupIsOpen}
+                                  />
+                                </ListBox.MenuItem>
+                              );
+                            })}
+                          </Fragment>
+                        );
+                      }
+                    )}
+                  </ListBox.Menu>
+                )}
+              </ListBox>
+            )}
+          />
+        )}
+      />
+    );
+  }
+}
diff --git a/src/components/MultiSelect/__tests__/NestedFilterableMultiselect-test.js b/src/components/MultiSelect/__tests__/NestedFilterableMultiselect-test.js
new file mode 100644
index 0000000..aa705cb
--- /dev/null
+++ b/src/components/MultiSelect/__tests__/NestedFilterableMultiselect-test.js
@@ -0,0 +1,1673 @@
+import React from 'react';
+import debounce from 'lodash.debounce';
+import { mount } from 'enzyme';
+import Downshift from 'downshift';
+import NestedFilterableMultiselect from '../NestedFilterableMultiselect';
+import {
+  assertMenuClosed,
+  assertMenuOpen,
+  findMenuIconNode,
+  openMenu,
+  generateItems,
+  generateGenericItem,
+} from '../../ListBox/test-helpers';
+
+const listItemName = 'ListBoxMenuItem';
+
+jest.mock('lodash.debounce');
+
+debounce.mockImplementation(fn => fn);
+
+describe('NestedFilterableMultiselect', () => {
+  let mockProps;
+
+  describe('Simple multiselect', () => {
+    beforeEach(() => {
+      mockProps = {
+        disabled: false,
+        items: generateItems(5, index => ({
+          id: `id-${index}`,
+          label: `Item ${index}`,
+          value: index,
+        })),
+        initialSelectedItems: [],
+        onChange: jest.fn(),
+        placeholder: 'Placeholder...',
+      };
+    });
+
+    it('should render', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render without showing tooltip', () => {
+      const thisProps = {
+        ...mockProps,
+        showTooltip: false,
+      };
+      const wrapper = mount(<NestedFilterableMultiselect {...thisProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should display all items when the menu is open initially', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+      expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+    });
+
+    it('should let the user toggle the menu by the menu icon', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      findMenuIconNode(wrapper).simulate('click');
+      assertMenuOpen(wrapper, mockProps);
+      findMenuIconNode(wrapper).simulate('click');
+      assertMenuClosed(wrapper);
+    });
+
+    it('should close the menu by hitting Esc in search field', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      wrapper.find('.bx--text-input').simulate('keyDown', {
+        which: 40,
+        key: 'ArrowDown',
+      });
+      assertMenuOpen(wrapper, mockProps);
+      wrapper.find('.bx--text-input').simulate('keyUp', { which: 27 });
+      assertMenuClosed(wrapper);
+    });
+
+    it('should not close the menu after a user makes a selection', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+      wrapper
+        .find(listItemName)
+        .at(0)
+        .simulate('click');
+      assertMenuOpen(wrapper, mockProps);
+    });
+
+    it('should filter a list of items by the input value', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+      expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+      wrapper.find('Downshift').prop('onInputValueChange')('3', {
+        type: Downshift.stateChangeTypes.changeInput,
+      });
+      wrapper.update();
+      expect(wrapper.find(listItemName).length).toBe(1);
+      expect(wrapper.state().inputValue).toEqual('3');
+      expect(wrapper.state().expandedItems).toEqual([]);
+    });
+
+    it('should call `onChange` with each update to selected items via mouse click', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // Select the first two items
+      wrapper
+        .find(listItemName)
+        .at(0)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [mockProps.items[0]],
+      });
+
+      wrapper
+        .find(listItemName)
+        .at(1)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(2);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [mockProps.items[0], mockProps.items[1]],
+      });
+
+      // Un-select the next two items
+      wrapper
+        .find(listItemName)
+        .at(0)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(3);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [mockProps.items[1]],
+      });
+
+      wrapper
+        .find(listItemName)
+        .at(1)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(4);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [],
+      });
+    });
+
+    it('should call `onChange` with each update to selected items via keyboard', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      wrapper.setState({
+        highlightedIndex: 0,
+      });
+
+      // Select the first item
+      wrapper.find('.bx--text-input').simulate('keyDown', {
+        which: 13,
+        key: 'Enter',
+      });
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [mockProps.items[0]],
+      });
+
+      // Select the second item
+      wrapper.find('.bx--text-input').simulate('keyDown', {
+        which: 40,
+        key: 'ArrowDown',
+      });
+      wrapper.find('.bx--text-input').simulate('keyDown', {
+        which: 13,
+        key: 'Enter',
+      });
+      expect(mockProps.onChange).toHaveBeenCalledTimes(2);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [mockProps.items[0], mockProps.items[1]],
+      });
+
+      // Unselect the first item
+      wrapper.find('.bx--text-input').simulate('keyDown', {
+        which: 38,
+        key: 'ArrowUp',
+      });
+      wrapper.find('.bx--text-input').simulate('keyDown', {
+        which: 13,
+        key: 'Enter',
+      });
+      expect(mockProps.onChange).toHaveBeenCalledTimes(3);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [mockProps.items[1]],
+      });
+    });
+  });
+
+  describe('multiselect with categories', () => {
+    const customCategorySorting = jest.fn((a, b) => a[0].localeCompare(b[0]));
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+
+      mockProps = {
+        disabled: false,
+        items: generateItems(5, index => ({
+          id: `id-${index}`,
+          label: `Item ${index}`,
+          value: index,
+          category: `category-${index % 2 === 0 ? 1 : 2}`,
+        })),
+        initialSelectedItems: [],
+        customCategorySorting,
+        onChange: jest.fn(),
+        placeholder: 'Placeholder...',
+      };
+    });
+
+    it('should render', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      expect(wrapper).toMatchSnapshot();
+      openMenu(wrapper);
+      expect(
+        wrapper.containsAllMatchingElements([
+          <label className="bx--group-label">CATEGORY-1</label>,
+          <label className="bx--group-label">CATEGORY-2</label>,
+        ])
+      ).toBe(true);
+      expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+      expect(customCategorySorting).toHaveBeenCalled();
+    });
+
+    it('should clear all selections', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // Select the first two items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .simulate('click');
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(2);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [mockProps.items[0], mockProps.items[2]],
+      });
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(2);
+
+      // Clear all selection
+      wrapper.find('.bx--list-box__selection--multi').simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(3);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [],
+      });
+      expect(wrapper.find('ListBoxSelection').exists()).toBe(false);
+    });
+  });
+
+  describe('multiselect with suboptions', () => {
+    beforeEach(() => {
+      mockProps = {
+        disabled: false,
+        items: generateItems(3, index => ({
+          id: `id-${index}`,
+          label: `Nested item ${index}`,
+          value: index,
+          category: `category-${index % 2 === 0 ? 1 : 2}`,
+          options: [
+            {
+              id: 'option-id-1',
+              label: 'Sub item 1',
+              options:
+                index > 0
+                  ? [
+                      {
+                        id: 'suboption-id-11',
+                        label: 'Sub-child item 11',
+                      },
+                      {
+                        id: 'suboption-id-12',
+                        label: 'Sub-child item 12',
+                      },
+                    ]
+                  : undefined,
+            },
+            {
+              id: 'option-id-2',
+              label: 'Sub item 2',
+              options:
+                index === 1
+                  ? [
+                      {
+                        id: 'suboption-id-21',
+                        label: 'Sub-child item 21',
+                      },
+                      {
+                        id: 'suboption-id-22',
+                        label: 'Sub-child item 22',
+                      },
+                    ]
+                  : undefined,
+            },
+          ],
+        })),
+        onChange: jest.fn(),
+        placeholder: 'Placeholder...',
+      };
+    });
+
+    it('should render', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      expect(wrapper).toMatchSnapshot();
+      openMenu(wrapper);
+      expect(
+        wrapper.containsAllMatchingElements([
+          <label className="bx--group-label">CATEGORY-1</label>,
+          <label className="bx--group-label">CATEGORY-2</label>,
+        ])
+      ).toBe(true);
+      // Expand the child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find(listItemName).length).toBe(5);
+      // Expand the sub-child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find(listItemName).length).toBe(7);
+      // Collapse the sub-child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find(listItemName).length).toBe(5);
+      // Collapse the child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find(listItemName).length).toBe(3);
+    });
+
+    it('should filter a list of items by the input value (level=0)', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+      expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+      // Type 'Nested item 2'
+      wrapper.find('Downshift').prop('onInputValueChange')('Nested item 2', {
+        type: Downshift.stateChangeTypes.changeInput,
+      });
+      wrapper.update();
+      expect(wrapper.find(listItemName).length).toBe(1);
+      expect(wrapper.state().inputValue).toEqual('Nested item 2');
+      expect(wrapper.state().expandedItems).toEqual([]);
+      // An array input persists the current value
+      wrapper.find('Downshift').prop('onInputValueChange')([], {
+        type: Downshift.stateChangeTypes.changeInput,
+      });
+      wrapper.update();
+      expect(wrapper.find(listItemName).length).toBe(1);
+      expect(wrapper.state().inputValue).toEqual('Nested item 2');
+      expect(wrapper.state().expandedItems).toEqual([]);
+
+      // Expand the child items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find(listItemName).length).toBe(3);
+
+      // Expand the sub-child items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find(listItemName).length).toBe(5);
+    });
+
+    it('should filter a list of sub items by the input value (level=1)', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+      expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+      wrapper.find('Downshift').prop('onInputValueChange')('Sub item 2', {
+        type: Downshift.stateChangeTypes.changeInput,
+      });
+      wrapper.update();
+
+      const expectedExpandedItems = mockProps.items.map(item => ({
+        ...item,
+        level: 0,
+        options: undefined,
+        checked: undefined,
+        hasChildren: true,
+      }));
+
+      expect(wrapper.find(listItemName).length).toBe(6);
+      expect(wrapper.state().inputValue).toEqual('Sub item 2');
+      expect(wrapper.state().expandedItems).toEqual(expectedExpandedItems);
+
+      // Expand the sub-child items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(5)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find(listItemName).length).toBe(8);
+    });
+
+    it('should filter a list of sub child items by the input value (level=2)', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+      expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+      wrapper.find('Downshift').prop('onInputValueChange')('Sub-child item 1', {
+        type: Downshift.stateChangeTypes.changeInput,
+      });
+      wrapper.update();
+
+      const expectedExpandedItems = [
+        {
+          ...mockProps.items[1],
+          level: 0,
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...mockProps.items[1].options[0],
+          level: 1,
+          category: mockProps.items[1].category,
+          parentId: mockProps.items[1].id,
+          id: `${mockProps.items[1].id}-${mockProps.items[1].options[0].id}`,
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...mockProps.items[2],
+          level: 0,
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...mockProps.items[2].options[0],
+          level: 1,
+          category: mockProps.items[2].category,
+          parentId: mockProps.items[2].id,
+          id: `${mockProps.items[2].id}-${mockProps.items[2].options[0].id}`,
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+      ];
+
+      expect(wrapper.find(listItemName).length).toBe(8);
+      expect(wrapper.state().inputValue).toEqual('Sub-child item 1');
+      expect(wrapper.state().expandedItems).toEqual(expectedExpandedItems);
+
+      wrapper.find('Downshift').prop('onInputValueChange')('Sub-child item 2', {
+        type: Downshift.stateChangeTypes.changeInput,
+      });
+      wrapper.update();
+
+      expect(wrapper.find(listItemName).length).toBe(4);
+      expect(wrapper.state().inputValue).toEqual('Sub-child item 2');
+      expect(wrapper.state().expandedItems).toEqual([
+        ...expectedExpandedItems,
+        {
+          ...mockProps.items[1].options[1],
+          level: 1,
+          category: mockProps.items[1].category,
+          parentId: mockProps.items[1].id,
+          id: `${mockProps.items[1].id}-${mockProps.items[1].options[1].id}`,
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+      ]);
+    });
+
+    it('should filter all items by the input value', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+      expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+      wrapper.find('Downshift').prop('onInputValueChange')('xxx', {
+        type: Downshift.stateChangeTypes.changeInput,
+      });
+      wrapper.update();
+      expect(wrapper.find(listItemName).length).toBe(0);
+      expect(wrapper.state().inputValue).toEqual('xxx');
+      expect(wrapper.state().expandedItems).toEqual([]);
+
+      // No group should exist
+      expect(
+        wrapper.containsAllMatchingElements([
+          <label className="bx--group-label">CATEGORY-1</label>,
+          <label className="bx--group-label">CATEGORY-2</label>,
+        ])
+      ).toBe(false);
+    });
+
+    it('should clear the input value', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+      wrapper.setState({ inputValue: 'xxx' });
+
+      wrapper.find('ListBoxSelection').prop('clearSelection')({
+        stopPropagation: jest.fn(),
+      });
+      expect(wrapper.state().inputValue).toEqual('');
+    });
+
+    it('should call `onChange` with each update to selected items', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // Select the first item
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[0],
+            options: mockProps.items[0].options.map(o => ({
+              ...o,
+              checked: true,
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper
+          .find('ForwardRef(Checkbox)')
+          .at(0)
+          .prop('indeterminate')
+      ).toBe(false);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(2);
+
+      // Select the second item
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(2);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[0],
+            options: mockProps.items[0].options.map(o => ({
+              ...o,
+              checked: true,
+            })),
+          },
+          {
+            ...mockProps.items[2],
+            options: mockProps.items[2].options.map(o => ({
+              ...o,
+              checked: true,
+              options:
+                o.options &&
+                o.options.map(p => ({
+                  ...p,
+                  checked: true,
+                })),
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper
+          .find('ForwardRef(Checkbox)')
+          .at(1)
+          .prop('indeterminate')
+      ).toBe(false);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(5);
+
+      // Un-select the next two items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(3);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[2],
+            options: mockProps.items[2].options.map(o => ({
+              ...o,
+              checked: true,
+              options:
+                o.options &&
+                o.options.map(p => ({
+                  ...p,
+                  checked: true,
+                })),
+            })),
+          },
+        ],
+      });
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(3);
+
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(4);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [],
+      });
+      expect(wrapper.find('ListBoxSelection').exists()).toBe(false);
+    });
+
+    it('should call `onChange` with each update to selected sub items', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // Expand the child items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .find('span')
+        .simulate('click');
+      // Check the first suboption
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[0],
+            options: mockProps.items[0].options.map((o, i) => ({
+              ...o,
+              checked: i === 0,
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper
+          .find('ForwardRef(Checkbox)')
+          .at(0)
+          .prop('indeterminate')
+      ).toBe(true);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(1);
+
+      // Check the second suboption
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(2);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[0],
+            options: mockProps.items[0].options.map(o => ({
+              ...o,
+              checked: true,
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper
+          .find('ForwardRef(Checkbox)')
+          .at(1)
+          .prop('indeterminate')
+      ).toBe(false);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(2);
+
+      // Un-select the first suboption
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(3);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[0],
+            options: mockProps.items[0].options.map((o, i) => ({
+              ...o,
+              checked: i !== 0,
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper
+          .find('ForwardRef(Checkbox)')
+          .at(0)
+          .prop('indeterminate')
+      ).toBe(true);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(1);
+
+      // Un-select the second suboption
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(4);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [],
+      });
+      expect(
+        wrapper
+          .find('ForwardRef(Checkbox)')
+          .at(0)
+          .prop('indeterminate')
+      ).toBe(false);
+      expect(wrapper.find('ListBoxSelection').exists()).toBe(false);
+    });
+
+    it('should call `onChange` with each update to selected sub child items', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // Expand the child items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .find('span')
+        .simulate('click');
+      // Check child item 1
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(3)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[1],
+            options: mockProps.items[1].options.map((o, i) => ({
+              ...o,
+              checked: i === 0,
+              options: o.options.map(p => ({
+                ...p,
+                checked: i === 0,
+              })),
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper.find('Checkbox[name="Nested item 1"]').prop('indeterminate')
+      ).toBe(true);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(2);
+
+      // Expand sub child items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(3)
+        .find('span')
+        .simulate('click');
+
+      // Uncheck sub child 1
+      wrapper
+        .find('Checkbox[name="Sub-child item 11"]')
+        .find('.bx--checkbox-label')
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(2);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[1],
+            options: mockProps.items[1].options.map((o, i) => ({
+              ...o,
+              checked: false,
+              options: o.options.map((p, j) => ({
+                ...p,
+                checked: i !== 0 ? false : j !== 0,
+              })),
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper.find('Checkbox[name="Sub item 1"]').prop('indeterminate')
+      ).toBe(true);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 1"]').prop('indeterminate')
+      ).toBe(true);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(1);
+
+      // Uncheck sub child 2
+      wrapper
+        .find('Checkbox[name="Sub-child item 12"]')
+        .find('.bx--checkbox-label')
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(3);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [],
+      });
+      expect(
+        wrapper.find('Checkbox[name="Sub item 1"]').prop('indeterminate')
+      ).toBe(false);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 1"]').prop('indeterminate')
+      ).toBe(false);
+      expect(wrapper.find('ListBoxSelection').exists()).toBe(false);
+
+      // Check sub child 1
+      wrapper
+        .find('Checkbox[name="Sub-child item 11"]')
+        .find('.bx--checkbox-label')
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(4);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[1],
+            options: mockProps.items[1].options.map((o, i) => ({
+              ...o,
+              checked: false,
+              options: o.options.map((p, j) => ({
+                ...p,
+                checked: i !== 0 ? false : j === 0,
+              })),
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper.find('Checkbox[name="Sub item 1"]').prop('indeterminate')
+      ).toBe(true);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 1"]').prop('indeterminate')
+      ).toBe(true);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(1);
+    });
+
+    it('should clear all selections', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // Select the first two items
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .simulate('click');
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+
+      expect(mockProps.onChange).toHaveBeenCalledTimes(2);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [
+          {
+            ...mockProps.items[0],
+            options: mockProps.items[0].options.map(o => ({
+              ...o,
+              checked: true,
+            })),
+          },
+          {
+            ...mockProps.items[2],
+            options: mockProps.items[2].options.map(o => ({
+              ...o,
+              checked: true,
+              options:
+                o.options &&
+                o.options.map(p => ({
+                  ...p,
+                  checked: true,
+                })),
+            })),
+          },
+        ],
+      });
+      expect(
+        wrapper
+          .find('ForwardRef(Checkbox)')
+          .at(1)
+          .prop('indeterminate')
+      ).toBe(false);
+      expect(wrapper.find('ListBoxSelection').prop('selectionCount')).toBe(5);
+
+      // Clear all selection
+      wrapper.find('.bx--list-box__selection--multi').simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(3);
+      expect(mockProps.onChange).toHaveBeenCalledWith({
+        selectedItems: [],
+      });
+      expect(wrapper.find('ListBoxSelection').exists()).toBe(false);
+    });
+
+    it('should set parent item as indeterminate if not all suboptions are checked', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // checked the item with multiple levels
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('indeterminate')
+      ).toBe(false);
+      // expand suboptions
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Sub item 1"]').prop('indeterminate')
+      ).toBe(false);
+      // unselect subOption
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(3)
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('indeterminate')
+      ).toBe(true);
+      // expand subChild
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .find('span')
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Sub item 1"]').prop('indeterminate')
+      ).toBe(false);
+      // unselect subChild
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(3)
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Sub item 1"]').prop('indeterminate')
+      ).toBe(true);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('indeterminate')
+      ).toBe(true);
+    });
+
+    it('should unselect parent if all suboptions are unselect', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // checked the item with multiple levels
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('checked')
+      ).toBe(true);
+      // expand suboptions
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+      // unselect 1 subOption
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('indeterminate')
+      ).toBe(true);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('checked')
+      ).toBe(true);
+      // unselect 2 subOption
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(3)
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('checked')
+      ).toBe(false);
+    });
+
+    it('should unselect parent if the suboptions at all levels are unselect', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      // checked the item with multiple levels
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('checked')
+      ).toBe(true);
+      // expand suboptions
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+      // unselect 1 subOption
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(3)
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('indeterminate')
+      ).toBe(true);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('checked')
+      ).toBe(true);
+      // expand subChild
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .find('span')
+        .simulate('click');
+      // unselect 1 subChild
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(3)
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Sub item 1"]').prop('indeterminate')
+      ).toBe(true);
+      expect(wrapper.find('Checkbox[name="Sub item 1"]').prop('checked')).toBe(
+        true
+      );
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('indeterminate')
+      ).toBe(true);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('checked')
+      ).toBe(true);
+      // unselect 2 subChild
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(4)
+        .simulate('click');
+      expect(
+        wrapper.find('Checkbox[name="Sub item 1"]').prop('indeterminate')
+      ).toBe(false);
+      expect(wrapper.find('Checkbox[name="Sub item 1"]').prop('checked')).toBe(
+        false
+      );
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('indeterminate')
+      ).toBe(false);
+      expect(
+        wrapper.find('Checkbox[name="Nested item 2"]').prop('checked')
+      ).toBe(false);
+    });
+
+    it('should expand when element is clicked out of CheckBox', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      //expand suboptions
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find('.bx--checkbox-label').length).toEqual(5);
+    });
+
+    it('should expand suboptions via keyboard', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      wrapper.setState({
+        highlightedIndex: 0,
+      });
+      //expand suboptions
+      wrapper.find('.bx--text-input').simulate('keyDown', {
+        which: 40,
+        key: 'ArrowDown',
+      });
+      expect(wrapper.find('.bx--checkbox-label').length).toEqual(5);
+      expect(wrapper.state().highlightedIndex).toEqual(1);
+      // collapse suboptions
+      wrapper.find('.bx--text-input').simulate('keyDown', {
+        which: 38,
+        key: 'ArrowUp',
+      });
+      expect(wrapper.find('.bx--checkbox-label').length).toEqual(3);
+      expect(wrapper.state().highlightedIndex).toEqual(0);
+    });
+
+    it('should not expand subOptions when parent is selected', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .simulate('click');
+      expect(mockProps.onChange).toHaveBeenCalledTimes(1);
+      expect(wrapper.find('.bx--checkbox-label').length).toEqual(3);
+    });
+
+    it('should highlight suboption when mouse enter', () => {
+      const wrapper = mount(<NestedFilterableMultiselect {...mockProps} />);
+      openMenu(wrapper);
+
+      //expand suboptions
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .find('span')
+        .simulate('click');
+      expect(wrapper.find('.bx--checkbox-label').length).toEqual(5);
+
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('mousemove');
+      expect(wrapper.state().highlightedIndex).toEqual(1);
+    });
+  });
+
+  describe('multiselect with initial selections', () => {
+    beforeEach(() => {
+      mockProps = {
+        disabled: false,
+        items: generateItems(3, index => ({
+          id: `id-${index}`,
+          label: `Nested item ${index}`,
+          value: index,
+          category: `category-${index % 2 === 0 ? 1 : 2}`,
+          options:
+            index === 0
+              ? [
+                  {
+                    id: 'option-id-1',
+                    label: 'Sub item 1',
+                    options: [
+                      {
+                        id: 'suboption-id-11',
+                        label: 'Sub-child item 11',
+                      },
+                      {
+                        id: 'suboption-id-12',
+                        label: 'Sub-child item 12',
+                      },
+                    ],
+                  },
+                  {
+                    id: 'option-id-2',
+                    label: 'Sub item 2',
+                    options: [
+                      {
+                        id: 'suboption-id-21',
+                        label: 'Sub-child item 21',
+                      },
+                      {
+                        id: 'suboption-id-22',
+                        label: 'Sub-child item 22',
+                      },
+                    ],
+                  },
+                ]
+              : undefined,
+        })),
+        placeholder: 'Placeholder...',
+      };
+    });
+
+    it('preselect item at level 0', () => {
+      const props = {
+        ...mockProps,
+        initialSelectedItems: [
+          {
+            ...mockProps.items[0],
+          },
+          {
+            ...mockProps.items[2],
+          },
+        ],
+      };
+
+      const wrapper = mount(<NestedFilterableMultiselect {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      openMenu(wrapper);
+      // Expand the child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .find('span')
+        .simulate('click');
+      // Expand the sub-child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .find('span')
+        .simulate('click');
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+
+      const checked = wrapper
+        .find('ForwardRef(Checkbox)')
+        .filterWhere(node => !!node.prop('checked'));
+      expect(checked.length).toEqual(8);
+      expect(wrapper.instance().state.flattenedSelectedItems).toEqual([
+        {
+          ...props.initialSelectedItems[0],
+          level: 0,
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[0],
+          level: 1,
+          parentId: props.initialSelectedItems[0].id,
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-1',
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[0].options[0],
+          level: 2,
+          parentId: 'id-0-option-id-1',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-1-suboption-id-11',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+        {
+          ...props.initialSelectedItems[0].options[0].options[1],
+          level: 2,
+          parentId: 'id-0-option-id-1',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-1-suboption-id-12',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+        {
+          ...props.initialSelectedItems[0].options[1],
+          level: 1,
+          parentId: props.initialSelectedItems[0].id,
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-2',
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[1].options[0],
+          level: 2,
+          parentId: 'id-0-option-id-2',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-2-suboption-id-21',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+        {
+          ...props.initialSelectedItems[0].options[1].options[1],
+          level: 2,
+          parentId: 'id-0-option-id-2',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-2-suboption-id-22',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+        {
+          ...props.initialSelectedItems[1],
+          level: 0,
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+      ]);
+    });
+
+    it('preselect item at level 1', () => {
+      const props = {
+        ...mockProps,
+        initialSelectedItems: [
+          {
+            ...mockProps.items[0],
+            options: mockProps.items[0].options.map(o => ({
+              ...o,
+              checked: true,
+            })),
+          },
+        ],
+      };
+
+      const wrapper = mount(<NestedFilterableMultiselect {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      openMenu(wrapper);
+      // Expand the child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .find('span')
+        .simulate('click');
+      // Expand the sub-child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .find('span')
+        .simulate('click');
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+
+      const checked = wrapper
+        .find('ForwardRef(Checkbox)')
+        .filterWhere(node => !!node.prop('checked'));
+      expect(checked.length).toEqual(7);
+      expect(wrapper.instance().state.flattenedSelectedItems).toEqual([
+        {
+          ...props.initialSelectedItems[0],
+          level: 0,
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[0],
+          level: 1,
+          parentId: props.initialSelectedItems[0].id,
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-1',
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[0].options[0],
+          level: 2,
+          parentId: 'id-0-option-id-1',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-1-suboption-id-11',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+        {
+          ...props.initialSelectedItems[0].options[0].options[1],
+          level: 2,
+          parentId: 'id-0-option-id-1',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-1-suboption-id-12',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+        {
+          ...props.initialSelectedItems[0].options[1],
+          level: 1,
+          parentId: props.initialSelectedItems[0].id,
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-2',
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[1].options[0],
+          level: 2,
+          parentId: 'id-0-option-id-2',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-2-suboption-id-21',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+        {
+          ...props.initialSelectedItems[0].options[1].options[1],
+          level: 2,
+          parentId: 'id-0-option-id-2',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-2-suboption-id-22',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+      ]);
+    });
+
+    it('preselect item at level 2', () => {
+      const props = {
+        ...mockProps,
+        initialSelectedItems: [
+          {
+            ...mockProps.items[0],
+            options: mockProps.items[0].options.map(o => ({
+              ...o,
+              options: o.options.map((p, i) => ({
+                ...p,
+                checked: i === 0,
+              })),
+            })),
+          },
+        ],
+      };
+
+      const wrapper = mount(<NestedFilterableMultiselect {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      openMenu(wrapper);
+      // Expand the child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(0)
+        .find('span')
+        .simulate('click');
+      // Expand the sub-child items via mouse click
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(2)
+        .find('span')
+        .simulate('click');
+      wrapper
+        .find('.bx--checkbox-label')
+        .at(1)
+        .find('span')
+        .simulate('click');
+
+      const checked = wrapper
+        .find('ForwardRef(Checkbox)')
+        .filterWhere(node => !!node.prop('checked'));
+      expect(checked.length).toEqual(5);
+      expect(wrapper.instance().state.flattenedSelectedItems).toEqual([
+        {
+          ...props.initialSelectedItems[0],
+          level: 0,
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[0],
+          level: 1,
+          parentId: props.initialSelectedItems[0].id,
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-1',
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[0].options[0],
+          level: 2,
+          parentId: 'id-0-option-id-1',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-1-suboption-id-11',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+        {
+          ...props.initialSelectedItems[0].options[1],
+          level: 1,
+          parentId: props.initialSelectedItems[0].id,
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-2',
+          options: undefined,
+          checked: undefined,
+          hasChildren: true,
+        },
+        {
+          ...props.initialSelectedItems[0].options[1].options[0],
+          level: 2,
+          parentId: 'id-0-option-id-2',
+          category: props.initialSelectedItems[0].category,
+          id: 'id-0-option-id-2-suboption-id-21',
+          options: undefined,
+          checked: undefined,
+          hasChildren: false,
+        },
+      ]);
+    });
+  });
+
+  describe('multiselect with flat list', () => {
+    beforeEach(() => {
+      mockProps = {
+        disabled: false,
+        items: [
+          {
+            id: 'id-0',
+            label: 'Flat item 1',
+            value: 0,
+            category: 'category-0',
+            level: 0,
+            hasChildren: true,
+          },
+          {
+            id: 'id-1',
+            label: 'Child item 1',
+            value: 1,
+            category: 'category-0',
+            level: 1,
+            hasChildren: true,
+            parentId: 'id-0',
+          },
+          {
+            id: 'id-2',
+            label: 'Subchild item 2',
+            value: 2,
+            category: 'category-0',
+            level: 2,
+            parentId: 'id-1',
+          },
+          {
+            id: 'id-3',
+            label: 'Subchild item 3',
+            value: 3,
+            category: 'category-0',
+            level: 2,
+            parentId: 'id-1',
+          },
+          {
+            id: 'id-4',
+            label: 'Child item 4',
+            value: 4,
+            category: 'category-0',
+            level: 1,
+            parentId: 'id-0',
+          },
+          {
+            id: 'id-5',
+            label: 'Flat item 5',
+            value: 5,
+            category: 'category-0',
+            level: 0,
+          },
+          {
+            id: 'id-6',
+            label: 'Flat item 6',
+            value: 6,
+            category: 'category-1',
+            level: 0,
+            hasChildren: true,
+          },
+          {
+            id: 'id-7',
+            label: 'Child item 7',
+            value: 7,
+            category: 'category-1',
+            level: 1,
+            parentId: 'id-6',
+          },
+          {
+            id: 'id-8',
+            label: 'Child item 8',
+            value: 8,
+            category: 'category-1',
+            level: 1,
+            parentId: 'id-6',
+          },
+        ],
+        placeholder: 'Placeholder...',
+      };
+    });
+
+    it('preselect item at level 0', () => {
+      const props = {
+        ...mockProps,
+        initialSelectedItems: [
+          {
+            ...mockProps.items[0],
+          },
+          {
+            ...mockProps.items[6],
+          },
+        ],
+      };
+
+      const wrapper = mount(<NestedFilterableMultiselect {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.instance().state.flattenedSelectedItems).toEqual([
+        mockProps.items[0],
+        mockProps.items[6],
+        mockProps.items[1],
+        mockProps.items[4],
+        mockProps.items[2],
+        mockProps.items[3],
+        mockProps.items[7],
+        mockProps.items[8],
+      ]);
+    });
+
+    it('preselect item at level 1', () => {
+      const props = {
+        ...mockProps,
+        initialSelectedItems: [
+          {
+            ...mockProps.items[1],
+          },
+          {
+            ...mockProps.items[5],
+          },
+          {
+            ...mockProps.items[7],
+          },
+        ],
+      };
+
+      const wrapper = mount(<NestedFilterableMultiselect {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.instance().state.flattenedSelectedItems).toEqual([
+        mockProps.items[1],
+        mockProps.items[5],
+        mockProps.items[7],
+        mockProps.items[0],
+        mockProps.items[2],
+        mockProps.items[3],
+        mockProps.items[6],
+      ]);
+    });
+
+    it('preselect item at level 2', () => {
+      const props = {
+        ...mockProps,
+        initialSelectedItems: [
+          {
+            ...mockProps.items[2],
+          },
+        ],
+      };
+
+      const wrapper = mount(<NestedFilterableMultiselect {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.instance().state.flattenedSelectedItems).toEqual([
+        mockProps.items[2],
+        mockProps.items[0],
+        mockProps.items[1],
+      ]);
+    });
+  });
+});
diff --git a/src/components/MultiSelect/__tests__/__snapshots__/NestedFilterableMultiselect-test.js.snap b/src/components/MultiSelect/__tests__/__snapshots__/NestedFilterableMultiselect-test.js.snap
new file mode 100644
index 0000000..a44647e
--- /dev/null
+++ b/src/components/MultiSelect/__tests__/__snapshots__/NestedFilterableMultiselect-test.js.snap
@@ -0,0 +1,3478 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NestedFilterableMultiselect Simple multiselect should render 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={Array []}
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "id": "id-0",
+        "label": "Item 0",
+        "value": 0,
+      },
+      Object {
+        "id": "id-1",
+        "label": "Item 1",
+        "value": 1,
+      },
+      Object {
+        "id": "id-2",
+        "label": "Item 2",
+        "value": 2,
+      },
+      Object {
+        "id": "id-3",
+        "label": "Item 3",
+        "value": 3,
+      },
+      Object {
+        "id": "id-4",
+        "label": "Item 4",
+        "value": 4,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  onChange={[MockFunction]}
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={Array []}
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={Array []}
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-0-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect Simple multiselect should render without showing tooltip 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={Array []}
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "id": "id-0",
+        "label": "Item 0",
+        "value": 0,
+      },
+      Object {
+        "id": "id-1",
+        "label": "Item 1",
+        "value": 1,
+      },
+      Object {
+        "id": "id-2",
+        "label": "Item 2",
+        "value": 2,
+      },
+      Object {
+        "id": "id-3",
+        "label": "Item 3",
+        "value": 3,
+      },
+      Object {
+        "id": "id-4",
+        "label": "Item 4",
+        "value": 4,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  onChange={[MockFunction]}
+  placeholder="Placeholder..."
+  showTooltip={false}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={Array []}
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={Array []}
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-1-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect multiselect with categories should render 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  customCategorySorting={[MockFunction]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={Array []}
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "category": "category-1",
+        "id": "id-0",
+        "label": "Item 0",
+        "value": 0,
+      },
+      Object {
+        "category": "category-2",
+        "id": "id-1",
+        "label": "Item 1",
+        "value": 1,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-2",
+        "label": "Item 2",
+        "value": 2,
+      },
+      Object {
+        "category": "category-2",
+        "id": "id-3",
+        "label": "Item 3",
+        "value": 3,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-4",
+        "label": "Item 4",
+        "value": 4,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  onChange={[MockFunction]}
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={Array []}
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={Array []}
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-9-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect multiselect with flat list preselect item at level 0 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={
+    Array [
+      Object {
+        "category": "category-0",
+        "hasChildren": true,
+        "id": "id-0",
+        "label": "Flat item 1",
+        "level": 0,
+        "value": 0,
+      },
+      Object {
+        "category": "category-1",
+        "hasChildren": true,
+        "id": "id-6",
+        "label": "Flat item 6",
+        "level": 0,
+        "value": 6,
+      },
+    ]
+  }
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "category": "category-0",
+        "hasChildren": true,
+        "id": "id-0",
+        "label": "Flat item 1",
+        "level": 0,
+        "value": 0,
+      },
+      Object {
+        "category": "category-0",
+        "hasChildren": true,
+        "id": "id-1",
+        "label": "Child item 1",
+        "level": 1,
+        "parentId": "id-0",
+        "value": 1,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-2",
+        "label": "Subchild item 2",
+        "level": 2,
+        "parentId": "id-1",
+        "value": 2,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-3",
+        "label": "Subchild item 3",
+        "level": 2,
+        "parentId": "id-1",
+        "value": 3,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-4",
+        "label": "Child item 4",
+        "level": 1,
+        "parentId": "id-0",
+        "value": 4,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-5",
+        "label": "Flat item 5",
+        "level": 0,
+        "value": 5,
+      },
+      Object {
+        "category": "category-1",
+        "hasChildren": true,
+        "id": "id-6",
+        "label": "Flat item 6",
+        "level": 0,
+        "value": 6,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-7",
+        "label": "Child item 7",
+        "level": 1,
+        "parentId": "id-6",
+        "value": 7,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-8",
+        "label": "Child item 8",
+        "level": 1,
+        "parentId": "id-6",
+        "value": 8,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={
+      Array [
+        Object {
+          "category": "category-0",
+          "hasChildren": true,
+          "id": "id-0",
+          "label": "Flat item 1",
+          "level": 0,
+          "value": 0,
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-6",
+          "label": "Flat item 6",
+          "level": 0,
+          "value": 6,
+        },
+        Object {
+          "category": "category-0",
+          "hasChildren": true,
+          "id": "id-1",
+          "label": "Child item 1",
+          "level": 1,
+          "parentId": "id-0",
+          "value": 1,
+        },
+        Object {
+          "category": "category-0",
+          "id": "id-4",
+          "label": "Child item 4",
+          "level": 1,
+          "parentId": "id-0",
+          "value": 4,
+        },
+        Object {
+          "category": "category-0",
+          "id": "id-2",
+          "label": "Subchild item 2",
+          "level": 2,
+          "parentId": "id-1",
+          "value": 2,
+        },
+        Object {
+          "category": "category-0",
+          "id": "id-3",
+          "label": "Subchild item 3",
+          "level": 2,
+          "parentId": "id-1",
+          "value": 3,
+        },
+        Object {
+          "category": "category-1",
+          "id": "id-7",
+          "label": "Child item 7",
+          "level": 1,
+          "parentId": "id-6",
+          "value": 7,
+        },
+        Object {
+          "category": "category-1",
+          "id": "id-8",
+          "label": "Child item 8",
+          "level": 1,
+          "parentId": "id-6",
+          "value": 8,
+        },
+      ]
+    }
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={
+        Array [
+          Object {
+            "category": "category-0",
+            "hasChildren": true,
+            "id": "id-0",
+            "label": "Flat item 1",
+            "level": 0,
+            "value": 0,
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-6",
+            "label": "Flat item 6",
+            "level": 0,
+            "value": 6,
+          },
+          Object {
+            "category": "category-0",
+            "hasChildren": true,
+            "id": "id-1",
+            "label": "Child item 1",
+            "level": 1,
+            "parentId": "id-0",
+            "value": 1,
+          },
+          Object {
+            "category": "category-0",
+            "id": "id-4",
+            "label": "Child item 4",
+            "level": 1,
+            "parentId": "id-0",
+            "value": 4,
+          },
+          Object {
+            "category": "category-0",
+            "id": "id-2",
+            "label": "Subchild item 2",
+            "level": 2,
+            "parentId": "id-1",
+            "value": 2,
+          },
+          Object {
+            "category": "category-0",
+            "id": "id-3",
+            "label": "Subchild item 3",
+            "level": 2,
+            "parentId": "id-1",
+            "value": 3,
+          },
+          Object {
+            "category": "category-1",
+            "id": "id-7",
+            "label": "Child item 7",
+            "level": 1,
+            "parentId": "id-6",
+            "value": 7,
+          },
+          Object {
+            "category": "category-1",
+            "id": "id-8",
+            "label": "Child item 8",
+            "level": 1,
+            "parentId": "id-6",
+            "value": 8,
+          },
+        ]
+      }
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <ListBoxSelection
+                clearSelection={[Function]}
+                selectionCount={5}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__selection bx--list-box__selection--multi"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="button"
+                  tabIndex="0"
+                  title="Clear all selected items"
+                >
+                  5
+                  <Icon
+                    description="Clear all selected items"
+                    fillRule="evenodd"
+                    focusable="false"
+                    icon={
+                      Object {
+                        "height": "10",
+                        "id": "icon--close",
+                        "name": "icon--close",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z",
+                              "fill-rule": "nonzero",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--close",
+                        "viewBox": "0 0 10 10",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--close"
+                    role="img"
+                  >
+                    <svg
+                      alt="Clear all selected items"
+                      aria-label="Clear all selected items"
+                      fillRule="evenodd"
+                      focusable="false"
+                      height="10"
+                      name="icon--close"
+                      role="img"
+                      viewBox="0 0 10 10"
+                      width="10"
+                    >
+                      <title>
+                        Clear all selected items
+                      </title>
+                      <path
+                        d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxSelection>
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-31-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect multiselect with flat list preselect item at level 1 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={
+    Array [
+      Object {
+        "category": "category-0",
+        "hasChildren": true,
+        "id": "id-1",
+        "label": "Child item 1",
+        "level": 1,
+        "parentId": "id-0",
+        "value": 1,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-5",
+        "label": "Flat item 5",
+        "level": 0,
+        "value": 5,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-7",
+        "label": "Child item 7",
+        "level": 1,
+        "parentId": "id-6",
+        "value": 7,
+      },
+    ]
+  }
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "category": "category-0",
+        "hasChildren": true,
+        "id": "id-0",
+        "label": "Flat item 1",
+        "level": 0,
+        "value": 0,
+      },
+      Object {
+        "category": "category-0",
+        "hasChildren": true,
+        "id": "id-1",
+        "label": "Child item 1",
+        "level": 1,
+        "parentId": "id-0",
+        "value": 1,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-2",
+        "label": "Subchild item 2",
+        "level": 2,
+        "parentId": "id-1",
+        "value": 2,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-3",
+        "label": "Subchild item 3",
+        "level": 2,
+        "parentId": "id-1",
+        "value": 3,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-4",
+        "label": "Child item 4",
+        "level": 1,
+        "parentId": "id-0",
+        "value": 4,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-5",
+        "label": "Flat item 5",
+        "level": 0,
+        "value": 5,
+      },
+      Object {
+        "category": "category-1",
+        "hasChildren": true,
+        "id": "id-6",
+        "label": "Flat item 6",
+        "level": 0,
+        "value": 6,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-7",
+        "label": "Child item 7",
+        "level": 1,
+        "parentId": "id-6",
+        "value": 7,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-8",
+        "label": "Child item 8",
+        "level": 1,
+        "parentId": "id-6",
+        "value": 8,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={
+      Array [
+        Object {
+          "category": "category-0",
+          "hasChildren": true,
+          "id": "id-1",
+          "label": "Child item 1",
+          "level": 1,
+          "parentId": "id-0",
+          "value": 1,
+        },
+        Object {
+          "category": "category-0",
+          "id": "id-5",
+          "label": "Flat item 5",
+          "level": 0,
+          "value": 5,
+        },
+        Object {
+          "category": "category-1",
+          "id": "id-7",
+          "label": "Child item 7",
+          "level": 1,
+          "parentId": "id-6",
+          "value": 7,
+        },
+        Object {
+          "category": "category-0",
+          "hasChildren": true,
+          "id": "id-0",
+          "label": "Flat item 1",
+          "level": 0,
+          "value": 0,
+        },
+        Object {
+          "category": "category-0",
+          "id": "id-2",
+          "label": "Subchild item 2",
+          "level": 2,
+          "parentId": "id-1",
+          "value": 2,
+        },
+        Object {
+          "category": "category-0",
+          "id": "id-3",
+          "label": "Subchild item 3",
+          "level": 2,
+          "parentId": "id-1",
+          "value": 3,
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-6",
+          "label": "Flat item 6",
+          "level": 0,
+          "value": 6,
+        },
+      ]
+    }
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={
+        Array [
+          Object {
+            "category": "category-0",
+            "hasChildren": true,
+            "id": "id-1",
+            "label": "Child item 1",
+            "level": 1,
+            "parentId": "id-0",
+            "value": 1,
+          },
+          Object {
+            "category": "category-0",
+            "id": "id-5",
+            "label": "Flat item 5",
+            "level": 0,
+            "value": 5,
+          },
+          Object {
+            "category": "category-1",
+            "id": "id-7",
+            "label": "Child item 7",
+            "level": 1,
+            "parentId": "id-6",
+            "value": 7,
+          },
+          Object {
+            "category": "category-0",
+            "hasChildren": true,
+            "id": "id-0",
+            "label": "Flat item 1",
+            "level": 0,
+            "value": 0,
+          },
+          Object {
+            "category": "category-0",
+            "id": "id-2",
+            "label": "Subchild item 2",
+            "level": 2,
+            "parentId": "id-1",
+            "value": 2,
+          },
+          Object {
+            "category": "category-0",
+            "id": "id-3",
+            "label": "Subchild item 3",
+            "level": 2,
+            "parentId": "id-1",
+            "value": 3,
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-6",
+            "label": "Flat item 6",
+            "level": 0,
+            "value": 6,
+          },
+        ]
+      }
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <ListBoxSelection
+                clearSelection={[Function]}
+                selectionCount={4}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__selection bx--list-box__selection--multi"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="button"
+                  tabIndex="0"
+                  title="Clear all selected items"
+                >
+                  4
+                  <Icon
+                    description="Clear all selected items"
+                    fillRule="evenodd"
+                    focusable="false"
+                    icon={
+                      Object {
+                        "height": "10",
+                        "id": "icon--close",
+                        "name": "icon--close",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z",
+                              "fill-rule": "nonzero",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--close",
+                        "viewBox": "0 0 10 10",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--close"
+                    role="img"
+                  >
+                    <svg
+                      alt="Clear all selected items"
+                      aria-label="Clear all selected items"
+                      fillRule="evenodd"
+                      focusable="false"
+                      height="10"
+                      name="icon--close"
+                      role="img"
+                      viewBox="0 0 10 10"
+                      width="10"
+                    >
+                      <title>
+                        Clear all selected items
+                      </title>
+                      <path
+                        d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxSelection>
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-32-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect multiselect with flat list preselect item at level 2 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={
+    Array [
+      Object {
+        "category": "category-0",
+        "id": "id-2",
+        "label": "Subchild item 2",
+        "level": 2,
+        "parentId": "id-1",
+        "value": 2,
+      },
+    ]
+  }
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "category": "category-0",
+        "hasChildren": true,
+        "id": "id-0",
+        "label": "Flat item 1",
+        "level": 0,
+        "value": 0,
+      },
+      Object {
+        "category": "category-0",
+        "hasChildren": true,
+        "id": "id-1",
+        "label": "Child item 1",
+        "level": 1,
+        "parentId": "id-0",
+        "value": 1,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-2",
+        "label": "Subchild item 2",
+        "level": 2,
+        "parentId": "id-1",
+        "value": 2,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-3",
+        "label": "Subchild item 3",
+        "level": 2,
+        "parentId": "id-1",
+        "value": 3,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-4",
+        "label": "Child item 4",
+        "level": 1,
+        "parentId": "id-0",
+        "value": 4,
+      },
+      Object {
+        "category": "category-0",
+        "id": "id-5",
+        "label": "Flat item 5",
+        "level": 0,
+        "value": 5,
+      },
+      Object {
+        "category": "category-1",
+        "hasChildren": true,
+        "id": "id-6",
+        "label": "Flat item 6",
+        "level": 0,
+        "value": 6,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-7",
+        "label": "Child item 7",
+        "level": 1,
+        "parentId": "id-6",
+        "value": 7,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-8",
+        "label": "Child item 8",
+        "level": 1,
+        "parentId": "id-6",
+        "value": 8,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={
+      Array [
+        Object {
+          "category": "category-0",
+          "id": "id-2",
+          "label": "Subchild item 2",
+          "level": 2,
+          "parentId": "id-1",
+          "value": 2,
+        },
+        Object {
+          "category": "category-0",
+          "hasChildren": true,
+          "id": "id-0",
+          "label": "Flat item 1",
+          "level": 0,
+          "value": 0,
+        },
+        Object {
+          "category": "category-0",
+          "hasChildren": true,
+          "id": "id-1",
+          "label": "Child item 1",
+          "level": 1,
+          "parentId": "id-0",
+          "value": 1,
+        },
+      ]
+    }
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={
+        Array [
+          Object {
+            "category": "category-0",
+            "id": "id-2",
+            "label": "Subchild item 2",
+            "level": 2,
+            "parentId": "id-1",
+            "value": 2,
+          },
+          Object {
+            "category": "category-0",
+            "hasChildren": true,
+            "id": "id-0",
+            "label": "Flat item 1",
+            "level": 0,
+            "value": 0,
+          },
+          Object {
+            "category": "category-0",
+            "hasChildren": true,
+            "id": "id-1",
+            "label": "Child item 1",
+            "level": 1,
+            "parentId": "id-0",
+            "value": 1,
+          },
+        ]
+      }
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <ListBoxSelection
+                clearSelection={[Function]}
+                selectionCount={1}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__selection bx--list-box__selection--multi"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="button"
+                  tabIndex="0"
+                  title="Clear all selected items"
+                >
+                  1
+                  <Icon
+                    description="Clear all selected items"
+                    fillRule="evenodd"
+                    focusable="false"
+                    icon={
+                      Object {
+                        "height": "10",
+                        "id": "icon--close",
+                        "name": "icon--close",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z",
+                              "fill-rule": "nonzero",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--close",
+                        "viewBox": "0 0 10 10",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--close"
+                    role="img"
+                  >
+                    <svg
+                      alt="Clear all selected items"
+                      aria-label="Clear all selected items"
+                      fillRule="evenodd"
+                      focusable="false"
+                      height="10"
+                      name="icon--close"
+                      role="img"
+                      viewBox="0 0 10 10"
+                      width="10"
+                    >
+                      <title>
+                        Clear all selected items
+                      </title>
+                      <path
+                        d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxSelection>
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-33-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect multiselect with initial selections preselect item at level 0 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={
+    Array [
+      Object {
+        "category": "category-1",
+        "id": "id-0",
+        "label": "Nested item 0",
+        "options": Array [
+          Object {
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": Array [
+              Object {
+                "id": "suboption-id-11",
+                "label": "Sub-child item 11",
+              },
+              Object {
+                "id": "suboption-id-12",
+                "label": "Sub-child item 12",
+              },
+            ],
+          },
+          Object {
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": Array [
+              Object {
+                "id": "suboption-id-21",
+                "label": "Sub-child item 21",
+              },
+              Object {
+                "id": "suboption-id-22",
+                "label": "Sub-child item 22",
+              },
+            ],
+          },
+        ],
+        "value": 0,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-2",
+        "label": "Nested item 2",
+        "options": undefined,
+        "value": 2,
+      },
+    ]
+  }
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "category": "category-1",
+        "id": "id-0",
+        "label": "Nested item 0",
+        "options": Array [
+          Object {
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": Array [
+              Object {
+                "id": "suboption-id-11",
+                "label": "Sub-child item 11",
+              },
+              Object {
+                "id": "suboption-id-12",
+                "label": "Sub-child item 12",
+              },
+            ],
+          },
+          Object {
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": Array [
+              Object {
+                "id": "suboption-id-21",
+                "label": "Sub-child item 21",
+              },
+              Object {
+                "id": "suboption-id-22",
+                "label": "Sub-child item 22",
+              },
+            ],
+          },
+        ],
+        "value": 0,
+      },
+      Object {
+        "category": "category-2",
+        "id": "id-1",
+        "label": "Nested item 1",
+        "options": undefined,
+        "value": 1,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-2",
+        "label": "Nested item 2",
+        "options": undefined,
+        "value": 2,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={
+      Array [
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0",
+          "label": "Nested item 0",
+          "level": 0,
+          "parentId": undefined,
+          "value": 0,
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0-option-id-1",
+          "label": "Sub item 1",
+          "level": 1,
+          "parentId": "id-0",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-1-suboption-id-11",
+          "label": "Sub-child item 11",
+          "level": 2,
+          "parentId": "id-0-option-id-1",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-1-suboption-id-12",
+          "label": "Sub-child item 12",
+          "level": 2,
+          "parentId": "id-0-option-id-1",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0-option-id-2",
+          "label": "Sub item 2",
+          "level": 1,
+          "parentId": "id-0",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-2-suboption-id-21",
+          "label": "Sub-child item 21",
+          "level": 2,
+          "parentId": "id-0-option-id-2",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-2-suboption-id-22",
+          "label": "Sub-child item 22",
+          "level": 2,
+          "parentId": "id-0-option-id-2",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-2",
+          "label": "Nested item 2",
+          "level": 0,
+          "parentId": undefined,
+          "value": 2,
+        },
+      ]
+    }
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={
+        Array [
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0",
+            "label": "Nested item 0",
+            "level": 0,
+            "parentId": undefined,
+            "value": 0,
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0-option-id-1",
+            "label": "Sub item 1",
+            "level": 1,
+            "parentId": "id-0",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-1-suboption-id-11",
+            "label": "Sub-child item 11",
+            "level": 2,
+            "parentId": "id-0-option-id-1",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-1-suboption-id-12",
+            "label": "Sub-child item 12",
+            "level": 2,
+            "parentId": "id-0-option-id-1",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0-option-id-2",
+            "label": "Sub item 2",
+            "level": 1,
+            "parentId": "id-0",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-2-suboption-id-21",
+            "label": "Sub-child item 21",
+            "level": 2,
+            "parentId": "id-0-option-id-2",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-2-suboption-id-22",
+            "label": "Sub-child item 22",
+            "level": 2,
+            "parentId": "id-0-option-id-2",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-2",
+            "label": "Nested item 2",
+            "level": 0,
+            "parentId": undefined,
+            "value": 2,
+          },
+        ]
+      }
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <ListBoxSelection
+                clearSelection={[Function]}
+                selectionCount={5}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__selection bx--list-box__selection--multi"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="button"
+                  tabIndex="0"
+                  title="Clear all selected items"
+                >
+                  5
+                  <Icon
+                    description="Clear all selected items"
+                    fillRule="evenodd"
+                    focusable="false"
+                    icon={
+                      Object {
+                        "height": "10",
+                        "id": "icon--close",
+                        "name": "icon--close",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z",
+                              "fill-rule": "nonzero",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--close",
+                        "viewBox": "0 0 10 10",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--close"
+                    role="img"
+                  >
+                    <svg
+                      alt="Clear all selected items"
+                      aria-label="Clear all selected items"
+                      fillRule="evenodd"
+                      focusable="false"
+                      height="10"
+                      name="icon--close"
+                      role="img"
+                      viewBox="0 0 10 10"
+                      width="10"
+                    >
+                      <title>
+                        Clear all selected items
+                      </title>
+                      <path
+                        d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxSelection>
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-28-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect multiselect with initial selections preselect item at level 1 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={
+    Array [
+      Object {
+        "category": "category-1",
+        "id": "id-0",
+        "label": "Nested item 0",
+        "options": Array [
+          Object {
+            "checked": true,
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": Array [
+              Object {
+                "id": "suboption-id-11",
+                "label": "Sub-child item 11",
+              },
+              Object {
+                "id": "suboption-id-12",
+                "label": "Sub-child item 12",
+              },
+            ],
+          },
+          Object {
+            "checked": true,
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": Array [
+              Object {
+                "id": "suboption-id-21",
+                "label": "Sub-child item 21",
+              },
+              Object {
+                "id": "suboption-id-22",
+                "label": "Sub-child item 22",
+              },
+            ],
+          },
+        ],
+        "value": 0,
+      },
+    ]
+  }
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "category": "category-1",
+        "id": "id-0",
+        "label": "Nested item 0",
+        "options": Array [
+          Object {
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": Array [
+              Object {
+                "id": "suboption-id-11",
+                "label": "Sub-child item 11",
+              },
+              Object {
+                "id": "suboption-id-12",
+                "label": "Sub-child item 12",
+              },
+            ],
+          },
+          Object {
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": Array [
+              Object {
+                "id": "suboption-id-21",
+                "label": "Sub-child item 21",
+              },
+              Object {
+                "id": "suboption-id-22",
+                "label": "Sub-child item 22",
+              },
+            ],
+          },
+        ],
+        "value": 0,
+      },
+      Object {
+        "category": "category-2",
+        "id": "id-1",
+        "label": "Nested item 1",
+        "options": undefined,
+        "value": 1,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-2",
+        "label": "Nested item 2",
+        "options": undefined,
+        "value": 2,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={
+      Array [
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0",
+          "label": "Nested item 0",
+          "level": 0,
+          "parentId": undefined,
+          "value": 0,
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0-option-id-1",
+          "label": "Sub item 1",
+          "level": 1,
+          "parentId": "id-0",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-1-suboption-id-11",
+          "label": "Sub-child item 11",
+          "level": 2,
+          "parentId": "id-0-option-id-1",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-1-suboption-id-12",
+          "label": "Sub-child item 12",
+          "level": 2,
+          "parentId": "id-0-option-id-1",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0-option-id-2",
+          "label": "Sub item 2",
+          "level": 1,
+          "parentId": "id-0",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-2-suboption-id-21",
+          "label": "Sub-child item 21",
+          "level": 2,
+          "parentId": "id-0-option-id-2",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-2-suboption-id-22",
+          "label": "Sub-child item 22",
+          "level": 2,
+          "parentId": "id-0-option-id-2",
+        },
+      ]
+    }
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={
+        Array [
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0",
+            "label": "Nested item 0",
+            "level": 0,
+            "parentId": undefined,
+            "value": 0,
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0-option-id-1",
+            "label": "Sub item 1",
+            "level": 1,
+            "parentId": "id-0",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-1-suboption-id-11",
+            "label": "Sub-child item 11",
+            "level": 2,
+            "parentId": "id-0-option-id-1",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-1-suboption-id-12",
+            "label": "Sub-child item 12",
+            "level": 2,
+            "parentId": "id-0-option-id-1",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0-option-id-2",
+            "label": "Sub item 2",
+            "level": 1,
+            "parentId": "id-0",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-2-suboption-id-21",
+            "label": "Sub-child item 21",
+            "level": 2,
+            "parentId": "id-0-option-id-2",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-2-suboption-id-22",
+            "label": "Sub-child item 22",
+            "level": 2,
+            "parentId": "id-0-option-id-2",
+          },
+        ]
+      }
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <ListBoxSelection
+                clearSelection={[Function]}
+                selectionCount={4}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__selection bx--list-box__selection--multi"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="button"
+                  tabIndex="0"
+                  title="Clear all selected items"
+                >
+                  4
+                  <Icon
+                    description="Clear all selected items"
+                    fillRule="evenodd"
+                    focusable="false"
+                    icon={
+                      Object {
+                        "height": "10",
+                        "id": "icon--close",
+                        "name": "icon--close",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z",
+                              "fill-rule": "nonzero",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--close",
+                        "viewBox": "0 0 10 10",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--close"
+                    role="img"
+                  >
+                    <svg
+                      alt="Clear all selected items"
+                      aria-label="Clear all selected items"
+                      fillRule="evenodd"
+                      focusable="false"
+                      height="10"
+                      name="icon--close"
+                      role="img"
+                      viewBox="0 0 10 10"
+                      width="10"
+                    >
+                      <title>
+                        Clear all selected items
+                      </title>
+                      <path
+                        d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxSelection>
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-29-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect multiselect with initial selections preselect item at level 2 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={
+    Array [
+      Object {
+        "category": "category-1",
+        "id": "id-0",
+        "label": "Nested item 0",
+        "options": Array [
+          Object {
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": Array [
+              Object {
+                "checked": true,
+                "id": "suboption-id-11",
+                "label": "Sub-child item 11",
+              },
+              Object {
+                "checked": false,
+                "id": "suboption-id-12",
+                "label": "Sub-child item 12",
+              },
+            ],
+          },
+          Object {
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": Array [
+              Object {
+                "checked": true,
+                "id": "suboption-id-21",
+                "label": "Sub-child item 21",
+              },
+              Object {
+                "checked": false,
+                "id": "suboption-id-22",
+                "label": "Sub-child item 22",
+              },
+            ],
+          },
+        ],
+        "value": 0,
+      },
+    ]
+  }
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "category": "category-1",
+        "id": "id-0",
+        "label": "Nested item 0",
+        "options": Array [
+          Object {
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": Array [
+              Object {
+                "id": "suboption-id-11",
+                "label": "Sub-child item 11",
+              },
+              Object {
+                "id": "suboption-id-12",
+                "label": "Sub-child item 12",
+              },
+            ],
+          },
+          Object {
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": Array [
+              Object {
+                "id": "suboption-id-21",
+                "label": "Sub-child item 21",
+              },
+              Object {
+                "id": "suboption-id-22",
+                "label": "Sub-child item 22",
+              },
+            ],
+          },
+        ],
+        "value": 0,
+      },
+      Object {
+        "category": "category-2",
+        "id": "id-1",
+        "label": "Nested item 1",
+        "options": undefined,
+        "value": 1,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-2",
+        "label": "Nested item 2",
+        "options": undefined,
+        "value": 2,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={
+      Array [
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0",
+          "label": "Nested item 0",
+          "level": 0,
+          "parentId": undefined,
+          "value": 0,
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0-option-id-1",
+          "label": "Sub item 1",
+          "level": 1,
+          "parentId": "id-0",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-1-suboption-id-11",
+          "label": "Sub-child item 11",
+          "level": 2,
+          "parentId": "id-0-option-id-1",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": true,
+          "id": "id-0-option-id-2",
+          "label": "Sub item 2",
+          "level": 1,
+          "parentId": "id-0",
+        },
+        Object {
+          "category": "category-1",
+          "hasChildren": false,
+          "id": "id-0-option-id-2-suboption-id-21",
+          "label": "Sub-child item 21",
+          "level": 2,
+          "parentId": "id-0-option-id-2",
+        },
+      ]
+    }
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={
+        Array [
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0",
+            "label": "Nested item 0",
+            "level": 0,
+            "parentId": undefined,
+            "value": 0,
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0-option-id-1",
+            "label": "Sub item 1",
+            "level": 1,
+            "parentId": "id-0",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-1-suboption-id-11",
+            "label": "Sub-child item 11",
+            "level": 2,
+            "parentId": "id-0-option-id-1",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": true,
+            "id": "id-0-option-id-2",
+            "label": "Sub item 2",
+            "level": 1,
+            "parentId": "id-0",
+          },
+          Object {
+            "category": "category-1",
+            "hasChildren": false,
+            "id": "id-0-option-id-2-suboption-id-21",
+            "label": "Sub-child item 21",
+            "level": 2,
+            "parentId": "id-0-option-id-2",
+          },
+        ]
+      }
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <ListBoxSelection
+                clearSelection={[Function]}
+                selectionCount={2}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__selection bx--list-box__selection--multi"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="button"
+                  tabIndex="0"
+                  title="Clear all selected items"
+                >
+                  2
+                  <Icon
+                    description="Clear all selected items"
+                    fillRule="evenodd"
+                    focusable="false"
+                    icon={
+                      Object {
+                        "height": "10",
+                        "id": "icon--close",
+                        "name": "icon--close",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z",
+                              "fill-rule": "nonzero",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--close",
+                        "viewBox": "0 0 10 10",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--close"
+                    role="img"
+                  >
+                    <svg
+                      alt="Clear all selected items"
+                      aria-label="Clear all selected items"
+                      fillRule="evenodd"
+                      focusable="false"
+                      height="10"
+                      name="icon--close"
+                      role="img"
+                      viewBox="0 0 10 10"
+                      width="10"
+                    >
+                      <title>
+                        Clear all selected items
+                      </title>
+                      <path
+                        d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxSelection>
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-30-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
+
+exports[`NestedFilterableMultiselect multiselect with suboptions should render 1`] = `
+<NestedFilterableMultiselect
+  compareItems={[Function]}
+  disabled={false}
+  filterItems={[Function]}
+  initialSelectedItems={Array []}
+  itemToString={[Function]}
+  items={
+    Array [
+      Object {
+        "category": "category-1",
+        "id": "id-0",
+        "label": "Nested item 0",
+        "options": Array [
+          Object {
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": undefined,
+          },
+          Object {
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": undefined,
+          },
+        ],
+        "value": 0,
+      },
+      Object {
+        "category": "category-2",
+        "id": "id-1",
+        "label": "Nested item 1",
+        "options": Array [
+          Object {
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": Array [
+              Object {
+                "id": "suboption-id-11",
+                "label": "Sub-child item 11",
+              },
+              Object {
+                "id": "suboption-id-12",
+                "label": "Sub-child item 12",
+              },
+            ],
+          },
+          Object {
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": Array [
+              Object {
+                "id": "suboption-id-21",
+                "label": "Sub-child item 21",
+              },
+              Object {
+                "id": "suboption-id-22",
+                "label": "Sub-child item 22",
+              },
+            ],
+          },
+        ],
+        "value": 1,
+      },
+      Object {
+        "category": "category-1",
+        "id": "id-2",
+        "label": "Nested item 2",
+        "options": Array [
+          Object {
+            "id": "option-id-1",
+            "label": "Sub item 1",
+            "options": Array [
+              Object {
+                "id": "suboption-id-11",
+                "label": "Sub-child item 11",
+              },
+              Object {
+                "id": "suboption-id-12",
+                "label": "Sub-child item 12",
+              },
+            ],
+          },
+          Object {
+            "id": "option-id-2",
+            "label": "Sub item 2",
+            "options": undefined,
+          },
+        ],
+        "value": 2,
+      },
+    ]
+  }
+  light={false}
+  locale="en"
+  onChange={[MockFunction]}
+  placeholder="Placeholder..."
+  showTooltip={true}
+  sortItems={[Function]}
+>
+  <Selection
+    initialSelectedItems={Array []}
+    onChange={[Function]}
+    render={[Function]}
+  >
+    <Downshift
+      breakingChanges={Object {}}
+      defaultHighlightedIndex={null}
+      defaultInputValue=""
+      defaultIsOpen={false}
+      defaultSelectedItem={null}
+      environment={[Window]}
+      getA11yStatusMessage={[Function]}
+      highlightedIndex={null}
+      inputValue=""
+      isOpen={false}
+      itemToString={[Function]}
+      onChange={[Function]}
+      onInputValueChange={[Function]}
+      onOuterClick={[Function]}
+      onSelect={[Function]}
+      onStateChange={[Function]}
+      onUserAction={[Function]}
+      render={[Function]}
+      selectedItem={Array []}
+      selectedItemChanged={[Function]}
+      stateReducer={[Function]}
+    >
+      <ListBox
+        ariaLabel="Choose an item"
+        className="bx--multi-select bx--combo-box"
+        disabled={false}
+        innerRef={[Function]}
+        type="default"
+      >
+        <div
+          aria-label="Choose an item"
+          className="bx--multi-select bx--combo-box bx--list-box"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="listbox"
+        >
+          <ListBoxField
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="open menu"
+            data-toggle={true}
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="-1"
+            type="button"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="open menu"
+              className="bx--list-box__field"
+              data-toggle={true}
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              tabIndex="-1"
+              type="button"
+            >
+              <input
+                aria-activedescendant={null}
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-label="Placeholder..."
+                autoComplete="off"
+                className="bx--text-input"
+                disabled={false}
+                id="downshift-11-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Placeholder..."
+                role="combobox"
+                value=""
+              />
+              <ListBoxMenuIcon
+                isOpen={false}
+                translateWithId={[Function]}
+              >
+                <div
+                  className="bx--list-box__menu-icon"
+                >
+                  <Icon
+                    alt="Open menu"
+                    description="Open menu"
+                    fillRule="evenodd"
+                    icon={
+                      Object {
+                        "height": "5",
+                        "id": "icon--caret--down",
+                        "name": "icon--caret--down",
+                        "styles": "",
+                        "svgData": Object {
+                          "circles": "",
+                          "ellipses": "",
+                          "paths": Array [
+                            Object {
+                              "d": "M0 0l5 4.998L10 0z",
+                            },
+                          ],
+                          "polygons": "",
+                          "polylines": "",
+                          "rects": "",
+                        },
+                        "tags": "icon--caret--down",
+                        "viewBox": "0 0 10 5",
+                        "width": "10",
+                      }
+                    }
+                    name="icon--caret--down"
+                    role="img"
+                  >
+                    <svg
+                      alt="Open menu"
+                      aria-label="Open menu"
+                      fillRule="evenodd"
+                      height="5"
+                      name="icon--caret--down"
+                      role="img"
+                      viewBox="0 0 10 5"
+                      width="10"
+                    >
+                      <title>
+                        Open menu
+                      </title>
+                      <path
+                        d="M0 0l5 4.998L10 0z"
+                        key="key0"
+                      />
+                    </svg>
+                  </Icon>
+                </div>
+              </ListBoxMenuIcon>
+            </div>
+          </ListBoxField>
+        </div>
+      </ListBox>
+    </Downshift>
+  </Selection>
+</NestedFilterableMultiselect>
+`;
diff --git a/src/components/MultiSelect/index.js b/src/components/MultiSelect/index.js
new file mode 100644
index 0000000..fe472d5
--- /dev/null
+++ b/src/components/MultiSelect/index.js
@@ -0,0 +1 @@
+export default from './NestedFilterableMultiselect';
diff --git a/src/components/MultiSelect/tools/__tests__/sorting-test.js b/src/components/MultiSelect/tools/__tests__/sorting-test.js
new file mode 100644
index 0000000..ae89923
--- /dev/null
+++ b/src/components/MultiSelect/tools/__tests__/sorting-test.js
@@ -0,0 +1,230 @@
+import { defaultSortItems, defaultCompareItems } from '../sorting';
+
+describe('defaultSortItems', () => {
+  let mockItemToString;
+  let mockOptions;
+
+  beforeEach(() => {
+    mockItemToString = jest.fn(({ label }) => label);
+    mockOptions = {
+      selectedItems: [],
+      itemToString: mockItemToString,
+      compareItems: defaultCompareItems,
+      locale: 'en',
+    };
+  });
+
+  it('should sort un-selected options alphabetically', () => {
+    const mockItems = ['d', 'c', 'b', 'a'].map(label => ({ id: label, label }));
+    expect(defaultSortItems(mockItems, mockOptions)).toEqual([
+      {
+        id: 'a',
+        label: 'a',
+      },
+      {
+        id: 'b',
+        label: 'b',
+      },
+      {
+        id: 'c',
+        label: 'c',
+      },
+      {
+        id: 'd',
+        label: 'd',
+      },
+    ]);
+  });
+
+  it('should sort un-selected numbers in increasing order', () => {
+    const mockItems = ['1', '10', '11', '2', '3'].map(label => ({
+      id: label,
+      label,
+    }));
+    expect(defaultSortItems(mockItems, mockOptions)).toEqual([
+      {
+        id: '1',
+        label: '1',
+      },
+      {
+        id: '2',
+        label: '2',
+      },
+      {
+        id: '3',
+        label: '3',
+      },
+      {
+        id: '10',
+        label: '10',
+      },
+      {
+        id: '11',
+        label: '11',
+      },
+    ]);
+  });
+
+  it('should sort un-selected alpha-numeric sequences with increasing order', () => {
+    const mockItems = ['Option 1', 'Option 10', 'Option 11', 'Option 2'].map(
+      label => ({ id: label, label })
+    );
+    expect(defaultSortItems(mockItems, mockOptions)).toEqual([
+      {
+        id: 'Option 1',
+        label: 'Option 1',
+      },
+      {
+        id: 'Option 2',
+        label: 'Option 2',
+      },
+      {
+        id: 'Option 10',
+        label: 'Option 10',
+      },
+      {
+        id: 'Option 11',
+        label: 'Option 11',
+      },
+    ]);
+  });
+
+  it('should sort parent and child', () => {
+    const mockItems = [
+      {
+        id: 'x-a',
+        label: 'a',
+        parentId: 'x',
+      },
+      {
+        id: 'x',
+        label: 'x',
+      },
+      {
+        id: 'z-d-m',
+        label: 'm',
+        parentId: 'z-d',
+      },
+      {
+        id: 'z-1',
+        label: 'z',
+      },
+      {
+        id: 'x-b',
+        label: 'b',
+        parentId: 'x',
+      },
+      {
+        id: 'y',
+        label: 'y',
+      },
+      {
+        id: 'z-c',
+        label: 'c',
+        parentId: 'z',
+      },
+      {
+        id: 'z-d',
+        label: 'd',
+        parentId: 'z',
+      },
+      {
+        id: 'z',
+        label: 'z',
+      },
+      {
+        id: 'z-c-k',
+        label: 'k',
+        parentId: 'z-c',
+      },
+      {
+        id: 'z-e',
+        label: 'e',
+        parentId: 'z',
+      },
+      {
+        id: 'z-a',
+        label: 'a',
+        parentId: 'z',
+      },
+      {
+        id: 'z-c-l',
+        label: 'l',
+        parentId: 'z-c',
+      },
+      {
+        id: 'z-d-n',
+        label: 'n',
+        parentId: 'z-d',
+      },
+    ];
+    expect(defaultSortItems(mockItems, mockOptions)).toEqual([
+      {
+        id: 'x',
+        label: 'x',
+      },
+      {
+        id: 'x-a',
+        label: 'a',
+        parentId: 'x',
+      },
+      {
+        id: 'x-b',
+        label: 'b',
+        parentId: 'x',
+      },
+      {
+        id: 'y',
+        label: 'y',
+      },
+      {
+        id: 'z-1',
+        label: 'z',
+      },
+      {
+        id: 'z',
+        label: 'z',
+      },
+      {
+        id: 'z-a',
+        label: 'a',
+        parentId: 'z',
+      },
+      {
+        id: 'z-c',
+        label: 'c',
+        parentId: 'z',
+      },
+      {
+        id: 'z-c-k',
+        label: 'k',
+        parentId: 'z-c',
+      },
+      {
+        id: 'z-c-l',
+        label: 'l',
+        parentId: 'z-c',
+      },
+      {
+        id: 'z-d',
+        label: 'd',
+        parentId: 'z',
+      },
+      {
+        id: 'z-d-m',
+        label: 'm',
+        parentId: 'z-d',
+      },
+      {
+        id: 'z-d-n',
+        label: 'n',
+        parentId: 'z-d',
+      },
+      {
+        id: 'z-e',
+        label: 'e',
+        parentId: 'z',
+      },
+    ]);
+  });
+});
diff --git a/src/components/MultiSelect/tools/filter.js b/src/components/MultiSelect/tools/filter.js
new file mode 100644
index 0000000..68126ca
--- /dev/null
+++ b/src/components/MultiSelect/tools/filter.js
@@ -0,0 +1,68 @@
+import { buildHierarchy, findParent } from './sorting';
+
+export const getAllChildren = (item, items) => {
+  const results = [];
+  const children = items.filter(
+    theItem => theItem.parentId && theItem.parentId === item.id
+  );
+
+  if (children.length > 0) {
+    results.push(...children);
+
+    children.forEach(child => {
+      results.push(...getAllChildren(child, items));
+    });
+  }
+
+  return results;
+};
+
+export const defaultFilterItems = (
+  items,
+  { itemToString, inputValue, expandedItems }
+) =>
+  items.filter(item => {
+    const parents = buildHierarchy(item, items);
+    parents.pop();
+
+    if (parents.length > 0 && expandedItems) {
+      // If any parent item is not expanded, the child item should not be shown
+      const isExpanded = !parents.some(
+        parent =>
+          !expandedItems.some(expandedItem => expandedItem.id === parent.id)
+      );
+      if (!isExpanded) {
+        return false;
+      }
+    }
+
+    if (!inputValue) {
+      return true;
+    }
+
+    const children = getAllChildren(item, items).filter(theItem =>
+      itemToString(theItem)
+        .toLowerCase()
+        .includes(inputValue.toLowerCase())
+    );
+    if (children.length > 0) {
+      // if any of the child item matches, the parent item should be shown
+      return true;
+    }
+
+    if (parents.length > 0) {
+      const isVisible = parents.some(parent =>
+        itemToString(parent)
+          .toLowerCase()
+          .includes(inputValue.toLowerCase())
+      );
+      if (isVisible) {
+        // if it matches any of the parents, all sub items should be shown
+        return true;
+      }
+    }
+
+    return itemToString(item)
+      .toLowerCase()
+      .includes(inputValue.toLowerCase());
+  });
diff --git a/src/components/MultiSelect/tools/groupedByCategory.js b/src/components/MultiSelect/tools/groupedByCategory.js
new file mode 100644
index 0000000..aead398
--- /dev/null
+++ b/src/components/MultiSelect/tools/groupedByCategory.js
@@ -0,0 +1,24 @@
+function AlphabeticSort(a, b) {
+  return a[0].localeCompare(b[0]);
+}
+
+export const groupedByCategory = (items, customCategorySorting) => {
+  const result = items.reduce((groupedArray, currentItem) => {
+    groupedArray[currentItem.category] =
+      groupedArray[currentItem.category] || [];
+    groupedArray[currentItem.category].push(currentItem);
+    return groupedArray;
+  }, Object.create(null));
+
+  const finalResult = Object.keys(result).reduce((array, key) => {
+    const elementArr = [key, result[key]];
+    array.push(elementArr);
+    return array;
+  }, []);
+  const comparator = customCategorySorting
+    ? customCategorySorting
+    : AlphabeticSort;
+  finalResult.sort(comparator);
+
+  return finalResult;
+};
diff --git a/src/components/MultiSelect/tools/itemToString.js b/src/components/MultiSelect/tools/itemToString.js
new file mode 100644
index 0000000..bc25c3b
--- /dev/null
+++ b/src/components/MultiSelect/tools/itemToString.js
@@ -0,0 +1,18 @@
+import invariant from 'invariant';
+
+const itemToString = item => {
+  invariant(
+    typeof item.label === 'string',
+    '[MultiSelect] the default `itemToString` method expected to receive ' +
+      'an item with a `label` field of type `string`. Instead received: `%s`',
+    typeof item.label
+  );
+  return item.label || '';
+};
+
+export const defaultItemToString = item => {
+  if (Array.isArray(item)) {
+    return item.map(itemToString);
+  }
+  return itemToString(item);
+};
diff --git a/src/components/MultiSelect/tools/sorting.js b/src/components/MultiSelect/tools/sorting.js
new file mode 100644
index 0000000..320eb3b
--- /dev/null
+++ b/src/components/MultiSelect/tools/sorting.js
@@ -0,0 +1,100 @@
+/*
+ * A utility to find the parent of the given item.
+ *
+ * @param {object} item
+ * @param {array} items
+ * @return {object}
+ */
+export const findParent = (item, items = []) => {
+  let parent;
+  if (item.parentId) {
+    items.some(theItem => {
+      if (theItem.id === item.parentId) {
+        parent = theItem;
+        return true;
+      }
+      return false;
+    });
+  }
+  return parent;
+};
+
+/**
+ * A utility to build the hierarchy of the given item starting from root.
+ */
+export const buildHierarchy = (item, items = []) => {
+  const hierarchy = [];
+  if (item.parentId) {
+    const parent = findParent(item, items);
+    if (parent) {
+      const parentHierarchy = buildHierarchy(parent, items);
+      hierarchy.push(...parentHierarchy);
+    }
+  }
+  hierarchy.push(item);
+  return hierarchy;
+};
+
+/**
+ * Use the local `localCompare` with the `numeric` option to sort two,
+ * potentially alpha-numeric, strings in a list of items.
+ *
+ * @param {string} itemA
+ * @param {string} itemB
+ * @param {Object} options
+ * @param {string} options.locale
+ * @returns {number}
+ */
+export const defaultCompareItems = (itemA, itemB, { locale }) =>
+  itemA.localeCompare(itemB, locale, {
+    numeric: true,
+  });
+
+/**
+ * Default sorting algorithm for options in a selection control
+ */
+export const defaultSortItems = (
+  items,
+  { itemToString, compareItems, locale = 'en' }
+) => {
+  const itemArr = [...items];
+  return items.sort((itemA, itemB) => {
+    const hierarchyA = buildHierarchy(itemA, itemArr);
+    const hierarchyB = buildHierarchy(itemB, itemArr);
+    const depth =
+      hierarchyA.length > hierarchyB.length
+        ? hierarchyA.length
+        : hierarchyB.length;
+
+    let compareResult = 0;
+
+    for (let i = 0; i < depth; i += 1) {
+      const currentA = hierarchyA[i];
+      const currentB = hierarchyB[i];
+
+      if (currentA && !currentB) {
+        // `currentA` is a child of `currentB`
+        // always place the child after the parent
+        return 1;
+      } else if (!currentA && currentB) {
+        // `currentB` is a child of `currentA`
+        // always place the child after the parent
+        return -1;
+      }
+
+      compareResult = compareItems(
+        itemToString(currentA),
+        itemToString(currentB),
+        {
+          locale,
+        }
+      );
+
+      if (compareResult !== 0) {
+        return compareResult;
+      }
+    }
+
+    return compareResult;
+  });
+};