@vectara/vectara-ui 0.0.4 → 1.0.2

package/lib/components/index.d.ts

@@ -43,7 +43,7 @@ import { VuiOptionsButton } from "./optionsButton/OptionsButton";
 import { VuiOptionsList } from "./optionsList/OptionsList";
 import { VuiOptionsListItem } from "./optionsList/OptionsListItem";
 import { OptionListItem } from "./optionsList/types";
-import { VuiPopover } from "./popover/Popover";
+import { VuiPopover, AnchorSide } from "./popover/Popover";
 import { VuiPortal } from "./portal/Portal";
 import { PROGRESS_BAR_COLOR, VuiProgressBar } from "./progressBar/ProgressBar";
 import { VuiPrompt } from "./prompt/Prompt";
@@ -71,5 +71,5 @@ import { TEXT_COLOR, TEXT_SIZE, TITLE_SIZE } from "./typography/types";
 import { VuiTitle } from "./typography/Title";
 import { VuiToggle } from "./toggle/Toggle";
 import { VuiTopicButton } from "./topicButton/TopicButton";
-export type { AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, Notification, OptionListItem, RadioButtonConfig, SearchResult, Sections, SectionItem, TabSize, Tree, TreeItem };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, Notification, OptionListItem, RadioButtonConfig, SearchResult, Sections, SectionItem, TabSize, Tree, TreeItem };
 export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, VuiAccordion, VuiAccountMenu, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDrawer, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiHorizontalRule, VuiIcon, VuiInfoTable, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStatList, VuiStatus, VuiSummary, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTitle, VuiToggle, VuiTopicButton };

package/lib/components/optionsList/OptionsList.d.ts

@@ -5,9 +5,11 @@ export type Props<T> = {
     options: OptionListItem<T>[];
     onSelectOption?: (value: T) => void;
     selected?: T | T[];
+    onScrollToBottom?: () => void;
     isSelectable?: boolean;
     isScrollable?: boolean;
     size?: (typeof SIZE)[number];
+    isLoading?: boolean;
 };
-export declare const VuiOptionsList: <T extends unknown = unknown>({ className, options, onSelectOption, selected, isSelectable, isScrollable, size, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiOptionsList: <T extends unknown = unknown>({ className, options, onSelectOption, selected, onScrollToBottom, isSelectable, isScrollable, size, isLoading, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/optionsList/OptionsList.js

@@ -9,23 +9,50 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from "classnames";
 import { VuiOptionsListItem } from "./OptionsListItem";
+import { useEffect, useRef } from "react";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiSpinner } from "../spinner/Spinner";
+import { VuiText } from "../typography/Text";
+import { VuiSpacer } from "../spacer/Spacer";
 const SIZE = ["s", "m", "l"];
 // https://github.com/typescript-eslint/typescript-eslint/issues/4062
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 export const VuiOptionsList = (_a) => {
-    var { className, options, onSelectOption, selected, isSelectable = false, isScrollable = false, size = "s" } = _a, rest = __rest(_a, ["className", "options", "onSelectOption", "selected", "isSelectable", "isScrollable", "size"]);
+    var { className, options, onSelectOption, selected, onScrollToBottom, isSelectable = false, isScrollable = false, size = "s", isLoading } = _a, rest = __rest(_a, ["className", "options", "onSelectOption", "selected", "onScrollToBottom", "isSelectable", "isScrollable", "size", "isLoading"]);
+    const isScrolledToBottomRef = useRef(false);
+    const scrollableContainerRef = useRef(null);
+    useEffect(() => {
+        const scrollableContainer = scrollableContainerRef.current;
+        const onScroll = () => {
+            const newIsScrolledToBottom = scrollableContainerRef.current
+                ? Math.abs(scrollableContainerRef.current.scrollHeight -
+                    scrollableContainerRef.current.clientHeight -
+                    scrollableContainerRef.current.scrollTop) < 10
+                : true;
+            // Only dispatch onScrollToBottom once the threshold is crossed.
+            if (!isScrolledToBottomRef.current && newIsScrolledToBottom) {
+                onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom();
+            }
+            isScrolledToBottomRef.current = newIsScrolledToBottom;
+        };
+        scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.addEventListener("scroll", onScroll);
+        return () => {
+            scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.removeEventListener("scroll", onScroll);
+        };
+    }, []);
     const classes = classNames("vuiOptionsList", `vuiOptionsList--${size}`, {
         "vuiOptionsList--scrollable": isScrollable
     }, className);
-    return (_jsx("div", Object.assign({ className: classes }, rest, { children: options.map((_a) => {
-            var { value, label, onClick } = _a, rest = __rest(_a, ["value", "label", "onClick"]);
-            const isSelected = Array.isArray(selected) ? selected.includes(value) : value === selected;
-            return (_jsx(VuiOptionsListItem, Object.assign({ value: value, label: label, onClick: () => {
-                    onClick === null || onClick === void 0 ? void 0 : onClick(value);
-                    onSelectOption === null || onSelectOption === void 0 ? void 0 : onSelectOption(value);
-                }, isSelectable: isSelectable, isSelected: isSelected }, rest), label));
-        }) })));
+    return (_jsxs("div", Object.assign({ className: classes }, rest, { ref: scrollableContainerRef }, { children: [options.map((_a) => {
+                var { value, label, onClick } = _a, rest = __rest(_a, ["value", "label", "onClick"]);
+                const isSelected = Array.isArray(selected) ? selected.includes(value) : value === selected;
+                return (_jsx(VuiOptionsListItem, Object.assign({ value: value, label: label, onClick: () => {
+                        onClick === null || onClick === void 0 ? void 0 : onClick(value);
+                        onSelectOption === null || onSelectOption === void 0 ? void 0 : onSelectOption(value);
+                    }, isSelectable: isSelectable, isSelected: isSelected }, rest), label));
+            }), isLoading && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xxs" }), _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiSpinner, { size: "xs" }) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: "Loading options\u2026" }) }) }))] }))] }))] })));
 };

package/lib/components/optionsList/OptionsListItem.js

@@ -31,7 +31,7 @@ export const VuiOptionsListItem = (_a) => {
     var { value, label, icon, color = "neutral", href, target, onClick, isSelectable, isSelected, testId } = _a, rest = __rest(_a, ["value", "label", "icon", "color", "href", "target", "onClick", "isSelectable", "isSelected", "testId"]);
     const { createLink } = useVuiContext();
     const labelContent = icon ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: colorIcon(icon, color) })), _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: label }))] }))) : (label);
-    const content = (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [isSelectable && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ className: isSelected ? "" : "vuiOptionsListItem__selected--unselected", color: "accent", size: "s" }, { children: _jsx(BiCheck, {}) })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: labelContent }))] })));
+    const content = (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [isSelectable && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ className: isSelected ? "" : "vuiOptionsListItem__selected--unselected", color: "subdued", size: "s" }, { children: _jsx(BiCheck, {}) })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: labelContent }))] })));
     const classes = classNames("vuiOptionsListItem", `vuiOptionsListItem--${color}`);
     if (href) {
         return createLink(Object.assign({ className: classes, href,

package/lib/components/optionsList/_index.scss

@@ -79,6 +79,10 @@ $color: (
     &:hover {
       color: #{map.get($colorValue, "hover-color")};
       background-color: #{map.get($colorValue, "selected-color")};
+
+      .vuiIcon__inner {
+        color: #{map.get($colorValue, "hover-color")};
+      }
     }
   }
 }

package/lib/components/popover/Popover.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+export type AnchorSide = "left" | "right";
 export type Props = {
     button: React.ReactElement;
     children?: React.ReactNode;
@@ -7,5 +8,6 @@ export type Props = {
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
     padding?: boolean;
+    anchorSide?: AnchorSide;
 };
-export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/popover/Popover.js

@@ -14,17 +14,20 @@ import { cloneElement, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { VuiPortal } from "../portal/Portal";
 import { FocusOn } from "react-focus-on";
-const getPosition = (button) => {
+const calculatePopoverPosition = (button, anchorSide) => {
     if (!button)
         return undefined;
-    const { bottom, right } = button.getBoundingClientRect();
-    return {
-        top: bottom + 2 + document.documentElement.scrollTop,
-        right: window.innerWidth - right
-    };
+    const buttonRect = button.getBoundingClientRect();
+    const top = buttonRect.bottom + 2 + document.documentElement.scrollTop;
+    const left = buttonRect.left;
+    if (anchorSide === "left") {
+        return { top: `${top}px`, left: `${left}px` };
+    }
+    const right = window.innerWidth - buttonRect.right;
+    return { top: `${top}px`, right: `${right}px` };
 };
 export const VuiPopover = (_a) => {
-    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding"]);
+    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right" } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide"]);
     const returnFocusElRef = useRef(null);
     const buttonRef = useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -73,7 +76,7 @@ export const VuiPopover = (_a) => {
     // Always keep menu position up to date. If we tried to cache this inside
     // a useEffect based on isOpen then there'd be a flicker if the width
     // of the button changes.
-    const position = getPosition(buttonRef.current);
+    const position = calculatePopoverPosition(buttonRef.current, anchorSide);
     const classes = classNames("vuiPopover", className);
     const contentClasses = classNames("vuiPopoverContent", {
         "vuiPopoverContent--padding": padding
@@ -87,5 +90,5 @@ export const VuiPopover = (_a) => {
                     // Enable scrolling of the page.
                     scrollLock: false, 
                     // Enable scrolling of the page.
-                    preventScrollOnFocus: false }, { children: _jsxs("div", Object.assign({ className: classes, style: { top: `${position.top}px`, right: `${position.right}px` } }, rest, { children: [header && typeof header === "string" ? _jsx("div", Object.assign({ className: "vuiPopoverTitle" }, { children: header })) : header, children && _jsx("div", Object.assign({ className: contentClasses }, { children: children }))] })) }))) })] }));
+                    preventScrollOnFocus: false }, { children: _jsxs("div", Object.assign({ className: classes, style: position }, rest, { children: [header && typeof header === "string" ? _jsx("div", Object.assign({ className: "vuiPopoverTitle" }, { children: header })) : header, children && _jsx("div", Object.assign({ className: contentClasses }, { children: children }))] })) }))) })] }));
 };

package/lib/components/searchSelect/SearchSelect.d.ts

@@ -3,9 +3,16 @@ import { Props as PopoverProps } from "../popover/Popover";
 type Props<T> = Pick<PopoverProps, "isOpen" | "setIsOpen"> & Pick<OptionsListProps<T>, "options"> & {
     children: PopoverProps["button"];
     title?: string;
-    selected: T[];
+    searchValue: string;
+    setSearchValue: (searchValue: string) => void;
+    asyncSearch?: {
+        isSearching?: boolean;
+        onSearchChange?: (searchValue: string) => void;
+        onLazyLoad: () => void;
+    };
+    selectedOptions: T[];
     onSelect: (selected: T[]) => void;
     isMultiSelect?: boolean;
 };
-export declare const VuiSearchSelect: <T extends unknown = unknown>({ children, title, isOpen, setIsOpen, options, onSelect, isMultiSelect, selected }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiSearchSelect: <T extends unknown = unknown>({ children, title, isOpen, setIsOpen, options, searchValue, setSearchValue, asyncSearch, selectedOptions, onSelect, isMultiSelect }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/searchSelect/SearchSelect.js

@@ -4,75 +4,75 @@ import { VuiOptionsList } from "../optionsList/OptionsList";
 import { VuiPopover } from "../popover/Popover";
 import { VuiTextInput } from "../form";
 import { VuiSpacer } from "../spacer/Spacer";
+import { sortSelectedOptions } from "./sortSelectedOptions";
 // https://github.com/typescript-eslint/typescript-eslint/issues/4062
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-export const VuiSearchSelect = ({ children, title, isOpen, setIsOpen, options, onSelect, isMultiSelect = true, selected = [] }) => {
-    const [searchValue, setSearchValue] = useState("");
-    const [selectedOptions, setSelectedOptions] = useState();
+export const VuiSearchSelect = ({ children, title, isOpen, setIsOpen, options, searchValue, setSearchValue, asyncSearch, selectedOptions, onSelect, isMultiSelect = true }) => {
     const [orderedOptions, setOrderedOptions] = useState([]);
+    // Async-only. Cache all options in case they get selected.
+    const [optionsCache, setOptionsCache] = useState({});
+    const addOptionsToCache = (optionsToAdd) => {
+        setOptionsCache((prev) => {
+            const newOptionsCache = Object.assign({}, prev);
+            optionsToAdd.forEach((option) => {
+                newOptionsCache[option.value] = option;
+            });
+            return newOptionsCache;
+        });
+    };
     useEffect(() => {
         // When the popover is opened, initialize the selected options,
         // and sort the options so the selected ones are on top.
         if (isOpen) {
-            const selectedOptionsCopy = selected.concat();
-            setSelectedOptions(selectedOptionsCopy);
-            const sortedOptions = options.concat().sort((first, second) => {
-                const isFirstSelected = selectedOptionsCopy.includes(first.value);
-                const isSecondSelected = selectedOptionsCopy.includes(second.value);
-                if (isFirstSelected && !isSecondSelected) {
-                    return -1;
-                }
-                if (!isFirstSelected && isSecondSelected) {
-                    return 1;
-                }
-                return 0;
-            });
-            setOrderedOptions(sortedOptions);
-        }
-    }, [isOpen]);
-    const updateOpen = () => {
-        if (isOpen) {
-            // When the popover is closed, notify the consumer of the
-            // selected options.
-            onSelect(selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : []);
-            // Signal the popover to be closed. We don't depend on the
-            // original isOpen because it will cause a flicker when the
-            // options are sorted.
-            setSelectedOptions(undefined);
+            if (asyncSearch)
+                addOptionsToCache(options);
+            const isAsyncSearchInactive = asyncSearch && !searchValue;
+            const newOrderedOptions = sortSelectedOptions(selectedOptions, options, isAsyncSearchInactive ? optionsCache : undefined);
+            setOrderedOptions(newOrderedOptions);
         }
-        setIsOpen(!isOpen);
-    };
+    }, [isOpen, options]);
     const onSelectOption = (value) => {
         if (isMultiSelect) {
-            setSelectedOptions((prev) => {
-                if (!prev)
-                    return [];
-                const updated = prev.concat();
-                const index = prev.findIndex((item) => item === value);
-                if (index !== -1) {
-                    updated.splice(index, 1);
-                    return updated;
-                }
-                updated.push(value);
-                return updated;
-            });
-            return;
+            const updatedSelectedOptions = selectedOptions.concat();
+            const index = selectedOptions.findIndex((item) => item === value);
+            if (index === -1) {
+                // Select item.
+                updatedSelectedOptions.push(value);
+            }
+            else {
+                // Delect item.
+                updatedSelectedOptions.splice(index, 1);
+            }
+            onSelect(updatedSelectedOptions);
+        }
+        else {
+            if (selectedOptions[0] === value) {
+                // If the user clicks on the selected option, deselect it.
+                onSelect([]);
+                return;
+            }
+            onSelect([value]);
         }
-        // If the user can only select one option at a time,
-        // close the search select as soon as they make a choice.
-        onSelect([value]);
-        // Signal the popover to be closed. We don't depend on the
-        // original isOpen because it will cause a flicker when the
-        // options are sorted.
-        setSelectedOptions(undefined);
-        setIsOpen(false);
     };
-    const visibleOptions = orderedOptions.filter((option) => {
-        if (!searchValue.trim())
-            return true;
-        if (option.label.toLowerCase().includes(searchValue.toLowerCase()))
-            return true;
-        return false;
-    });
-    return (_jsxs(VuiPopover, Object.assign({ isOpen: selectedOptions !== undefined, setIsOpen: updateOpen, button: children, header: title }, { children: [_jsxs("div", Object.assign({ className: "vuiSearchSelect__search" }, { children: [_jsx(VuiTextInput, { placeholder: "Search", value: searchValue, onChange: (event) => setSearchValue(event.target.value) }), _jsx(VuiSpacer, { size: "xxs" })] })), _jsx(VuiOptionsList, { isSelectable: true, isScrollable: true, onSelectOption: onSelectOption, selected: selectedOptions, options: visibleOptions })] })));
+    // If onSearchChange is provided, we don't filter the options here because
+    // we assume the consumer has already filtered them.
+    const visibleOptions = (asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.onSearchChange)
+        ? orderedOptions
+        : orderedOptions.filter((option) => {
+            if (!searchValue.trim())
+                return true;
+            if (option.label.toLowerCase().includes(searchValue.toLowerCase()))
+                return true;
+            return false;
+        });
+    return (_jsxs(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: (isOpen) => {
+            setIsOpen(isOpen);
+            if (!isOpen)
+                setSearchValue("");
+        }, button: children, header: title }, { children: [_jsxs("div", Object.assign({ className: "vuiSearchSelect__search" }, { children: [_jsx(VuiTextInput, { placeholder: "Search", value: searchValue, onChange: (event) => {
+                            var _a;
+                            const { value } = event.target;
+                            (_a = asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.onSearchChange) === null || _a === void 0 ? void 0 : _a.call(asyncSearch, value);
+                            setSearchValue(value);
+                        } }), _jsx(VuiSpacer, { size: "xxs" })] })), _jsx(VuiOptionsList, { isSelectable: true, isScrollable: true, onScrollToBottom: asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.onLazyLoad, onSelectOption: onSelectOption, selected: selectedOptions, options: visibleOptions, isLoading: asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.isSearching })] })));
 };

package/lib/components/searchSelect/sortSelectedOptions.d.ts

@@ -0,0 +1,14 @@
+import { OptionListItem } from "../optionsList/types";
+/**
+ * The desired UX to is sort selected options to the top of the list.
+ *
+ * When there is an active async search, the list of options has already
+ * been filtered, so we only want to show selected options that are in
+ * the list of options. In this case, cache will NOT be provided.
+ *
+ * When the async search is not active, the list of options will consist
+ * of the first few pages and might not contain any "searched" options
+ * that have been selected. We need to show all selected options so we
+ * use the cache to fill in any holes. In this case, cache will be provided.
+ */
+export declare const sortSelectedOptions: <T>(selectedOptions: T[], options: OptionListItem<T>[], cache?: Record<string, OptionListItem<T>> | undefined) => OptionListItem<T>[];

package/lib/components/searchSelect/sortSelectedOptions.js

@@ -0,0 +1,38 @@
+/**
+ * The desired UX to is sort selected options to the top of the list.
+ *
+ * When there is an active async search, the list of options has already
+ * been filtered, so we only want to show selected options that are in
+ * the list of options. In this case, cache will NOT be provided.
+ *
+ * When the async search is not active, the list of options will consist
+ * of the first few pages and might not contain any "searched" options
+ * that have been selected. We need to show all selected options so we
+ * use the cache to fill in any holes. In this case, cache will be provided.
+ */
+export const sortSelectedOptions = (selectedOptions, options, cache) => {
+    const comprehensiveOptions = options.concat();
+    // Presence of cache indicates the async search is not active, and we
+    // need to fill in any missing selected options from the cache.
+    if (cache) {
+        selectedOptions.forEach((selectedOption) => {
+            if (!options.find(({ value }) => value === selectedOption)) {
+                const cachedOption = cache[selectedOption];
+                if (cachedOption)
+                    comprehensiveOptions.push(cachedOption);
+            }
+        });
+    }
+    const sortedOptions = comprehensiveOptions.sort((first, second) => {
+        const isFirstSelected = selectedOptions.includes(first.value);
+        const isSecondSelected = selectedOptions.includes(second.value);
+        if (isFirstSelected && !isSecondSelected) {
+            return -1;
+        }
+        if (!isFirstSelected && isSecondSelected) {
+            return 1;
+        }
+        return 0;
+    });
+    return sortedOptions;
+};

package/lib/components/searchSelect/sortSelectedOptions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/searchSelect/sortSelectedOptions.test.js

@@ -0,0 +1,56 @@
+import { sortSelectedOptions } from "./sortSelectedOptions";
+describe("sortSelectedOptions", () => {
+    describe("sync search use case", () => {
+        test("returns the options as-is when nothing has been selected", () => {
+            const selectedOptions = [];
+            const options = [
+                { value: "1", label: "One" },
+                { value: "2", label: "Two" }
+            ];
+            expect(sortSelectedOptions(selectedOptions, options)).toEqual(options);
+        });
+        test("returns the selected options at the beginning of the list", () => {
+            const selectedOptions = ["3", "2"];
+            const options = [
+                { value: "1", label: "One" },
+                { value: "2", label: "Two" },
+                { value: "3", label: "Three" }
+            ];
+            expect(sortSelectedOptions(selectedOptions, options)).toEqual([
+                { value: "2", label: "Two" },
+                { value: "3", label: "Three" },
+                { value: "1", label: "One" }
+            ]);
+        });
+    });
+    describe("async search use case", () => {
+        test("ignores missing selected options when cache isn't provided", () => {
+            const selectedOptions = ["4", "3", "2"];
+            const options = [
+                { value: "1", label: "One" },
+                { value: "2", label: "Two" },
+                { value: "3", label: "Three" }
+            ];
+            expect(sortSelectedOptions(selectedOptions, options)).toEqual([
+                { value: "2", label: "Two" },
+                { value: "3", label: "Three" },
+                { value: "1", label: "One" }
+            ]);
+        });
+        test("fill in missing selected options when cache is provided", () => {
+            const selectedOptions = ["4", "3", "2"];
+            const options = [
+                { value: "1", label: "One" },
+                { value: "2", label: "Two" },
+                { value: "3", label: "Three" }
+            ];
+            const cache = { 4: { value: "4", label: "Four" } };
+            expect(sortSelectedOptions(selectedOptions, options, cache)).toEqual([
+                { value: "2", label: "Two" },
+                { value: "3", label: "Three" },
+                { value: "4", label: "Four" },
+                { value: "1", label: "One" }
+            ]);
+        });
+    });
+});

package/lib/styles/index.css

@@ -2234,6 +2234,9 @@ fieldset {
   color: #551edf;
   background-color: #eadfff;
 }
+.vuiOptionsListItem--accent:hover .vuiIcon__inner {
+  color: #551edf;
+}
 
 .vuiOptionsListItem--primary {
   color: #264cd6;
@@ -2242,6 +2245,9 @@ fieldset {
   color: #264cd6;
   background-color: #edf5ff;
 }
+.vuiOptionsListItem--primary:hover .vuiIcon__inner {
+  color: #264cd6;
+}
 
 .vuiOptionsListItem--success {
   color: #04821f;
@@ -2250,6 +2256,9 @@ fieldset {
   color: #04821f;
   background-color: #e9f2e9;
 }
+.vuiOptionsListItem--success:hover .vuiIcon__inner {
+  color: #04821f;
+}
 
 .vuiOptionsListItem--danger {
   color: #c41535;
@@ -2258,6 +2267,9 @@ fieldset {
   color: #c41535;
   background-color: #fae9eb;
 }
+.vuiOptionsListItem--danger:hover .vuiIcon__inner {
+  color: #c41535;
+}
 
 .vuiOptionsListItem--warning {
   color: #965a15;
@@ -2266,6 +2278,9 @@ fieldset {
   color: #965a15;
   background-color: #f4eee8;
 }
+.vuiOptionsListItem--warning:hover .vuiIcon__inner {
+  color: #965a15;
+}
 
 .vuiOptionsListItem--neutral {
   color: #2c313a;
@@ -2274,6 +2289,9 @@ fieldset {
   color: #264cd6;
   background-color: #edf5ff;
 }
+.vuiOptionsListItem--neutral:hover .vuiIcon__inner {
+  color: #264cd6;
+}
 
 .vuiPopover {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "0.0.4",
+  "version": "1.0.2",
   "homepage": "https://vectara.github.io/vectara-ui/",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",