fix: wrong items reference in examples

downshift-js · Feb 4, 2023 · f41971e · f41971e
1 parent 5baf4ba
commit f41971e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 23 deletions.
diff --git a/docs/downshift.mdx b/docs/downshift.mdx
@@ -146,7 +146,7 @@ function ComboBox() {
           </div>
           <ul
             className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-              isOpen && items.length ? '' : 'hidden'
+              !(isOpen && items.length) && 'hidden'
             }`}
             {...getMenuProps()}
           >
@@ -155,8 +155,12 @@ function ComboBox() {
                   .filter(
                     item =>
                       !inputValue ||
-                      item.title.toLowerCase().includes(inputValue.toLowerCase()) ||
-                      item.author.toLowerCase().includes(inputValue.toLowerCase()),
+                      item.title
+                        .toLowerCase()
+                        .includes(inputValue.toLowerCase()) ||
+                      item.author
+                        .toLowerCase()
+                        .includes(inputValue.toLowerCase()),
                   )
                   .map((item, index) => (
                     <li
@@ -256,7 +260,7 @@ function ComboBox() {
           </div>
           <ul
             className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-              isOpen && items.length ? '' : 'hidden'
+              !(isOpen && items.length) && 'hidden'
             }`}
             {...getMenuProps()}
           >
@@ -265,8 +269,12 @@ function ComboBox() {
                   .filter(
                     item =>
                       !inputValue ||
-                      item.title.toLowerCase().includes(inputValue.toLowerCase()) ||
-                      item.author.toLowerCase().includes(inputValue.toLowerCase()),
+                      item.title
+                        .toLowerCase()
+                        .includes(inputValue.toLowerCase()) ||
+                      item.author
+                        .toLowerCase()
+                        .includes(inputValue.toLowerCase()),
                   )
                   .map((item, index) => (
                     <li

diff --git a/docs/hooks/useCombobox.mdx b/docs/hooks/useCombobox.mdx
@@ -142,7 +142,7 @@ function ComboBoxExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -273,7 +273,7 @@ function ComboBoxExample() {
         </Box>
         <List
           className={cx(
-            !isOpen && 'hidden',
+            (!isOpen || !items.length) && 'hidden',
             '!absolute bg-white w-72 shadow-md max-h-80 overflow-scroll',
           )}
           {...getMenuProps()}
@@ -391,7 +391,7 @@ function ComboBoxExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -544,7 +544,7 @@ function ComboBoxExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -655,7 +655,7 @@ function ComboBoxExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -821,7 +821,7 @@ function ComboBoxExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -956,7 +956,7 @@ function ComboBoxExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -1082,7 +1082,7 @@ function ComboBoxExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps({ref: listRef})}
         >

diff --git a/docs/hooks/useMultipleSelection.mdx b/docs/hooks/useMultipleSelection.mdx
@@ -233,7 +233,7 @@ function MultipleComboBoxExample() {
         </div>
         <ul
           className={`absolute w-inherit bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -383,7 +383,7 @@ function MultipleSelectExample() {
         </div>
         <ul
           className={`absolute w-inherit bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !(isOpen && items.length) && 'hidden'
           }`}
           {...getMenuProps()}
         >

diff --git a/docs/hooks/useSelect.mdx b/docs/hooks/useSelect.mdx
@@ -109,7 +109,7 @@ function SelectExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !isOpen && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -311,7 +311,7 @@ function SelectExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !isOpen && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -436,7 +436,7 @@ function SelectExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !isOpen && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -524,7 +524,7 @@ function SelectExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !isOpen && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -664,7 +664,7 @@ function SelectExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !isOpen && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -784,7 +784,7 @@ function SelectExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !isOpen && 'hidden'
           }`}
           {...getMenuProps()}
         >
@@ -885,7 +885,7 @@ function SelectExample() {
         </div>
         <ul
           className={`absolute w-72 bg-white mt-1 shadow-md max-h-80 overflow-scroll p-0 ${
-            isOpen && items.length ? '' : 'hidden'
+            !isOpen && 'hidden'
           }`}
           {...getMenuProps()}
         >