@truedat/core 5.18.1 → 5.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.18.1",
+  "version": "5.18.2",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "95d5a42f5bd259ad53fa66d4fe8cce48be73ee03"
+  "gitHead": "d69ace0ddcf34baa4f4b60a6862a053327c1d299"
 }

package/src/components/ConfirmModal.js

@@ -60,6 +60,7 @@ export const ConfirmModal = ({
         <Modal.Content>{content}</Modal.Content>
       )
     }
+    role="dialog"
   />
 );
 

package/src/components/FilterMultilevelDropdown.js

@@ -14,6 +14,7 @@ import { lowerDeburr } from "../services/sort";
 import DropdownMenuItem from "./DropdownMenuItem";
 
 export const FilterMultilevelDropdown = ({
+  name,
   activeValues,
   closeFilter,
   filter,
@@ -130,6 +131,7 @@ export const FilterMultilevelDropdown = ({
 
   return (
     <Dropdown
+      name={name || "filterMultilevelDropdown"}
       item
       floating
       icon={false}
@@ -193,6 +195,7 @@ export const FilterMultilevelDropdown = ({
 };
 
 FilterMultilevelDropdown.propTypes = {
+  name: PropTypes.string,
   activeValues: PropTypes.array,
   closeFilter: PropTypes.func,
   filter: PropTypes.string,

package/src/components/HierarchyFilterDropdown.js

@@ -72,6 +72,7 @@ const PopulatedHierarchyFilterDropdown = (props) => {
 
   return (
     <FilterMultilevelDropdown
+      name="hierarchyFilterDropdown"
       activeValues={idActiveValues}
       closeFilter={closeFilter}
       filter={filter}
@@ -97,7 +98,7 @@ PopulatedHierarchyFilterDropdown.propTypes = {
 
 const HierarchyFilterDropdown = (props) =>
   _.isEmpty(props.options) ? (
-    <FilterMultilevelDropdown {...props} />
+    <FilterMultilevelDropdown {...props} name="hierarchyFilterDropdown" />
   ) : (
     <PopulatedHierarchyFilterDropdown {...props} />
   );

package/src/components/SearchFilterDropdown.js

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+
+import {
+  Label,
+  Icon,
+  Dropdown,
+  Dimmer,
+  Loader,
+  Input,
+} from "semantic-ui-react";
+import { accentInsensitivePathOrder } from "../services/sort";
+
+const removePrefix = _.replace(/^.*\./, "");
+const SPACE_CODE = 32;
+
+export const SearchFilterDropdown = ({
+  query,
+  searchCallback,
+  placeholder,
+  options,
+  open,
+  loading,
+  activeValues,
+  closeFilter,
+  filter,
+  FilterDataLoader,
+  loaderProps,
+  FilterItem,
+  openFilter,
+  removeFilter,
+  toggleFilterValue,
+  searchFilterDispacher,
+}) => {
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const { formatMessage } = useIntl();
+
+  const toogleSelectedOption = (selectedOption) => {
+    const newSelectedOptions = selectedOptions.find(
+      (s) => s.id === selectedOption.id
+    )
+      ? selectedOptions.filter((s) => s.id !== selectedOption.id)
+      : [...selectedOptions, selectedOption];
+    setSelectedOptions(newSelectedOptions);
+    toggleFilterValue({ filter, value: selectedOption.id });
+  };
+
+  return (
+    <Dropdown
+      name="searchFilterDropdown"
+      item
+      floating
+      scrolling
+      icon={false}
+      upward={false}
+      trigger={
+        <Label key={filter}>
+          {formatMessage({
+            id: `filters.${filter}`,
+            defaultMessage: removePrefix(filter),
+          })}
+          <Icon
+            name="delete"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              removeFilter({ filter });
+            }}
+          />
+        </Label>
+      }
+      onOpen={() => openFilter({ filter })}
+      onClose={(e) => {
+        // Next line Fix bug: https://github.com/Semantic-Org/Semantic-UI-React/pull/3766
+        if (e?.type === "keydown" && e?.keyCode === SPACE_CODE) return;
+        closeFilter({ filter });
+      }}
+      open={open}
+    >
+      <Dimmer.Dimmable as={Dropdown.Menu} dimmed={loading}>
+        <FilterDataLoader {...loaderProps} />
+        <Input
+          icon="search"
+          iconPosition="left"
+          placeholder={placeholder}
+          // Next line Fix bug: https://github.com/Semantic-Org/Semantic-UI-React/issues/1593
+          onClick={(e) => e.stopPropagation()}
+          value={query}
+          onChange={(_e, data) =>
+            searchFilterDispacher(searchCallback({ query: data.value }))
+          }
+          // Next line Fix bug: https://github.com/Semantic-Org/Semantic-UI-React/issues/4374
+          onKeyDown={(e) => e.keyCode === SPACE_CODE && e.stopPropagation()}
+        />
+        {selectedOptions &&
+          _.flow(
+            _.sortBy(accentInsensitivePathOrder("text")),
+            _.map.convert({ cap: false })((option, i) => (
+              <FilterItem
+                key={i}
+                filter={filter}
+                option={option}
+                toggleFilterValue={toogleSelectedOption}
+                active={_.includes(_.prop("id")(option))(activeValues)}
+              />
+            ))
+          )(selectedOptions)}
+        <Dropdown.Divider />
+        {options &&
+          _.flow(
+            _.sortBy(accentInsensitivePathOrder("text")),
+            _.filter((o) => !_.includes(_.prop("id")(o))(activeValues)),
+            _.map.convert({ cap: false })((option, i) => (
+              <FilterItem
+                key={i}
+                filter={filter}
+                option={option}
+                toggleFilterValue={toogleSelectedOption}
+                active={_.includes(_.prop("id")(option))(activeValues)}
+              />
+            ))
+          )(options)}
+        {loading && (
+          <Dimmer active inverted>
+            <Loader size="tiny" />
+          </Dimmer>
+        )}
+      </Dimmer.Dimmable>
+    </Dropdown>
+  );
+};
+
+SearchFilterDropdown.propTypes = {
+  query: PropTypes.string,
+  searchCallback: PropTypes.func,
+  placeholder: PropTypes.string,
+  options: PropTypes.object,
+  open: PropTypes.bool,
+  loading: PropTypes.bool,
+  activeValues: PropTypes.array,
+  closeFilter: PropTypes.func,
+  filter: PropTypes.string,
+  FilterDataLoader: PropTypes.node,
+  loaderProps: PropTypes.object,
+  FilterItem: PropTypes.object,
+  openFilter: PropTypes.func,
+  removeFilter: PropTypes.func,
+  toggleFilterValue: PropTypes.func,
+  searchFilterDispacher: PropTypes.func,
+};
+
+export default SearchFilterDropdown;

package/src/components/SelectedFilters.js

@@ -5,6 +5,7 @@ import { FormattedMessage } from "react-intl";
 import FilterDropdown from "./FilterDropdown";
 import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
 import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
+import SearchFilterDropdown from "./SearchFilterDropdown";
 import ModalSaveFilter from "./ModalSaveFilter";
 import UserFilters from "./UserFilters";
 
@@ -27,6 +28,8 @@ export const SelectedFilters = ({
   toggleFilterValue,
   userFilters,
   userFilterScope,
+  searchFiltersPropsMapping,
+  searchFilterDispacher,
 }) => (
   <>
     {_.isEmpty(userFilters) ? null : (
@@ -47,10 +50,10 @@ export const SelectedFilters = ({
             <FormattedMessage id="search.applied_filters" />
           </div>
           {selectedFilters.map((filter) => {
+            const isSelectedFilter = _.isEqual(filter, selectedFilter);
+
             const filterType = _.prop(filter)(filterTypes);
-            const options = _.isEqual(filter, selectedFilter)
-              ? selectedFilterValues
-              : null;
+            const options = isSelectedFilter ? selectedFilterValues : null;
 
             const props = {
               key: filter,
@@ -63,13 +66,24 @@ export const SelectedFilters = ({
               removeFilter,
               toggleFilterValue,
             };
-            return filterType === "domain" ? (
-              <FilterMultilevelDropdown {...props} />
-            ) : filterType === "hierarchy" ? (
-              <HierarchyFilterDropdown {...props} />
-            ) : (
-              <FilterDropdown {...props} />
-            );
+
+            switch (filterType) {
+              case "domain":
+                return <FilterMultilevelDropdown {...props} />;
+              case "hierarchy":
+                return <HierarchyFilterDropdown {...props} />;
+              case "search":
+                return (
+                  <SearchFilterDropdown
+                    {...props}
+                    {...searchFiltersPropsMapping[filter]}
+                    open={isSelectedFilter}
+                    searchFilterDispacher={searchFilterDispacher}
+                  />
+                );
+              default:
+                return <FilterDropdown {...props} />;
+            }
           })}
           <a className="resetFilters" onClick={() => resetFilters()}>
             <FormattedMessage id="search.clear_filters" />
@@ -106,6 +120,8 @@ SelectedFilters.propTypes = {
   toggleFilterValue: PropTypes.func,
   userFilters: PropTypes.array,
   userFilterScope: PropTypes.string,
+  searchFiltersPropsMapping: PropTypes.object,
+  searchFilterDispacher: PropTypes.func,
 };
 
 export default SelectedFilters;

package/src/components/StructureFilterItem.js

@@ -0,0 +1,33 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Icon, Dropdown, Segment } from "semantic-ui-react";
+
+const preventDefault = (e, callback) => {
+  e && e.preventDefault();
+  e && e.stopPropagation();
+  callback();
+};
+
+export const StructureFilterItem = ({ active, toggleFilterValue, option }) => (
+  <Dropdown.Item
+    onClick={(e) => preventDefault(e, () => toggleFilterValue(option))}
+    active={active}
+  >
+    <Segment vertical>
+      <Icon name={active ? "check square outline" : "square outline"} />
+      {_.trim(option.name)}
+      <small>{` - (${option.type})`}</small>
+      <br />
+      <small>{option.path.join(" > ")}</small>
+    </Segment>
+  </Dropdown.Item>
+);
+
+StructureFilterItem.propTypes = {
+  active: PropTypes.bool,
+  toggleFilterValue: PropTypes.func,
+  option: PropTypes.object,
+};
+
+export default StructureFilterItem;

package/src/components/__tests__/FilterDropdown.spec.js

@@ -4,7 +4,10 @@ import { shallow } from "enzyme";
 import { Dropdown } from "semantic-ui-react";
 import { FilterDropdown } from "../FilterDropdown";
 
-const options = _.map(value => ({ value, text: value }))(["value1", "value2"]);
+const options = _.map((value) => ({ value, text: value }))([
+  "value1",
+  "value2",
+]);
 
 describe("<FilterDropdown/>", () => {
   it("matches the latest snapshot", () => {
@@ -24,7 +27,7 @@ describe("<FilterDropdown/>", () => {
       filter,
       openFilter,
       options,
-      removeFilter
+      removeFilter,
     };
     const wrapper = shallow(<FilterDropdown {...props} />);
     expect(openFilter.mock.calls.length).toBe(0);

package/src/components/__tests__/SearchFilterDropdown.spec.js

@@ -0,0 +1,106 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { render } from "@truedat/test/render";
+import { within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Icon, Dropdown, Segment } from "semantic-ui-react";
+
+import SearchFilterDropdown from "../SearchFilterDropdown";
+
+const DummyLoader = () => <div></div>;
+const DummyFilerItem = ({ active, toggleFilterValue, option }) => (
+  <Dropdown.Item onClick={() => toggleFilterValue(option)} active={active}>
+    <Segment vertical>
+      <Icon name={active ? "check square outline" : "square outline"} />
+      {option.name}
+    </Segment>
+  </Dropdown.Item>
+);
+
+const props = {
+  query: "foo_query",
+  searchCallback: jest.fn(),
+  placeholder: "search dropdown",
+  options: [
+    {
+      id: 1,
+      name: "foo_option",
+    },
+    {
+      id: 2,
+      name: "bar_option",
+    },
+    {
+      id: 3,
+      name: "baz_option",
+    },
+  ],
+  open: true,
+  loading: false,
+  activeValues: [1],
+  closeFilter: jest.fn(),
+  filter: "foo_filter",
+  FilterDataLoader: DummyLoader,
+  loaderProps: { name: "loader-prop" },
+  FilterItem: DummyFilerItem,
+  openFilter: jest.fn(),
+  removeFilter: jest.fn(),
+  toggleFilterValue: jest.fn(),
+  searchFilterDispacher: jest.fn(),
+};
+
+describe("<SearchFilterDropDown/>", () => {
+  it("matches the latest snapshot unfolded", () => {
+    const { container } = render(<SearchFilterDropdown {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot folded", () => {
+    const customProps = {
+      ...props,
+      open: false,
+    };
+    const { container } = render(<SearchFilterDropdown {...customProps} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("check option check it correctly", () => {
+    const { getByRole, getAllByRole } = render(
+      <SearchFilterDropdown {...props} />
+    );
+
+    expect(props.toggleFilterValue).toBeCalledTimes(0);
+    userEvent.click(getByRole("option", { name: "baz_option" }));
+    expect(props.toggleFilterValue).toBeCalledWith({
+      value: 3,
+      filter: "foo_filter",
+    });
+
+    expect(
+      within(getAllByRole("option")[0]).queryByText("baz_option")
+    ).not.toBeNull();
+  });
+
+  it("type in filter input dispatch searchCallback with correct query", () => {
+    const searchText = "a";
+
+    const { getByRole } = render(<SearchFilterDropdown {...props} />);
+    const input = getByRole("textbox");
+
+    userEvent.type(input, searchText);
+
+    expect(props.searchCallback).toBeCalledWith({
+      query: `${props.query}${searchText}`,
+    });
+    expect(props.searchFilterDispacher).toBeCalledTimes(1);
+  });
+
+  it("remove filter dispatches removeFilter", async () => {
+    const { container } = render(<SearchFilterDropdown {...props} />);
+    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await waitFor(() => {
+      expect(props.removeFilter).toBeCalledTimes(1);
+    });
+  });
+});

package/src/components/__tests__/SelectedFilters.spec.js

@@ -1,66 +1,94 @@
+/* eslint-disable react/prop-types */
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
+
+import userEvent from "@testing-library/user-event";
+import { Icon, Dropdown, Segment } from "semantic-ui-react";
+
 import { SelectedFilters } from "../SelectedFilters";
 
+const DummyLoader = () => <div></div>;
+const DummyFilerItem = ({ active, toggleFilterValue, option }) => (
+  <Dropdown.Item onClick={() => toggleFilterValue(option)} active={active}>
+    <Segment vertical>
+      <Icon name={active ? "check square outline" : "square outline"} />
+      {option.name}
+    </Segment>
+  </Dropdown.Item>
+);
+
 describe("<SelectedFilters/>", () => {
-  const getProps = () => ({
+  const props = {
     resetFilters: jest.fn(),
     filterTypes: {
       foo: "fooType",
     },
+    openFilter: jest.fn(),
+    closeFilter: jest.fn(),
     selectedFilter: "foo",
     selectedFilters: ["foo", "bar"],
     selectedFilterActiveValues: ["value2"],
     selectedFilterValues: ["value1", "value2"],
-    saveFilters: jest.fn(),
     selectedUserFilter: null,
     userFilters: ["uf1", "uf2"],
-  });
+    searchFiltersPropsMapping: {},
+    searchFilterDispacher: jest.fn(),
+  };
+
+  const messages = {
+    "search.clear_filters": "clean filters",
+    "search.save_filters": "save filters",
+  };
+
+  const renderOptions = {
+    messages: {
+      en: messages,
+    },
+  };
 
   it("matches the latest snapshot", () => {
-    const props = getProps();
-    const wrapper = shallowWithIntl(<SelectedFilters {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<SelectedFilters {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("dispatches resetFilters", () => {
-    const props = getProps();
-    const wrapper = shallowWithIntl(<SelectedFilters {...props} />);
+    const { getByText } = render(<SelectedFilters {...props} />, renderOptions);
 
-    expect(props.resetFilters.mock.calls.length).toBe(0);
-    wrapper.find("a").simulate("click");
-    expect(props.resetFilters.mock.calls.length).toBe(1);
+    expect(props.resetFilters).toBeCalledTimes(0);
+    userEvent.click(getByText(messages["search.clear_filters"]));
+    expect(props.resetFilters).toBeCalledTimes(1);
   });
 
   it("does not render Save filters option if saveFilters is undefined", () => {
-    const props = getProps();
-    const customProps = { ...props, saveFilters: undefined };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("ModalSaveFilter")).toHaveLength(0);
+    const { queryByText } = render(
+      <SelectedFilters {...props} />,
+      renderOptions
+    );
+    expect(queryByText(messages["search.save_filters"])).toBeNull();
   });
 
   it("renders Save filters option if saveFilters is defined", () => {
-    const props = getProps();
-    const wrapper = shallowWithIntl(<SelectedFilters {...props} />);
-    expect(wrapper.find("ModalSaveFilter")).toHaveLength(1);
+    const customProps = { ...props, saveFilters: jest.fn() };
+    const { getByText } = render(
+      <SelectedFilters {...customProps} />,
+      renderOptions
+    );
+    expect(getByText(messages["search.save_filters"])).toBeInTheDocument();
   });
 
   it("does not render userFilters if they are empty", () => {
-    const props = getProps();
     const customProps = { ...props, userFilters: [] };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("UserFilters")).toHaveLength(0);
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(container.getElementsByClassName("userFilter")).toHaveLength(0);
   });
 
   it("renders userFilters if they are defined", () => {
-    const props = getProps();
     const customProps = { ...props, userFilters: [{ country: ["a"] }] };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("UserFilters")).toHaveLength(1);
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(container.getElementsByClassName("userFilter")).toHaveLength(1);
   });
 
   it("renders FilterMultilevelDropdown if filter is of type domain", () => {
-    const props = getProps();
     const customProps = {
       ...props,
       selectedFilters: ["taxonomy"],
@@ -68,20 +96,49 @@ describe("<SelectedFilters/>", () => {
       filterTypes: { taxonomy: "domain" },
       selectedFilterValues: [{ id: 1, name: "foo", level: 0 }],
     };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("FilterMultilevelDropdown")).toHaveLength(1);
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(
+      container.querySelector('[name="filterMultilevelDropdown"]')
+    ).not.toBeNull();
   });
 
   it("renders HierarchyFilterDropdown if filter is of type hierarchy", () => {
-    const props = getProps();
     const customProps = {
       ...props,
       selectedFilters: ["hierarchy_field"],
       selectedFilter: "hierarchy_field",
       filterTypes: { hierarchy_field: "hierarchy" },
-      selectedFilterValues: [{ key: "2_1", id: 1, name: "foo", level: 0 }],
+      selectedFilterValues: [],
+    };
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(
+      container.querySelector('[name="hierarchyFilterDropdown"]')
+    ).not.toBeNull();
+  });
+
+  it("renders SearchFilterDropdown if filter is of type search", () => {
+    const customProps = {
+      ...props,
+      selectedFilters: ["search_filter"],
+      selectedFilter: "search_filter",
+      filterTypes: { search_filter: "search" },
+      selectedFilterValues: [],
+      searchFiltersPropsMapping: {
+        search_filter: {
+          query: "query test",
+          searchCallback: jest.fn(),
+          options: [],
+          placeholder: "test",
+          FilterDataLoader: DummyLoader,
+          loaderProps: { pageSize: 50 },
+          FilterItem: DummyFilerItem,
+        },
+      },
+      searchFilterDispacher: jest.fn(),
     };
-    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
-    expect(wrapper.find("HierarchyFilterDropdown")).toHaveLength(1);
+    const { container } = render(<SelectedFilters {...customProps} />);
+    expect(
+      container.querySelector('[name="searchFilterDropdown"]')
+    ).not.toBeNull();
   });
 });

package/src/components/__tests__/StructureFilterItem.spec.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { StructureFilterItem } from "../StructureFilterItem";
+
+const props = {
+  active: true,
+  filter: "foo",
+  toggleFilterValue: jest.fn(),
+  option: { id: 123, name: "bar", path: ["one", "two", "three"], type: "baz" },
+};
+
+describe("<StructureFilterItem/>", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<StructureFilterItem {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("dispatches toggleFilterValue on click", () => {
+    const { container } = render(<StructureFilterItem {...props} />);
+    expect(props.toggleFilterValue.mock.calls.length).toBe(0);
+    userEvent.click(within(container).getByText(props.option.name));
+    expect(props.toggleFilterValue.mock.calls.length).toBe(1);
+  });
+});

package/src/components/__tests__/__snapshots__/FilterMultilevelDropdown.spec.js.snap

@@ -5,6 +5,7 @@ exports[`<FilterMultilevelDropdown /> matches the latest snapshot 1`] = `
   <div
     aria-expanded="true"
     class="ui active visible floating item dropdown"
+    name="filterMultilevelDropdown"
     role="listbox"
     tabindex="0"
   >

package/src/components/__tests__/__snapshots__/HierarchyFilterDropdown.spec.js.snap

@@ -5,6 +5,7 @@ exports[`<HierarchyFilterDropdown /> matches the latest snapshot 1`] = `
   <div
     aria-expanded="true"
     class="ui active visible floating item dropdown"
+    name="hierarchyFilterDropdown"
     role="listbox"
     tabindex="0"
   >
@@ -68,6 +69,7 @@ exports[`<HierarchyFilterDropdown /> matches the latest snapshot for empty optio
   <div
     aria-expanded="false"
     class="ui floating item dropdown"
+    name="hierarchyFilterDropdown"
     role="listbox"
     tabindex="0"
   >

package/src/components/__tests__/__snapshots__/SearchFilterDropdown.spec.js.snap

@@ -0,0 +1,147 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SearchFilterDropDown/> matches the latest snapshot folded 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating item scrolling dropdown"
+    name="searchFilterDropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      class="ui label"
+    >
+      foo_filter
+      <i
+        aria-hidden="true"
+        class="delete icon"
+      />
+    </div>
+    <div
+      class="menu transition dimmable"
+    >
+      <div />
+      <div
+        class="ui left icon input"
+      >
+        <input
+          placeholder="search dropdown"
+          type="text"
+          value="foo_query"
+        />
+        <i
+          aria-hidden="true"
+          class="search icon"
+        />
+      </div>
+      <div
+        class="divider"
+      />
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <div
+          class="ui vertical segment"
+        >
+          <i
+            aria-hidden="true"
+            class="square outline icon"
+          />
+          bar_option
+        </div>
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <div
+          class="ui vertical segment"
+        >
+          <i
+            aria-hidden="true"
+            class="square outline icon"
+          />
+          baz_option
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SearchFilterDropDown/> matches the latest snapshot unfolded 1`] = `
+<div>
+  <div
+    aria-expanded="true"
+    class="ui active visible floating item scrolling dropdown"
+    name="searchFilterDropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      class="ui label"
+    >
+      foo_filter
+      <i
+        aria-hidden="true"
+        class="delete icon"
+      />
+    </div>
+    <div
+      class="menu transition dimmable visible"
+    >
+      <div />
+      <div
+        class="ui left icon input"
+      >
+        <input
+          placeholder="search dropdown"
+          type="text"
+          value="foo_query"
+        />
+        <i
+          aria-hidden="true"
+          class="search icon"
+        />
+      </div>
+      <div
+        class="divider"
+      />
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <div
+          class="ui vertical segment"
+        >
+          <i
+            aria-hidden="true"
+            class="square outline icon"
+          />
+          bar_option
+        </div>
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <div
+          class="ui vertical segment"
+        >
+          <i
+            aria-hidden="true"
+            class="square outline icon"
+          />
+          baz_option
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/SelectedFilters.spec.js.snap

@@ -1,63 +1,111 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SelectedFilters/> matches the latest snapshot 1`] = `
-<Fragment>
-  <UserFilters
-    resetFilters={[MockFunction]}
-    selectedUserFilter={null}
-    userFilters={
-      [
-        "uf1",
-        "uf2",
-      ]
-    }
-  />
+<div>
   <div
-    className="selectedFilters"
+    class="selectedFilters"
   >
     <div
-      className="appliedFilters"
+      class="ui circular label"
     >
-      <MemoizedFormattedMessage
-        id="search.applied_filters"
+      <span
+        class="userFilter"
+      />
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
       />
     </div>
-    <FilterDropdown
-      activeValues={
-        [
-          "value2",
-        ]
-      }
-      filter="foo"
-      key="foo"
-      options={
-        [
-          "value1",
-          "value2",
-        ]
-      }
-    />
-    <FilterDropdown
-      activeValues={
-        [
-          "value2",
-        ]
-      }
-      filter="bar"
-      key="bar"
-      options={null}
-    />
-    <a
-      className="resetFilters"
-      onClick={[Function]}
+    <div
+      class="ui circular label"
+    >
+      <span
+        class="userFilter"
+      />
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+  </div>
+  <div
+    class="selectedFilters"
+  >
+    <div
+      class="appliedFilters"
+    >
+      Filters:
+    </div>
+    <div
+      aria-expanded="true"
+      class="ui active visible floating item scrolling dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <div
+        class="ui label"
+      >
+        foo
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+      </div>
+      <div
+        class="menu transition dimmable visible"
+      >
+        <div
+          aria-checked="false"
+          class="item"
+          role="option"
+        >
+          <i
+            aria-hidden="true"
+            class="square outline icon"
+          />
+          <i>
+            Empty
+          </i>
+        </div>
+        <div
+          aria-checked="false"
+          class="item"
+          role="option"
+        >
+          <i
+            aria-hidden="true"
+            class="square outline icon"
+          />
+          <i>
+            Empty
+          </i>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-expanded="false"
+      class="ui floating item scrolling dropdown"
+      role="listbox"
+      tabindex="0"
     >
-      <MemoizedFormattedMessage
-        id="search.clear_filters"
+      <div
+        class="ui label"
+      >
+        bar
+        <i
+          aria-hidden="true"
+          class="delete icon"
+        />
+      </div>
+      <div
+        class="menu transition dimmable"
       />
+    </div>
+    <a
+      class="resetFilters"
+    >
+      Clear filters
     </a>
-    <ModalSaveFilter
-      saveFilters={[MockFunction]}
-    />
   </div>
-</Fragment>
+</div>
 `;

package/src/components/__tests__/__snapshots__/StructureFilterItem.spec.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureFilterItem/> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-checked="true"
+    class="active item"
+    role="option"
+  >
+    <div
+      class="ui vertical segment"
+    >
+      <i
+        aria-hidden="true"
+        class="check square outline icon"
+      />
+      bar
+      <small>
+         - (baz)
+      </small>
+      <br />
+      <small>
+        one &gt; two &gt; three
+      </small>
+    </div>
+  </div>
+</div>
+`;

package/src/components/index.js

@@ -39,11 +39,13 @@ import RichTextEditor from "./RichTextEditor";
 import RouteListener from "./RouteListener";
 import SafeLink from "./SafeLink";
 import ScrollToTop from "./ScrollToTop";
+import SearchFilterDropdown from "./SearchFilterDropdown";
 import SearchInput from "./SearchInput";
 import SearchMenu from "./SearchMenu";
 import SelectedFilters from "./SelectedFilters";
 import SidebarToggle from "./SidebarToggle";
 import SideMenu from "./SideMenu";
+import StructureFilterItem from "./StructureFilterItem";
 import Submenu from "./Submenu";
 import TaxonomyMenu from "./TaxonomyMenu";
 import TemplateSelector from "./TemplateSelector";
@@ -93,11 +95,13 @@ export {
   RouteListener,
   SafeLink,
   ScrollToTop,
+  SearchFilterDropdown,
   SearchInput,
   SearchMenu,
   SelectedFilters,
   SidebarToggle,
   SideMenu,
+  StructureFilterItem,
   Submenu,
   TaxonomyMenu,
   TemplateSelector,