@procore/core-react 11.6.0-rc.14 → 11.6.0-rc.15

package/dist/SuperSelect/SuperSelect.utils.d.ts

@@ -0,0 +1,28 @@
+import { SuperSelectConfig, SuperSelectOptgroup, SuperSelectOption } from './SuperSelect.types';
+export declare const getGroupNameIsValid: (groupName: unknown) => boolean;
+export declare const getOptionsSortingAlgorithm: ({ getOptionIsBatch, getOptionLabel, }: {
+    getOptionIsBatch: NonNullable<SuperSelectConfig['getOptionIsBatch']>;
+    getOptionLabel: NonNullable<SuperSelectConfig['getOptionLabel']>;
+}) => (a: SuperSelectOption, b: SuperSelectOption) => number;
+export declare const getBatchOptionFormatter: ({ value, multiple, getOptionIsBatch, getOptionValue, }: {
+    value: SuperSelectConfig['value'];
+    multiple: NonNullable<SuperSelectConfig['multiple']>;
+    getOptionIsBatch: NonNullable<SuperSelectConfig['getOptionIsBatch']>;
+    getOptionValue: NonNullable<SuperSelectConfig['getOptionValue']>;
+}) => (option: SuperSelectOption) => any;
+export declare const RESERVED_UNGROUPED_OPTGROUP_NAME = "RESERVED_UNGROUPED_OPTGROUP_NAME";
+export declare const collectGroupsInOrderOfOccurrence: (opts: SuperSelectOption[], getOptionGroup: NonNullable<SuperSelectConfig['getOptionGroup']>) => {
+    groups: string[];
+    groupedOptions: Record<string, SuperSelectOption[]>;
+};
+export declare function reorder(options: SuperSelectOption[], startIndex: number, endIndex: number, getOptionGroup: (opt: SuperSelectOption) => string): {
+    nextOptions: any[];
+    prevGroup: string;
+    nextGroup: string;
+};
+export declare function isMultiple<T>(multiple: boolean, value: T | T[]): value is T[];
+export declare const getOptionIsOptgroup: (item: SuperSelectOption) => boolean;
+export declare const getOptgroupHeader: (groupName: string) => SuperSelectOptgroup;
+export declare const sortOptgroups: (groupA: string, groupB: string) => number;
+export declare function getIsAllOptionsUngrouped(groups: string[]): boolean;
+export declare function getOptgroup(groupName: string, groupOptions: SuperSelectOption[]): any[];

package/dist/SuperSelect/SuperSelect.utils.js

@@ -0,0 +1,156 @@
+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 { optgroupSymbol } from './SuperSelect.constants';
+export var getGroupNameIsValid = function (groupName) {
+    var isGroupDefined = ![undefined, null, ''].includes(groupName);
+    return isGroupDefined && typeof groupName === 'string' && groupName.length > 0;
+};
+export var getOptionsSortingAlgorithm = function (_a) {
+    var getOptionIsBatch = _a.getOptionIsBatch, getOptionLabel = _a.getOptionLabel;
+    return function (a, b) {
+        var isOptionBatch1 = getOptionIsBatch(a);
+        var isOptionBatch2 = getOptionIsBatch(b);
+        // move batched options up
+        if (isOptionBatch1 && isOptionBatch2) {
+            return compareStrings(getOptionLabel(a), getOptionLabel(b));
+        }
+        else if (isOptionBatch1) {
+            return -1;
+        }
+        else if (isOptionBatch2) {
+            return 1;
+        }
+        return compareStrings(getOptionLabel(a), getOptionLabel(b));
+    };
+};
+export var getBatchOptionFormatter = function (_a) {
+    var value = _a.value, multiple = _a.multiple, getOptionIsBatch = _a.getOptionIsBatch, getOptionValue = _a.getOptionValue;
+    return function (option) {
+        if (isMultiple(multiple, value) && getOptionIsBatch(option)) {
+            var val = getOptionValue(option);
+            var disabled = Array.isArray(val) && val.every(function (v) { return value.includes(v); });
+            return __assign(__assign({}, option), { disabled: disabled });
+        }
+        return option;
+    };
+};
+export var RESERVED_UNGROUPED_OPTGROUP_NAME = 'RESERVED_UNGROUPED_OPTGROUP_NAME';
+export var collectGroupsInOrderOfOccurrence = function (opts, getOptionGroup) {
+    var output = opts.reduce(function (_a, option) {
+        var _b;
+        var groups = _a.groups, groupedOptions = _a.groupedOptions;
+        var groupName = getOptionGroup(option);
+        // if group name is invalid, consider the option ungrouped
+        var isGroupNameValid = getGroupNameIsValid(groupName);
+        var adjustedGroupName = isGroupNameValid
+            ? groupName
+            : RESERVED_UNGROUPED_OPTGROUP_NAME;
+        var groupOptions = (_b = groupedOptions[adjustedGroupName]) !== null && _b !== void 0 ? _b : [];
+        // push/assign for performance considerations
+        groupOptions.push(option);
+        groupedOptions[adjustedGroupName] = groupOptions;
+        return {
+            groups: groups.includes(adjustedGroupName)
+                ? groups
+                : __spreadArray(__spreadArray([], groups, true), [adjustedGroupName], false),
+            groupedOptions: groupedOptions,
+        };
+    }, {
+        groups: [],
+        groupedOptions: {},
+    });
+    // if ungrouped options were found, lift them to the top
+    if (output.groups.includes(RESERVED_UNGROUPED_OPTGROUP_NAME)) {
+        return {
+            groupedOptions: output.groupedOptions,
+            groups: __spreadArray([
+                RESERVED_UNGROUPED_OPTGROUP_NAME
+            ], output.groups.filter(function (group) { return group !== RESERVED_UNGROUPED_OPTGROUP_NAME; }), true),
+        };
+    }
+    return output;
+};
+function findParentOptgroup(list, index, getOptionGroup) {
+    for (var i = index; i >= 0; i--) {
+        var option = list[i];
+        var isOptgroup = getOptionIsOptgroup(option);
+        if (isOptgroup) {
+            return getOptionGroup(option);
+        }
+    }
+    // no parent optgroup was found, so the option is considered ungrouped
+    return RESERVED_UNGROUPED_OPTGROUP_NAME;
+}
+export function reorder(options, startIndex, endIndex, getOptionGroup) {
+    var nextOptions = __spreadArray([], options, true);
+    var removed = nextOptions.splice(startIndex, 1)[0];
+    nextOptions.splice(endIndex, 0, removed);
+    var prevGroup = findParentOptgroup(options, startIndex, getOptionGroup);
+    var nextGroup = findParentOptgroup(nextOptions, endIndex, getOptionGroup);
+    return { nextOptions: nextOptions, prevGroup: prevGroup, nextGroup: nextGroup };
+}
+function compareStrings(a, b) {
+    return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+}
+export function isMultiple(multiple, value) {
+    return multiple && Array.isArray(value);
+}
+export var getOptionIsOptgroup = function (item) {
+    return Boolean(item[optgroupSymbol]);
+};
+export var getOptgroupHeader = function (groupName) {
+    var _a, _b;
+    if (groupName === RESERVED_UNGROUPED_OPTGROUP_NAME) {
+        return _a = {},
+            _a[optgroupSymbol] = true,
+            _a.label = '',
+            _a.group = RESERVED_UNGROUPED_OPTGROUP_NAME,
+            _a.id = RESERVED_UNGROUPED_OPTGROUP_NAME,
+            _a;
+    }
+    return _b = {},
+        _b[optgroupSymbol] = true,
+        _b.label = groupName,
+        _b.group = groupName,
+        _b.id = groupName,
+        _b;
+};
+export var sortOptgroups = function (groupA, groupB) {
+    // always put ungrouped options on top
+    if (groupA === RESERVED_UNGROUPED_OPTGROUP_NAME) {
+        return -1;
+    }
+    if (groupB === RESERVED_UNGROUPED_OPTGROUP_NAME) {
+        return 1;
+    }
+    return compareStrings(groupA, groupB);
+};
+export function getIsAllOptionsUngrouped(groups) {
+    return groups.length === 1 && groups[0] === RESERVED_UNGROUPED_OPTGROUP_NAME;
+}
+export function getOptgroup(groupName, groupOptions) {
+    // ungrouped options should not have a group header
+    if (groupName === RESERVED_UNGROUPED_OPTGROUP_NAME) {
+        return groupOptions;
+    }
+    return __spreadArray([getOptgroupHeader(groupName)], groupOptions, true);
+}
+//# sourceMappingURL=SuperSelect.utils.js.map

package/dist/SuperSelect/SuperSelect.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuperSelect.utils.js","sourceRoot":"","sources":["../../src/SuperSelect/SuperSelect.utils.ts"],"names":[],"mappings":"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"}

package/dist/SuperSelect/SuperSelectDraggableOptions.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SuperSelectApi, SuperSelectMenuItemProps, SuperSelectOption } from './SuperSelect.types';
+export declare const InternalDragDropContext: React.Context<{
+    isDraggingOver: boolean;
+}>;
+export declare const SuperSelectDraggableOptions: ({ SuperSelectMenuItem, MenuItemLabelComponent, MenuGroupHeaderComponent, selectApi, onListHeightChange, }: {
+    SuperSelectMenuItem: React.FC<SuperSelectMenuItemProps>;
+    MenuItemLabelComponent: React.FC<{
+        option: SuperSelectOption;
+        selectApi: SuperSelectApi;
+    }>;
+    MenuGroupHeaderComponent: React.FC<{
+        group: SuperSelectOption;
+        selectApi: SuperSelectApi;
+    }>;
+    selectApi: SuperSelectApi;
+    onListHeightChange: (height: number) => void;
+}) => JSX.Element;

package/dist/SuperSelect/SuperSelectDraggableOptions.js

@@ -0,0 +1,61 @@
+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);
+};
+import { Grip } from '@procore/core-icons';
+import React from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { Virtuoso } from 'react-virtuoso';
+import { StyledGrip } from '../MenuImperative/MenuImperative.styles';
+import { colors } from '../_styles/colors';
+import { draggableOptionIdSymbol } from './SuperSelect.constants';
+import { StyledDraggableWrapper } from './SuperSelect.styles';
+export var InternalDragDropContext = React.createContext({
+    isDraggingOver: false,
+});
+var InternalDragDropProvider = function (_a) {
+    var isDraggingOver = _a.isDraggingOver, children = _a.children;
+    var value = React.useMemo(function () {
+        return {
+            isDraggingOver: isDraggingOver,
+        };
+    }, [isDraggingOver]);
+    return (React.createElement(InternalDragDropContext.Provider, { value: value }, children));
+};
+export var SuperSelectDraggableOptions = function (_a) {
+    var SuperSelectMenuItem = _a.SuperSelectMenuItem, MenuItemLabelComponent = _a.MenuItemLabelComponent, MenuGroupHeaderComponent = _a.MenuGroupHeaderComponent, selectApi = _a.selectApi, onListHeightChange = _a.onListHeightChange;
+    var getDraggableItemContent = function (index, option) {
+        var disabled = selectApi.getOptionIsDisabled(option);
+        var isOptgroup = selectApi.getOptionIsOptgroup(option);
+        var optionId = isOptgroup ? option.id : option[draggableOptionIdSymbol];
+        return (React.createElement(Draggable, { draggableId: optionId, index: index, key: optionId, isDragDisabled: isOptgroup || disabled || Boolean(selectApi.searchValue) }, function (provided) {
+            return (React.createElement(StyledDraggableWrapper, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps),
+                !isOptgroup && (React.createElement(StyledGrip, null,
+                    React.createElement(Grip, { color: colors.gray45 }))),
+                isOptgroup ? (React.createElement(MenuGroupHeaderComponent, { group: option, selectApi: selectApi })) : (React.createElement(MenuItemLabelComponent, { option: option, selectApi: selectApi }))));
+        }));
+    };
+    return (React.createElement(DragDropContext, { onDragEnd: selectApi.onDragEnd },
+        React.createElement(Droppable, { droppableId: "droppable", mode: "virtual", renderClone: function (provided, snapshot, dragged) {
+                var option = selectApi.options[dragged.source.index];
+                return (React.createElement(SuperSelectMenuItem, __assign({ isDragging: true, "data-index": dragged.source.index }, provided.draggableProps),
+                    React.createElement(StyledGrip, null,
+                        React.createElement(Grip, { color: colors.gray45 })),
+                    React.createElement(MenuItemLabelComponent, { option: option, selectApi: selectApi })));
+            } }, function (provided, snapshot) {
+            return (React.createElement(InternalDragDropProvider, { isDraggingOver: snapshot.isDraggingOver },
+                React.createElement(Virtuoso, { role: "listbox", id: selectApi.overlayId, ref: selectApi.virtuoso, data: selectApi.options, components: {
+                        Item: SuperSelectMenuItem,
+                    }, scrollerRef: function (el) {
+                        provided.innerRef(el);
+                    }, itemContent: getDraggableItemContent, initialTopMostItemIndex: selectApi.selectedIndex >= 0 ? selectApi.selectedIndex : 0, totalListHeightChanged: onListHeightChange, tabIndex: -1 })));
+        })));
+};
+//# sourceMappingURL=SuperSelectDraggableOptions.js.map

package/dist/SuperSelect/SuperSelectDraggableOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuperSelectDraggableOptions.js","sourceRoot":"","sources":["../../src/SuperSelect/SuperSelectDraggableOptions.tsx"],"names":[],"mappings":"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"}

package/dist/SuperSelect/useSuperSelect.d.ts

@@ -3,25 +3,11 @@ 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): {
+export declare function useSuperSelect({ components, draggable, defaultValue, disabled, getOptionGroup, setOptionGroup, getOptionIsBatch, getOptionIsDisabled, getOptionLabel, getOptionValue, onManualSort, multiple, onChange, options: sourceOptions, search, sort, 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;
+    components: import("./SuperSelect.types").SuperSelectComponents | undefined;
+    draggable: boolean | undefined;
     floating: import("@floating-ui/react-dom-interactions").UseFloatingReturn<HTMLElement>;
     getClearProps: () => React.AriaAttributes & React.HTMLAttributes<HTMLElement>;
     getFloatingProps: (userProps?: any) => Record<string, unknown>;
@@ -30,14 +16,14 @@ export declare function useSuperSelect({ components, defaultValue, disabled, get
     getOptionGroup: (option: any) => string;
     getOptionIsBatch: (option: any) => boolean;
     getOptionIsDisabled: (option: any) => boolean;
-    getOptionIsOptgroup: typeof getOptionIsOptgroup;
+    getOptionIsOptgroup: (item: any) => boolean;
     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;
+    isSelected: (option: SuperSelectOption) => boolean;
     listId: string;
     maxHeight: number;
     multiple: boolean;
@@ -57,5 +43,5 @@ export declare function useSuperSelect({ components, defaultValue, disabled, get
     value: SuperSelectValue;
     virtuoso: React.RefObject<VirtuosoHandle>;
     width: number;
+    onDragEnd: (result: any) => void;
 };
-export {};

package/dist/SuperSelect/useSuperSelect.js

@@ -21,20 +21,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 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');
+import { draggableOptionIdSymbol } from './SuperSelect.constants';
+import { collectGroupsInOrderOfOccurrence, getBatchOptionFormatter, getIsAllOptionsUngrouped, getOptgroup, getOptionIsOptgroup, getOptionsSortingAlgorithm, isMultiple, reorder, sortOptgroups, } from './SuperSelect.utils';
 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;
 }
@@ -49,10 +40,16 @@ 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 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 {
@@ -145,9 +142,9 @@ function useKeyboardSelection(context, _a) {
     };
 }
 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 components = _a.components, draggable = _a.draggable, defaultValue = _a.defaultValue, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.getOptionGroup, getOptionGroup = _c === void 0 ? defaultGetOptionGroup : _c, _d = _a.setOptionGroup, setOptionGroup = _d === void 0 ? defaultSetOptionGroup : _d, _e = _a.getOptionIsBatch, getOptionIsBatch = _e === void 0 ? defaultGetOptionIsBatch : _e, _f = _a.getOptionIsDisabled, getOptionIsDisabled = _f === void 0 ? defaultGetOptionIsDisabled : _f, _g = _a.getOptionLabel, getOptionLabel = _g === void 0 ? defaultGetOptionLabel : _g, _h = _a.getOptionValue, getOptionValue = _h === void 0 ? defaultGetOptionValue : _h, onManualSort = _a.onManualSort, _j = _a.multiple, multiple = _j === void 0 ? false : _j, onChange = _a.onChange, _k = _a.options, sourceOptions = _k === void 0 ? [] : _k, _l = _a.search, search = _l === void 0 ? true : _l, _m = _a.sort, sort = _m === void 0 ? true : _m, 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 _o = React.useState(initialValue), val = _o[0], setVal = _o[1];
     var value = value_ !== undefined ? value_ : val;
     function setValue(v) {
         if (!value_) {
@@ -157,62 +154,115 @@ export function useSuperSelect(_a) {
             onChange(v);
         }
     }
-    var _m = React.useState(''), searchValue = _m[0], setSearchValue_ = _m[1];
+    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 _p = React.useState(''), searchValue = _p[0], setSearchValue_ = _p[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 _q = React.useState(false), open = _q[0], setOpen = _q[1];
+    var _r = React.useState(false), pointer = _r[0], setPointer = _r[1];
+    var _s = React.useState(248), width = _s[0], setWidth = _s[1];
+    var _t = React.useState(248), maxHeight = _t[0], setMaxHeight = _t[1];
+    var _u = React.useState(null), activeMenuIndex = _u[0], setActiveMenuIndex = _u[1];
+    var _v = React.useState(null), activeTokenIndex = _v[0], setActiveTokenIndex = _v[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
+    // 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 getOptgroup(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 getOptgroup(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 () {
-        // 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);
+        var queried = searchValue
+            ? sourceOptions.filter(function (opt) {
+                return stringContains(getOptionLabel(opt), searchValue);
             })
-                .flat();
+            : __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 _w = React.useState([]), draggableOptions = _w[0], setDraggableOptions = _w[1];
+    React.useEffect(function () {
+        if (!draggable) {
+            return;
         }
-        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]);
+        // 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] = crypto.randomUUID(), _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
+            ? draggableOptions.filter(function (opt) {
+                return stringContains(getOptionLabel(opt), searchValue);
+            })
+            : 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)) {
@@ -226,7 +276,7 @@ export function useSuperSelect(_a) {
     }, [options, value]);
     var selectedOption = React.useMemo(function () {
         return options.find(function (option) { return getOptionValue(option) === value; });
-    }, [sourceOptions, value]);
+    }, [options, value]);
     var selectedLabel = React.useMemo(function () {
         return selectedOption ? getOptionLabel(selectedOption) : '';
     }, [selectedOption]);
@@ -289,7 +339,7 @@ export function useSuperSelect(_a) {
             }),
         ],
     });
-    var _u = useInteractions([
+    var _x = useInteractions([
         useClick(floating.context, {
             enabled: !disabled,
             keyboardHandlers: false,
@@ -329,7 +379,7 @@ export function useSuperSelect(_a) {
             onChangePointer: function (p) { return setPointer(function () { return p; }); },
             search: search,
         }),
-    ]), getReferenceProps = _u.getReferenceProps, getFloatingProps = _u.getFloatingProps, getItemProps = _u.getItemProps;
+    ]), getReferenceProps = _x.getReferenceProps, getFloatingProps = _x.getFloatingProps, getItemProps = _x.getItemProps;
     function getMultiInputProps() {
         return {
             disabled: disabled,
@@ -383,6 +433,33 @@ export function useSuperSelect(_a) {
             },
         };
     }
+    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, getOptionGroup), 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
@@ -434,6 +511,7 @@ export function useSuperSelect(_a) {
         activeMenuIndex: activeMenuIndex,
         activeTokenIndex: activeTokenIndex,
         components: components,
+        draggable: draggable,
         floating: floating,
         getClearProps: getClearProps,
         getFloatingProps: getFloatingProps,
@@ -457,7 +535,7 @@ export function useSuperSelect(_a) {
         onSelect: onSelect,
         open: open,
         sourceOptions: sourceOptions,
-        options: options,
+        options: draggable ? queriedDraggableOptions : options,
         overlayId: overlayId,
         searchValue: searchValue,
         selectedIndex: selectedIndex,
@@ -469,6 +547,7 @@ export function useSuperSelect(_a) {
         value: value,
         virtuoso: virtuoso,
         width: width,
+        onDragEnd: onDragEnd,
     };
 }
 //# sourceMappingURL=useSuperSelect.js.map