chore: update dependencies

downshift-js · Mar 12, 2022 · 8a18c64 · 8a18c64
1 parent 26c93a5
commit 8a18c64
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 172 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "docs:dev": "docz dev",
     "docs:serve": "serve ./.docz/dist --listen 6006 --single",
     "setup": "npm install && npm run validate",
-    "validate": "kcd-scripts validate lint,build-and-test,test:cover,test:ts,test:flow:coverage,test:ssr,test:cypress"
+    "validate": "kcd-scripts validate lint,build-and-test,test:cover,test:ts,test:ssr,test:cypress"
   },
   "husky": {
     "hooks": {
@@ -66,55 +66,56 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.14.8",
+    "@babel/runtime": "^7.17.0",
     "compute-scroll-into-view": "^1.0.17",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-is": "^17.0.2",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@babel/helpers": "^7.14.8",
+    "@babel/helpers": "^7.17.0",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@testing-library/cypress": "^8.0.0",
-    "@testing-library/dom": "^8.1.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/dom": "^8.11.3",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/preact": "^2.0.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^26.0.24",
-    "@types/react": "^17.0.15",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.0",
+    "@types/react": "^17.0.39",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-no-side-effect-class-properties": "0.0.7",
     "babel-preset-react-native": "^4.0.1",
     "buble": "^0.20.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "cypress": "^8.1.0",
+    "cypress": "^9.4.1",
     "docz": "^2.3.1",
     "docz-theme-default": "^1.2.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-cypress": "^2.11.3",
-    "eslint-plugin-react": "7.24.0",
-    "flow-bin": "^0.156.0",
+    "eslint": "^8.8.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-react": "7.28.0",
+    "flow-bin": "^0.171.0",
     "flow-coverage-report": "^0.8.0",
-    "get-pkg-repo": "4.1.1",
-    "kcd-scripts": "^11.2.0",
+    "get-pkg-repo": "5.0.0",
+    "kcd-scripts": "^12.0.0",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.5.14",
+    "preact": "^10.6.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "^0.64.2",
+    "react-native": "^0.67.2",
     "react-test-renderer": "^17.0.2",
-    "serve": "^12.0.0",
-    "start-server-and-test": "^1.13.1",
-    "typescript": "^4.3.5"
+    "serve": "^13.0.2",
+    "start-server-and-test": "^1.14.0",
+    "typescript": "^4.5.5"
   },
   "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
     "settings": {
       "import/resolver": {
         "node": {

diff --git a/src/downshift.js b/src/downshift.js
@@ -149,7 +149,6 @@ class Downshift extends Component {
   inputId = this.props.inputId || `${this.id}-input`
   getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`)
 
-  input = null
   items = []
   // itemCount can be changed asynchronously
   // from within downshift (so it can't come from a prop)

diff --git a/src/hooks/useCombobox/__tests__/props.test.js b/src/hooks/useCombobox/__tests__/props.test.js
@@ -311,15 +311,11 @@ describe('props', () => {
     test('is called when isOpen, highlightedIndex, inputValue or items change', () => {
       const getA11yStatusMessage = jest.fn()
       const inputItems = ['aaa', 'bbb']
-      const {
-        clickOnToggleButton,
-        rerender,
-        keyDownOnInput,
-        changeInputValue,
-      } = renderCombobox({
-        getA11yStatusMessage,
-        items,
-      })
+      const {clickOnToggleButton, rerender, keyDownOnInput, changeInputValue} =
+        renderCombobox({
+          getA11yStatusMessage,
+          items,
+        })
 
       waitForDebouncedA11yStatusUpdate()
 
@@ -392,12 +388,8 @@ describe('props', () => {
 
   describe('inputValue', () => {
     test('controls the state property if passed', () => {
-      const {
-        keyDownOnInput,
-        input,
-        blurInput,
-        clickOnItemAtIndex,
-      } = renderCombobox({isOpen: true, inputValue: 'Dohn Joe'})
+      const {keyDownOnInput, input, blurInput, clickOnItemAtIndex} =
+        renderCombobox({isOpen: true, inputValue: 'Dohn Joe'})
 
       keyDownOnInput('ArrowDown')
       keyDownOnInput('Enter')
@@ -436,12 +428,8 @@ describe('props', () => {
 
   describe('isOpen', () => {
     test('controls the state property if passed', () => {
-      const {
-        clickOnToggleButton,
-        getItems,
-        blurInput,
-        keyDownOnInput,
-      } = renderCombobox({isOpen: true})
+      const {clickOnToggleButton, getItems, blurInput, keyDownOnInput} =
+        renderCombobox({isOpen: true})
 
       expect(getItems()).toHaveLength(items.length)
 
@@ -462,15 +450,11 @@ describe('props', () => {
   describe('selectedItem', () => {
     test('controls the state property if passed', () => {
       const selectedItem = items[2]
-      const {
-        keyDownOnInput,
-        input,
-        clickOnItemAtIndex,
-        clickOnToggleButton,
-      } = renderCombobox({
-        selectedItem,
-        initialIsOpen: true,
-      })
+      const {keyDownOnInput, input, clickOnItemAtIndex, clickOnToggleButton} =
+        renderCombobox({
+          selectedItem,
+          initialIsOpen: true,
+        })
 
       expect(input).toHaveValue(selectedItem)
 
@@ -768,7 +752,8 @@ describe('props', () => {
 
       for (let index = 0; index < testCases.length; index++) {
         const {step, state, args, type} = testCases[index]
-        const previousState = testCases[index - 1]?.state ?? initialState
+        const previousState =
+          index > 0 ? testCases[index - 1].state : initialState
 
         step(args)
 

diff --git a/src/hooks/useCombobox/testUtils.js b/src/hooks/useCombobox/testUtils.js
@@ -34,6 +34,54 @@ jest.mock('../utils', () => {
 beforeEach(jest.resetAllMocks)
 afterAll(jest.restoreAllMocks)
 
+function DropdownCombobox({renderSpy, renderItem, ...props}) {
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    getItemProps,
+  } = useCombobox({items, ...props})
+  const {itemToString} = props.itemToString ? props : defaultProps
+
+  renderSpy()
+
+  return (
+    <div>
+      <label {...getLabelProps()}>Choose an element:</label>
+      <div data-testid={dataTestIds.combobox} {...getComboboxProps()}>
+        <input data-testid={dataTestIds.input} {...getInputProps()} />
+        <button
+          data-testid={dataTestIds.toggleButton}
+          {...getToggleButtonProps()}
+        >
+          Toggle
+        </button>
+      </div>
+      <ul data-testid={dataTestIds.menu} {...getMenuProps()}>
+        {isOpen &&
+          (props.items || items).map((item, index) => {
+            const stringItem =
+              item instanceof Object ? itemToString(item) : item
+            return renderItem ? (
+              renderItem({index, item, getItemProps, dataTestIds, stringItem})
+            ) : (
+              <li
+                data-testid={dataTestIds.item(index)}
+                key={`${stringItem}${index}`}
+                {...getItemProps({item, index})}
+              >
+                {stringItem}
+              </li>
+            )
+          })}
+      </ul>
+    </div>
+  )
+}
+
 const renderCombobox = (props, uiCallback) => {
   const renderSpy = jest.fn()
   const ui = <DropdownCombobox renderSpy={renderSpy} {...props} />
@@ -101,54 +149,6 @@ const renderCombobox = (props, uiCallback) => {
   }
 }
 
-const DropdownCombobox = ({renderSpy, renderItem, ...props}) => {
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    getComboboxProps,
-    getItemProps,
-  } = useCombobox({items, ...props})
-  const {itemToString} = props.itemToString ? props : defaultProps
-
-  renderSpy()
-
-  return (
-    <div>
-      <label {...getLabelProps()}>Choose an element:</label>
-      <div data-testid={dataTestIds.combobox} {...getComboboxProps()}>
-        <input data-testid={dataTestIds.input} {...getInputProps()} />
-        <button
-          data-testid={dataTestIds.toggleButton}
-          {...getToggleButtonProps()}
-        >
-          Toggle
-        </button>
-      </div>
-      <ul data-testid={dataTestIds.menu} {...getMenuProps()}>
-        {isOpen &&
-          (props.items || items).map((item, index) => {
-            const stringItem =
-              item instanceof Object ? itemToString(item) : item
-            return renderItem ? (
-              renderItem({index, item, getItemProps, dataTestIds, stringItem})
-            ) : (
-              <li
-                data-testid={dataTestIds.item(index)}
-                key={`${stringItem}${index}`}
-                {...getItemProps({item, index})}
-              >
-                {stringItem}
-              </li>
-            )
-          })}
-      </ul>
-    </div>
-  )
-}
-
 const renderUseCombobox = props => {
   return renderHook(() => useCombobox({items, ...props}))
 }

diff --git a/src/hooks/useSelect/__tests__/props.test.js b/src/hooks/useSelect/__tests__/props.test.js
@@ -393,12 +393,8 @@ describe('props', () => {
 
   describe('isOpen', () => {
     test('controls the state property if passed', () => {
-      const {
-        clickOnToggleButton,
-        keyDownOnMenu,
-        blurMenu,
-        getItems,
-      } = renderSelect({isOpen: true})
+      const {clickOnToggleButton, keyDownOnMenu, blurMenu, getItems} =
+        renderSelect({isOpen: true})
       expect(getItems()).toHaveLength(items.length)
 
       clickOnToggleButton()
@@ -415,11 +411,8 @@ describe('props', () => {
   describe('selectedItem', () => {
     test('controls the state property if passed', () => {
       const selectedItem = items[2]
-      const {
-        toggleButton,
-        keyDownOnToggleButton,
-        clickOnItemAtIndex,
-      } = renderSelect({selectedItem, isOpen: true})
+      const {toggleButton, keyDownOnToggleButton, clickOnItemAtIndex} =
+        renderSelect({selectedItem, isOpen: true})
 
       expect(toggleButton).toHaveTextContent(items[2])
 
@@ -782,7 +775,8 @@ describe('props', () => {
 
       for (let index = 0; index < testCases.length; index++) {
         const {step, state, args, type} = testCases[index]
-        const previousState = testCases[index - 1]?.state ?? initialState
+        const previousState =
+          index > 0 ? testCases[index - 1].state : initialState
 
         step(args)
 
@@ -816,11 +810,8 @@ describe('props', () => {
     // https://github.com/downshift-js/downshift/issues/965
     test('is called only once on item selection', () => {
       const stateReducer = jest.fn((s, a) => a.changes)
-      const {
-        clickOnToggleButton,
-        keyDownOnMenu,
-        clickOnItemAtIndex,
-      } = renderSelect({stateReducer, initialIsOpen: true})
+      const {clickOnToggleButton, keyDownOnMenu, clickOnItemAtIndex} =
+        renderSelect({stateReducer, initialIsOpen: true})
 
       clickOnItemAtIndex(0)