Implement UI.

assets/css/woocommerce/admin/components/listbox.css

@@ -0,0 +1,36 @@
+:root {
+--ep-listbox-background: #fff;
+--ep-listbox-background-selected: #f0f0f0;
+--ep-listbox-border: #8c8f94;
+}
+
+.ep-listbox {
+background-color: var(--ep-listbox-background);
+border: 1px solid var(--ep-listbox-border);
+border-radius: 4px;
+box-shadow: 0 2px 6px rgb(0 0 0 / 5%);
+box-sizing: border-box;
+display: none;
+margin: 4px 0 0;
+overflow: hidden;
+padding: 4px;
+position: absolute;
+top: 100%;
+width: 100%;
+z-index: 1;
+
+&[aria-hidden="false"] {
+display: block;
+}
+}
+
+.ep-listbox__option {
+border-radius: 4px;
+margin: 0;
+padding: 8px;
+
+&[aria-selected="true"] {
+background: var(--ep-listbox-background-selected);
+cursor: pointer;
+}
+}

assets/css/woocommerce/admin/components/shop-order.css

@@ -0,0 +1,32 @@
+.ep-shop-order {
+
+& p {
+line-height: 1.2;
+margin: 0 0 0.25rem;
+}
+
+& strong {
+display: block;
+
+@nest [aria-selected="true"] & {
+color: var(--wp-admin-theme-color);
+}
+}
+
+& footer {
+align-items: center;
+display: flex;
+justify-content: space-between;
+}
+
+& time {
+line-height: 1;
+}
+
+& .order-status {
+font-size: 0.85em;
+justify-content: center;
+margin: 0;
+min-width: 40%;
+}
+}

assets/css/woocommerce/admin/orders.css

@@ -0,0 +1,6 @@
+@import "components/listbox.css";
+@import "components/shop-order.css";
+
+#posts-filter .search-box {
+position: relative;
+}

assets/js/api-search/index.js

@@ -36,11 +36,19 @@ const Context = createContext();
 * @param {string} props.apiEndpoint API endpoint.
 * @param {string} props.apiHost API Host.
 * @param {object} props.argsSchema Schema describing supported args.
+* @param {string} props.authorization Authorization header.
 * @param {WPElement} props.children Component children.
 * @param {string} props.paramPrefix Prefix used to set and parse URL parameters.
 * @returns {WPElement} Component.
 */
-export const ApiSearchProvider = ({ apiEndpoint, apiHost, argsSchema, children, paramPrefix }) => {
+export const ApiSearchProvider = ({
+apiEndpoint,
+apiHost,
+authorization,
+argsSchema,
+children,
+paramPrefix,
+}) => {
 /**
 * Any default args from the URL.
 */
@@ -74,7 +82,7 @@ export const ApiSearchProvider = ({ apiEndpoint, apiHost, argsSchema, children,
 /**
 * Set up fetch method.
 */
-const fetchResults = useFetchResults(apiHost, apiEndpoint);
+const fetchResults = useFetchResults(apiHost, apiEndpoint, authorization);
 
 /**
 * Set up the reducer.
@@ -109,6 +117,15 @@ export const ApiSearchProvider = ({ apiEndpoint, apiHost, argsSchema, children,
 dis({ type: 'CLEAR_CONSTRAINTS' });
 }, []);
 
+/**
+* Clear search resu;ts.
+*
+* @returns {void}
+*/
+const clearResults = useCallback(() => {
+dis({ type: 'CLEAR_RESULTS' });
+}, []);
+
 /**
 * Update the search query args, triggering a search.
 *
@@ -253,7 +270,7 @@ export const ApiSearchProvider = ({ apiEndpoint, apiHost, argsSchema, children,
 *
 * @returns {void}
 */
-const handleSearch = useCallback(() => {
+const handleSearch = useCallback(async () => {
 const { args, isOn, isPoppingState } = stateRef.current;
 
 if (!isPoppingState) {
@@ -268,10 +285,14 @@ export const ApiSearchProvider = ({ apiEndpoint, apiHost, argsSchema, children,
 
 setIsLoading(true);
 
-fetchResults(urlParams).then((response) => {
-setResults(response);
-setIsLoading(false);
-});
+const response = await fetchResults(urlParams);
+
+if (!response) {
+return;
+}
+
+setResults(response);
+setIsLoading(false);
 }, [argsSchema, fetchResults, pushState]);
 
 /**
@@ -298,6 +319,7 @@ export const ApiSearchProvider = ({ apiEndpoint, apiHost, argsSchema, children,
 aggregations,
 args,
 clearConstraints,
+clearResults,
 getUrlParamsFromArgs,
 getUrlWithParams,
 isLoading,

assets/js/api-search/src/hooks.js

@@ -8,9 +8,10 @@ import { useCallback, useRef } from '@wordpress/element';
 *
 * @param {string} apiHost API host.
 * @param {string} apiEndpoint API endpoint.
+* @param {string} Authorization Authorization header.
 * @returns {Function} Function for retrieving search results.
 */
-export const useFetchResults = (apiHost, apiEndpoint) => {
+export const useFetchResults = (apiHost, apiEndpoint, Authorization) => {
 const abort = useRef(new AbortController());
 const request = useRef(null);
 
@@ -30,6 +31,7 @@ export const useFetchResults = (apiHost, apiEndpoint) => {
 signal: abort.current.signal,
 headers: {
 Accept: 'application/json',
+Authorization,
 },
 })
 .then((response) => {
@@ -47,5 +49,5 @@ export const useFetchResults = (apiHost, apiEndpoint) => {
 return request.current;
 };
 
-return useCallback(fetchResults, [apiHost, apiEndpoint]);
+return useCallback(fetchResults, [apiHost, apiEndpoint, Authorization]);
 };

assets/js/api-search/src/reducer.js

@@ -22,6 +22,12 @@ export default (state, action) => {
 
 break;
 }
+case 'CLEAR_RESULTS': {
+newState.aggregations = {};
+newState.searchResults = [];
+newState.totalResults = 0;
+break;
+}
 case 'SEARCH': {
 newState.args = { ...newState.args, ...action.args, offset: 0 };
 newState.isOn = true;