Skip to content

Commit 3571528

Browse files
silviuaavramsilviuaavram
authored
feat: update scrollIntoView library (#1464)
1 parent c406ab2 commit 3571528

8 files changed

+83
-135
lines changed

‎docusaurus/pages/combobox.js

+3-20
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22

33
import Downshift from '../../src'
4-
import {colors} from '../utils'
4+
import {colors, containerStyles, menuStyles} from '../utils'
55

66
export default function ComboBox() {
77
return (
@@ -19,16 +19,7 @@ export default function ComboBox() {
1919
getRootProps,
2020
clearSelection,
2121
}) => (
22-
<div
23-
style={{
24-
display: 'flex',
25-
flexDirection: 'column',
26-
width: 'fit-content',
27-
justifyContent: 'center',
28-
marginTop: 100,
29-
alignSelf: 'center',
30-
}}
31-
>
22+
<div style={containerStyles}>
3223
<label
3324
style={{
3425
fontWeight: 'bolder',
@@ -61,15 +52,7 @@ export default function ComboBox() {
6152
&#10007;
6253
</button>
6354
</div>
64-
<ul
65-
{...getMenuProps()}
66-
style={{
67-
listStyle: 'none',
68-
width: '100%',
69-
padding: '0',
70-
margin: '4px 0 0 0',
71-
}}
72-
>
55+
<ul {...getMenuProps()} style={menuStyles}>
7356
{isOpen &&
7457
(inputValue
7558
? colors.filter(i =>

‎docusaurus/pages/useCombobox.js

+3-20
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22

33
import {useCombobox} from '../../src'
4-
import {colors} from '../utils'
4+
import {colors, containerStyles, menuStyles} from '../utils'
55

66
export default function DropdownCombobox() {
77
const [inputItems, setInputItems] = React.useState(colors)
@@ -26,16 +26,7 @@ export default function DropdownCombobox() {
2626
},
2727
})
2828
return (
29-
<div
30-
style={{
31-
display: 'flex',
32-
flexDirection: 'column',
33-
width: 'fit-content',
34-
justifyContent: 'center',
35-
marginTop: 100,
36-
alignSelf: 'center',
37-
}}
38-
>
29+
<div style={containerStyles}>
3930
<label
4031
style={{
4132
fontWeight: 'bolder',
@@ -68,15 +59,7 @@ export default function DropdownCombobox() {
6859
&#10007;
6960
</button>
7061
</div>
71-
<ul
72-
{...getMenuProps()}
73-
style={{
74-
listStyle: 'none',
75-
width: '100%',
76-
padding: '0',
77-
margin: '4px 0 0 0',
78-
}}
79-
>
62+
<ul {...getMenuProps()} style={menuStyles}>
8063
{isOpen &&
8164
inputItems.map((item, index) => (
8265
<li

‎docusaurus/pages/useMultipleCombobox.js

+11-35
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import * as React from 'react'
22

33
import {useCombobox, useMultipleSelection} from '../../src'
4-
import {colors} from '../utils'
4+
import {
5+
colors,
6+
containerStyles,
7+
menuStyles,
8+
selectedItemsContainerSyles,
9+
selectedItemStyles,
10+
} from '../utils'
511

612
const initialSelectedItems = [colors[0], colors[1]]
713

@@ -89,16 +95,7 @@ export default function DropdownMultipleCombobox() {
8995
},
9096
})
9197
return (
92-
<div
93-
style={{
94-
display: 'flex',
95-
flexDirection: 'column',
96-
width: 'fit-content',
97-
justifyContent: 'center',
98-
marginTop: 100,
99-
alignSelf: 'center',
100-
}}
101-
>
98+
<div style={containerStyles}>
10299
<label
103100
style={{
104101
fontWeight: 'bolder',
@@ -108,27 +105,14 @@ export default function DropdownMultipleCombobox() {
108105
>
109106
Choose an element:
110107
</label>
111-
<div
112-
style={{
113-
display: 'inline-flex',
114-
gap: '8px',
115-
alignItems: 'center',
116-
flexWrap: 'wrap',
117-
padding: '6px',
118-
}}
119-
>
108+
<div style={selectedItemsContainerSyles}>
120109
{selectedItems.map(function renderSelectedItem(
121110
selectedItemForRender,
122111
index,
123112
) {
124113
return (
125114
<span
126-
style={{
127-
backgroundColor: 'lightgray',
128-
paddingLeft: '4px',
129-
paddingRight: '4px',
130-
borderRadius: '6px',
131-
}}
115+
style={selectedItemStyles}
132116
key={`selected-item-${index}`}
133117
{...getSelectedItemProps({
134118
selectedItem: selectedItemForRender,
@@ -173,15 +157,7 @@ export default function DropdownMultipleCombobox() {
173157
</button>
174158
</div>
175159
</div>
176-
<ul
177-
{...getMenuProps()}
178-
style={{
179-
listStyle: 'none',
180-
width: '100%',
181-
padding: '0',
182-
margin: '4px 0 0 0',
183-
}}
184-
>
160+
<ul {...getMenuProps()} style={menuStyles}>
185161
{isOpen &&
186162
items.map((item, index) => (
187163
<li

‎docusaurus/pages/useMultipleSelect.js

+11-36
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import * as React from 'react'
22

33
import {useSelect, useMultipleSelection} from '../../src'
4-
import {colors} from '../utils'
4+
import {
5+
colors,
6+
containerStyles,
7+
menuStyles,
8+
selectedItemsContainerSyles,
9+
selectedItemStyles,
10+
} from '../utils'
511

612
const initialSelectedItems = [colors[0], colors[1]]
713

@@ -60,16 +66,7 @@ export default function DropdownMultipleSelect() {
6066
})
6167

6268
return (
63-
<div
64-
style={{
65-
display: 'flex',
66-
flexDirection: 'column',
67-
width: 'fit-content',
68-
justifyContent: 'center',
69-
marginTop: 100,
70-
alignSelf: 'center',
71-
}}
72-
>
69+
<div style={containerStyles}>
7370
<div>
7471
<label
7572
style={{
@@ -80,28 +77,14 @@ export default function DropdownMultipleSelect() {
8077
>
8178
Choose an element:
8279
</label>
83-
<div
84-
style={{
85-
display: 'inline-flex',
86-
gap: '8px',
87-
alignItems: 'center',
88-
flexWrap: 'wrap',
89-
padding: '6px',
90-
}}
91-
>
80+
<div style={selectedItemsContainerSyles}>
9281
{selectedItems.map(function renderSelectedItem(
9382
selectedItemForRender,
9483
index,
9584
) {
9685
return (
9786
<span
98-
style={{
99-
backgroundColor: 'lightgray',
100-
paddingLeft: '4px',
101-
paddingRight: '4px',
102-
borderRadius: '6px',
103-
}}
104-
className="bg-gray-100 rounded-md px-1 focus:bg-red-400"
87+
style={selectedItemStyles}
10588
key={`selected-item-${index}`}
10689
{...getSelectedItemProps({
10790
selectedItem: selectedItemForRender,
@@ -139,15 +122,7 @@ export default function DropdownMultipleSelect() {
139122
</div>
140123
</div>
141124
</div>
142-
<ul
143-
{...getMenuProps()}
144-
style={{
145-
listStyle: 'none',
146-
width: '100%',
147-
padding: '0',
148-
margin: '4px 0 0 0',
149-
}}
150-
>
125+
<ul {...getMenuProps()} style={menuStyles}>
151126
{isOpen &&
152127
items.map((item, index) => (
153128
<li

‎docusaurus/pages/useSelect.js

+3-20
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22

33
import {useSelect} from '../../src'
4-
import {colors} from '../utils'
4+
import {colors, containerStyles, menuStyles} from '../utils'
55

66
export default function DropdownSelect() {
77
const {
@@ -15,16 +15,7 @@ export default function DropdownSelect() {
1515
} = useSelect({items: colors})
1616

1717
return (
18-
<div
19-
style={{
20-
display: 'flex',
21-
flexDirection: 'column',
22-
width: 'fit-content',
23-
justifyContent: 'center',
24-
marginTop: 100,
25-
alignSelf: 'center',
26-
}}
27-
>
18+
<div style={containerStyles}>
2819
<label
2920
style={{
3021
fontWeight: 'bolder',
@@ -47,15 +38,7 @@ export default function DropdownSelect() {
4738
{selectedItem ?? 'Elements'}
4839
{isOpen ? <>&#8593;</> : <>&#8595;</>}
4940
</div>
50-
<ul
51-
{...getMenuProps()}
52-
style={{
53-
listStyle: 'none',
54-
width: '100%',
55-
padding: '0',
56-
margin: '4px 0 0 0',
57-
}}
58-
>
41+
<ul {...getMenuProps()} style={menuStyles}>
5942
{isOpen &&
6043
colors.map((item, index) => (
6144
<li

‎docusaurus/utils.js

+49-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,49 @@
1-
export const colors = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple', 'Pink', 'Orchid', 'Aqua', 'Lime', 'Gray', 'Brown', 'Teal', 'Skyblue']
1+
export const colors = [
2+
'Black',
3+
'Red',
4+
'Green',
5+
'Blue',
6+
'Orange',
7+
'Purple',
8+
'Pink',
9+
'Orchid',
10+
'Aqua',
11+
'Lime',
12+
'Gray',
13+
'Brown',
14+
'Teal',
15+
'Skyblue',
16+
]
17+
18+
export const menuStyles = {
19+
listStyle: 'none',
20+
width: '100%',
21+
padding: '0',
22+
margin: '4px 0 0 0',
23+
maxHeight: 120,
24+
overflowY: 'scroll',
25+
}
26+
27+
export const containerStyles = {
28+
display: 'flex',
29+
flexDirection: 'column',
30+
width: 'fit-content',
31+
justifyContent: 'center',
32+
marginTop: 100,
33+
alignSelf: 'center',
34+
}
35+
36+
export const selectedItemsContainerSyles = {
37+
display: 'inline-flex',
38+
gap: '8px',
39+
alignItems: 'center',
40+
flexWrap: 'wrap',
41+
padding: '6px',
42+
}
43+
44+
export const selectedItemStyles = {
45+
backgroundColor: 'lightgray',
46+
paddingLeft: '4px',
47+
paddingRight: '4px',
48+
borderRadius: '6px',
49+
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
},
6969
"dependencies": {
7070
"@babel/runtime": "^7.14.8",
71-
"compute-scroll-into-view": "^1.0.17",
71+
"compute-scroll-into-view": "^2.0.4",
7272
"prop-types": "^15.7.2",
7373
"react-is": "^17.0.2",
7474
"tslib": "^2.3.0"

‎src/utils.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import computeScrollIntoView from 'compute-scroll-into-view'
1+
import compute from 'compute-scroll-into-view'
22
import {isPreact} from './is.macro'
33

44
let idCounter = 0
@@ -27,7 +27,7 @@ function scrollIntoView(node, menuNode) {
2727
return
2828
}
2929

30-
const actions = computeScrollIntoView(node, {
30+
const actions = compute(node, {
3131
boundary: menuNode,
3232
block: 'nearest',
3333
scrollMode: 'if-needed',

0 commit comments

Comments
 (0)