feat: add remaining examples to InputSearch docs and additional testi…

…ng examples and validation

build.washingtonpost.com/pages/resources/working-examples.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { isPossiblePhoneNumber } from "react-phone-number-input";
+import { matchSorter } from "match-sorter";
 import {
   Box,
   Button,
@@ -17,6 +18,8 @@ import {
   styled,
 } from "@washingtonpost/wpds-ui-kit";
 
+import { cities } from "@washingtonpost/wpds-input-search/src/cities";
+
 const STATES = [
   "Alabama",
   "Alaska",
@@ -128,6 +131,7 @@ const Form = () => {
     handleSubmit,
     register,
     reset,
+    clearErrors,
     watch,
   } = useForm<FormInputType>({});
 
@@ -137,6 +141,22 @@ const Form = () => {
 
   const [checked, setChecked] = useState(false);
 
+  const useCityMatch = (term: string) => {
+    return React.useMemo(
+      () =>
+        term.trim() === ""
+          ? null
+          : matchSorter(cities, term, {
+              keys: [(item) => `${item.city}, ${item.state}`],
+            }),
+      [term]
+    );
+  };
+
+  const [term, setTerm] = React.useState("");
+
+  const results: { city: string; state: string }[] | null = useCityMatch(term);
+
   return (
     <>
       <Headline>Form Example</Headline>
@@ -147,21 +167,6 @@ const Form = () => {
       </p>
       <FormContainer>
         <form onSubmit={handleSubmit(onSubmit)} noValidate>
-          <Row>
-            <InputWrapper>
-              <InputSearch.Root aria-label="search cities">
-                <InputSearch.Input name="city" id="city" />
-                <InputSearch.Popover>
-                  <InputSearch.List>
-                    <InputSearch.ListItem value="Boston" />
-                    <InputSearch.ListItem value="New York" />
-                    <InputSearch.ListItem value="Philadelphia" />
-                    <InputSearch.ListItem value="Washington D.C." />
-                  </InputSearch.List>
-                </InputSearch.Popover>
-              </InputSearch.Root>
-            </InputWrapper>
-          </Row>
           <Row>
             <InputWrapper>
               <InputText
@@ -272,23 +277,53 @@ const Form = () => {
           </Row>
           <Row>
             <InputWrapper>
-              <InputText
-                label="City"
-                id="city"
-                error={!!errors.city}
-                errorMessage={errors.city?.message}
-                required
-                {...register("city", {
-                  required: {
-                    value: true,
-                    message: "City is required",
-                  },
-                  minLength: {
-                    value: 5,
-                    message: "Please add a valid city",
-                  },
-                })}
-              />
+              <InputSearch.Root
+                aria-label="City"
+                openOnFocus
+                onSelect={(value) => {
+                  console.log("select?", value);
+                  if (value) {
+                    clearErrors("city");
+                  }
+                }}
+              >
+                <InputSearch.Input
+                  id="city"
+                  label="City"
+                  error={!!errors.city}
+                  errorMessage={errors.city?.message}
+                  required
+                  {...register("city", {
+                    required: {
+                      value: true,
+                      message: "City is required",
+                    },
+                    minLength: {
+                      value: 5,
+                      message: "Please add a valid city",
+                    },
+                    onChange: (event) => {
+                      setTerm(event.target.value);
+                    },
+                  })}
+                />
+                {results && (
+                  <InputSearch.Popover>
+                    {results.length > 0 ? (
+                      <InputSearch.List>
+                        {results.slice(0, 20).map((result) => (
+                          <InputSearch.ListItem
+                            key={`${result.city.toLowerCase()}, ${result.state.toLowerCase()}`}
+                            value={`${result.city}, ${result.state}`}
+                          />
+                        ))}
+                      </InputSearch.List>
+                    ) : (
+                      <InputSearch.EmptyState />
+                    )}
+                  </InputSearch.Popover>
+                )}
+              </InputSearch.Root>
             </InputWrapper>
           </Row>
           <Row>

ui/input-search/package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@reach/combobox": "^0.18.0",
+    "@reach/popover": "^0.18.0",
     "@washingtonpost/wpds-assets": "^1.18.0",
     "@washingtonpost/wpds-icon": "1.8.5",
     "@washingtonpost/wpds-input-label": "1.8.5",

ui/input-search/src/InputSearchEmptyState.test.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputSearchEmptyState } from "./InputSearchEmptyState";
+
+describe("InputSearchEmptyState", () => {
+  test("renders visibly into the document", () => {
+    render(<InputSearchEmptyState />);
+    expect(screen.getByText("No results found")).toBeInTheDocument();
+  });
+});

ui/input-search/src/InputSearchInput.test.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputSearchInput } from "./InputSearchInput";
+import { InputSearchRoot } from "./InputSearchRoot";
+import { InputSearchPopover } from "./InputSearchPopover";
+
+describe("InputSearchInput", () => {
+  const customRender = (ui, contextProps) => {
+    return render(
+      <InputSearchRoot>
+        {ui}
+        <InputSearchPopover {...contextProps} />
+      </InputSearchRoot>
+    );
+  };
+  test("renders visibly into the document", () => {
+    customRender(<InputSearchInput name="test" id="test" label="Test" />, {});
+    expect(screen.getByLabelText("Test")).toBeInTheDocument();
+  });
+  test("uses contexts portal prop", () => {
+    customRender(<InputSearchInput name="test" id="test" label="Test" />, {
+      portal: false,
+    });
+    expect(screen.getByTestId("border-style-override")).toHaveStyle(
+      "--wpds-colors-signal: var(--wpds-colors-subtle)"
+    );
+  });
+});

ui/input-search/src/InputSearchInput.tsx

@@ -27,6 +27,7 @@ export const InputSearchInput = React.forwardRef<
   InputSearchInputProps
 >(({ label = "Search", name, id, ...rest }: InputSearchInputProps, ref) => {
   const { disabled, usePortal } = React.useContext(InputSearchContext);
+  console.log("usePortal", usePortal);
   return (
     <div
       style={
@@ -36,6 +37,7 @@ export const InputSearchInput = React.forwardRef<
               "--wpds-colors-signal": "var(--wpds-colors-subtle)",
             } as React.CSSProperties)
       }
+      data-testid="border-style-override"
     >
       <ComboboxInput
         as={InputText}

ui/input-search/src/InputSearchItemText.test.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputSearchItemText } from "./InputSearchItemText";
+import { InputSearchRoot } from "./InputSearchRoot";
+import { InputSearchListItem } from "./InputSearchListItem";
+import { InputSearchList } from "./InputSearchList";
+
+describe("InputSearchItemText", () => {
+  const customRender = (ui, contextProps) => {
+    return render(
+      <InputSearchRoot>
+        <InputSearchList>
+          <InputSearchListItem {...contextProps}>{ui}</InputSearchListItem>
+        </InputSearchList>
+      </InputSearchRoot>
+    );
+  };
+  test("renders visibly into the document", () => {
+    customRender(<InputSearchItemText>&#x2766;</InputSearchItemText>, {
+      value: "test",
+    });
+    expect(screen.getByText("test")).toBeInTheDocument();
+  });
+});

ui/input-search/src/InputSearchList.test.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputSearchList } from "./InputSearchList";
+import { InputSearchRoot } from "./InputSearchRoot";
+
+describe("InputSearchList", () => {
+  const customRender = (ui, contextProps) => {
+    return render(<InputSearchRoot {...contextProps}>{ui}</InputSearchRoot>);
+  };
+
+  test("renders visibly into the document", () => {
+    customRender(<InputSearchList />, {});
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+});

ui/input-search/src/InputSearchList.tsx

@@ -4,6 +4,8 @@ import { styled } from "@washingtonpost/wpds-theme";
 
 const StyledList = styled(ComboboxList, {
   marginBlock: 0,
+  maxHeight: "300px",
+  overflowY: "auto",
   paddingInlineStart: 0,
   position: "relative",
   listStyleType: "none",
@@ -32,19 +34,16 @@ export const InputSearchList = ({
       ) as HTMLElement;
       if (!selectedEl) return;
 
-      const parentEl = listEl.parentElement;
-      if (!parentEl) return;
-
-      const listTop = parentEl.scrollTop;
-      const listBottom = listTop + parentEl.clientHeight;
+      const listTop = listEl.scrollTop;
+      const listBottom = listTop + listEl.clientHeight;
 
       const selectedTop = selectedEl.offsetTop;
       const selectedBottom = selectedTop + selectedEl.clientHeight;
 
       if (selectedTop < listTop) {
-        parentEl.scrollTop -= listTop - selectedTop;
+        listEl.scrollTop -= listTop - selectedTop;
       } else if (selectedBottom > listBottom) {
-        parentEl.scrollTop += selectedBottom - listBottom;
+        listEl.scrollTop += selectedBottom - listBottom;
       }
     }
   }, [navigationValue, state]);

ui/input-search/src/InputSearchListHeading.test.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputSearchListHeading } from "./InputSearchListHeading";
+
+describe("InputSearchListHeading", () => {
+  test("renders visibly into the document", () => {
+    render(<InputSearchListHeading>test</InputSearchListHeading>);
+    expect(screen.getByText("test")).toBeInTheDocument();
+  });
+});

ui/input-search/src/InputSearchListItem.test.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputSearchListItem } from "./InputSearchListItem";
+import { InputSearchRoot } from "./InputSearchRoot";
+import { InputSearchList } from "./InputSearchList";
+
+describe("InputSearchItemText", () => {
+  const customRender = (ui, contextProps) => {
+    return render(
+      <InputSearchRoot>
+        <InputSearchList {...contextProps}>{ui}</InputSearchList>
+      </InputSearchRoot>
+    );
+  };
+  test("renders visibly into the document", () => {
+    customRender(<InputSearchListItem value="test" />, {});
+    expect(screen.getByRole("option")).toBeInTheDocument();
+  });
+});

ui/input-search/src/InputSearchListItem.tsx

@@ -4,6 +4,7 @@ import { styled, theme } from "@washingtonpost/wpds-theme";
 
 const StyledListItem = styled(ComboboxOption, {
   color: theme.colors.primary,
+  fontFamily: theme.fonts.meta,
   fontSize: theme.fontSizes["100"],
   fontWeight: theme.fontWeights.light,
   paddingBlock: "$050",
@@ -19,8 +20,9 @@ const StyledListItem = styled(ComboboxOption, {
   },
 });
 
-export type InputSearchListItemProps = React.ComponentPropsWithRef<
-  typeof StyledListItem
+export type InputSearchListItemProps = Omit<
+  React.ComponentPropsWithRef<typeof StyledListItem>,
+  "index"
 >;
 
 export const InputSearchListItem = ({

ui/input-search/src/InputSearchLoadingState.test.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputSearchLoadingState } from "./InputSearchLoadingState";
+
+describe("InputSearchLoadingState", () => {
+  test("renders visibly into the document", () => {
+    render(<InputSearchLoadingState />);
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+  });
+});

ui/input-search/src/InputSearchOtherState.test.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputSearchOtherState } from "./InputSearchOtherState";
+import { Icon } from "@washingtonpost/wpds-icon";
+import { Settings } from "@washingtonpost/wpds-assets";
+
+describe("InputSearchOtherState", () => {
+  test("renders visibly into the document", () => {
+    render(
+      <InputSearchOtherState
+        icon={
+          <Icon label="test">
+            <Settings />
+          </Icon>
+        }
+      />
+    );
+    expect(screen.getByText("test")).toBeInTheDocument();
+  });
+});