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',