@procore/core-react 11.5.0-rc.3 → 11.5.0-rc.5

package/dist/SuperSelect/SuperSelect.styles.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Virtuoso } from 'react-virtuoso';
+import styled from 'styled-components';
+import { Card } from '../Card/Card';
+import { getEllipsis } from '../_styles/mixins';
+export var StyledOverlay = styled(Card)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+export var StyledVirtuoso = styled(Virtuoso)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1 1 auto;\n"], ["\n  flex: 1 1 auto;\n"])));
+export var StyledEllipses = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: inline-flex;\n\n  > div {\n    display: inline-flex;\n    width: 100%;\n  }\n"], ["\n  ", "\n  display: inline-flex;\n\n  > div {\n    display: inline-flex;\n    width: 100%;\n  }\n"])), getEllipsis());
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=SuperSelect.styles.js.map

package/dist/SuperSelect/SuperSelect.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuperSelect.styles.js","sourceRoot":"","sources":["../../src/SuperSelect/SuperSelect.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,oHAAA,iDAGxC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,0FAAA,uBAE7C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,uKAAA,MACpC,EAAa,4FAOhB,KAPG,WAAW,EAAE,CAOhB,CAAA"}

package/dist/SuperSelect/SuperSelect.types.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { useSuperSelect } from './useSuperSelect';
+export interface SuperSelectProps {
+    block?: boolean;
+    components?: {
+        Label?: React.FC<{
+            selectApi: SuperSelectApi;
+        }>;
+        MenuItemLabel?: React.FC<{
+            selectApi: SuperSelectApi;
+            option: any;
+        }>;
+        Token?: React.FC<{
+            selectApi: SuperSelectApi;
+            option: any;
+            index: number;
+            focused: boolean;
+        }>;
+    };
+    defaultValue?: SuperSelectValue;
+    disabled?: boolean;
+    emptyMessage: string;
+    error?: boolean;
+    footer?: React.ReactElement;
+    getOptionGroup?: (option: any) => string;
+    getOptionIsBatch?: (option: any) => boolean;
+    getOptionIsDisabled?: (option: any) => boolean;
+    getOptionLabel?: (option: any) => string;
+    getOptionValue?: (option: any) => SuperSelectValuePrimitive;
+    header?: React.ReactElement;
+    loading?: boolean;
+    multiple?: boolean;
+    multipleOptions?: any[];
+    multipleOptionsLabel?: string;
+    onChange?: (value: SuperSelectValue) => void;
+    options: Record<string, any>[];
+    placeholder?: string;
+    search?: boolean;
+    tabIndex?: number;
+    value?: SuperSelectValue;
+}
+export interface TokenNavigationProps {
+    activeIndex?: number | null;
+    enabled?: boolean;
+    onChange?: (value: SuperSelectValue) => void;
+    onNavigate?: (index: number | null) => void;
+    value?: SuperSelectValue;
+}
+export interface KeyboardSelectionProps {
+    enabled?: boolean;
+    onSelect?: () => void;
+}
+export declare type SuperSelectValuePrimitive = boolean | string | number;
+export declare type SuperSelectValue = SuperSelectValuePrimitive | Array<SuperSelectValuePrimitive> | null;
+export declare type SuperSelectOption = any;
+export interface SuperSelectConfig {
+    components?: {
+        Label?: React.FC<{
+            selectApi: SuperSelectApi;
+        }>;
+        MenuItemLabel?: React.FC<{
+            selectApi: SuperSelectApi;
+            option: any;
+        }>;
+        Token?: React.FC<{
+            selectApi: SuperSelectApi;
+            option: any;
+            index: number;
+            focused: boolean;
+        }>;
+    };
+    defaultValue?: SuperSelectValue;
+    disabled?: boolean;
+    getOptionGroup?: (option: SuperSelectOption) => string;
+    getOptionIsBatch?: (option: SuperSelectOption) => boolean;
+    getOptionIsDisabled?: (option: SuperSelectOption) => boolean;
+    getOptionLabel?: (option: SuperSelectOption) => string;
+    getOptionValue?: (option: SuperSelectOption) => SuperSelectValuePrimitive;
+    multiple?: boolean;
+    onChange?: (value: SuperSelectValue) => void;
+    options?: Array<any>;
+    search?: boolean;
+    value?: SuperSelectValue;
+}
+export declare type SuperSelectApi = ReturnType<typeof useSuperSelect>;
+export interface SuperSelectReferenceProps {
+    selectApi: SuperSelectApi;
+    block?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    placeholder?: string;
+    search?: boolean;
+    tabIndex?: number;
+}

package/dist/SuperSelect/SuperSelect.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SuperSelect.types.js.map

package/dist/SuperSelect/SuperSelect.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuperSelect.types.js","sourceRoot":"","sources":["../../src/SuperSelect/SuperSelect.types.ts"],"names":[],"mappings":""}

package/dist/SuperSelect/useSuperSelect.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="lodash" />
+import React from 'react';
+import { VirtuosoHandle } from 'react-virtuoso';
+import { TypeaheadInputProps, TypeaheadProps } from '../Typeahead/Typeahead.types';
+import { SuperSelectConfig, SuperSelectOption, SuperSelectValue, SuperSelectValuePrimitive } from './SuperSelect.types';
+declare function getOptionIsOptgroup(item: any): boolean;
+export declare function useSuperSelect({ components, defaultValue, disabled, getOptionGroup, getOptionIsBatch, getOptionIsDisabled, getOptionLabel, getOptionValue, multiple, onChange, options: sourceOptions, search, value: value_, }: SuperSelectConfig): {
+    activeMenuIndex: number | null;
+    activeTokenIndex: number | null;
+    components: {
+        Label?: React.FC<{
+            selectApi: any;
+        }> | undefined;
+        MenuItemLabel?: React.FC<{
+            selectApi: any;
+            option: any;
+        }> | undefined;
+        Token?: React.FC<{
+            selectApi: any;
+            option: any;
+            index: number;
+            focused: boolean;
+        }> | undefined;
+    } | undefined;
+    floating: import("@floating-ui/react-dom-interactions").UseFloatingReturn<HTMLElement>;
+    getClearProps: () => React.AriaAttributes & React.HTMLAttributes<HTMLElement>;
+    getFloatingProps: (userProps?: any) => Record<string, unknown>;
+    getItemProps: (userProps?: any) => Record<string, unknown>;
+    getMultiInputProps: () => React.AriaAttributes & React.InputHTMLAttributes<HTMLInputElement>;
+    getOptionGroup: (option: any) => string;
+    getOptionIsBatch: (option: any) => boolean;
+    getOptionIsDisabled: (option: any) => boolean;
+    getOptionIsOptgroup: typeof getOptionIsOptgroup;
+    getOptionLabel: (option: any) => string;
+    getOptionValue: (option: any) => SuperSelectValuePrimitive;
+    getReferenceProps: (userProps?: any) => Record<string, unknown>;
+    getTokenClearProps: (index: number) => React.AriaAttributes & React.SVGAttributes<SVGElement>;
+    getTypeaheadProps: () => React.AriaAttributes & TypeaheadInputProps & TypeaheadProps;
+    isEmpty: () => boolean;
+    isSelected: (option: any) => boolean;
+    listId: string;
+    maxHeight: number;
+    multiple: boolean;
+    navigationListRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    onSelect: (option: SuperSelectOption) => void;
+    open: boolean;
+    sourceOptions: any[];
+    options: any[];
+    overlayId: string;
+    searchValue: string;
+    selectedIndex: number;
+    selectedOption: any;
+    selectedLabel: string;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setPointer: React.Dispatch<React.SetStateAction<boolean>>;
+    setSearchValue: import("lodash").DebouncedFunc<React.Dispatch<React.SetStateAction<string>>>;
+    value: SuperSelectValue;
+    virtuoso: React.RefObject<VirtuosoHandle>;
+    width: number;
+};
+export {};

package/dist/SuperSelect/useSuperSelect.js

@@ -0,0 +1,474 @@
+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 groupBy from 'lodash.groupby';
+import uniq from 'lodash.uniq';
+import React from 'react';
+var optgroupSymbol = Symbol('Optgroup');
+function noop() { }
+function compareStrings(a, b) {
+    return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+}
+function isMultiple(multiple, value) {
+    return multiple && Array.isArray(value);
+}
+function getOptionIsOptgroup(item) {
+    return Boolean(item[optgroupSymbol]);
+}
+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 defaultGetOptionLabel(option) {
+    var _a;
+    return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '';
+}
+function useCustomReferenceProps(context, _a) {
+    var _b = _a.search, search = _b === void 0 ? true : _b, overlayId = _a.overlayId, listId = _a.listId, _c = _a.open, open = _c === void 0 ? false : _c, _d = _a.onChangePointer, onChangePointer = _d === void 0 ? noop : _d;
+    return {
+        reference: {
+            role: 'combobox',
+            'aria-controls': search ? overlayId : listId,
+            'aria-haspopup': search ? 'dialog' : 'listbox',
+            'aria-expanded': open,
+            onKeyDown: function () {
+                onChangePointer(false);
+            },
+        },
+    };
+}
+function useCustomFloatingProps(context, _a) {
+    var _b = _a.search, search = _b === void 0 ? true : _b, onChangePointer = _a.onChangePointer;
+    return {
+        floating: {
+            role: search ? 'dialog' : 'none',
+            onKeyDown: function () {
+                onChangePointer(false);
+            },
+            onPointerMove: function () {
+                onChangePointer(true);
+            },
+        },
+    };
+}
+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 components = _a.components, defaultValue = _a.defaultValue, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.getOptionGroup, getOptionGroup = _c === void 0 ? defaultGetOptionGroup : _c, _d = _a.getOptionIsBatch, getOptionIsBatch = _d === void 0 ? defaultGetOptionIsBatch : _d, _e = _a.getOptionIsDisabled, getOptionIsDisabled = _e === void 0 ? defaultGetOptionIsDisabled : _e, _f = _a.getOptionLabel, getOptionLabel = _f === void 0 ? defaultGetOptionLabel : _f, _g = _a.getOptionValue, getOptionValue = _g === void 0 ? defaultGetOptionValue : _g, _h = _a.multiple, multiple = _h === void 0 ? false : _h, onChange = _a.onChange, _j = _a.options, sourceOptions = _j === void 0 ? [] : _j, _k = _a.search, search = _k === void 0 ? true : _k, value_ = _a.value;
+    var initialValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (multiple ? [] : null);
+    var _l = React.useState(initialValue), val = _l[0], setVal = _l[1];
+    var value = value_ !== undefined ? value_ : val;
+    function setValue(v) {
+        if (!value_) {
+            setVal(function () { return v; });
+        }
+        if (onChange) {
+            onChange(v);
+        }
+    }
+    var _m = React.useState(''), searchValue = _m[0], setSearchValue_ = _m[1];
+    var setSearchValue = debounce(setSearchValue_, 250); // TODO use React 18 useDeferredValue
+    var _o = React.useState(false), open = _o[0], setOpen = _o[1];
+    var _p = React.useState(false), pointer = _p[0], setPointer = _p[1];
+    var _q = React.useState(248), width = _q[0], setWidth = _q[1];
+    var _r = React.useState(248), maxHeight = _r[0], setMaxHeight = _r[1];
+    var _s = React.useState(null), activeMenuIndex = _s[0], setActiveMenuIndex = _s[1];
+    var _t = React.useState(null), activeTokenIndex = _t[0], setActiveTokenIndex = _t[1];
+    var navigationListRef = React.useRef([]);
+    var virtuoso = React.useRef(null);
+    var overlayId = useId(); // TODO use React 18 useId
+    var listId = useId(); // TODO use React 18 useId
+    var options = React.useMemo(function () {
+        // TODO allow user to override this behavior
+        function groupAndSort(opts) {
+            var grouped = groupBy(opts, getOptionGroup);
+            return Object.keys(grouped)
+                .sort(function (a, b) { return compareStrings(a, b); })
+                .map(function (group) {
+                var _a;
+                var groupOptions = grouped[group] || [];
+                var groupOptionsSorted = groupOptions.sort(function (a, b) {
+                    return compareStrings(getOptionLabel(a), getOptionLabel(b));
+                });
+                var opts = group
+                    ? [(_a = {}, _a[optgroupSymbol] = true, _a.label = group, _a.group = group, _a)]
+                    : [];
+                return opts.concat(groupOptionsSorted);
+            })
+                .flat();
+        }
+        var _a = sourceOptions.reduce(function (_a, opt) {
+            var batched = _a[0], unbatched = _a[1];
+            var match = getOptionLabel(opt)
+                .toLowerCase()
+                .includes(searchValue.toLowerCase());
+            if (match) {
+                if (isMultiple(multiple, value)) {
+                    if (getOptionIsBatch(opt)) {
+                        var val_1 = getOptionValue(opt);
+                        var disabled_1 = Array.isArray(val_1) && val_1.every(function (v) { return value.includes(v); });
+                        batched.push(__assign(__assign({}, opt), { disabled: disabled_1 }));
+                    }
+                    else {
+                        unbatched.push(opt);
+                    }
+                }
+                else {
+                    unbatched.push(opt);
+                }
+            }
+            return [batched, unbatched];
+        }, [[], []]), batchOptions = _a[0], options = _a[1];
+        // group and sort all the options, putting batched options at the top
+        return groupAndSort(batchOptions).concat(groupAndSort(options));
+    }, [multiple, searchValue, sourceOptions, value]);
+    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 () {
+        return options.find(function (option) { return getOptionValue(option) === value; });
+    }, [sourceOptions, 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) {
+            var option = options[activeMenuIndex];
+            if (option) {
+                onSelect(option);
+            }
+        }
+    }
+    function isSelected(option) {
+        return Array.isArray(value)
+            ? value.includes(getOptionValue(option))
+            : value === getOptionValue(option);
+    }
+    function isEmpty() {
+        return Array.isArray(value) ? value.length === 0 : value === null;
+    }
+    var floating = useFloating({
+        open: open,
+        onOpenChange: setOpen,
+        whileElementsMounted: autoUpdate,
+        strategy: 'fixed',
+        middleware: [
+            offset(2),
+            flip(),
+            size({
+                apply: function (_a) {
+                    var availableHeight = _a.availableHeight, elements = _a.elements;
+                    setWidth(function () { return elements.reference.getBoundingClientRect().width; });
+                    setMaxHeight(function () { return availableHeight; });
+                },
+                padding: 10,
+            }),
+        ],
+    });
+    var _u = useInteractions([
+        useClick(floating.context, {
+            enabled: !disabled,
+            keyboardHandlers: false,
+        }),
+        useDismiss(floating.context, {
+            enabled: !disabled,
+        }),
+        useListNavigation(floating.context, {
+            activeIndex: activeMenuIndex,
+            disabledIndices: groupIndices,
+            enabled: !disabled,
+            listRef: navigationListRef,
+            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,
+        }),
+        useCustomReferenceProps(floating.context, {
+            listId: listId,
+            onChangePointer: function (p) { return setPointer(function () { return p; }); },
+            open: open,
+            overlayId: overlayId,
+            search: search,
+        }),
+        useCustomFloatingProps(floating.context, {
+            onChangePointer: function (p) { return setPointer(function () { return p; }); },
+            search: search,
+        }),
+    ]), getReferenceProps = _u.getReferenceProps, getFloatingProps = _u.getFloatingProps, getItemProps = _u.getItemProps;
+    function getMultiInputProps() {
+        return {
+            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 getTypeaheadProps() {
+        return {
+            'aria-controls': listId,
+            onChange: function (value) {
+                setSearchValue(value);
+                setActiveTokenIndex(null);
+            },
+        };
+    }
+    function getTokenClearProps(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 getClearProps() {
+        return {
+            onClick: function (e) {
+                // prevent the menu from closing
+                e.stopPropagation();
+                setValue(multiple ? [] : null);
+                setOpen(function () { return true; });
+            },
+        };
+    }
+    // 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
+    React.useEffect(function () {
+        if (open) {
+            setActiveMenuIndex(function () {
+                return selectedIndex >= 0 ? selectedIndex : getFirstSelectableOptionIndex();
+            });
+        }
+        else {
+            setSearchValue(function () { return ''; });
+        }
+    }, [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 () {
+        navigationListRef.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 {
+        activeMenuIndex: activeMenuIndex,
+        activeTokenIndex: activeTokenIndex,
+        components: components,
+        floating: floating,
+        getClearProps: getClearProps,
+        getFloatingProps: getFloatingProps,
+        getItemProps: getItemProps,
+        getMultiInputProps: getMultiInputProps,
+        getOptionGroup: getOptionGroup,
+        getOptionIsBatch: getOptionIsBatch,
+        getOptionIsDisabled: getOptionIsDisabled,
+        getOptionIsOptgroup: getOptionIsOptgroup,
+        getOptionLabel: getOptionLabel,
+        getOptionValue: getOptionValue,
+        getReferenceProps: getReferenceProps,
+        getTokenClearProps: getTokenClearProps,
+        getTypeaheadProps: getTypeaheadProps,
+        isEmpty: isEmpty,
+        isSelected: isSelected,
+        listId: listId,
+        maxHeight: maxHeight,
+        multiple: multiple,
+        navigationListRef: navigationListRef,
+        onSelect: onSelect,
+        open: open,
+        sourceOptions: sourceOptions,
+        options: options,
+        overlayId: overlayId,
+        searchValue: searchValue,
+        selectedIndex: selectedIndex,
+        selectedOption: selectedOption,
+        selectedLabel: selectedLabel,
+        setOpen: setOpen,
+        setPointer: setPointer,
+        setSearchValue: setSearchValue,
+        value: value,
+        virtuoso: virtuoso,
+        width: width,
+    };
+}
+//# sourceMappingURL=useSuperSelect.js.map