feat: update scrollIntoView library (#1464)

downshift-js · Jan 14, 2023 · 3571528 · 3571528
1 parent c406ab2
commit 3571528
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 135 deletions.
diff --git a/docusaurus/pages/combobox.js b/docusaurus/pages/combobox.js
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import Downshift from '../../src'
-import {colors} from '../utils'
+import {colors, containerStyles, menuStyles} from '../utils'
 
 export default function ComboBox() {
   return (
@@ -19,16 +19,7 @@ export default function ComboBox() {
         getRootProps,
         clearSelection,
       }) => (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            width: 'fit-content',
-            justifyContent: 'center',
-            marginTop: 100,
-            alignSelf: 'center',
-          }}
-        >
+        <div style={containerStyles}>
           <label
             style={{
               fontWeight: 'bolder',
@@ -61,15 +52,7 @@ export default function ComboBox() {
               &#10007;
             </button>
           </div>
-          <ul
-            {...getMenuProps()}
-            style={{
-              listStyle: 'none',
-              width: '100%',
-              padding: '0',
-              margin: '4px 0 0 0',
-            }}
-          >
+          <ul {...getMenuProps()} style={menuStyles}>
             {isOpen &&
               (inputValue
                 ? colors.filter(i =>

diff --git a/docusaurus/pages/useCombobox.js b/docusaurus/pages/useCombobox.js
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import {useCombobox} from '../../src'
-import {colors} from '../utils'
+import {colors, containerStyles, menuStyles} from '../utils'
 
 export default function DropdownCombobox() {
   const [inputItems, setInputItems] = React.useState(colors)
@@ -26,16 +26,7 @@ export default function DropdownCombobox() {
     },
   })
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: 'fit-content',
-        justifyContent: 'center',
-        marginTop: 100,
-        alignSelf: 'center',
-      }}
-    >
+    <div style={containerStyles}>
       <label
         style={{
           fontWeight: 'bolder',
@@ -68,15 +59,7 @@ export default function DropdownCombobox() {
           &#10007;
         </button>
       </div>
-      <ul
-        {...getMenuProps()}
-        style={{
-          listStyle: 'none',
-          width: '100%',
-          padding: '0',
-          margin: '4px 0 0 0',
-        }}
-      >
+      <ul {...getMenuProps()} style={menuStyles}>
         {isOpen &&
           inputItems.map((item, index) => (
             <li

diff --git a/docusaurus/pages/useMultipleCombobox.js b/docusaurus/pages/useMultipleCombobox.js
@@ -1,7 +1,13 @@
 import * as React from 'react'
 
 import {useCombobox, useMultipleSelection} from '../../src'
-import {colors} from '../utils'
+import {
+  colors,
+  containerStyles,
+  menuStyles,
+  selectedItemsContainerSyles,
+  selectedItemStyles,
+} from '../utils'
 
 const initialSelectedItems = [colors[0], colors[1]]
 
@@ -89,16 +95,7 @@ export default function DropdownMultipleCombobox() {
     },
   })
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: 'fit-content',
-        justifyContent: 'center',
-        marginTop: 100,
-        alignSelf: 'center',
-      }}
-    >
+    <div style={containerStyles}>
       <label
         style={{
           fontWeight: 'bolder',
@@ -108,27 +105,14 @@ export default function DropdownMultipleCombobox() {
       >
         Choose an element:
       </label>
-      <div
-        style={{
-          display: 'inline-flex',
-          gap: '8px',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-          padding: '6px',
-        }}
-      >
+      <div style={selectedItemsContainerSyles}>
         {selectedItems.map(function renderSelectedItem(
           selectedItemForRender,
           index,
         ) {
           return (
             <span
-              style={{
-                backgroundColor: 'lightgray',
-                paddingLeft: '4px',
-                paddingRight: '4px',
-                borderRadius: '6px',
-              }}
+              style={selectedItemStyles}
               key={`selected-item-${index}`}
               {...getSelectedItemProps({
                 selectedItem: selectedItemForRender,
@@ -173,15 +157,7 @@ export default function DropdownMultipleCombobox() {
           </button>
         </div>
       </div>
-      <ul
-        {...getMenuProps()}
-        style={{
-          listStyle: 'none',
-          width: '100%',
-          padding: '0',
-          margin: '4px 0 0 0',
-        }}
-      >
+      <ul {...getMenuProps()} style={menuStyles}>
         {isOpen &&
           items.map((item, index) => (
             <li

diff --git a/docusaurus/pages/useMultipleSelect.js b/docusaurus/pages/useMultipleSelect.js
@@ -1,7 +1,13 @@
 import * as React from 'react'
 
 import {useSelect, useMultipleSelection} from '../../src'
-import {colors} from '../utils'
+import {
+  colors,
+  containerStyles,
+  menuStyles,
+  selectedItemsContainerSyles,
+  selectedItemStyles,
+} from '../utils'
 
 const initialSelectedItems = [colors[0], colors[1]]
 
@@ -60,16 +66,7 @@ export default function DropdownMultipleSelect() {
   })
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: 'fit-content',
-        justifyContent: 'center',
-        marginTop: 100,
-        alignSelf: 'center',
-      }}
-    >
+    <div style={containerStyles}>
       <div>
         <label
           style={{
@@ -80,28 +77,14 @@ export default function DropdownMultipleSelect() {
         >
           Choose an element:
         </label>
-        <div
-          style={{
-            display: 'inline-flex',
-            gap: '8px',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            padding: '6px',
-          }}
-        >
+        <div style={selectedItemsContainerSyles}>
           {selectedItems.map(function renderSelectedItem(
             selectedItemForRender,
             index,
           ) {
             return (
               <span
-                style={{
-                  backgroundColor: 'lightgray',
-                  paddingLeft: '4px',
-                  paddingRight: '4px',
-                  borderRadius: '6px',
-                }}
-                className="bg-gray-100 rounded-md px-1 focus:bg-red-400"
+                style={selectedItemStyles}
                 key={`selected-item-${index}`}
                 {...getSelectedItemProps({
                   selectedItem: selectedItemForRender,
@@ -139,15 +122,7 @@ export default function DropdownMultipleSelect() {
           </div>
         </div>
       </div>
-      <ul
-        {...getMenuProps()}
-        style={{
-          listStyle: 'none',
-          width: '100%',
-          padding: '0',
-          margin: '4px 0 0 0',
-        }}
-      >
+      <ul {...getMenuProps()} style={menuStyles}>
         {isOpen &&
           items.map((item, index) => (
             <li

diff --git a/docusaurus/pages/useSelect.js b/docusaurus/pages/useSelect.js
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import {useSelect} from '../../src'
-import {colors} from '../utils'
+import {colors, containerStyles, menuStyles} from '../utils'
 
 export default function DropdownSelect() {
   const {
@@ -15,16 +15,7 @@ export default function DropdownSelect() {
   } = useSelect({items: colors})
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: 'fit-content',
-        justifyContent: 'center',
-        marginTop: 100,
-        alignSelf: 'center',
-      }}
-    >
+    <div style={containerStyles}>
       <label
         style={{
           fontWeight: 'bolder',
@@ -47,15 +38,7 @@ export default function DropdownSelect() {
         {selectedItem ?? 'Elements'}
         {isOpen ? <>&#8593;</> : <>&#8595;</>}
       </div>
-      <ul
-        {...getMenuProps()}
-        style={{
-          listStyle: 'none',
-          width: '100%',
-          padding: '0',
-          margin: '4px 0 0 0',
-        }}
-      >
+      <ul {...getMenuProps()} style={menuStyles}>
         {isOpen &&
           colors.map((item, index) => (
             <li

diff --git a/docusaurus/utils.js b/docusaurus/utils.js
@@ -1 +1,49 @@
-export const colors = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple', 'Pink', 'Orchid', 'Aqua', 'Lime', 'Gray', 'Brown', 'Teal', 'Skyblue']
+export const colors = [
+  'Black',
+  'Red',
+  'Green',
+  'Blue',
+  'Orange',
+  'Purple',
+  'Pink',
+  'Orchid',
+  'Aqua',
+  'Lime',
+  'Gray',
+  'Brown',
+  'Teal',
+  'Skyblue',
+]
+
+export const menuStyles = {
+  listStyle: 'none',
+  width: '100%',
+  padding: '0',
+  margin: '4px 0 0 0',
+  maxHeight: 120,
+  overflowY: 'scroll',
+}
+
+export const containerStyles = {
+  display: 'flex',
+  flexDirection: 'column',
+  width: 'fit-content',
+  justifyContent: 'center',
+  marginTop: 100,
+  alignSelf: 'center',
+}
+
+export const selectedItemsContainerSyles = {
+  display: 'inline-flex',
+  gap: '8px',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  padding: '6px',
+}
+
+export const selectedItemStyles = {
+  backgroundColor: 'lightgray',
+  paddingLeft: '4px',
+  paddingRight: '4px',
+  borderRadius: '6px',
+}
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.8",
-    "compute-scroll-into-view": "^1.0.17",
+    "compute-scroll-into-view": "^2.0.4",
     "prop-types": "^15.7.2",
     "react-is": "^17.0.2",
     "tslib": "^2.3.0"

diff --git a/src/utils.js b/src/utils.js
@@ -1,4 +1,4 @@
-import computeScrollIntoView from 'compute-scroll-into-view'
+import compute from 'compute-scroll-into-view'
 import {isPreact} from './is.macro'
 
 let idCounter = 0
@@ -27,7 +27,7 @@ function scrollIntoView(node, menuNode) {
     return
   }
 
-  const actions = computeScrollIntoView(node, {
+  const actions = compute(node, {
     boundary: menuNode,
     block: 'nearest',
     scrollMode: 'if-needed',