@entur/dropdown 6.0.11 → 6.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dropdown.cjs.development.js +36 -12
- package/dist/dropdown.cjs.development.js.map +1 -1
- package/dist/dropdown.cjs.production.min.js +1 -1
- package/dist/dropdown.cjs.production.min.js.map +1 -1
- package/dist/dropdown.esm.js +37 -13
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/styles.css +144 -144
- package/package.json +5 -5
package/dist/dropdown.esm.js
CHANGED
|
@@ -7,7 +7,7 @@ import { CheckIcon, DownArrowIcon, CloseSmallIcon, CloseIcon } from '@entur/icon
|
|
|
7
7
|
import { VisuallyHidden } from '@entur/a11y';
|
|
8
8
|
import { LoadingDots } from '@entur/loader';
|
|
9
9
|
import { space } from '@entur/tokens';
|
|
10
|
-
import { useFloating,
|
|
10
|
+
import { useFloating, offset, flip, autoUpdate } from '@floating-ui/react-dom';
|
|
11
11
|
import { IconButton } from '@entur/button';
|
|
12
12
|
import { TagChip } from '@entur/chip';
|
|
13
13
|
import { Tooltip } from '@entur/tooltip';
|
|
@@ -1806,15 +1806,23 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
|
|
|
1806
1806
|
inputValue = _useCombobox.inputValue,
|
|
1807
1807
|
setInputValue = _useCombobox.setInputValue;
|
|
1808
1808
|
var _useFloating = useFloating({
|
|
1809
|
-
whileElementsMounted: function whileElementsMounted(ref, _float, update) {
|
|
1810
|
-
return autoUpdate(ref, _float, update);
|
|
1811
|
-
},
|
|
1812
1809
|
placement: 'bottom-start',
|
|
1813
1810
|
open: isOpen,
|
|
1814
1811
|
middleware: [offset(space.extraSmall2), flip()]
|
|
1815
1812
|
}),
|
|
1816
1813
|
refs = _useFloating.refs,
|
|
1817
|
-
floatingStyles = _useFloating.floatingStyles
|
|
1814
|
+
floatingStyles = _useFloating.floatingStyles,
|
|
1815
|
+
elements = _useFloating.elements,
|
|
1816
|
+
update = _useFloating.update;
|
|
1817
|
+
// Since we use CSS instead of conditional rendering when hiding dropdownlist
|
|
1818
|
+
// we can't use the whileElementsMounted option and need to handle
|
|
1819
|
+
// cleanup ourselves. See https://floating-ui.com/docs/autoupdate
|
|
1820
|
+
useEffect(function () {
|
|
1821
|
+
if (isOpen && elements.reference && elements.floating) {
|
|
1822
|
+
var cleanup = autoUpdate(elements.reference, elements.floating, update);
|
|
1823
|
+
return cleanup;
|
|
1824
|
+
}
|
|
1825
|
+
}, [isOpen, elements, update]);
|
|
1818
1826
|
var handleOnClear = function handleOnClear() {
|
|
1819
1827
|
var _inputRef$current;
|
|
1820
1828
|
onChange(null);
|
|
@@ -2158,15 +2166,23 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
2158
2166
|
openMenu = _useCombobox.openMenu,
|
|
2159
2167
|
setInputValue = _useCombobox.setInputValue;
|
|
2160
2168
|
var _useFloating = useFloating({
|
|
2161
|
-
whileElementsMounted: function whileElementsMounted(ref, _float, update) {
|
|
2162
|
-
return autoUpdate(ref, _float, update);
|
|
2163
|
-
},
|
|
2164
2169
|
placement: 'bottom-start',
|
|
2165
2170
|
open: isOpen,
|
|
2166
2171
|
middleware: [offset(space.extraSmall2), flip()]
|
|
2167
2172
|
}),
|
|
2168
2173
|
refs = _useFloating.refs,
|
|
2169
|
-
floatingStyles = _useFloating.floatingStyles
|
|
2174
|
+
floatingStyles = _useFloating.floatingStyles,
|
|
2175
|
+
elements = _useFloating.elements,
|
|
2176
|
+
update = _useFloating.update;
|
|
2177
|
+
// Since we use CSS instead of conditional rendering when hiding dropdownlist
|
|
2178
|
+
// we can't use the whileElementsMounted option and need to handle
|
|
2179
|
+
// cleanup ourselves. See https://floating-ui.com/docs/autoupdate
|
|
2180
|
+
useEffect(function () {
|
|
2181
|
+
if (isOpen && elements.reference && elements.floating) {
|
|
2182
|
+
var cleanup = autoUpdate(elements.reference, elements.floating, update);
|
|
2183
|
+
return cleanup;
|
|
2184
|
+
}
|
|
2185
|
+
}, [isOpen, elements, update]);
|
|
2170
2186
|
var handleOnClear = function handleOnClear() {
|
|
2171
2187
|
var _inputRef$current3;
|
|
2172
2188
|
onChange([]);
|
|
@@ -2362,15 +2378,23 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
2362
2378
|
getToggleButtonProps = _useSelect.getToggleButtonProps,
|
|
2363
2379
|
highlightedIndex = _useSelect.highlightedIndex;
|
|
2364
2380
|
var _useFloating = useFloating({
|
|
2365
|
-
whileElementsMounted: function whileElementsMounted(ref, _float, update) {
|
|
2366
|
-
return autoUpdate(ref, _float, update);
|
|
2367
|
-
},
|
|
2368
2381
|
placement: 'bottom-start',
|
|
2369
2382
|
open: isOpen,
|
|
2370
2383
|
middleware: [offset(space.extraSmall2), flip()]
|
|
2371
2384
|
}),
|
|
2372
2385
|
refs = _useFloating.refs,
|
|
2373
|
-
floatingStyles = _useFloating.floatingStyles
|
|
2386
|
+
floatingStyles = _useFloating.floatingStyles,
|
|
2387
|
+
elements = _useFloating.elements,
|
|
2388
|
+
update = _useFloating.update;
|
|
2389
|
+
// Since we use CSS instead of conditional rendering when hiding dropdownlist
|
|
2390
|
+
// we can't use the whileElementsMounted option and need to handle
|
|
2391
|
+
// cleanup ourselves. See https://floating-ui.com/docs/autoupdate
|
|
2392
|
+
useEffect(function () {
|
|
2393
|
+
if (isOpen && elements.reference && elements.floating) {
|
|
2394
|
+
var cleanup = autoUpdate(elements.reference, elements.floating, update);
|
|
2395
|
+
return cleanup;
|
|
2396
|
+
}
|
|
2397
|
+
}, [isOpen, elements, update]);
|
|
2374
2398
|
return React.createElement(BaseFormControl, _extends({
|
|
2375
2399
|
append: React.createElement(FieldAppend$1, {
|
|
2376
2400
|
ariaHiddenToggleButton: true,
|