@procore/core-react 0.0.0-20230808121909 → 0.0.0-alpha-20230808145207

package/dist/SuperSelect/useSuperSelect.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="lodash" />
 import React from 'react';
-import { SuperSelectConfig, SuperSelectOption, SuperSelectValuePrimitive } from './SuperSelect.types';
+import { VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
+import { SuperSelectConfig, SuperSelectOption, SuperSelectValue, SuperSelectValuePrimitive } from './SuperSelect.types';
 export declare function useSuperSelect({ block, components: customComponents, defaultValue, disabled, draggable, emptyMessage, error, footer, getOptionGroup, getOptionIsBatch, getOptionIsDisabled, getOptionLabel, getOptionValue, onScrollBottom, onOpenChange, header, loading, multiple, onChange, onManualSort, options: sourceOptions, placeholder, preset, presetProps, search, selectionStyle, setOptionGroup, sort, tabIndex, value: value_, }: SuperSelectConfig): {
     config: {
         block: boolean;
@@ -7,8 +9,8 @@ export declare function useSuperSelect({ block, components: customComponents, de
         draggable: boolean;
         emptyMessage: string;
         error: boolean | undefined;
-        footer: any;
-        header: any;
+        footer: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        header: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         placeholder: string | undefined;
         preset: import("./SuperSelect.types").SuperSelectPreset;
         presetProps: import("./SuperSelect.types").SuperSelectPresetProps | undefined;
@@ -18,66 +20,74 @@ export declare function useSuperSelect({ block, components: customComponents, de
         multiple: boolean;
     };
     components: {
-        Overlay: any;
-        SingleTrigger: (props: React.PropsWithChildren<any>) => any;
-        MultiTrigger: (props: React.PropsWithChildren<any>) => any;
-        TriggerContainer: any;
-        Trigger: any;
-        Indicators: (props: React.PropsWithChildren<any>) => any;
-        Label: any;
-        Loading: () => any;
-        ArrowContainer: (props: React.PropsWithChildren<any>) => any;
-        Arrow: ({ up, down, left, right, width, height, border, }: any) => any;
-        Clear: () => any;
-        MultiInputContainer: (props: React.PropsWithChildren<{}>) => any;
-        MultiInput: any;
-        MultiValue: (props: React.PropsWithChildren<any>) => any;
-        MultiValueContainer: (props: React.PropsWithChildren<any>) => any;
-        SearchContainer: any;
-        Search: (props: React.PropsWithChildren<any>) => any;
-        Header: (props: React.PropsWithChildren<any>) => any;
-        Footer: any;
-        EmptyMessage: (props: any) => any;
-        Options: (props: any) => any;
-        Group: (props: React.PropsWithChildren<{}>) => any;
-        Item: any;
-        OptionGroupHeader: ({ optgroup }: any) => any;
-        OptionLabel: ({ option }: any) => any;
-        OptionContent: ({ option }: any) => any;
-        DraggableOptionContent: ({ index, option }: any) => any;
-        DragHandle: (props: React.PropsWithChildren<any>) => any;
-        CheckboxContainer: (props: React.PropsWithChildren<any>) => any;
-        Checkbox: (props: React.PropsWithChildren<any>) => any;
-        CheckmarkContainer: (props: React.PropsWithChildren<any>) => any;
-        Checkmark: (props: React.PropsWithChildren<any>) => any;
+        Overlay: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLElement>>;
+        SingleTrigger: (props: any) => JSX.Element;
+        MultiTrigger: (props: any) => JSX.Element | null;
+        TriggerContainer: React.ForwardRefExoticComponent<any> | React.FC<any>;
+        Trigger: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLDivElement>>;
+        Indicators: (props: any) => JSX.Element;
+        Label: React.ForwardRefExoticComponent<{
+            hoverable: boolean;
+        } & React.RefAttributes<HTMLDivElement>>;
+        Loading: () => JSX.Element;
+        ArrowContainer: (props: any) => JSX.Element;
+        Arrow: ({ up, down, left, right, width, height, border, }: any) => JSX.Element;
+        Clear: () => JSX.Element;
+        MultiInputContainer: (props: {
+            children?: React.ReactNode;
+        }) => JSX.Element;
+        MultiInput: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        MultiValue: (props: any) => JSX.Element;
+        MultiValueContainer: (props: any) => JSX.Element;
+        SearchContainer: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        Search: (props: any) => JSX.Element;
+        Header: (props: any) => JSX.Element;
+        Footer: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        EmptyMessage: (props: any) => JSX.Element;
+        Options: (props: {
+            children?: React.ReactNode;
+        } & import("../_utils/types").DivAttributes) => JSX.Element;
+        Group: (props: {
+            children?: React.ReactNode;
+        }) => JSX.Element;
+        Item: React.ForwardRefExoticComponent<import("./SuperSelect.types").SuperSelectMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+        OptionGroupHeader: ({ optgroup }: any) => JSX.Element;
+        OptionLabel: ({ option }: any) => JSX.Element;
+        OptionContent: ({ option }: any) => JSX.Element;
+        DraggableOptionContent: ({ index, option }: any) => JSX.Element;
+        DragHandle: (props: any) => JSX.Element;
+        CheckboxContainer: (props: any) => JSX.Element;
+        Checkbox: (props: any) => JSX.Element;
+        CheckmarkContainer: (props: any) => JSX.Element;
+        Checkmark: (props: any) => JSX.Element;
     };
     state: {
-        activeMenuIndex: any;
-        activeTokenIndex: any;
+        activeMenuIndex: number | null;
+        activeTokenIndex: number | null;
         isEmpty: () => boolean;
         listContainerHeight: number;
-        listId: any;
-        maxHeight: any;
-        onDragEnd: any;
+        listId: string;
+        maxHeight: number;
+        onDragEnd: (result: any) => void;
         onSelect: (option: SuperSelectOption) => void;
-        open: any;
-        options: any;
-        overlayId: any;
-        searchValue: any;
-        selectedIndex: any;
-        selectedLabel: any;
+        open: boolean;
+        options: any[];
+        overlayId: string;
+        searchValue: string;
+        selectedIndex: number;
+        selectedLabel: string;
         selectedOption: any;
-        setOpen: any;
-        setPointer: any;
-        setSearchValue: any;
+        setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+        setPointer: React.Dispatch<React.SetStateAction<boolean>>;
+        setSearchValue: import("lodash").DebouncedFunc<React.Dispatch<React.SetStateAction<string>>>;
         sourceOptions: any[];
-        value: any;
-        width: any;
+        value: SuperSelectValue;
+        width: number;
     };
     props: {
         clear: () => {
             'aria-hidden': boolean;
-            'aria-label': any;
+            'aria-label': string;
             onClick(e: React.MouseEvent): void;
         };
         emptyMessage: () => {
@@ -90,7 +100,7 @@ export declare function useSuperSelect({ block, components: customComponents, de
         header: () => {
             ref: (el: HTMLElement | null) => void;
         };
-        item: any;
+        item: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
         label: () => {
             $hoverable: boolean;
         };
@@ -103,11 +113,11 @@ export declare function useSuperSelect({ block, components: customComponents, de
         multiInput: () => React.AriaAttributes & React.InputHTMLAttributes<HTMLInputElement> & {
             ref: React.Ref<HTMLInputElement>;
         };
-        overlay: any;
+        overlay: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
         search: () => {
-            'aria-controls': any;
+            'aria-controls': string;
             onChange(value: string): void;
-            placeholder: any;
+            placeholder: string;
         };
         searchContainer: () => {
             ref: (el: HTMLElement | null) => void;
@@ -115,7 +125,7 @@ export declare function useSuperSelect({ block, components: customComponents, de
         tokenClear: (index: number) => {
             onClick(e: React.MouseEvent): void;
         };
-        trigger: any;
+        trigger: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
         virtuoso: () => VirtuosoProps<{}, {}>;
     };
     option: {
@@ -128,21 +138,52 @@ export declare function useSuperSelect({ block, components: customComponents, de
         value: (option: any) => SuperSelectValuePrimitive;
     };
     refs: {
-        floating: any;
-        navigationList: any;
-        virtuoso: any;
+        floating: {
+            placement: import("@floating-ui/react").Placement;
+            strategy: import("@floating-ui/react").Strategy;
+            middlewareData: import("@floating-ui/react").MiddlewareData;
+            x: number | null;
+            y: number | null;
+            update: () => void;
+            reference: (node: HTMLElement | null) => void;
+            floating: (node: HTMLElement | null) => void;
+            positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+            context: {
+                x: number | null;
+                y: number | null;
+                placement: import("@floating-ui/react").Placement;
+                strategy: import("@floating-ui/react").Strategy;
+                middlewareData: import("@floating-ui/react").MiddlewareData;
+                reference: (node: HTMLElement | null) => void;
+                floating: (node: HTMLElement | null) => void;
+                update: () => void;
+                isPositioned: boolean;
+                open: boolean;
+                onOpenChange: (open: boolean) => void;
+                events: import("@floating-ui/react").FloatingEvents;
+                dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+                nodeId: string | undefined;
+                floatingId: string;
+                refs: import("@floating-ui/react").ExtendedRefs<HTMLElement>;
+                elements: import("@floating-ui/react").ExtendedElements<HTMLElement>;
+            };
+            refs: import("@floating-ui/react").ExtendedRefs<HTMLElement>;
+            elements: import("@floating-ui/react").ExtendedElements<HTMLElement>;
+            isPositioned: boolean;
+        };
+        navigationList: React.MutableRefObject<(HTMLElement | null)[]>;
+        virtuoso: React.RefObject<VirtuosoHandle>;
     };
 };
-export declare const SuperSelectContext: any;
-export declare function useSuperSelectContext(): {
+export declare const SuperSelectContext: React.Context<{
     config: {
         block: boolean;
         disabled: boolean;
         draggable: boolean;
         emptyMessage: string;
         error: boolean | undefined;
-        footer: any;
-        header: any;
+        footer: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        header: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
         placeholder: string | undefined;
         preset: import("./SuperSelect.types").SuperSelectPreset;
         presetProps: import("./SuperSelect.types").SuperSelectPresetProps | undefined;
@@ -152,66 +193,74 @@ export declare function useSuperSelectContext(): {
         multiple: boolean;
     };
     components: {
-        Overlay: any;
-        SingleTrigger: (props: React.PropsWithChildren<any>) => any;
-        MultiTrigger: (props: React.PropsWithChildren<any>) => any;
-        TriggerContainer: any;
-        Trigger: any;
-        Indicators: (props: React.PropsWithChildren<any>) => any;
-        Label: any;
-        Loading: () => any;
-        ArrowContainer: (props: React.PropsWithChildren<any>) => any;
-        Arrow: ({ up, down, left, right, width, height, border, }: any) => any;
-        Clear: () => any;
-        MultiInputContainer: (props: React.PropsWithChildren<{}>) => any;
-        MultiInput: any;
-        MultiValue: (props: React.PropsWithChildren<any>) => any;
-        MultiValueContainer: (props: React.PropsWithChildren<any>) => any;
-        SearchContainer: any;
-        Search: (props: React.PropsWithChildren<any>) => any;
-        Header: (props: React.PropsWithChildren<any>) => any;
-        Footer: any;
-        EmptyMessage: (props: any) => any;
-        Options: (props: any) => any;
-        Group: (props: React.PropsWithChildren<{}>) => any;
-        Item: any;
-        OptionGroupHeader: ({ optgroup }: any) => any;
-        OptionLabel: ({ option }: any) => any;
-        OptionContent: ({ option }: any) => any;
-        DraggableOptionContent: ({ index, option }: any) => any;
-        DragHandle: (props: React.PropsWithChildren<any>) => any;
-        CheckboxContainer: (props: React.PropsWithChildren<any>) => any;
-        Checkbox: (props: React.PropsWithChildren<any>) => any;
-        CheckmarkContainer: (props: React.PropsWithChildren<any>) => any;
-        Checkmark: (props: React.PropsWithChildren<any>) => any;
+        Overlay: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLElement>>;
+        SingleTrigger: (props: any) => JSX.Element;
+        MultiTrigger: (props: any) => JSX.Element | null;
+        TriggerContainer: React.ForwardRefExoticComponent<any> | React.FC<any>;
+        Trigger: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLDivElement>>;
+        Indicators: (props: any) => JSX.Element;
+        Label: React.ForwardRefExoticComponent<{
+            hoverable: boolean;
+        } & React.RefAttributes<HTMLDivElement>>;
+        Loading: () => JSX.Element;
+        ArrowContainer: (props: any) => JSX.Element;
+        Arrow: ({ up, down, left, right, width, height, border, }: any) => JSX.Element;
+        Clear: () => JSX.Element;
+        MultiInputContainer: (props: {
+            children?: React.ReactNode;
+        }) => JSX.Element;
+        MultiInput: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        MultiValue: (props: any) => JSX.Element;
+        MultiValueContainer: (props: any) => JSX.Element;
+        SearchContainer: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        Search: (props: any) => JSX.Element;
+        Header: (props: any) => JSX.Element;
+        Footer: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        EmptyMessage: (props: any) => JSX.Element;
+        Options: (props: {
+            children?: React.ReactNode;
+        } & import("../_utils/types").DivAttributes) => JSX.Element;
+        Group: (props: {
+            children?: React.ReactNode;
+        }) => JSX.Element;
+        Item: React.ForwardRefExoticComponent<import("./SuperSelect.types").SuperSelectMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+        OptionGroupHeader: ({ optgroup }: any) => JSX.Element;
+        OptionLabel: ({ option }: any) => JSX.Element;
+        OptionContent: ({ option }: any) => JSX.Element;
+        DraggableOptionContent: ({ index, option }: any) => JSX.Element;
+        DragHandle: (props: any) => JSX.Element;
+        CheckboxContainer: (props: any) => JSX.Element;
+        Checkbox: (props: any) => JSX.Element;
+        CheckmarkContainer: (props: any) => JSX.Element;
+        Checkmark: (props: any) => JSX.Element;
     };
     state: {
-        activeMenuIndex: any;
-        activeTokenIndex: any;
+        activeMenuIndex: number | null;
+        activeTokenIndex: number | null;
         isEmpty: () => boolean;
         listContainerHeight: number;
-        listId: any;
-        maxHeight: any;
-        onDragEnd: any;
-        onSelect: (option: any) => void;
-        open: any;
-        options: any;
-        overlayId: any;
-        searchValue: any;
-        selectedIndex: any;
-        selectedLabel: any;
+        listId: string;
+        maxHeight: number;
+        onDragEnd: (result: any) => void;
+        onSelect: (option: SuperSelectOption) => void;
+        open: boolean;
+        options: any[];
+        overlayId: string;
+        searchValue: string;
+        selectedIndex: number;
+        selectedLabel: string;
         selectedOption: any;
-        setOpen: any;
-        setPointer: any;
-        setSearchValue: any;
+        setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+        setPointer: React.Dispatch<React.SetStateAction<boolean>>;
+        setSearchValue: import("lodash").DebouncedFunc<React.Dispatch<React.SetStateAction<string>>>;
         sourceOptions: any[];
-        value: any;
-        width: any;
+        value: SuperSelectValue;
+        width: number;
     };
     props: {
         clear: () => {
             'aria-hidden': boolean;
-            'aria-label': any;
+            'aria-label': string;
             onClick(e: React.MouseEvent): void;
         };
         emptyMessage: () => {
@@ -224,7 +273,7 @@ export declare function useSuperSelectContext(): {
         header: () => {
             ref: (el: HTMLElement | null) => void;
         };
-        item: any;
+        item: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
         label: () => {
             $hoverable: boolean;
         };
@@ -234,12 +283,14 @@ export declare function useSuperSelectContext(): {
                 height: number;
             };
         };
-        multiInput: () => any;
-        overlay: any;
+        multiInput: () => React.AriaAttributes & React.InputHTMLAttributes<HTMLInputElement> & {
+            ref: React.Ref<HTMLInputElement>;
+        };
+        overlay: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
         search: () => {
-            'aria-controls': any;
+            'aria-controls': string;
             onChange(value: string): void;
-            placeholder: any;
+            placeholder: string;
         };
         searchContainer: () => {
             ref: (el: HTMLElement | null) => void;
@@ -247,7 +298,180 @@ export declare function useSuperSelectContext(): {
         tokenClear: (index: number) => {
             onClick(e: React.MouseEvent): void;
         };
-        trigger: any;
+        trigger: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+        virtuoso: () => VirtuosoProps<{}, {}>;
+    };
+    option: {
+        group: (option: any) => string;
+        isBatch: (option: any) => boolean;
+        isSelected: (option: SuperSelectOption) => boolean;
+        isDisabled: (option: any) => boolean;
+        isOptgroup: (item: any) => item is import("./SuperSelect.types").SuperSelectOptgroup;
+        label: (option: any) => string;
+        value: (option: any) => SuperSelectValuePrimitive;
+    };
+    refs: {
+        floating: {
+            placement: import("@floating-ui/react").Placement;
+            strategy: import("@floating-ui/react").Strategy;
+            middlewareData: import("@floating-ui/react").MiddlewareData;
+            x: number | null;
+            y: number | null;
+            update: () => void;
+            reference: (node: HTMLElement | null) => void;
+            floating: (node: HTMLElement | null) => void;
+            positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+            context: {
+                x: number | null;
+                y: number | null;
+                placement: import("@floating-ui/react").Placement;
+                strategy: import("@floating-ui/react").Strategy;
+                middlewareData: import("@floating-ui/react").MiddlewareData;
+                reference: (node: HTMLElement | null) => void;
+                floating: (node: HTMLElement | null) => void;
+                update: () => void;
+                isPositioned: boolean;
+                open: boolean;
+                onOpenChange: (open: boolean) => void;
+                events: import("@floating-ui/react").FloatingEvents;
+                dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+                nodeId: string | undefined;
+                floatingId: string;
+                refs: import("@floating-ui/react").ExtendedRefs<HTMLElement>;
+                elements: import("@floating-ui/react").ExtendedElements<HTMLElement>;
+            };
+            refs: import("@floating-ui/react").ExtendedRefs<HTMLElement>;
+            elements: import("@floating-ui/react").ExtendedElements<HTMLElement>;
+            isPositioned: boolean;
+        };
+        navigationList: React.MutableRefObject<(HTMLElement | null)[]>;
+        virtuoso: React.RefObject<VirtuosoHandle>;
+    };
+} | null>;
+export declare function useSuperSelectContext(): {
+    config: {
+        block: boolean;
+        disabled: boolean;
+        draggable: boolean;
+        emptyMessage: string;
+        error: boolean | undefined;
+        footer: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        header: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        placeholder: string | undefined;
+        preset: import("./SuperSelect.types").SuperSelectPreset;
+        presetProps: import("./SuperSelect.types").SuperSelectPresetProps | undefined;
+        selectionStyle: "checkbox" | "highlight" | "checkmark";
+        tabIndex: number;
+        loading: boolean;
+        multiple: boolean;
+    };
+    components: {
+        Overlay: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLElement>>;
+        SingleTrigger: (props: any) => JSX.Element;
+        MultiTrigger: (props: any) => JSX.Element | null;
+        TriggerContainer: React.ForwardRefExoticComponent<any> | React.FC<any>;
+        Trigger: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLDivElement>>;
+        Indicators: (props: any) => JSX.Element;
+        Label: React.ForwardRefExoticComponent<{
+            hoverable: boolean;
+        } & React.RefAttributes<HTMLDivElement>>;
+        Loading: () => JSX.Element;
+        ArrowContainer: (props: any) => JSX.Element;
+        Arrow: ({ up, down, left, right, width, height, border, }: any) => JSX.Element;
+        Clear: () => JSX.Element;
+        MultiInputContainer: (props: {
+            children?: React.ReactNode;
+        }) => JSX.Element;
+        MultiInput: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        MultiValue: (props: any) => JSX.Element;
+        MultiValueContainer: (props: any) => JSX.Element;
+        SearchContainer: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        Search: (props: any) => JSX.Element;
+        Header: (props: any) => JSX.Element;
+        Footer: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+        EmptyMessage: (props: any) => JSX.Element;
+        Options: (props: {
+            children?: React.ReactNode;
+        } & import("../_utils/types").DivAttributes) => JSX.Element;
+        Group: (props: {
+            children?: React.ReactNode;
+        }) => JSX.Element;
+        Item: React.ForwardRefExoticComponent<import("./SuperSelect.types").SuperSelectMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+        OptionGroupHeader: ({ optgroup }: any) => JSX.Element;
+        OptionLabel: ({ option }: any) => JSX.Element;
+        OptionContent: ({ option }: any) => JSX.Element;
+        DraggableOptionContent: ({ index, option }: any) => JSX.Element;
+        DragHandle: (props: any) => JSX.Element;
+        CheckboxContainer: (props: any) => JSX.Element;
+        Checkbox: (props: any) => JSX.Element;
+        CheckmarkContainer: (props: any) => JSX.Element;
+        Checkmark: (props: any) => JSX.Element;
+    };
+    state: {
+        activeMenuIndex: number | null;
+        activeTokenIndex: number | null;
+        isEmpty: () => boolean;
+        listContainerHeight: number;
+        listId: string;
+        maxHeight: number;
+        onDragEnd: (result: any) => void;
+        onSelect: (option: any) => void;
+        open: boolean;
+        options: any[];
+        overlayId: string;
+        searchValue: string;
+        selectedIndex: number;
+        selectedLabel: string;
+        selectedOption: any;
+        setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+        setPointer: React.Dispatch<React.SetStateAction<boolean>>;
+        setSearchValue: import("lodash").DebouncedFunc<React.Dispatch<React.SetStateAction<string>>>;
+        sourceOptions: any[];
+        value: SuperSelectValue;
+        width: number;
+    };
+    props: {
+        clear: () => {
+            'aria-hidden': boolean;
+            'aria-label': string;
+            onClick(e: React.MouseEvent<Element, MouseEvent>): void;
+        };
+        emptyMessage: () => {
+            emptyMessage: string;
+        };
+        footer: () => {
+            ref: (el: HTMLElement | null) => void;
+            onKeyDown: (e: React.KeyboardEvent<Element>) => void;
+        };
+        header: () => {
+            ref: (el: HTMLElement | null) => void;
+        };
+        item: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+        label: () => {
+            $hoverable: boolean;
+        };
+        menu: () => {
+            scrollable: boolean;
+            style: {
+                height: number;
+            };
+        };
+        multiInput: () => React.AriaAttributes & React.InputHTMLAttributes<HTMLInputElement> & {
+            ref: React.Ref<HTMLInputElement>;
+        };
+        overlay: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+        search: () => {
+            'aria-controls': string;
+            onChange(value: string): void;
+            placeholder: string;
+        };
+        searchContainer: () => {
+            ref: (el: HTMLElement | null) => void;
+        };
+        tokenClear: (index: number) => {
+            onClick(e: React.MouseEvent<Element, MouseEvent>): void;
+        };
+        trigger: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
         virtuoso: () => VirtuosoProps<{}, {}>;
     };
     option: {
@@ -260,8 +484,40 @@ export declare function useSuperSelectContext(): {
         value: (option: any) => SuperSelectValuePrimitive;
     };
     refs: {
-        floating: any;
-        navigationList: any;
-        virtuoso: any;
+        floating: {
+            placement: import("@floating-ui/react").Placement;
+            strategy: import("@floating-ui/react").Strategy;
+            middlewareData: import("@floating-ui/react").MiddlewareData;
+            x: number | null;
+            y: number | null;
+            update: () => void;
+            reference: (node: HTMLElement | null) => void;
+            floating: (node: HTMLElement | null) => void;
+            positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+            context: {
+                x: number | null;
+                y: number | null;
+                placement: import("@floating-ui/react").Placement;
+                strategy: import("@floating-ui/react").Strategy;
+                middlewareData: import("@floating-ui/react").MiddlewareData;
+                reference: (node: HTMLElement | null) => void;
+                floating: (node: HTMLElement | null) => void;
+                update: () => void;
+                isPositioned: boolean;
+                open: boolean;
+                onOpenChange: (open: boolean) => void;
+                events: import("@floating-ui/react").FloatingEvents;
+                dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+                nodeId: string | undefined;
+                floatingId: string;
+                refs: import("@floating-ui/react").ExtendedRefs<HTMLElement>;
+                elements: import("@floating-ui/react").ExtendedElements<HTMLElement>;
+            };
+            refs: import("@floating-ui/react").ExtendedRefs<HTMLElement>;
+            elements: import("@floating-ui/react").ExtendedElements<HTMLElement>;
+            isPositioned: boolean;
+        };
+        navigationList: React.MutableRefObject<(HTMLElement | null)[]>;
+        virtuoso: React.RefObject<VirtuosoHandle>;
     };
 };

package/dist/SuperSelect/useSuperSelect.js

@@ -18,13 +18,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     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 { autoUpdate, flip, offset, size, useClick, useDismiss, useFloating, useInteractions, useListNavigation, } from '@floating-ui/react';
 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 { useZIndexContext } from '../_hooks/ZIndex';
 import { spacing } from '../_styles/spacing';
 import * as defaultComponents from './SuperSelect.components';
 import { draggableOptionIdSymbol } from './SuperSelect.constants';
@@ -337,6 +338,7 @@ export function useSuperSelect(_a) {
             }),
         ],
     });
+    var zIndex = useZIndexContext().value;
     var _9 = useInteractions([
         useClick(floating.context, {
             enabled: !disabled,
@@ -401,7 +403,7 @@ export function useSuperSelect(_a) {
                     top: floating.y || 0,
                     width: width,
                     maxHeight: maxHeight,
-                    zIndex: 10,
+                    zIndex: zIndex,
                 },
             },
         },
@@ -520,7 +522,7 @@ export function useSuperSelect(_a) {
             id: overlayId,
             data: draggable ? queriedDraggableOptions : options,
             components: {
-                Item: components === null || components === void 0 ? void 0 : components.Item,
+                Item: components === null || components === void 0 ? void 0 : components.Item, // TODO fix type
             },
             initialTopMostItemIndex: selectedIndex >= 0 ? selectedIndex : 0,
             style: {