.github/workflows/release.yml

@@ -1,27 +1,30 @@
 name: Release
 
 on:
-  push:
-    branches:
-      - main
+  release:
+    types: [published]
 
 jobs:
   release:
     name: Release
+    if: github.repository == 'reach/reach-ui'
     runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
     env:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-    if: ${{ startsWith(github.ref, 'refs/tags/v') && github.repository == 'reach/reach-ui' }}
-
     steps:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node 14
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
-          version: 14.x
+          node-version: ${{ matrix.node-version }}
 
       - name: Restore Lerna (Cache)
         uses: actions/cache@v2
@@ -31,8 +34,6 @@ jobs:
             */*/node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
-      - run: echo "RELEASE_TAG=$(echo ${GITHUB_REF##*/})" >> $GITHUB_ENV
-
       - name: Install Dependencies
         run: yarn --frozen-lockfile
 
@@ -42,8 +43,8 @@ jobs:
       - name: Test
         run: yarn test
 
-      - run: echo "Publishing $RELEASE_TAG to npm ..."
+      - run: echo "Publishing to npm..."
       - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > "$HOME/.npmrc"
 
       - name: Publish Packages
-        run: lerna publish from-git --yes --pre-dist-tag next
+        run: npx lerna publish from-git --yes --pre-dist-tag next

README.md

@@ -139,7 +139,7 @@ $ git log -p
 # If everything looks good, push to GitHub along with the new tag:
 $ git push origin main --follow-tags
 
-# Open up github.com/reach/reach-ui/actions and watch the build. There will
+# Open up https://github.com/reach/reach-ui/actions and watch the build. There will
 # be 2 builds, one for the push to the main branch and one for the
 # new tag. The tag build will run the build and all the tests and then
 # automatically publish to npm if everything passes. If there's a

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.1",
+  "version": "0.16.4",
   "registry": "https://registry.npmjs.org/",
   "publishConfig": {
     "access": "public"

package.json

@@ -9,7 +9,7 @@
     "url": "git+https://github.com/reach/reach-ui.git"
   },
   "scripts": {
-    "start": "start-storybook -p 9001 -c .storybook",
+    "start": "start-storybook -p 9001 -c .storybook --ci",
     "test:react-16": "USE_REACT_16=true jest",
     "test": "jest",
     "build": "yarn build:packages",
@@ -36,12 +36,12 @@
     "@preconstruct/cli": "^2.1.0",
     "@reach/router": "^1.3.4",
     "@react-spring/web": "^9.2.3",
-    "@storybook/addon-actions": "^6.3.1",
-    "@storybook/addon-docs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.1",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.3.1",
-    "@storybook/react": "^6.3.1",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/react": "^6.3.12",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",

packages/accordion/examples/with-index-prop.example.js

@@ -65,9 +65,8 @@ function Example() {
       >
         Shuffle Items
       </button>
-      <Accordion defaultIndex={2} onChange={action(`Selecting panel`)}>
+      <Accordion onChange={action(`Selecting panel`)}>
         {items.map((item, index) => {
-          console.log({ indexInLoop: index });
           return (
             <AccordionItem
               key={item.button}

packages/alert-dialog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reach/alert-dialog",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Accessible React Alert Dialog.",
   "author": "React Training <hello@reacttraining.com>",
   "license": "MIT",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@reach/auto-id": "0.16.0",
-    "@reach/dialog": "0.16.0",
+    "@reach/dialog": "0.16.2",
     "@reach/utils": "0.16.0",
     "invariant": "^2.2.4",
     "prop-types": "^15.7.2",

packages/combobox/__tests__/combobox.test.tsx

@@ -14,7 +14,7 @@ import cities from "../examples/cities";
 
 describe("<Combobox />", () => {
   describe("rendering", () => {
-    it("renders as any HTML element", async () => {
+    it("renders as any HTML element", () => {
       function MyCombobox() {
         let [term, setTerm] = React.useState("");
         let results = useCityMatch(term);
@@ -45,18 +45,18 @@ describe("<Combobox />", () => {
         );
       }
 
-      let { getByTestId, getAllByRole } = render(<MyCombobox />);
+      let { getByTestId, getByRole, getAllByRole } = render(<MyCombobox />);
       expect(getByTestId("box").tagName).toBe("SPAN");
-      expect(getByTestId("input").tagName).toBe("TEXTAREA");
+      expect(getByRole("combobox").tagName).toBe("TEXTAREA");
 
       // Type to show the list
-      await userEvent.type(getByTestId("input"), "e");
+      userEvent.type(getByRole("combobox"), "e");
 
-      expect(getByTestId("list").tagName).toBe("DIV");
+      expect(getByRole("listbox").tagName).toBe("DIV");
       expect(getAllByRole("option")[0].tagName).toBe("DIV");
     });
 
-    it("renders when using the useComboboxContext hook", async () => {
+    it("renders when using the useComboboxContext hook", () => {
       function CustomComboboxInput(props: ComboboxInputProps) {
         const { isExpanded } = useComboboxContext();
         return (
@@ -85,14 +85,14 @@ describe("<Combobox />", () => {
         );
       }
 
-      let { getByTestId, getAllByRole } = render(<MyCombobox />);
+      let { getByRole, getAllByRole } = render(<MyCombobox />);
 
       // Type to show the list
 
-      await userEvent.type(getByTestId("input"), "a");
+      userEvent.type(getByRole("combobox"), "a");
       //jest.advanceTimersByTime(100);
 
-      expect(getByTestId("list")).toBeTruthy();
+      expect(getByRole("listbox")).toBeTruthy();
       expect(getAllByRole("option")[0]).toBeTruthy();
     });
   });
@@ -195,17 +195,44 @@ describe("<Combobox />", () => {
   });
 
   describe("user events", () => {
-    it("should open a list on text entry", async () => {
+    it("should open a list on text entry", () => {
       let optionToSelect = "Eagle Pass, Texas";
-      let { getByTestId, getByText } = render(<BasicCombobox />);
+      let { getByRole, getByText } = render(<BasicCombobox />);
       let getByTextWithMarkup = withMarkup(getByText);
-      let input = getByTestId("input");
+      let input = getByRole("combobox");
 
-      await userEvent.type(input, "e");
+      userEvent.type(input, "e");
 
-      expect(getByTestId("list")).toBeInTheDocument();
+      expect(getByRole("listbox")).toBeInTheDocument();
       expect(getByTextWithMarkup(optionToSelect)).toBeInTheDocument();
     });
+
+    // it("should *not* open a list when input value changes without text entry", () => {
+    //   let optionToSelect = "Eagle Pass, Texas";
+
+    //   function EaglePassSelector() {
+    //     let [term, setTerm] = React.useState("");
+    //     return (
+    //       <div>
+    //         <button
+    //           type="button"
+    //           onClick={() => {
+    //             setTerm(optionToSelect);
+    //           }}
+    //         >
+    //           Select Eagle Pass
+    //         </button>
+    //         <ControlledCombobox term={term} setTerm={setTerm} />
+    //       </div>
+    //     );
+    //   }
+
+    //   let { getByRole, queryByRole } = render(<EaglePassSelector />);
+
+    //   let button = getByRole("button");
+    //   userEvent.click(button);
+    //   expect(queryByRole("listbox")).toBeFalsy();
+    // });
   });
 });
 
@@ -214,9 +241,9 @@ function BasicCombobox() {
   let [term, setTerm] = React.useState("");
   let results = useCityMatch(term);
 
-  const handleChange = (event: any) => {
+  function handleChange(event: any) {
     setTerm(event.target.value);
-  };
+  }
 
   return (
     <div>
@@ -250,6 +277,55 @@ function BasicCombobox() {
   );
 }
 
+// function ControlledCombobox({
+//   term,
+//   setTerm,
+// }: {
+//   term: string;
+//   setTerm:
+//     | ((term: string) => void)
+//     | ((setter: (prevTerm: string) => string) => void);
+// }) {
+//   let results = useCityMatch(term);
+
+//   function handleChange(event: any) {
+//     setTerm(event.target.value);
+//   }
+
+//   return (
+//     <div>
+//       <h2>Clientside Search</h2>
+//       <Combobox id="holy-smokes">
+//         <ComboboxInput
+//           aria-label="cool search"
+//           data-testid="input"
+//           name="awesome"
+//           onChange={handleChange}
+//           value={term}
+//         />
+//         {results ? (
+//           <ComboboxPopover portal={false}>
+//             {results.length === 0 ? (
+//               <p>No results</p>
+//             ) : (
+//               <ComboboxList data-testid="list">
+//                 {results.slice(0, 10).map((result, index) => (
+//                   <ComboboxOption
+//                     key={index}
+//                     value={`${result.city}, ${result.state}`}
+//                   />
+//                 ))}
+//               </ComboboxList>
+//             )}
+//           </ComboboxPopover>
+//         ) : (
+//           <span>No Results!</span>
+//         )}
+//       </Combobox>
+//     </div>
+//   );
+// }
+
 function useCityMatch(term: string) {
   return term.trim() === ""
     ? null

packages/combobox/examples/index.story.js

@@ -1,13 +1,14 @@
-export { Example as BasicTsTS } from "./basic-ts.example.tsx";
+export { Example as BasicTs } from "./basic-ts.example.tsx";
 export { Example as Basic } from "./basic.example.js";
-export { Example as ControlledTsTS } from "./controlled-ts.example.tsx";
+export { Example as ControlledTs } from "./controlled-ts.example.tsx";
 export { Example as Controlled } from "./controlled.example.js";
 export { Example as LotsOfElements } from "./lots-of-elements.example.js";
 export { Example as NoPopover } from "./no-popover.example.js";
 export { Example as OpenOnFocus } from "./open-on-focus.example.js";
+// export { Example as SimulatedChange } from "./simulated-change.example.js";
 export { Example as TokenInput } from "./token-input.example.js";
 export { Example as WithButton } from "./with-button.example.js";
-export { Example as WithCustomSelectDataTS } from "./with-custom-select-data.example.tsx";
+export { Example as WithCustomSelectDataTs } from "./with-custom-select-data.example.tsx";
 export { Example as WithUsecomboboxcontextHookTS } from "./with-usecomboboxcontext-hook.example.tsx";
 
 export default {