@canonical/react-components 1.6.0 → 1.7.0

package/dist/esm/components/Row/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Row";
+export type { Props as RowProps } from "./Row";

package/dist/esm/components/Row/index.js

@@ -0,0 +1 @@
+export { default } from "./Row";

package/dist/esm/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.d.ts

@@ -0,0 +1,25 @@
+import type { SearchAndFilterChip, SearchAndFilterData } from "../types";
+export type Props = {
+    /**
+     * The chip data to display in the panel.
+     */
+    data: SearchAndFilterData;
+    /**
+     * The current search chips.
+     */
+    searchData: SearchAndFilterChip[];
+    /**
+     * A search string.
+     */
+    searchTerm: string;
+    /**
+     * Whether the chips should be hidden.
+     */
+    sectionHidden?: boolean;
+    /**
+     * A function to toggle whether a chip is selected.
+     */
+    toggleSelected: (chip: SearchAndFilterChip) => void;
+};
+declare const FilterPanelSection: ({ data, searchData, searchTerm, sectionHidden, toggleSelected, }: Props) => JSX.Element;
+export default FilterPanelSection;

package/dist/esm/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js

@@ -0,0 +1,107 @@
+import _pt from "prop-types";
+import React, { useEffect, useRef, useState } from "react";
+import Chip from "../../Chip";
+import { overflowingChipsCount, isChipInArray } from "../utils";
+import { highlightSubString } from "../../../utils";
+var FilterPanelSection = _ref => {
+  var {
+    data,
+    searchData,
+    searchTerm = "",
+    sectionHidden,
+    toggleSelected
+  } = _ref;
+  var {
+    chips,
+    heading
+  } = data;
+  var [overflowCounter, setOverflowCounter] = useState(0);
+  var [expanded, setExpanded] = useState(false);
+  var chipWrapper = useRef(null);
+  var handleChipClick = chip => {
+    toggleSelected(chip);
+  };
+
+  // If the offsetTop is more than double height of a single chip, consider it
+  // overflowing
+  var updateFlowCount = function updateFlowCount() {
+    var _chipWrapper$current;
+    var chips = chipWrapper === null || chipWrapper === void 0 || (_chipWrapper$current = chipWrapper.current) === null || _chipWrapper$current === void 0 ? void 0 : _chipWrapper$current.querySelectorAll(".p-chip");
+    var overflowCount = overflowingChipsCount(chips, 2);
+    setOverflowCounter(overflowCount);
+  };
+
+  // Check if search term characters matches any characters in panel heading
+  var searchTermInHeading = highlightSubString(heading, searchTerm).match;
+
+  // Serialise chip values into string so it can be interrogated with subString
+  var chipValues = [];
+  Object.entries(chips).forEach(chipValue => {
+    chipValues.push(chipValue[1].value);
+  });
+
+  // Search chips for character match with search term
+  var searchTermInChips = highlightSubString(chipValues.toString(), searchTerm).match;
+  var panelSectionVisible = searchTermInHeading || searchTermInChips || searchTerm === "";
+
+  // Update overflow count when component is resized
+  useEffect(() => {
+    var resizeObserverSupported = typeof ResizeObserver !== "undefined";
+    var wrapper = chipWrapper === null || chipWrapper === void 0 ? void 0 : chipWrapper.current;
+    var wrapperWidthObserver;
+    if (resizeObserverSupported && panelSectionVisible) {
+      wrapperWidthObserver = new ResizeObserver(() => {
+        updateFlowCount();
+      });
+      wrapperWidthObserver.observe(wrapper);
+    } else {
+      updateFlowCount();
+    }
+    return () => {
+      var _wrapperWidthObserver;
+      resizeObserverSupported && ((_wrapperWidthObserver = wrapperWidthObserver) === null || _wrapperWidthObserver === void 0 ? void 0 : _wrapperWidthObserver.disconnect());
+    };
+  }, [panelSectionVisible]);
+
+  // When overflow counter is clicked, all chips are shown
+  var showAllChips = () => {
+    setExpanded(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, panelSectionVisible && /*#__PURE__*/React.createElement("div", {
+    className: "p-filter-panel-section"
+  }, heading && chips.length > 0 && /*#__PURE__*/React.createElement("h3", {
+    className: "p-filter-panel-section__heading",
+    dangerouslySetInnerHTML: {
+      __html: highlightSubString(heading, searchTerm).text
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "p-filter-panel-section__chips",
+    "aria-expanded": expanded,
+    ref: chipWrapper
+  }, chips === null || chips === void 0 ? void 0 : chips.map(chip => {
+    // If search term has been added to input, only matching chips
+    // should display
+    var searchTermInChip = highlightSubString(chip.value, searchTerm).match;
+    var chipVisible = searchTermInChip || searchTerm === "" || highlightSubString(heading, searchTerm).match;
+    return chipVisible && !sectionHidden && /*#__PURE__*/React.createElement(Chip, {
+      key: "".concat(chip.lead, "+").concat(chip.value),
+      lead: chip.lead,
+      value: chip.value,
+      selected: isChipInArray(chip, searchData),
+      subString: searchTerm,
+      onClick: () => handleChipClick(chip)
+    });
+  }), overflowCounter > 0 && !expanded && /*#__PURE__*/React.createElement("span", {
+    className: "p-filter-panel-section__counter",
+    onClick: showAllChips,
+    onKeyPress: showAllChips,
+    tabIndex: 0
+  }, "+", overflowCounter))));
+};
+FilterPanelSection.propTypes = {
+  searchData: _pt.array.isRequired,
+  searchTerm: _pt.string.isRequired,
+  sectionHidden: _pt.bool,
+  toggleSelected: _pt.func.isRequired
+};
+export default FilterPanelSection;

package/dist/esm/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SearchAndFilter/FilterPanelSection/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./FilterPanelSection";

package/dist/esm/components/SearchAndFilter/FilterPanelSection/index.js

@@ -0,0 +1 @@
+export { default } from "./FilterPanelSection";

package/dist/esm/components/SearchAndFilter/SearchAndFilter.d.ts

@@ -0,0 +1,33 @@
+import type { SearchAndFilterChip, SearchAndFilterData } from "./types";
+export declare enum Label {
+    AddFilter = "Add filter",
+    Clear = "Clear input",
+    SearchAndFilter = "Search and filter"
+}
+export type Props = {
+    /**
+     * A list of chips to initialise inside the input.
+     */
+    existingSearchData?: SearchAndFilterChip[];
+    /**
+     * The data for the filter panel.
+     */
+    filterPanelData: SearchAndFilterData[];
+    /**
+     * A function that is called when the search data changes.
+     */
+    returnSearchData: (searchData: SearchAndFilterChip[]) => void;
+    /**
+     * A function that is called when the filter panel is shown/hidden.
+     */
+    onPanelToggle?: () => void;
+    /**
+     * A function that is called when the height of the search container changes.
+     */
+    onExpandChange?: () => void;
+};
+/**
+ * This component allows searching and filtering of large datasets.
+ */
+declare const SearchAndFilter: ({ existingSearchData, filterPanelData, returnSearchData, onPanelToggle, onExpandChange, ...props }: Props) => JSX.Element;
+export default SearchAndFilter;

package/dist/esm/components/SearchAndFilter/SearchAndFilter.js

@@ -0,0 +1,286 @@
+import _pt from "prop-types";
+var _excluded = ["existingSearchData", "filterPanelData", "returnSearchData", "onPanelToggle", "onExpandChange"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useState, useEffect, useRef } from "react";
+import FilterPanelSection from "./FilterPanelSection";
+import Chip from "../Chip";
+import { overflowingChipsCount, isChipInArray } from "./utils";
+import { useOnEscapePressed, useWindowFitment } from "../../hooks";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["AddFilter"] = "Add filter";
+  Label["Clear"] = "Clear input";
+  Label["SearchAndFilter"] = "Search and filter";
+  return Label;
+}({});
+/**
+ * This component allows searching and filtering of large datasets.
+ */
+var SearchAndFilter = _ref => {
+  var {
+      existingSearchData = [],
+      filterPanelData,
+      returnSearchData,
+      onPanelToggle = () => {},
+      onExpandChange = () => {}
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var [searchData, setSearchData] = useState(existingSearchData);
+  var [searchTerm, setSearchTerm] = useState("");
+  var [filterPanelHidden, setFilterPanelHidden] = useState(true);
+  var [searchBoxExpanded, setSearchBoxExpanded] = useState(false);
+  var [overflowSearchTermCounter, setOverflowSearchTermCounter] = useState(0);
+  var [searchContainerActive, setSearchContainerActive] = useState(false);
+  var [maxHeight, setMaxHeight] = useState();
+  var searchAndFilterRef = useRef(null);
+  var searchContainerRef = useRef(null);
+  var searchBoxRef = useRef(null);
+  var panel = useRef();
+
+  // Call onPanelToggle when the filterPanelHidden state changes
+  useEffect(onPanelToggle, [onPanelToggle, filterPanelHidden]);
+
+  // Call onExpandChange when the search box is expanded or collapsed
+  useEffect(onExpandChange, [onExpandChange, searchBoxExpanded]);
+
+  // Return searchData to parent component
+  useEffect(() => {
+    var mounted = true;
+    returnSearchData && mounted && returnSearchData(searchData);
+    return () => {
+      mounted = false;
+    };
+  }, [searchData, returnSearchData]);
+  var searchOnChange = searchTerm => {
+    setSearchTerm(searchTerm);
+  };
+
+  // Hide manual input form field when search container is inactive
+  useEffect(() => {
+    var searchContainerClickCheck = e => {
+      var _e$target;
+      var clickInContainer = ((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest(".p-search-and-filter")) !== null;
+      setSearchContainerActive(clickInContainer);
+    };
+    document.addEventListener("click", searchContainerClickCheck);
+    return () => {
+      document.removeEventListener("click", searchContainerClickCheck);
+    };
+  }, [searchContainerActive]);
+  var closePanel = () => {
+    setFilterPanelHidden(true);
+  };
+  useOnEscapePressed(() => closePanel());
+
+  // This useEffect sets up listeners so the panel will close if user clicks
+  // anywhere else on the page or hits the escape key
+  useEffect(() => {
+    var mouseDown = e => {
+      var _searchAndFilterRef$c;
+      // Check if click is outside of filter panel
+      if (!(searchAndFilterRef !== null && searchAndFilterRef !== void 0 && (_searchAndFilterRef$c = searchAndFilterRef.current) !== null && _searchAndFilterRef$c !== void 0 && _searchAndFilterRef$c.contains(e.target))) {
+        // If so, close the panel
+        closePanel();
+      }
+    };
+
+    // Add listener on document to capture click events
+    document.addEventListener("mousedown", mouseDown);
+    // return function to be called when unmounted
+    return () => {
+      document.removeEventListener("mousedown", mouseDown);
+    };
+  }, []);
+
+  // Add passed chip to the searchData array
+  var toggleSelected = chip => {
+    var currentSelected = [...searchData];
+    if (!isChipInArray(chip, currentSelected)) {
+      currentSelected.push(chip);
+      setSearchData(currentSelected);
+      setSearchTerm("");
+    } else {
+      var updatedCurrentSelected = currentSelected.filter(currentSelectedChip => {
+        return currentSelectedChip.value !== chip.value;
+      });
+      setSearchData(updatedCurrentSelected);
+    }
+  };
+
+  // Remove passed chip from the searchData array
+  var removeFromSelected = chip => {
+    if (searchData.includes(chip)) {
+      var updatedSelected = searchData.filter(searchDataChip => searchDataChip !== chip);
+      setSearchData(updatedSelected);
+    }
+  };
+
+  // When overflow chips are shown, clicking anywhere outside search area
+  // or clicking on a chip should hide them again
+  useEffect(() => {
+    var hideOverflowChips = e => {
+      if (!e.target.closest(".p-search-and-filter") && e.target.className !== "p-icon--close") {
+        setSearchBoxExpanded(false);
+      }
+    };
+    document.addEventListener("click", e => {
+      hideOverflowChips(e);
+    });
+    return () => {
+      document.removeEventListener("click", e => {
+        hideOverflowChips(e);
+      });
+    };
+  }, []);
+  var handleSubmit = () => {
+    if (searchTerm.trim() !== "") {
+      toggleSelected({
+        value: searchTerm,
+        quoteValue: true
+      });
+      setSearchTerm("");
+    }
+  };
+
+  // If the offsetTop is more than double height of a single chip, consider it
+  // overflowing
+  var updateFlowCount = function updateFlowCount() {
+    var _searchContainerRef$c;
+    var chips = searchContainerRef === null || searchContainerRef === void 0 || (_searchContainerRef$c = searchContainerRef.current) === null || _searchContainerRef$c === void 0 ? void 0 : _searchContainerRef$c.querySelectorAll(".p-chip");
+    var overflowCount = overflowingChipsCount(chips, 1);
+    setOverflowSearchTermCounter(overflowCount);
+  };
+
+  // Watch for container resize and recalculate overflow count accordingly
+  useEffect(() => {
+    var resizeObserverSupported = typeof ResizeObserver !== "undefined";
+    var wrapper = searchContainerRef.current;
+    var wrapperWidthObserver;
+    if (resizeObserverSupported && wrapper) {
+      wrapperWidthObserver = new ResizeObserver(() => {
+        updateFlowCount();
+      });
+      wrapperWidthObserver.observe(wrapper);
+    } else {
+      updateFlowCount();
+    }
+    return () => {
+      var _wrapperWidthObserver;
+      resizeObserverSupported && ((_wrapperWidthObserver = wrapperWidthObserver) === null || _wrapperWidthObserver === void 0 ? void 0 : _wrapperWidthObserver.disconnect());
+    };
+  }, [searchData]);
+  useWindowFitment(panel.current, searchAndFilterRef.current, fitsWindow => setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16), 0, !filterPanelHidden);
+
+  // Add search prompt value to search on Enter key
+  var searchPromptKeyDown = e => {
+    if (e.key === "Enter") {
+      handleSubmit();
+    }
+  };
+  var searchBox = searchBoxRef.current;
+  var searchContainer = searchContainerRef.current;
+  if (!searchBoxExpanded && searchBox && searchContainer && overflowSearchTermCounter === 0) {
+    if (searchBox.offsetTop > searchContainer.offsetHeight) {
+      setSearchBoxExpanded(true);
+    }
+  }
+
+  // If chips or input field contains values, clear 'em out
+  var clearAllSearchTerms = () => {
+    setSearchTerm("");
+  };
+  var placeholder = searchData.length ? Label.AddFilter : Label.SearchAndFilter;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "p-search-and-filter",
+    ref: searchAndFilterRef,
+    onClick: () => filterPanelHidden && setFilterPanelHidden(false)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "p-search-and-filter__search-container",
+    "aria-expanded": searchBoxExpanded,
+    "data-active": searchContainerActive || searchData.length === 0,
+    "data-empty": searchData.length <= 0,
+    ref: searchContainerRef
+  }, searchTerm !== "" && /*#__PURE__*/React.createElement("button", {
+    "aria-label": Label.Clear,
+    className: "p-search-and-filter__clear",
+    onClick: () => clearAllSearchTerms()
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "p-icon--close"
+  })), Object.values(searchData).map(chip => {
+    return /*#__PURE__*/React.createElement(Chip, {
+      lead: chip.lead,
+      value: chip.value,
+      key: "search-".concat(chip.lead, "+").concat(chip.value),
+      onDismiss: event => {
+        // Prevent filter chip dismissals from bubbling up and triggering the parent onClick handler
+        event.stopPropagation();
+        removeFromSelected(chip);
+      },
+      selected: true,
+      quoteValue: chip.quoteValue
+    });
+  }), /*#__PURE__*/React.createElement("form", {
+    className: "p-search-and-filter__box",
+    onSubmit: e => {
+      e.preventDefault();
+      handleSubmit();
+    },
+    "data-overflowing": searchBoxExpanded,
+    ref: searchBoxRef
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "u-off-screen",
+    htmlFor: "search-and-filter-input"
+  }, searchData.length ? Label.AddFilter : Label.SearchAndFilter), /*#__PURE__*/React.createElement("input", {
+    autoComplete: "off",
+    className: "p-search-and-filter__input",
+    id: "search-and-filter-input",
+    name: "search",
+    onChange: e => searchOnChange(e.target.value),
+    placeholder: placeholder,
+    type: "search",
+    value: searchTerm
+  }), /*#__PURE__*/React.createElement("button", {
+    className: "u-off-screen",
+    type: "submit"
+  }, "Search")), overflowSearchTermCounter > 0 && /*#__PURE__*/React.createElement("span", {
+    className: "p-search-and-filter__selected-count",
+    onClick: () => setSearchBoxExpanded(true),
+    onKeyDown: () => setSearchBoxExpanded(true),
+    role: "button",
+    tabIndex: 0
+  }, "+", overflowSearchTermCounter)), (filterPanelData.length > 0 || searchTerm.length > 0) && /*#__PURE__*/React.createElement("div", {
+    className: "p-search-and-filter__panel",
+    "aria-hidden": filterPanelHidden,
+    ref: panel,
+    style: {
+      maxHeight,
+      minHeight: "5rem",
+      overflowX: "auto"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, searchTerm.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "p-search-and-filter__search-prompt",
+    onClick: () => handleSubmit(),
+    onKeyDown: e => searchPromptKeyDown(e),
+    role: "button",
+    tabIndex: 0
+  }, "Search for", " ", /*#__PURE__*/React.createElement("span", {
+    className: "p-search-and-filter__search-query"
+  }, searchTerm), "..."), filterPanelData.map(filterPanelSectionData => {
+    return /*#__PURE__*/React.createElement(FilterPanelSection, {
+      key: filterPanelSectionData.id,
+      data: filterPanelSectionData,
+      toggleSelected: toggleSelected,
+      searchData: searchData,
+      searchTerm: searchTerm
+    });
+  }))));
+};
+SearchAndFilter.propTypes = {
+  existingSearchData: _pt.array,
+  filterPanelData: _pt.array.isRequired,
+  returnSearchData: _pt.func.isRequired,
+  onPanelToggle: _pt.func,
+  onExpandChange: _pt.func
+};
+export default SearchAndFilter;

package/dist/esm/components/SearchAndFilter/SearchAndFilter.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import SearchAndFilter from "./SearchAndFilter";
+declare const meta: Meta<typeof SearchAndFilter>;
+export default meta;
+type Story = StoryObj<typeof SearchAndFilter>;
+export declare const Default: Story;
+export declare const WithDataSet: Story;
+export declare const WithExistingSearchData: Story;

package/dist/esm/components/SearchAndFilter/SearchAndFilter.stories.js

@@ -0,0 +1,211 @@
+import SearchAndFilter from "./SearchAndFilter";
+var meta = {
+  component: SearchAndFilter,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    returnSearchData: () => {},
+    filterPanelData: [{
+      id: 0,
+      heading: "Cloud",
+      chips: [{
+        lead: "Cloud",
+        value: "Google"
+      }, {
+        lead: "Cloud",
+        value: "AWS"
+      }, {
+        lead: "Cloud",
+        value: "Azure"
+      }]
+    }, {
+      id: 1,
+      heading: "Region",
+      chips: [{
+        lead: "Region",
+        value: "us-east1"
+      }, {
+        lead: "Region",
+        value: "us-north2"
+      }, {
+        lead: "Region",
+        value: "us-south3"
+      }, {
+        lead: "Region",
+        value: "us-north4"
+      }, {
+        lead: "Region",
+        value: "us-east5"
+      }, {
+        lead: "Region",
+        value: "us-south6"
+      }, {
+        lead: "Region",
+        value: "us-east7"
+      }, {
+        lead: "Region",
+        value: "us-east8"
+      }, {
+        lead: "Region",
+        value: "us-east9"
+      }, {
+        lead: "Region",
+        value: "us-east10"
+      }]
+    }, {
+      id: 2,
+      heading: "Owner",
+      chips: [{
+        lead: "Owner",
+        value: "foo"
+      }, {
+        lead: "Owner",
+        value: "bar"
+      }, {
+        lead: "Owner",
+        value: "baz"
+      }]
+    }]
+  }
+};
+export var WithDataSet = {
+  name: "With data set",
+  args: {
+    filterPanelData: [{
+      id: 0,
+      heading: "Cloud",
+      chips: [{
+        lead: "Cloud",
+        value: "Google"
+      }, {
+        lead: "Cloud",
+        value: "AWS"
+      }, {
+        lead: "Cloud",
+        value: "Azure"
+      }]
+    }, {
+      id: 1,
+      heading: "Region",
+      chips: [{
+        lead: "Region",
+        value: "us-east1"
+      }, {
+        lead: "Region",
+        value: "us-north2"
+      }, {
+        lead: "Region",
+        value: "us-south3"
+      }, {
+        lead: "Region",
+        value: "us-north4"
+      }, {
+        lead: "Region",
+        value: "us-east5"
+      }, {
+        lead: "Region",
+        value: "us-south6"
+      }, {
+        lead: "Region",
+        value: "us-east7"
+      }, {
+        lead: "Region",
+        value: "us-east8"
+      }, {
+        lead: "Region",
+        value: "us-east9"
+      }, {
+        lead: "Region",
+        value: "us-east10"
+      }]
+    }, {
+      id: 2,
+      heading: "Owner",
+      chips: [{
+        lead: "Owner",
+        value: "foo"
+      }, {
+        lead: "Owner",
+        value: "bar"
+      }, {
+        lead: "Owner",
+        value: "baz"
+      }]
+    }],
+    returnSearchData: () => {}
+  }
+};
+export var WithExistingSearchData = {
+  name: "With existing search data",
+  args: {
+    existingSearchData: [{
+      lead: "Cloud",
+      value: "Google"
+    }],
+    filterPanelData: [{
+      id: 0,
+      heading: "Cloud",
+      chips: [{
+        lead: "Cloud",
+        value: "Google"
+      }, {
+        lead: "Cloud",
+        value: "AWS"
+      }, {
+        lead: "Cloud",
+        value: "Azure"
+      }]
+    }, {
+      id: 1,
+      heading: "Region",
+      chips: [{
+        lead: "Region",
+        value: "us-east1"
+      }, {
+        lead: "Region",
+        value: "us-north2"
+      }, {
+        lead: "Region",
+        value: "us-south3"
+      }, {
+        lead: "Region",
+        value: "us-north4"
+      }, {
+        lead: "Region",
+        value: "us-east5"
+      }, {
+        lead: "Region",
+        value: "us-south6"
+      }, {
+        lead: "Region",
+        value: "us-east7"
+      }, {
+        lead: "Region",
+        value: "us-east8"
+      }, {
+        lead: "Region",
+        value: "us-east9"
+      }, {
+        lead: "Region",
+        value: "us-east10"
+      }]
+    }, {
+      id: 2,
+      heading: "Owner",
+      chips: [{
+        lead: "Owner",
+        value: "foo"
+      }, {
+        lead: "Owner",
+        value: "bar"
+      }, {
+        lead: "Owner",
+        value: "baz"
+      }]
+    }],
+    returnSearchData: () => {}
+  }
+};

package/dist/esm/components/SearchAndFilter/SearchAndFilter.test.d.ts

@@ -0,0 +1 @@
+export {};