@procore/core-react 0.0.0-20230808121909

package/dist/SuperSelect/useSuperSelect.js

@@ -0,0 +1,690 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { autoUpdate, flip, offset, size, useClick, useDismiss, useFloating, useInteractions, useListNavigation, } from '@floating-ui/react-dom-interactions';
+import { useId } from '@react-aria/utils';
+import debounce from 'lodash.debounce';
+import uniq from 'lodash.uniq';
+import React from 'react';
+import { ulid } from 'ulid';
+import { useI18nContext } from '../_hooks/I18n';
+import { spacing } from '../_styles/spacing';
+import * as defaultComponents from './SuperSelect.components';
+import { draggableOptionIdSymbol } from './SuperSelect.constants';
+import { collectGroupsInOrderOfOccurrence, createOptgroup, getBatchOptionFormatter, getIsAllOptionsUngrouped, getOptionIsOptgroup, getOptionsSortingAlgorithm, isMultiple, removeEmptyOptGroups, reorder, sortOptgroups, } from './SuperSelect.utils';
+var listContainerVerticalPadding = spacing.sm * 2;
+function noop() { }
+function defaultGetOptionValue(option) {
+    return option === null || option === void 0 ? void 0 : option.value;
+}
+function defaultGetOptionIsBatch(option) {
+    return Array.isArray(option === null || option === void 0 ? void 0 : option.value);
+}
+function defaultGetOptionIsDisabled(option) {
+    var _a;
+    return (_a = option === null || option === void 0 ? void 0 : option.disabled) !== null && _a !== void 0 ? _a : false;
+}
+function defaultGetOptionGroup(option) {
+    var _a;
+    return (_a = option === null || option === void 0 ? void 0 : option.group) !== null && _a !== void 0 ? _a : '';
+}
+function defaultSetOptionGroup(option, group) {
+    return __assign(__assign({}, option), { group: group });
+}
+function defaultGetOptionLabel(option) {
+    var _a;
+    return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '';
+}
+function stringContains(str1, str2) {
+    return str1.toLowerCase().includes(str2.toLowerCase());
+}
+function useTokenNavigation(context, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.enabled, enabled = _c === void 0 ? true : _c, _d = _b.value, value = _d === void 0 ? [] : _d, _e = _b.activeIndex, activeIndex = _e === void 0 ? null : _e, _f = _b.onNavigate, onNavigate = _f === void 0 ? noop : _f, _g = _b.onChange, onChange = _g === void 0 ? noop : _g;
+    return {
+        reference: {
+            onKeyDown: function (e) {
+                if (!enabled || !Array.isArray(value)) {
+                    return;
+                }
+                if (e.key === 'ArrowLeft') {
+                    if (activeIndex !== null) {
+                        onNavigate(Math.max(0, activeIndex - 1));
+                    }
+                    else if (value.length > 0) {
+                        onNavigate(value.length - 1);
+                    }
+                }
+                else if (e.key === 'ArrowRight') {
+                    if (activeIndex !== null) {
+                        if (activeIndex === value.length - 1) {
+                            onNavigate(null);
+                        }
+                        else {
+                            onNavigate(activeIndex + 1);
+                        }
+                    }
+                }
+                else if (e.key === 'Backspace') {
+                    if (!e.repeat) {
+                        if (activeIndex !== null) {
+                            var nextVal = value.filter(function (_, i) { return i !== activeIndex; });
+                            onChange(nextVal);
+                            if (activeIndex >= nextVal.length) {
+                                onNavigate(null);
+                            }
+                        }
+                        else if (value.length > 0) {
+                            onChange(value.filter(function (_, i) { return i !== value.length - 1; }));
+                        }
+                    }
+                }
+            },
+        },
+    };
+}
+function useKeyboardSelection(context, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.enabled, enabled = _c === void 0 ? true : _c, _d = _b.onSelect, onSelect = _d === void 0 ? function () { } : _d;
+    function onKeyDown(e) {
+        if (!enabled) {
+            return;
+        }
+        if (e.key === 'Enter') {
+            onSelect();
+        }
+    }
+    return {
+        reference: {
+            onKeyDown: onKeyDown,
+        },
+        floating: {
+            onKeyDown: onKeyDown,
+        },
+    };
+}
+export function useSuperSelect(_a) {
+    var _b = _a.block, block = _b === void 0 ? false : _b, customComponents = _a.components, defaultValue = _a.defaultValue, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.draggable, draggable = _d === void 0 ? false : _d, _e = _a.emptyMessage, emptyMessage = _e === void 0 ? 'No results' : _e, error = _a.error, footer = _a.footer, _f = _a.getOptionGroup, getOptionGroup = _f === void 0 ? defaultGetOptionGroup : _f, _g = _a.getOptionIsBatch, getOptionIsBatch = _g === void 0 ? defaultGetOptionIsBatch : _g, _h = _a.getOptionIsDisabled, getOptionIsDisabled = _h === void 0 ? defaultGetOptionIsDisabled : _h, _j = _a.getOptionLabel, getOptionLabel = _j === void 0 ? defaultGetOptionLabel : _j, _k = _a.getOptionValue, getOptionValue = _k === void 0 ? defaultGetOptionValue : _k, _l = _a.onScrollBottom, onScrollBottom = _l === void 0 ? noop : _l, _m = _a.onOpenChange, onOpenChange = _m === void 0 ? noop : _m, header = _a.header, _o = _a.loading, loading = _o === void 0 ? false : _o, _p = _a.multiple, multiple = _p === void 0 ? false : _p, onChange = _a.onChange, onManualSort = _a.onManualSort, _q = _a.options, sourceOptions = _q === void 0 ? [] : _q, placeholder = _a.placeholder, _r = _a.preset, preset = _r === void 0 ? '' : _r, presetProps = _a.presetProps, _s = _a.search, search = _s === void 0 ? true : _s, _t = _a.selectionStyle, selectionStyle = _t === void 0 ? 'highlight' : _t, _u = _a.setOptionGroup, setOptionGroup = _u === void 0 ? defaultSetOptionGroup : _u, _v = _a.sort, sort = _v === void 0 ? true : _v, _w = _a.tabIndex, tabIndex = _w === void 0 ? 0 : _w, value_ = _a.value;
+    React.useEffect(function () {
+        if (!draggable) {
+            return;
+        }
+        var isUsingDefaultGetter = getOptionGroup === defaultGetOptionGroup;
+        var isUsingDefaultSetter = setOptionGroup === defaultSetOptionGroup;
+        if ((isUsingDefaultGetter && !isUsingDefaultSetter) ||
+            (!isUsingDefaultGetter && isUsingDefaultSetter)) {
+            console.warn("SuperSelect: Using potentially conflicting \"getOptionGroup\" and \"setOptionGroup\" implementations.\n        Group reassignment after drag-and-drop operation might be broken.");
+        }
+    }, [draggable, getOptionGroup, setOptionGroup]);
+    var i18n = useI18nContext();
+    var initialValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (multiple ? [] : null);
+    var _x = React.useState(initialValue), val = _x[0], setVal = _x[1];
+    var value = value_ !== undefined ? value_ : val;
+    function setValue(v) {
+        if (!value_) {
+            setVal(v);
+        }
+        if (onChange) {
+            onChange(v);
+        }
+    }
+    var navigationList = React.useRef([]);
+    var virtuoso = React.useRef(null);
+    var searchRef = React.useRef(null);
+    var overlayId = useId(); // TODO use React 18 useId
+    var listId = useId(); // TODO use React 18 useId
+    var _y = React.useState(false), open = _y[0], setOpen = _y[1];
+    var _z = React.useState(false), pointer = _z[0], setPointer = _z[1];
+    var _0 = React.useState(248), width = _0[0], setWidth = _0[1];
+    var _1 = React.useState(248), maxHeight = _1[0], setMaxHeight = _1[1];
+    var _2 = React.useState(0), listHeight = _2[0], setListHeight = _2[1];
+    var _3 = React.useState(0), searchHeight = _3[0], setSearchHeight = _3[1];
+    var _4 = React.useState(0), footerHeight = _4[0], setFooterHeight = _4[1];
+    var listContainerHeight = Math.min(maxHeight - searchHeight - footerHeight + listContainerVerticalPadding, listHeight + listContainerVerticalPadding);
+    var _5 = React.useState(''), searchValue = _5[0], setSearchValue_ = _5[1];
+    var setSearchValue = debounce(setSearchValue_, 250); // TODO use React 18 useDeferredValue
+    var _6 = React.useState(null), activeMenuIndex = _6[0], setActiveMenuIndex = _6[1];
+    var _7 = React.useState(null), activeTokenIndex = _7[0], setActiveTokenIndex = _7[1];
+    var components = __assign(__assign({}, defaultComponents), (customComponents || {}));
+    // TODO #memogetters: consider having getOption... getter functions memoized by consumers
+    // Until then, exclude these callbacks from effect and memo dependencies
+    var sortOptions = React.useMemo(function () { return getOptionsSortingAlgorithm({ getOptionIsBatch: getOptionIsBatch, getOptionLabel: getOptionLabel }); }, 
+    // skip `getOptionIsBatch` and `getOptionLabel`
+    []);
+    var formatBatchOption = React.useMemo(function () {
+        return getBatchOptionFormatter({
+            value: value,
+            multiple: multiple,
+            getOptionIsBatch: getOptionIsBatch,
+            getOptionValue: getOptionValue,
+        });
+    }, 
+    // skip `getOptionIsBatch` and `getOptionValue`, refer to TODO #memogetters
+    [value, multiple]);
+    // collect groups, sort them and populate them with options, and sort the options inside the groups
+    var enforceOptionsSortingOrder = React.useCallback(function groupAndSort(opts) {
+        var _a = collectGroupsInOrderOfOccurrence(opts, getOptionGroup), groups = _a.groups, groupedOptions = _a.groupedOptions;
+        if (getIsAllOptionsUngrouped(groups)) {
+            return opts.sort(sortOptions);
+        }
+        return Object.entries(groupedOptions)
+            .sort(function (_a, _b) {
+            var groupA = _a[0];
+            var groupB = _b[0];
+            return sortOptgroups(groupA, groupB);
+        })
+            .flatMap(function (_a) {
+            var groupName = _a[0], groupOptions = _a[1];
+            return createOptgroup(groupName, groupOptions.sort(sortOptions));
+        });
+    }, 
+    // skip `getOptionGroup`, refer to TODO #memogetters
+    [sortOptions]);
+    // collect groups and populate them with options
+    var deriveOptionsSortingOrder = React.useCallback(function (opts) {
+        var _a = collectGroupsInOrderOfOccurrence(opts, getOptionGroup), groups = _a.groups, groupedOptions = _a.groupedOptions;
+        if (getIsAllOptionsUngrouped(groups)) {
+            return opts;
+        }
+        // display optgroups in the order of occurrence, as they are considered pre-sorted
+        return groups.flatMap(function (group) {
+            var groupOptions = groupedOptions[group];
+            return createOptgroup(group, groupOptions);
+        });
+    }, 
+    // skip `getOptionGroup`, refer to TODO #memogetters
+    []);
+    var groupAndSortAlgorithm = React.useMemo(function () { return (sort ? enforceOptionsSortingOrder : deriveOptionsSortingOrder); }, [sort, enforceOptionsSortingOrder, deriveOptionsSortingOrder]);
+    var options = React.useMemo(function () {
+        var queried = searchValue
+            ? sourceOptions.filter(function (opt) {
+                return stringContains(getOptionLabel(opt), searchValue);
+            })
+            : __spreadArray([], sourceOptions, true); // make a copy of source options to prevent the mutation when sorting
+        return groupAndSortAlgorithm(queried).map(formatBatchOption);
+    }, 
+    // skip `getOptionLabel`, refer to TODO #memogetters
+    [groupAndSortAlgorithm, formatBatchOption, searchValue, sourceOptions]);
+    var _8 = React.useState([]), draggableOptions = _8[0], setDraggableOptions = _8[1];
+    React.useEffect(function () {
+        if (!draggable) {
+            return;
+        }
+        // make a copy of source options to prevent the mutation when sorting
+        var opts = groupAndSortAlgorithm(sourceOptions.map(function (opt) {
+            var _a;
+            return (__assign(__assign({}, opt), (_a = {}, _a[draggableOptionIdSymbol] = ulid(), _a)));
+        }));
+        setDraggableOptions(opts);
+    }, 
+    // in draggable mode, sourceOptions must be memoized, othewise reorder will not work
+    [draggable, sourceOptions, groupAndSortAlgorithm]);
+    var queriedDraggableOptions = React.useMemo(function () {
+        if (!draggable) {
+            return [];
+        }
+        var queried = searchValue
+            ? removeEmptyOptGroups(draggableOptions.filter(function (opt) {
+                if (!getOptionIsOptgroup(opt)) {
+                    return stringContains(getOptionLabel(opt), searchValue);
+                }
+                return true;
+            }))
+            : draggableOptions;
+        return queried.map(formatBatchOption);
+    }, 
+    // skip `getOptionLabel`, refer to TODO #memogetters
+    [draggable, draggableOptions, searchValue, formatBatchOption]);
+    var groupIndices = React.useMemo(function () {
+        return options.reduce(function (acc, opt, i) {
+            if (getOptionIsOptgroup(opt)) {
+                acc.push(i);
+            }
+            return acc;
+        }, []);
+    }, [options]);
+    var selectedIndex = React.useMemo(function () {
+        return options.findIndex(function (option) { return isSelectableOption(option) && getOptionValue(option) === value; });
+    }, [options, value]);
+    var selectedOption = React.useMemo(function () {
+        var val = Array.isArray(value) ? value[0] : value;
+        return options.find(function (option) { return getOptionValue(option) === val; });
+    }, [options, value]);
+    var selectedLabel = React.useMemo(function () {
+        return selectedOption ? getOptionLabel(selectedOption) : '';
+    }, [selectedOption]);
+    function isSelectableOption(o) {
+        return !getOptionIsOptgroup(o) && !getOptionIsDisabled(o);
+    }
+    function getFirstSelectableOptionIndex() {
+        return options.findIndex(isSelectableOption);
+    }
+    function onSelect(option) {
+        if (getOptionIsDisabled(option)) {
+            return;
+        }
+        var optionValue = getOptionValue(option);
+        if (isMultiple(multiple, value)) {
+            if (Array.isArray(optionValue)) {
+                setValue(uniq(__spreadArray(__spreadArray([], value, true), optionValue, true)));
+            }
+            else {
+                setValue(value.includes(optionValue)
+                    ? value.filter(function (val) { return val !== optionValue; })
+                    : __spreadArray(__spreadArray([], value, true), [optionValue], false));
+            }
+        }
+        else {
+            setValue(optionValue);
+        }
+    }
+    function onKeyboardSelect() {
+        if (activeMenuIndex !== null) {
+            var option = options[activeMenuIndex];
+            if (option) {
+                onSelect(option);
+            }
+        }
+    }
+    function getOptionIsSelected(option) {
+        return Array.isArray(value)
+            ? value.includes(getOptionValue(option))
+            : value === getOptionValue(option);
+    }
+    function isEmpty() {
+        return Array.isArray(value) ? value.length === 0 : value === null;
+    }
+    var boundWidthRef = React.useRef(open);
+    React.useEffect(function () {
+        boundWidthRef.current = open;
+    }, [open]);
+    var floating = useFloating({
+        open: open,
+        onOpenChange: function (open) {
+            setOpen(open);
+            onOpenChange(open);
+        },
+        whileElementsMounted: autoUpdate,
+        strategy: 'fixed',
+        middleware: [
+            offset(2),
+            flip(),
+            size({
+                apply: function (_a) {
+                    var availableHeight = _a.availableHeight, elements = _a.elements;
+                    if (boundWidthRef.current) {
+                        boundWidthRef.current = false;
+                        setWidth(elements.reference.getBoundingClientRect().width);
+                    }
+                    setMaxHeight(availableHeight);
+                },
+                padding: 10,
+            }),
+        ],
+    });
+    var _9 = useInteractions([
+        useClick(floating.context, {
+            enabled: !disabled,
+            keyboardHandlers: false,
+        }),
+        useDismiss(floating.context, {
+            enabled: !disabled,
+        }),
+        useListNavigation(floating.context, {
+            activeIndex: activeMenuIndex,
+            disabledIndices: groupIndices,
+            enabled: !disabled,
+            listRef: navigationList,
+            loop: true,
+            onNavigate: function (i) { return setActiveMenuIndex(function () { return i; }); },
+            selectedIndex: selectedIndex,
+            virtual: true,
+        }),
+        useTokenNavigation(floating.context, {
+            activeIndex: activeTokenIndex,
+            enabled: !disabled && multiple && searchValue === '',
+            onChange: setValue,
+            onNavigate: function (i) { return setActiveTokenIndex(function () { return i; }); },
+            value: value,
+        }),
+        useKeyboardSelection(floating.context, {
+            enabled: !disabled,
+            onSelect: onKeyboardSelect,
+        }),
+        {
+            reference: {
+                $block: block,
+                $disabled: disabled,
+                $error: error,
+                $hasClearIcon: !disabled && !loading,
+                $loading: loading,
+                $multiple: multiple,
+                $open: open,
+                $placeholder: !selectedLabel,
+                'aria-controls': search ? overlayId : listId,
+                'aria-expanded': open,
+                'aria-haspopup': search ? 'dialog' : 'listbox',
+                onKeyDown: function () {
+                    setPointer(false);
+                },
+                role: 'combobox',
+                search: search,
+                tabIndex: disabled ? -1 : tabIndex,
+            },
+            floating: {
+                role: search ? 'dialog' : 'none',
+                id: overlayId,
+                onKeyDown: function () {
+                    setPointer(false);
+                },
+                onPointerMove: function () {
+                    setPointer(true);
+                },
+                style: {
+                    position: floating.strategy,
+                    left: floating.x || 0,
+                    top: floating.y || 0,
+                    width: width,
+                    maxHeight: maxHeight,
+                    zIndex: 10,
+                },
+            },
+        },
+    ]), getReferenceProps = _9.getReferenceProps, getFloatingProps = _9.getFloatingProps, getItemProps = _9.getItemProps;
+    function getLabelProps() {
+        return {
+            $hoverable: false,
+        };
+    }
+    function getMultiInputProps() {
+        return {
+            ref: searchRef,
+            placeholder: isEmpty() ? placeholder : '',
+            disabled: disabled,
+            'aria-controls': listId,
+            onKeyDown: function (e) {
+                var _a;
+                if (e.key === 'Tab') {
+                    if (open) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        (_a = floating.refs.floating.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                }
+            },
+            onChange: function (e) {
+                setSearchValue(e.currentTarget.value);
+                setActiveTokenIndex(null);
+            },
+            style: {
+                opacity: activeTokenIndex === null ? 1 : 0,
+            },
+        };
+    }
+    function getMultiValueProps(index) {
+        return {
+            onClick: function (e) {
+                // prevent the menu from closing
+                e.stopPropagation();
+                if (isMultiple(multiple, value)) {
+                    setValue(value.filter(function (_, i) { return i !== index; }));
+                }
+            },
+        };
+    }
+    function getSearchContainerProps() {
+        return {
+            ref: function (el) {
+                var _a;
+                setSearchHeight((_a = el === null || el === void 0 ? void 0 : el.clientHeight) !== null && _a !== void 0 ? _a : 0);
+            },
+        };
+    }
+    function getSearchProps() {
+        return {
+            'aria-controls': listId,
+            onChange: function (value) {
+                setSearchValue(value);
+                setActiveTokenIndex(null);
+            },
+            placeholder: i18n.t('core.select.search'),
+        };
+    }
+    function getHeaderProps() {
+        return {
+            ref: function (el) { },
+        };
+    }
+    function getFooterProps() {
+        return {
+            ref: function (el) {
+                var _a;
+                setFooterHeight((_a = el === null || el === void 0 ? void 0 : el.clientHeight) !== null && _a !== void 0 ? _a : 0);
+            },
+            onKeyDown: function (e) {
+                if (e.key !== 'Escape') {
+                    e.stopPropagation();
+                }
+            },
+        };
+    }
+    function getEmptyMessageProps() {
+        return {
+            emptyMessage: emptyMessage,
+        };
+    }
+    function getClearProps() {
+        return {
+            'aria-hidden': true,
+            'aria-label': i18n.t('core.select.clear'),
+            onClick: function (e) {
+                // prevent the menu from closing
+                e.stopPropagation();
+                setActiveTokenIndex(null);
+                setValue(multiple ? [] : null);
+                setOpen(true);
+            },
+        };
+    }
+    function getMenuProps() {
+        return {
+            scrollable: false,
+            style: {
+                height: listContainerHeight,
+            },
+        };
+    }
+    function getVirtuosoProps() {
+        var atBottomStateChange = function (atBottom) {
+            if (atBottom) {
+                onScrollBottom();
+            }
+        };
+        return {
+            role: 'listbox',
+            id: overlayId,
+            data: draggable ? queriedDraggableOptions : options,
+            components: {
+                Item: components === null || components === void 0 ? void 0 : components.Item,
+            },
+            initialTopMostItemIndex: selectedIndex >= 0 ? selectedIndex : 0,
+            style: {
+                flex: '1 1 auto',
+            },
+            tabIndex: -1,
+            totalListHeightChanged: setListHeight,
+            atBottomStateChange: atBottomStateChange,
+        };
+    }
+    var onDragEnd = React.useCallback(function (result) {
+        if (!result.destination) {
+            return;
+        }
+        if (result.source.index === result.destination.index) {
+            return;
+        }
+        var startIndex = result.source.index;
+        var destinationIndex = result.destination.index;
+        setDraggableOptions(function (options) {
+            var _a = reorder(options, startIndex, destinationIndex), nextOptions = _a.nextOptions, prevGroup = _a.prevGroup, nextGroup = _a.nextGroup;
+            var adjustedOptions = prevGroup !== nextGroup
+                ? nextOptions.map(function (option, index) {
+                    if (index === destinationIndex) {
+                        return setOptionGroup(option, nextGroup);
+                    }
+                    return option;
+                })
+                : nextOptions;
+            if (typeof onManualSort === 'function') {
+                setTimeout(function () {
+                    onManualSort(adjustedOptions.filter(function (option) { return !getOptionIsOptgroup(option); }));
+                }, 0);
+            }
+            return adjustedOptions;
+        });
+    }, []);
+    // run effect when the `open` state changes
+    //
+    // if it was closed and is now open, reset the highlighted index to be
+    // the first selectable option
+    //
+    // if it was open and is now closed, reset the search value and focused token index
+    React.useEffect(function () {
+        if (open) {
+            setActiveMenuIndex(function () {
+                return selectedIndex >= 0 ? selectedIndex : getFirstSelectableOptionIndex();
+            });
+        }
+        else {
+            setSearchValue(function () { return ''; });
+            setActiveTokenIndex(function () { return null; });
+        }
+    }, [open]);
+    // run the effect when user enters a serach value
+    //
+    // if the select is currently open then reset highlighted item to be the first
+    // selectable option
+    React.useEffect(function () {
+        if (open) {
+            setActiveMenuIndex(function () { return getFirstSelectableOptionIndex(); });
+        }
+    }, [searchValue]);
+    // when we change the value then close the overlay, but only if we have
+    // actually selected a value
+    //
+    // multiple mode forces the overlay to stay open
+    React.useEffect(function () {
+        if (!multiple && value !== null) {
+            setOpen(function () { return false; });
+        }
+    }, [value]);
+    // recreate the array to hold dom refs when our options change
+    React.useEffect(function () {
+        navigationList.current = __spreadArray([], Array(options.length).fill(null), true);
+    }, [options]);
+    // scroll virtuoso list activeMenuIndex into view when the index changes
+    React.useLayoutEffect(function () {
+        var _a;
+        if (activeMenuIndex !== null) {
+            if (!pointer) {
+                (_a = virtuoso.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ index: activeMenuIndex });
+            }
+        }
+    }, [activeMenuIndex, open]);
+    return {
+        config: {
+            block: block,
+            disabled: disabled,
+            draggable: draggable,
+            emptyMessage: emptyMessage,
+            error: error,
+            footer: footer,
+            header: header,
+            placeholder: placeholder,
+            preset: preset,
+            presetProps: presetProps,
+            selectionStyle: selectionStyle,
+            tabIndex: tabIndex,
+            loading: loading,
+            multiple: multiple,
+        },
+        components: components,
+        state: {
+            activeMenuIndex: activeMenuIndex,
+            activeTokenIndex: activeTokenIndex,
+            isEmpty: isEmpty,
+            listContainerHeight: listContainerHeight,
+            listId: listId,
+            maxHeight: maxHeight,
+            onDragEnd: onDragEnd,
+            onSelect: onSelect,
+            open: open,
+            options: draggable ? queriedDraggableOptions : options,
+            overlayId: overlayId,
+            searchValue: searchValue,
+            selectedIndex: selectedIndex,
+            selectedLabel: selectedLabel,
+            selectedOption: selectedOption,
+            setOpen: setOpen,
+            setPointer: setPointer,
+            setSearchValue: setSearchValue,
+            sourceOptions: sourceOptions,
+            value: value,
+            width: width,
+        },
+        props: {
+            clear: getClearProps,
+            emptyMessage: getEmptyMessageProps,
+            footer: getFooterProps,
+            header: getHeaderProps,
+            item: getItemProps,
+            label: getLabelProps,
+            menu: getMenuProps,
+            multiInput: getMultiInputProps,
+            overlay: getFloatingProps,
+            search: getSearchProps,
+            searchContainer: getSearchContainerProps,
+            tokenClear: getMultiValueProps,
+            trigger: getReferenceProps,
+            virtuoso: getVirtuosoProps,
+        },
+        option: {
+            group: getOptionGroup,
+            isBatch: getOptionIsBatch,
+            isSelected: getOptionIsSelected,
+            isDisabled: getOptionIsDisabled,
+            isOptgroup: getOptionIsOptgroup,
+            label: getOptionLabel,
+            value: getOptionValue,
+        },
+        refs: {
+            floating: floating,
+            navigationList: navigationList,
+            virtuoso: virtuoso,
+        },
+    };
+}
+export var SuperSelectContext = React.createContext(null);
+export function useSuperSelectContext() {
+    var ctx = React.useContext(SuperSelectContext);
+    if (!ctx) {
+        throw new Error('Invalid SuperSelectContext');
+    }
+    return ctx;
+}
+//# sourceMappingURL=useSuperSelect.js.map