@truedat/core 6.5.3 → 6.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.5.3",
+  "version": "6.5.4",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -36,7 +36,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.5.3",
+    "@truedat/test": "6.5.4",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "b462ae1bd669df63f6617f7d4bbbc12ca8c515e8"
+  "gitHead": "ca29de8f75c143bb950bb8c9fc8a4d96c97464fb"
 }

package/src/search/FilterDropdown.js

@@ -21,6 +21,7 @@ export default function FilterDropdown() {
     toggleFilterValue,
   } = useSearchContext();
 
+  const sortedOptions = _.sortBy(accentInsensitivePathOrder("text"))(options);
   return (
     <Dropdown
       item
@@ -49,21 +50,19 @@ export default function FilterDropdown() {
       open={!_.isEmpty(options)}
     >
       <Dimmer.Dimmable as={Dropdown.Menu} dimmed={loading}>
-        {options &&
-          _.flow(
-            _.sortBy(accentInsensitivePathOrder("text")),
-            _.map.convert({ cap: false })((option, i) => (
-              <FilterItem
-                key={i}
-                filter={filter}
-                option={option}
-                toggleFilterValue={toggleFilterValue}
-                active={_.includes(_.prop("value")(option))(
-                  activeFilterSelectedValues
-                )}
-              />
-            ))
-          )(options)}
+        <>
+          {sortedOptions.map((option, i) => (
+            <FilterItem
+              key={i}
+              filter={filter}
+              toggleFilterValue={toggleFilterValue}
+              option={option}
+              active={_.includes(_.prop("value")(option))(
+                activeFilterSelectedValues
+              )}
+            />
+          ))}
+        </>
         {loading && (
           <Dimmer active inverted>
             <Loader size="tiny" />

package/src/search/FilterQueryDropdown.js

@@ -0,0 +1,140 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import { FormattedMessage } from "react-intl";
+import {
+  Label,
+  Icon,
+  Dropdown,
+  Dimmer,
+  Loader,
+  Input,
+} from "semantic-ui-react";
+import {
+  accentInsensitivePathOrder,
+  lowerDeburr,
+} from "@truedat/core/services/sort";
+import FilterItem from "./FilterItem";
+
+import { useSearchContext } from "./SearchContext";
+
+const removePrefix = _.replace(/^.*\./, "");
+
+export default function FilterQueryDropdown() {
+  const {
+    loadingFilters: loading,
+    filter,
+    options,
+    activeFilterSelectedValues,
+    openFilter,
+    closeFilter,
+    removeFilter,
+    toggleFilterValue,
+  } = useSearchContext();
+
+  const [selected, setSelected] = useState([]);
+  const [localQuery, setLocalQuery] = useState("");
+
+  const sortedOptions = _.sortBy(accentInsensitivePathOrder("text"))(options);
+
+  useEffect(() => {
+    const activeOptions = _.filter((option) =>
+      _.includes(option.value)(activeFilterSelectedValues)
+    )(options);
+
+    _.flow(
+      _.reduce((acc, option) => [...acc, option], []),
+      _.uniq,
+      setSelected
+    )(activeOptions);
+  }, [activeFilterSelectedValues, options]);
+
+  const handleSearch = (e, { value }) => {
+    e.preventDefault();
+    setLocalQuery(lowerDeburr(value));
+  };
+
+  const match = (name, localQuery) => _.contains(localQuery)(lowerDeburr(name));
+  const filteredOptions = _.filter(
+    (option) =>
+      match(option.text, localQuery) &&
+      !_.includes(option.value)(activeFilterSelectedValues)
+  )(sortedOptions);
+
+  return (
+    <Dropdown
+      item
+      floating
+      scrolling
+      icon={false}
+      upward={false}
+      trigger={
+        <Label key={filter}>
+          <FormattedMessage
+            id={`filters.${filter}`}
+            defaultMessage={removePrefix(filter)}
+          />
+          <Icon
+            name="delete"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              removeFilter({ filter });
+            }}
+          />
+        </Label>
+      }
+      onOpen={() => openFilter({ filter })}
+      onClose={() => closeFilter({ filter })}
+      open={!_.isEmpty(options)}
+    >
+      <Dimmer.Dimmable as={Dropdown.Menu} dimmed={loading}>
+        <>
+          <>
+            <Input
+              icon="search"
+              iconPosition="left"
+              className="search"
+              onKeyDown={(e) => {
+                if (e.key === " ") {
+                  e.stopPropagation();
+                }
+              }}
+              onChange={handleSearch}
+              value={localQuery}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            />
+            {selected.map((option, i) => (
+              <FilterItem
+                key={i}
+                filter={filter}
+                toggleFilterValue={toggleFilterValue}
+                option={option}
+                active={true}
+              />
+            ))}
+            <Dropdown.Divider />
+            {filteredOptions.map((option, i) => (
+              <FilterItem
+                key={i}
+                filter={filter}
+                toggleFilterValue={toggleFilterValue}
+                option={option}
+                active={_.includes(_.prop("value")(option))(
+                  activeFilterSelectedValues
+                )}
+              />
+            ))}
+          </>
+        </>
+        {loading && (
+          <Dimmer active inverted>
+            <Loader size="tiny" />
+          </Dimmer>
+        )}
+      </Dimmer.Dimmable>
+    </Dropdown>
+  );
+}

package/src/search/SearchContext.js

@@ -41,7 +41,6 @@ export const SearchContextProvider = (props) => {
   const [activeFilterName, setActiveFilterName] = useState([]);
   const [allActiveFilters, setAllActiveFilters] = useState({});
   const [hiddenFilters, setHiddenFilters] = useState({});
-
   const [filterParams, setFilterParams] = useState({});
   const [sortColumn, setSortColumn] = useState(initialSortColumn);
   const [sortDirection, setSortDirection] = useState(initialSortDirection);
@@ -118,7 +117,8 @@ export const SearchContextProvider = (props) => {
       type,
     }),
     formatFilterValues,
-    _.map(makeOption(translations(formatMessage), activeFilterName))
+    _.map(makeOption(translations(formatMessage), activeFilterName)),
+    _.reject((item) => _.values(item).includes(undefined))
   )(filters);
 
   const activeFilterSelectedValues = _.flow(
@@ -149,9 +149,7 @@ export const SearchContextProvider = (props) => {
   const sort = useMemo(
     () =>
       sortColumn
-        ? {
-            [sortColumn]: sortDirection === "ascending" ? "asc" : "desc",
-          }
+        ? { [sortColumn]: sortDirection === "ascending" ? "asc" : "desc" }
         : null,
     [sortColumn, sortDirection]
   );
@@ -193,18 +191,11 @@ export const SearchContextProvider = (props) => {
   }, [query, searchMust, sort, defaultFilters, page, size]);
 
   const makeFiltersGroup = (filters, groups) =>
-    _.flow(
-      _.groupBy((filter) =>
-        _.flow(
-          _.find(([_group, fields]) => _.contains(filter)(fields)),
-          _.prop("[0]")
-        )(groups)
-      ),
-      _.toPairs,
-      _.remove(([key, _value]) => {
-        return _.startsWith("_")(key);
-      }),
-      _.fromPairs
+    _.groupBy((filter) =>
+      _.flow(
+        _.find(([_group, fields]) => _.contains(filter)(fields)),
+        _.prop("[0]")
+      )(groups)
     )(filters);
 
   const filtersByGroup = makeFiltersGroup(availableFilters, filtersGroup);
@@ -225,6 +216,25 @@ export const SearchContextProvider = (props) => {
     ])
   )(filtersGroup);
 
+  const handleSortSelection = (columnName) => {
+    if (!columnName) return;
+
+    if (sortColumn !== columnName) {
+      setSortColumn(columnName);
+      setSortDirection("ascending");
+    } else {
+      setSortDirection(
+        sortDirection === "ascending" ? "descending" : "ascending"
+      );
+    }
+  };
+
+  const setQueryAndScoreSort = (query) => {
+    setSortColumn(query == "" ? initialSortColumn : "_score");
+    setSortDirection(query == "" ? initialSortDirection : "descending");
+    setQuery(query);
+  };
+
   const context = {
     disabled: false,
     loadingFilters,
@@ -250,7 +260,7 @@ export const SearchContextProvider = (props) => {
     toggleFilterValue,
     toggleHiddenFilterValue,
     searchMust,
-    setQuery,
+    setQuery: setQueryAndScoreSort,
     setAllActiveFilters,
     allActiveFilters,
     filters,
@@ -262,6 +272,8 @@ export const SearchContextProvider = (props) => {
     sortDirection,
     setSortColumn,
     setSortDirection,
+    handleSortSelection,
+    initialSortColumn,
     selectPage,
     setSize,
     count,

package/src/search/SearchSelectedFilters.js

@@ -5,10 +5,13 @@ import { useUserFilters, useUserFiltersCreate } from "../hooks/useUserFilters";
 import ModalSaveFilter from "../components/ModalSaveFilter";
 import UserFilters from "./UserFilters";
 import FilterDropdown from "./FilterDropdown";
+import FilterQueryDropdown from "./FilterQueryDropdown";
 import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
 import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
 import SearchContext, { useSearchContext } from "./SearchContext";
 
+const MIN_LENGTH_FOR_QUERY_DROPDOWN = 8;
+
 export default function SearchSelectedFilters() {
   const context = useSearchContext();
   const {
@@ -69,6 +72,8 @@ export default function SearchSelectedFilters() {
                     <FilterMultilevelDropdown />
                   ) : filterType === "hierarchy" ? (
                     <HierarchyFilterDropdown />
+                  ) : _.size(options) >= MIN_LENGTH_FOR_QUERY_DROPDOWN ? (
+                    <FilterQueryDropdown />
                   ) : (
                     <FilterDropdown />
                   )}

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

@@ -0,0 +1,99 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import SearchContext from "@truedat/core/search/SearchContext";
+
+import FilterDropdown from "../FilterDropdown";
+
+const options = _.map((value) => ({ value, text: value }))([
+  "value1",
+  "value2",
+]);
+
+const searchProps = {
+  loadingFilters: false,
+  openFilter: jest.fn(),
+  closeFilter: jest.fn(),
+  removeFilter: jest.fn(),
+  toggleFilterValue: jest.fn(),
+  useFilters: jest.fn(),
+  useSearch: jest.fn(),
+  filter: "foo",
+  options,
+};
+
+describe("<FilterDropdown/>", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterDropdown />
+      </SearchContext.Provider>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("no render search input if has more than eight options", () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterDropdown />
+      </SearchContext.Provider>
+    );
+    const searchInput = container.querySelector(".search input[type='text']");
+    expect(searchInput).not.toBeInTheDocument();
+  });
+
+  it("dispatches openFilter", () => {
+    const customProps = {
+      ...searchProps,
+      options: [],
+    };
+
+    const { rerender } = render(
+      <SearchContext.Provider value={customProps}>
+        <FilterDropdown />
+      </SearchContext.Provider>
+    );
+
+    rerender(
+      <SearchContext.Provider value={searchProps}>
+        <FilterDropdown />
+      </SearchContext.Provider>
+    );
+
+    waitFor(() => expect(searchProps.openFilter).toBeCalledTimes(1));
+  });
+
+  it("dispatches closeFilter", () => {
+    const customProps = {
+      ...searchProps,
+      options: [],
+    };
+
+    const { rerender } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterDropdown />
+      </SearchContext.Provider>
+    );
+    rerender(
+      <SearchContext.Provider value={customProps}>
+        <FilterDropdown />
+      </SearchContext.Provider>
+    );
+
+    waitFor(() => expect(searchProps.closeFilter).toBeCalledTimes(1));
+  });
+
+  it("remove filter dispatches removeFilter", async () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterDropdown />
+      </SearchContext.Provider>
+    );
+    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await waitFor(() => {
+      expect(searchProps.removeFilter).toBeCalledTimes(1);
+    });
+  });
+});

package/src/search/__tests__/FilterItem.spec.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { FilterItem } from "../FilterItem";
+
+const props = {
+  active: true,
+  filter: "foo",
+  toggleFilterValue: jest.fn(),
+  option: { value: "foo", text: "bar" },
+};
+
+describe("<FilterItem/>", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<FilterItem {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("show active with false", () => {
+    const newProps = {
+      ...props,
+      active: false,
+    };
+    const { getByRole } = render(<FilterItem {...newProps} />);
+    const divElement = getByRole("option");
+    expect(divElement).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("show empty filter", () => {
+    const newProps = {
+      ...props,
+      option: { value: "foo", text: "" },
+    };
+    const { getByText } = render(<FilterItem {...newProps} />);
+    const emptyElement = getByText("Empty");
+    expect(emptyElement).toBeInTheDocument();
+  });
+
+  it("dispatches toggleFilterValue on click", () => {
+    const { getByRole } = render(<FilterItem {...props} />);
+    expect(props.toggleFilterValue.mock.calls.length).toBe(0);
+    const dropdownItem = getByRole("option", { name: "bar" });
+    userEvent.click(dropdownItem);
+    expect(props.toggleFilterValue.mock.calls.length).toBe(1);
+  });
+});

package/src/search/__tests__/FilterQueryDropdown.spec.js

@@ -0,0 +1,200 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import SearchContext from "@truedat/core/search/SearchContext";
+import FilterQueryDropdown from "../FilterQueryDropdown";
+
+const options = _.range(0, 10).map((n) => ({
+  value: `value${n}`,
+  text: `value${n}`,
+}));
+
+const searchProps = {
+  loadingFilters: false,
+  openFilter: jest.fn(),
+  closeFilter: jest.fn(),
+  removeFilter: jest.fn(),
+  toggleFilterValue: jest.fn(),
+  useFilters: jest.fn(),
+  useSearch: jest.fn(),
+  filter: "foo",
+  options,
+};
+
+describe("<FilterQueryDropdown/>", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("render search input if has more than eight options", () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+    const searchInput = container.querySelector(".search input[type='text']");
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it("check option check it correctly", () => {
+    const selectedOption = searchProps.options[6].text;
+
+    const { getByRole, getAllByRole, rerender } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+
+    expect(searchProps.toggleFilterValue).toBeCalledTimes(0);
+    userEvent.click(
+      getByRole("option", { name: new RegExp(selectedOption, "i") })
+    );
+    expect(searchProps.toggleFilterValue).toBeCalledWith({
+      filter: searchProps.filter,
+      value: selectedOption,
+    });
+
+    const rerenderProps = {
+      ...searchProps,
+      activeFilterSelectedValues: [selectedOption],
+    };
+    rerender(
+      <SearchContext.Provider value={rerenderProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+
+    expect(
+      within(getAllByRole("option")[0]).queryByText(selectedOption)
+    ).not.toBeNull();
+  });
+
+  it("type in filter input filter options", () => {
+    const searchText = "3";
+
+    const { getByRole, queryByRole, getAllByRole, container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+
+    const input = container.querySelector(".search input[type='text']");
+
+    expect(
+      getByRole("option", {
+        name: new RegExp(searchProps.options[1].text, "i"),
+      })
+    ).toBeInTheDocument();
+
+    userEvent.type(input, searchText);
+
+    expect(
+      queryByRole("option", {
+        name: new RegExp(searchProps.options[1].text, "i"),
+      })
+    ).toBeNull();
+
+    expect(
+      within(getByRole("option")).getByText(`value${searchText}`)
+    ).toBeInTheDocument();
+
+    expect(getAllByRole("option").length).toBe(1);
+  });
+
+  it("type in filter not hidde selected values", async () => {
+    const selectedOption = options[6].text;
+
+    const customProps = {
+      ...searchProps,
+      activeFilterSelectedValues: [selectedOption],
+    };
+
+    const searchText = "3";
+
+    const { getAllByRole, container, queryByRole } = render(
+      <SearchContext.Provider value={customProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+
+    const input = container.querySelector(".search input[type='text']");
+
+    userEvent.type(input, searchText);
+
+    expect(
+      within(getAllByRole("option")[0]).getByText(selectedOption)
+    ).toBeInTheDocument();
+
+    expect(
+      within(getAllByRole("option")[1]).getByText(`value${searchText}`)
+    ).toBeInTheDocument();
+
+    expect(
+      queryByRole("option", {
+        name: new RegExp(customProps.options[1].text, "i"),
+      })
+    ).toBeNull();
+
+    expect(getAllByRole("option").length).toBe(2);
+  });
+
+  it("dispatches openFilter", () => {
+    const customProps = {
+      ...searchProps,
+      options: [],
+    };
+
+    const { rerender } = render(
+      <SearchContext.Provider value={customProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+
+    rerender(
+      <SearchContext.Provider value={searchProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+
+    waitFor(() => expect(searchProps.openFilter).toBeCalledTimes(1));
+  });
+
+  it("dispatches closeFilter", () => {
+    const customProps = {
+      ...searchProps,
+      options: [],
+    };
+
+    const { rerender } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+    rerender(
+      <SearchContext.Provider value={customProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+
+    waitFor(() => expect(searchProps.closeFilter).toBeCalledTimes(1));
+  });
+
+  it("remove filter dispatches removeFilter", async () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <FilterQueryDropdown />
+      </SearchContext.Provider>
+    );
+    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await waitFor(() => {
+      expect(searchProps.removeFilter).toBeCalledTimes(1);
+    });
+  });
+});

package/src/search/__tests__/SearchWidget.spec.js

@@ -0,0 +1,52 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import SearchContext from "@truedat/core/search/SearchContext";
+import SearchWidget from "../SearchWidget";
+
+const messages = {
+  en: {
+    "search.placeholder": "Search...",
+  },
+};
+
+const renderOpts = { messages };
+
+const setQuery = jest.fn();
+const searchProps = {
+  userFiltersType: "foo",
+  useFilters: jest.fn(),
+  useSearch: jest.fn(),
+  loadingFilters: false,
+  query: "",
+  setQuery,
+};
+
+describe("<SearchWidget/>", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <SearchContext.Provider value={searchProps}>
+        <SearchWidget />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("type in filter input filter options", async () => {
+    const { getByRole } = render(
+      <SearchContext.Provider value={searchProps}>
+        <SearchWidget />
+      </SearchContext.Provider>,
+      renderOpts
+    );
+
+    userEvent.type(await getByRole("textbox"), "3");
+
+    await waitFor(() => {
+      expect(setQuery).toBeCalledTimes(1);
+    });
+  });
+});

package/src/search/__tests__/__snapshots__/FilterDropdown.spec.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilterDropdown/> matches the latest snapshot 1`] = `
+<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"
+        />
+        value1
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value2
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/search/__tests__/__snapshots__/FilterItem.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilterItem/> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-checked="true"
+    class="active item"
+    role="option"
+  >
+    <i
+      aria-hidden="true"
+      class="check square outline icon"
+    />
+    bar
+  </div>
+</div>
+`;

package/src/search/__tests__/__snapshots__/FilterQueryDropdown.spec.js.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilterQueryDropdown/> matches the latest snapshot 1`] = `
+<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
+        class="ui left icon input search"
+      >
+        <input
+          type="text"
+          value=""
+        />
+        <i
+          aria-hidden="true"
+          class="search icon"
+        />
+      </div>
+      <div
+        class="divider"
+      />
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value0
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value1
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value2
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value3
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value4
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value5
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value6
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value7
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value8
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value9
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/search/__tests__/__snapshots__/SearchWidget.spec.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SearchWidget/> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui action left icon input"
+  >
+    <input
+      placeholder="Search..."
+      type="text"
+      value=""
+    />
+    <i
+      aria-hidden="true"
+      class="search link icon"
+    />
+    <div
+      aria-busy="false"
+      aria-expanded="false"
+      class="ui button floating labeled scrolling dropdown icon"
+      role="listbox"
+      tabindex="0"
+    >
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider text"
+        role="alert"
+      >
+        Filters
+      </div>
+      <i
+        aria-hidden="true"
+        class="filter icon"
+      />
+      <div
+        class="menu transition"
+      >
+        <div
+          class="item"
+          role="option"
+        >
+          <em>
+            (reset filters)
+          </em>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="selectedFilters"
+  />
+</div>
+`;