feat: update dependencies and react to v18 (#1538)

* update deps and remove test:flow_coverage * fix jest dom import * replace statelesscomponent * fix useFakeTimers call * fix compute scroll into view import * fix id tests * fix status * downshift tests acts eslints * react 18 test resetIdCounter * downshift environment fix * tests fixes after lint * use es 2023 eslint * update again and remove tl hooks * finish coverage * downgrate tl preact * fix preact test * fix cypress tests * increase a timeout * check environment in hooks * update import tests * improve environment checks * move test cases array
downshift-js · Sep 20, 2023 · 9828365 · 9828365
1 parent bc7639c
commit 9828365
Show file tree

Hide file tree

Showing 56 changed files with 1,037 additions and 564 deletions.
diff --git a/cypress.config.js b/cypress.config.js
@@ -5,6 +5,7 @@ module.exports = defineConfig({
   e2e: {
     baseUrl: 'http://localhost:6006',
     video: false,
+    testIsolation: false,
     setupNodeEvents(on) {
       on(
         'file:preprocessor',

diff --git a/cypress/e2e/combobox.cy.js b/cypress/e2e/combobox.cy.js
@@ -115,7 +115,7 @@ describe('combobox', () => {
       .get('body')
       .trigger('touchstart', bodyX, bodyY, {force: true})
       .trigger('touchend', bodyX, bodyY, {force: true})
-    cy.findByTestId('downshift-item-0', {timeout: 10}).should('not.exist')
+    cy.findByTestId('downshift-item-0', {timeout: 100}).should('not.exist')
   })
 
   it('does not reset when swiping outside to scroll a touch screen', () => {

diff --git a/cypress/e2e/useMultipleSelect.cy.js b/cypress/e2e/useMultipleSelect.cy.js
@@ -6,11 +6,11 @@ describe('useMultipleSelect', () => {
   it('can select multiple options', () => {
     cy.findByRole('combobox').click()
     cy.findByRole('option', {name: 'Green'}).click()
-    cy.findByRole('option', {name: 'Gray'}).click()
+    cy.findByRole('option', {name: 'Blue'}).click()
     cy.findByRole('combobox').click()
     cy.findByText('Black').should('be.visible')
     cy.findByText('Red').should('be.visible')
     cy.findByText('Green').should('be.visible')
-    cy.findByText('Gray').should('be.visible')
+    cy.findByText('Blue').should('be.visible')
   })
 })
diff --git a/docusaurus/pages/combobox.js b/docusaurus/pages/combobox.js
@@ -53,29 +53,30 @@ export default function ComboBox() {
             </button>
           </div>
           <ul {...getMenuProps()} style={menuStyles}>
-            {isOpen &&
-              (inputValue
-                ? colors.filter(i =>
-                    i.toLowerCase().includes(inputValue.toLowerCase()),
-                  )
-                : colors
-              ).map((item, index) => (
-                <li
-                  style={{
-                    padding: '4px',
-                    backgroundColor:
-                      highlightedIndex === index ? '#bde4ff' : null,
-                  }}
-                  key={`${item}${index}`}
-                  {...getItemProps({
-                    item,
-                    index,
-                    'data-testid': `downshift-item-${index}`,
-                  })}
-                >
-                  {item}
-                </li>
-              ))}
+            {isOpen
+              ? (inputValue
+                  ? colors.filter(i =>
+                      i.toLowerCase().includes(inputValue.toLowerCase()),
+                    )
+                  : colors
+                ).map((item, index) => (
+                  <li
+                    style={{
+                      padding: '4px',
+                      backgroundColor:
+                        highlightedIndex === index ? '#bde4ff' : null,
+                    }}
+                    key={`${item}${index}`}
+                    {...getItemProps({
+                      item,
+                      index,
+                      'data-testid': `downshift-item-${index}`,
+                    })}
+                  >
+                    {item}
+                  </li>
+                ))
+              : null}
           </ul>
         </div>
       )}

diff --git a/docusaurus/pages/useCombobox.js b/docusaurus/pages/useCombobox.js
@@ -60,7 +60,7 @@ export default function DropdownCombobox() {
         </button>
       </div>
       <ul {...getMenuProps()} style={menuStyles}>
-        {isOpen &&
+        {isOpen ?
           inputItems.map((item, index) => (
             <li
               style={{
@@ -76,7 +76,7 @@ export default function DropdownCombobox() {
             >
               {item}
             </li>
-          ))}
+          )) : null}
       </ul>
     </div>
   )

diff --git a/docusaurus/pages/useMultipleCombobox.js b/docusaurus/pages/useMultipleCombobox.js
@@ -158,23 +158,25 @@ export default function DropdownMultipleCombobox() {
         </div>
       </div>
       <ul {...getMenuProps()} style={menuStyles}>
-        {isOpen &&
-          items.map((item, index) => (
-            <li
-              style={{
-                padding: '4px',
-                backgroundColor: highlightedIndex === index ? '#bde4ff' : null,
-              }}
-              key={`${item}${index}`}
-              {...getItemProps({
-                item,
-                index,
-                'data-testid': `downshift-item-${index}`,
-              })}
-            >
-              {item}
-            </li>
-          ))}
+        {isOpen
+          ? items.map((item, index) => (
+              <li
+                style={{
+                  padding: '4px',
+                  backgroundColor:
+                    highlightedIndex === index ? '#bde4ff' : null,
+                }}
+                key={`${item}${index}`}
+                {...getItemProps({
+                  item,
+                  index,
+                  'data-testid': `downshift-item-${index}`,
+                })}
+              >
+                {item}
+              </li>
+            ))
+          : null}
       </ul>
     </div>
   )

diff --git a/docusaurus/pages/useMultipleSelect.js b/docusaurus/pages/useMultipleSelect.js
@@ -67,79 +67,79 @@ export default function DropdownMultipleSelect() {
 
   return (
     <div style={containerStyles}>
-      <div>
-        <label
-          style={{
-            fontWeight: 'bolder',
-            color: selectedItem ? selectedItem : 'black',
-          }}
-          {...getLabelProps()}
-        >
-          Choose an element:
-        </label>
-        <div style={selectedItemsContainerSyles}>
-          {selectedItems.map(function renderSelectedItem(
-            selectedItemForRender,
-            index,
-          ) {
-            return (
+      <label
+        style={{
+          fontWeight: 'bolder',
+          color: selectedItem ? selectedItem : 'black',
+        }}
+        {...getLabelProps()}
+      >
+        Choose an element:
+      </label>
+      <div style={selectedItemsContainerSyles}>
+        {selectedItems.map(function renderSelectedItem(
+          selectedItemForRender,
+          index,
+        ) {
+          return (
+            <span
+              style={selectedItemStyles}
+              key={`selected-item-${index}`}
+              {...getSelectedItemProps({
+                selectedItem: selectedItemForRender,
+                index,
+              })}
+            >
+              {selectedItemForRender}
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
               <span
-                style={selectedItemStyles}
-                key={`selected-item-${index}`}
-                {...getSelectedItemProps({
-                  selectedItem: selectedItemForRender,
-                  index,
-                })}
+                style={{padding: '4px', cursor: 'pointer'}}
+                onClick={e => {
+                  e.stopPropagation()
+                  removeSelectedItem(selectedItemForRender)
+                }}
               >
-                {selectedItemForRender}
-                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-                <span
-                  style={{padding: '4px', cursor: 'pointer'}}
-                  onClick={e => {
-                    e.stopPropagation()
-                    removeSelectedItem(selectedItemForRender)
-                  }}
-                >
-                  &#10005;
-                </span>
+                &#10005;
               </span>
-            )
-          })}
-          <div
-            style={{
-              padding: '4px',
-              textAlign: 'center',
-              border: '1px solid black',
-              backgroundColor: 'lightgray',
-              cursor: 'pointer',
-            }}
-            type="button"
-            {...getToggleButtonProps(
-              getDropdownProps({preventKeyAction: isOpen}),
-            )}
-          >
-            Pick some colors {isOpen ? <>&#8593;</> : <>&#8595;</>}
-          </div>
+            </span>
+          )
+        })}
+        <div
+          style={{
+            padding: '4px',
+            textAlign: 'center',
+            border: '1px solid black',
+            backgroundColor: 'lightgray',
+            cursor: 'pointer',
+          }}
+          type="button"
+          {...getToggleButtonProps(
+            getDropdownProps({preventKeyAction: isOpen}),
+          )}
+        >
+          Pick some colors {isOpen ? <>&#8593;</> : <>&#8595;</>}
         </div>
       </div>
       <ul {...getMenuProps()} style={menuStyles}>
-        {isOpen &&
-          items.map((item, index) => (
-            <li
-              style={{
-                padding: '4px',
-                backgroundColor: highlightedIndex === index ? '#bde4ff' : null,
-              }}
-              key={`${item}${index}`}
-              {...getItemProps({
-                item,
-                index,
-                'data-testid': `downshift-item-${index}`,
-              })}
-            >
-              {item}
-            </li>
-          ))}
+        {isOpen
+          ? items.map((item, index) => (
+              <li
+                style={{
+                  padding: '4px',
+                  backgroundColor:
+                    highlightedIndex === index ? '#bde4ff' : null,
+                }}
+                key={`${item}${index}`}
+                {...getItemProps({
+                  item,
+                  index,
+                  'data-testid': `downshift-item-${index}`,
+                })}
+              >
+                {item}
+              </li>
+            ))
+          : null}
       </ul>
     </div>
   )

diff --git a/docusaurus/pages/useSelect.js b/docusaurus/pages/useSelect.js
@@ -39,7 +39,7 @@ export default function DropdownSelect() {
         {isOpen ? <>&#8593;</> : <>&#8595;</>}
       </div>
       <ul {...getMenuProps()} style={menuStyles}>
-        {isOpen &&
+        {isOpen ?
           colors.map((item, index) => (
             <li
               style={{
@@ -55,7 +55,7 @@ export default function DropdownSelect() {
             >
               {item}
             </li>
-          ))}
+          )) : null}
       </ul>
     </div>
   )