@bookjane2/bookjane-design-library 7.2.8 → 7.3.0

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsync.context.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { IBKJComboBoxAsyncContextValue, IBKJComboBoxAsyncProviderProps } from '../BKJComboBoxAsync.types.js';
-export declare const BKJComboBoxAsyncContext: import("react").Context<IBKJComboBoxAsyncContextValue>;
-export declare const BKJComboBoxAsyncProvider: FC<IBKJComboBoxAsyncProviderProps>;
-export declare const useBKJComboBoxAsyncContext: () => IBKJComboBoxAsyncContextValue;
+import { FC } from 'react';
+import { IBKJComboBoxAsyncContextValue, IBKJComboBoxAsyncProviderProps } from '../BKJComboBoxAsync.types.js';
+export declare const BKJComboBoxAsyncContext: import("react").Context<IBKJComboBoxAsyncContextValue>;
+export declare const BKJComboBoxAsyncProvider: FC<IBKJComboBoxAsyncProviderProps>;
+export declare const useBKJComboBoxAsyncContext: () => IBKJComboBoxAsyncContextValue;
 //# sourceMappingURL=BKJComboBoxAsync.context.d.ts.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsync.context.hooks.d.ts

@@ -1,12 +1,12 @@
-import { Dispatch, SetStateAction } from 'react';
-export declare function useBKJComboBoxAsyncContextHooks(): [
-    {
-        anchorElement?: HTMLInputElement;
-        dropdownElement?: HTMLUListElement;
-    },
-    {
-        setAnchorElement: Dispatch<SetStateAction<HTMLInputElement | undefined>>;
-        setDropdownElement: Dispatch<SetStateAction<HTMLUListElement | undefined>>;
-    }
-];
+import { Dispatch, SetStateAction } from 'react';
+export declare function useBKJComboBoxAsyncContextHooks(): [
+    {
+        anchorElement?: HTMLInputElement;
+        dropdownElement?: HTMLUListElement;
+    },
+    {
+        setAnchorElement: Dispatch<SetStateAction<HTMLInputElement | undefined>>;
+        setDropdownElement: Dispatch<SetStateAction<HTMLUListElement | undefined>>;
+    }
+];
 //# sourceMappingURL=BKJComboBoxAsync.context.hooks.d.ts.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsync.context.hooks.js

@@ -1,9 +1,9 @@
-import { useMemo, useState } from 'react';
-export function useBKJComboBoxAsyncContextHooks() {
-    const [anchorElement, setAnchorElement] = useState();
-    const [dropdownElement, setDropdownElement] = useState();
-    const values = useMemo(() => ({ anchorElement, dropdownElement }), [anchorElement, dropdownElement]);
-    const setMethods = useMemo(() => ({ setAnchorElement, setDropdownElement }), []);
-    return [values, setMethods];
-}
+import { useMemo, useState } from 'react';
+export function useBKJComboBoxAsyncContextHooks() {
+    const [anchorElement, setAnchorElement] = useState();
+    const [dropdownElement, setDropdownElement] = useState();
+    const values = useMemo(() => ({ anchorElement, dropdownElement }), [anchorElement, dropdownElement]);
+    const setMethods = useMemo(() => ({ setAnchorElement, setDropdownElement }), []);
+    return [values, setMethods];
+}
 //# sourceMappingURL=BKJComboBoxAsync.context.hooks.js.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsync.context.js

@@ -1,186 +1,186 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCombobox } from 'downshift';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { useVirtual } from 'react-virtual';
-import { isNumber } from '../../../common.types.js';
-import { itemToString } from '../BKJComboBoxAsync.utils.js';
-import { useBKJComboBoxAsyncContextHooks } from './BKJComboBoxAsync.context.hooks.js';
-const loadElement = (name) => ({
-    type: 'Loader',
-    id: 'Loader',
-    value: 'Loader',
-    key: 'Loader',
-    name,
-    disabled: true,
-    label: 'Loader',
-});
-const noResultsElement = (name) => ({
-    type: 'NoResults',
-    id: 'No Results',
-    value: 'No Results',
-    key: 'No Results',
-    name,
-    disabled: true,
-    label: 'No Results',
-});
-export const BKJComboBoxAsyncContext = createContext({});
-export const BKJComboBoxAsyncProvider = ({ icon, type, name, value, label, error, action, variant, options: __options__ = [], context, disabled, onChange, children, required, searchKey, placeholder, searchValue, onSearchChange, portalTargetElement, }) => {
-    const { pageInfo, isLoading } = useContext(context);
-    const hasNextPage = pageInfo?.hasNextPage;
-    const [{ anchorElement, dropdownElement }, { setAnchorElement, setDropdownElement }] = useBKJComboBoxAsyncContextHooks();
-    const options = useMemo(() => {
-        let __o__ = [...__options__];
-        if (hasNextPage || isLoading)
-            __o__ = __o__.concat(loadElement(name));
-        if (__o__.length === 0)
-            __o__ = [noResultsElement(name)].concat(__o__);
-        return __o__.map((opts, index) => {
-            return { ...opts, index };
-        });
-    }, [__options__, hasNextPage, isLoading, name]);
-    const parentRef = useRef(null);
-    const rowVirtualizer = useVirtual({
-        size: options.length,
-        parentRef,
-        keyExtractor: (index) => options[index].id,
-    });
-    const { reset, isOpen, openMenu, closeMenu, toggleMenu, selectedItem, getMenuProps, getItemProps, getInputProps, getLabelProps, getComboboxProps, highlightedIndex, setHighlightedIndex, getToggleButtonProps, setInputValue: __downShiftSetInputValue__, } = useCombobox({
-        inputValue: searchValue,
-        itemToString,
-        items: options,
-        initialSelectedItem: value,
-        scrollIntoView: () => void 0,
-        onHighlightedIndexChange: ({ highlightedIndex: __i__ = 0, type }) => {
-            const highlightedItem = options[__i__];
-            let INDEX = __i__;
-            if (highlightedItem) {
-                if (['Group', 'Loader', 'NoResults'].includes(highlightedItem.type)) {
-                    if (type === '__input_keydown_arrow_down__')
-                        INDEX = __i__ + 1;
-                    if (type === '__input_keydown_arrow_up__')
-                        INDEX = __i__ - 1;
-                    if (INDEX > options.length - 1)
-                        INDEX = 0;
-                }
-            }
-            if (isNumber(INDEX) && INDEX >= 0) {
-                rowVirtualizer.scrollToIndex(INDEX);
-            }
-            setHighlightedIndex(INDEX);
-        },
-        onSelectedItemChange: (event) => {
-            const { selectedItem } = event;
-            const nextValue = {
-                ...selectedItem,
-                name,
-                value: selectedItem,
-            };
-            if (searchValue !== '') {
-                __downShiftSetInputValue__('');
-                onSearchChange({
-                    target: {
-                        value: '',
-                        name: searchKey,
-                    },
-                });
-            }
-            if (onChange)
-                onChange({
-                    target: nextValue,
-                });
-            closeMenu();
-            anchorElement?.blur();
-            return void 0;
-        },
-        onIsOpenChange: ({ isOpen: __isOpen__, highlightedIndex: __highlightedIndex__, selectedItem: __selectedItem__, }) => {
-            if (__isOpen__) {
-                if (__selectedItem__) {
-                    if (options.some((option) => {
-                        return option.index === __selectedItem__.index;
-                    }))
-                        rowVirtualizer.scrollToIndex(__selectedItem__.index, { align: 'start' });
-                }
-            }
-            if (!__isOpen__ && searchValue !== '') {
-                __downShiftSetInputValue__('');
-                onSearchChange({
-                    target: {
-                        value: '',
-                        name: searchKey,
-                    },
-                });
-            }
-        },
-    });
-    const handleInputFocus = useCallback(openMenu, [openMenu]);
-    const handleInputKeyDown = useCallback(({ key, nativeEvent }) => {
-        switch (action) {
-            case 'OpenToggle':
-                switch (key) {
-                    case 'Escape':
-                        nativeEvent.preventDownshiftDefault = true;
-                        if (isOpen && searchValue !== '')
-                            onSearchChange({ target: { value: '', name: searchKey } });
-                        if (isOpen && searchValue === '') {
-                            closeMenu();
-                            anchorElement?.blur();
-                        }
-                        break;
-                }
-                break;
-            case 'ClearInputValue': {
-                break;
-            }
-        }
-    }, [action, anchorElement, closeMenu, isOpen, onSearchChange, searchKey, searchValue]);
-    useEffect(() => {
-        if (options.length === 0)
-            setHighlightedIndex(-1);
-        else if (searchValue !== '' && highlightedIndex === -1 && options.length > 0)
-            setHighlightedIndex(0);
-    }, [highlightedIndex, options, searchValue, setHighlightedIndex]);
-    return (_jsx(BKJComboBoxAsyncContext.Provider, Object.assign({ value: {
-            type,
-            name,
-            label,
-            reset,
-            value,
-            error,
-            action,
-            isOpen,
-            options,
-            context,
-            variant,
-            onChange,
-            required,
-            disabled,
-            openMenu,
-            parentRef,
-            searchKey,
-            closeMenu,
-            toggleMenu,
-            searchValue,
-            placeholder,
-            selectedItem,
-            getItemProps,
-            getMenuProps,
-            getInputProps,
-            getLabelProps,
-            anchorElement,
-            rowVirtualizer,
-            onSearchChange,
-            dropdownElement,
-            setAnchorElement,
-            highlightedIndex,
-            getComboboxProps,
-            setDropdownElement,
-            portalTargetElement,
-            setHighlightedIndex,
-            getToggleButtonProps,
-            onInputFocus: handleInputFocus,
-            onInputKeyDown: handleInputKeyDown,
-            leftIconProps: icon ? { iconName: icon } : undefined,
-        } }, { children: children }), void 0));
-};
-export const useBKJComboBoxAsyncContext = () => useContext(BKJComboBoxAsyncContext);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCombobox } from 'downshift';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { useVirtual } from 'react-virtual';
+import { isNumber } from '../../../common.types.js';
+import { itemToString } from '../BKJComboBoxAsync.utils.js';
+import { useBKJComboBoxAsyncContextHooks } from './BKJComboBoxAsync.context.hooks.js';
+const loadElement = (name) => ({
+    type: 'Loader',
+    id: 'Loader',
+    value: 'Loader',
+    key: 'Loader',
+    name,
+    disabled: true,
+    label: 'Loader',
+});
+const noResultsElement = (name) => ({
+    type: 'NoResults',
+    id: 'No Results',
+    value: 'No Results',
+    key: 'No Results',
+    name,
+    disabled: true,
+    label: 'No Results',
+});
+export const BKJComboBoxAsyncContext = createContext({});
+export const BKJComboBoxAsyncProvider = ({ icon, type, name, value, label, error, action, variant, options: __options__ = [], context, disabled, onChange, children, required, searchKey, placeholder, searchValue, onSearchChange, portalTargetElement, }) => {
+    const { pageInfo, isLoading } = useContext(context);
+    const hasNextPage = pageInfo?.hasNextPage;
+    const [{ anchorElement, dropdownElement }, { setAnchorElement, setDropdownElement }] = useBKJComboBoxAsyncContextHooks();
+    const options = useMemo(() => {
+        let __o__ = [...__options__];
+        if (hasNextPage || isLoading)
+            __o__ = __o__.concat(loadElement(name));
+        if (__o__.length === 0)
+            __o__ = [noResultsElement(name)].concat(__o__);
+        return __o__.map((opts, index) => {
+            return { ...opts, index };
+        });
+    }, [__options__, hasNextPage, isLoading, name]);
+    const parentRef = useRef(null);
+    const rowVirtualizer = useVirtual({
+        size: options.length,
+        parentRef,
+        keyExtractor: (index) => options[index].id,
+    });
+    const { reset, isOpen, openMenu, closeMenu, toggleMenu, selectedItem, getMenuProps, getItemProps, getInputProps, getLabelProps, getComboboxProps, highlightedIndex, setHighlightedIndex, getToggleButtonProps, setInputValue: __downShiftSetInputValue__, } = useCombobox({
+        inputValue: searchValue,
+        itemToString,
+        items: options,
+        initialSelectedItem: value,
+        scrollIntoView: () => void 0,
+        onHighlightedIndexChange: ({ highlightedIndex: __i__ = 0, type }) => {
+            const highlightedItem = options[__i__];
+            let INDEX = __i__;
+            if (highlightedItem) {
+                if (['Group', 'Loader', 'NoResults'].includes(highlightedItem.type)) {
+                    if (type === '__input_keydown_arrow_down__')
+                        INDEX = __i__ + 1;
+                    if (type === '__input_keydown_arrow_up__')
+                        INDEX = __i__ - 1;
+                    if (INDEX > options.length - 1)
+                        INDEX = 0;
+                }
+            }
+            if (isNumber(INDEX) && INDEX >= 0) {
+                rowVirtualizer.scrollToIndex(INDEX);
+            }
+            setHighlightedIndex(INDEX);
+        },
+        onSelectedItemChange: (event) => {
+            const { selectedItem } = event;
+            const nextValue = {
+                ...selectedItem,
+                name,
+                value: selectedItem,
+            };
+            if (searchValue !== '') {
+                __downShiftSetInputValue__('');
+                onSearchChange({
+                    target: {
+                        value: '',
+                        name: searchKey,
+                    },
+                });
+            }
+            if (onChange)
+                onChange({
+                    target: nextValue,
+                });
+            closeMenu();
+            anchorElement?.blur();
+            return void 0;
+        },
+        onIsOpenChange: ({ isOpen: __isOpen__, highlightedIndex: __highlightedIndex__, selectedItem: __selectedItem__, }) => {
+            if (__isOpen__) {
+                if (__selectedItem__) {
+                    if (options.some((option) => {
+                        return option.index === __selectedItem__.index;
+                    }))
+                        rowVirtualizer.scrollToIndex(__selectedItem__.index, { align: 'start' });
+                }
+            }
+            if (!__isOpen__ && searchValue !== '') {
+                __downShiftSetInputValue__('');
+                onSearchChange({
+                    target: {
+                        value: '',
+                        name: searchKey,
+                    },
+                });
+            }
+        },
+    });
+    const handleInputFocus = useCallback(openMenu, [openMenu]);
+    const handleInputKeyDown = useCallback(({ key, nativeEvent }) => {
+        switch (action) {
+            case 'OpenToggle':
+                switch (key) {
+                    case 'Escape':
+                        nativeEvent.preventDownshiftDefault = true;
+                        if (isOpen && searchValue !== '')
+                            onSearchChange({ target: { value: '', name: searchKey } });
+                        if (isOpen && searchValue === '') {
+                            closeMenu();
+                            anchorElement?.blur();
+                        }
+                        break;
+                }
+                break;
+            case 'ClearInputValue': {
+                break;
+            }
+        }
+    }, [action, anchorElement, closeMenu, isOpen, onSearchChange, searchKey, searchValue]);
+    useEffect(() => {
+        if (options.length === 0)
+            setHighlightedIndex(-1);
+        else if (searchValue !== '' && highlightedIndex === -1 && options.length > 0)
+            setHighlightedIndex(0);
+    }, [highlightedIndex, options, searchValue, setHighlightedIndex]);
+    return (_jsx(BKJComboBoxAsyncContext.Provider, Object.assign({ value: {
+            type,
+            name,
+            label,
+            reset,
+            value,
+            error,
+            action,
+            isOpen,
+            options,
+            context,
+            variant,
+            onChange,
+            required,
+            disabled,
+            openMenu,
+            parentRef,
+            searchKey,
+            closeMenu,
+            toggleMenu,
+            searchValue,
+            placeholder,
+            selectedItem,
+            getItemProps,
+            getMenuProps,
+            getInputProps,
+            getLabelProps,
+            anchorElement,
+            rowVirtualizer,
+            onSearchChange,
+            dropdownElement,
+            setAnchorElement,
+            highlightedIndex,
+            getComboboxProps,
+            setDropdownElement,
+            portalTargetElement,
+            setHighlightedIndex,
+            getToggleButtonProps,
+            onInputFocus: handleInputFocus,
+            onInputKeyDown: handleInputKeyDown,
+            leftIconProps: icon ? { iconName: icon } : undefined,
+        } }, { children: children }), void 0));
+};
+export const useBKJComboBoxAsyncContext = () => useContext(BKJComboBoxAsyncContext);
 //# sourceMappingURL=BKJComboBoxAsync.context.js.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsyncInput.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { IBKJComboBoxAsyncProps } from '../BKJComboBoxAsync.types.js';
-export declare const BKJComboBoxAsyncInput: import("react").ForwardRefExoticComponent<{
-    autoComplete?: "on" | "off" | undefined;
-    className?: string | undefined;
-    css?: string | undefined;
-    overrides?: IBKJComboBoxAsyncProps['overrides'];
-} & import("react").RefAttributes<HTMLInputElement>>;
+/// <reference types="react" />
+import { IBKJComboBoxAsyncProps } from '../BKJComboBoxAsync.types.js';
+export declare const BKJComboBoxAsyncInput: import("react").ForwardRefExoticComponent<{
+    autoComplete?: "on" | "off" | undefined;
+    className?: string | undefined;
+    css?: string | undefined;
+    overrides?: IBKJComboBoxAsyncProps['overrides'];
+} & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=BKJComboBoxAsyncInput.d.ts.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsyncInput.js

@@ -1,31 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { mergeRefs } from '../../BKJSelect/utils/mergeRefs.js';
-import { BKJTextInput } from '../../BKJTextInput/index.js';
-import { useRightIconProps } from '../BKJComboBoxAsync.utils.js';
-import { useBKJComboBoxAsyncContext } from './BKJComboBoxAsync.context.js';
-const variantMap = {
-    Search: 'ComboBoxSeamlessRounded',
-};
-export const BKJComboBoxAsyncInput = forwardRef(({ autoComplete, className, css, overrides = [], ...rest }, ref) => {
-    const { label, variant = 'Search', action, error, required, getComboboxProps, setAnchorElement, getInputProps, searchValue, getLabelProps, isOpen, onInputFocus, onInputKeyDown, placeholder, selectedItem, searchKey, leftIconProps, disabled, onSearchChange, } = useBKJComboBoxAsyncContext();
-    const rightIconProps = useRightIconProps(action, disabled);
-    const inputProps = getInputProps({
-        ...rest,
-        onKeyDown: onInputKeyDown,
-        value: !isOpen ? selectedItem?.label || '' : searchValue,
-        onFocus: onInputFocus,
-        ref,
-        name: searchKey,
-        onChange: onSearchChange,
-        required,
-        label,
-        disabled,
-        placeholder,
-    });
-    if (overrides.includes('NoInitialResults')) {
-        return (_jsx(BKJTextInput, Object.assign({ isOpen: typeof searchValue === 'string' && searchValue === '' ? false : isOpen, labelProps: getLabelProps(), fieldSetProps: getComboboxProps(), variant: variantMap[variant] }, inputProps, { className: className, css: css, rightIconProps: rightIconProps, leftIconProps: leftIconProps, error: error, autoComplete: autoComplete, ref: mergeRefs([setAnchorElement, inputProps.ref]) }), void 0));
-    }
-    return (_jsx(BKJTextInput, Object.assign({ isOpen: isOpen, labelProps: getLabelProps(), fieldSetProps: getComboboxProps(), variant: variantMap[variant] }, inputProps, { className: className, css: css, rightIconProps: rightIconProps, leftIconProps: leftIconProps, error: error, autoComplete: autoComplete, ref: mergeRefs([setAnchorElement, inputProps.ref]) }), void 0));
-});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { mergeRefs } from '../../BKJSelect/utils/mergeRefs.js';
+import { BKJTextInput } from '../../BKJTextInput/index.js';
+import { useRightIconProps } from '../BKJComboBoxAsync.utils.js';
+import { useBKJComboBoxAsyncContext } from './BKJComboBoxAsync.context.js';
+const variantMap = {
+    Search: 'ComboBoxSeamlessRounded',
+};
+export const BKJComboBoxAsyncInput = forwardRef(({ autoComplete, className, css, overrides = [], ...rest }, ref) => {
+    const { label, variant = 'Search', action, error, required, getComboboxProps, setAnchorElement, getInputProps, searchValue, getLabelProps, isOpen, onInputFocus, onInputKeyDown, placeholder, selectedItem, searchKey, leftIconProps, disabled, onSearchChange, } = useBKJComboBoxAsyncContext();
+    const rightIconProps = useRightIconProps(action, disabled);
+    const inputProps = getInputProps({
+        ...rest,
+        onKeyDown: onInputKeyDown,
+        value: !isOpen ? selectedItem?.label || '' : searchValue,
+        onFocus: onInputFocus,
+        ref,
+        name: searchKey,
+        onChange: onSearchChange,
+        required,
+        label,
+        disabled,
+        placeholder,
+    });
+    if (overrides.includes('NoInitialResults')) {
+        return (_jsx(BKJTextInput, Object.assign({ isOpen: typeof searchValue === 'string' && searchValue === '' ? false : isOpen, labelProps: getLabelProps(), fieldSetProps: getComboboxProps(), variant: variantMap[variant] }, inputProps, { className: className, css: css, rightIconProps: rightIconProps, leftIconProps: leftIconProps, error: error, autoComplete: autoComplete, ref: mergeRefs([setAnchorElement, inputProps.ref]) }), void 0));
+    }
+    return (_jsx(BKJTextInput, Object.assign({ isOpen: isOpen, labelProps: getLabelProps(), fieldSetProps: getComboboxProps(), variant: variantMap[variant] }, inputProps, { className: className, css: css, rightIconProps: rightIconProps, leftIconProps: leftIconProps, error: error, autoComplete: autoComplete, ref: mergeRefs([setAnchorElement, inputProps.ref]) }), void 0));
+});
 //# sourceMappingURL=BKJComboBoxAsyncInput.js.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsyncItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IBKJComboBoxAsyncOption } from '../BKJComboBoxAsync.types.js';
-export declare const BKJComboBoxAsyncItem: import("react").ForwardRefExoticComponent<IBKJComboBoxAsyncOption & import("react").RefAttributes<HTMLLIElement>>;
+/// <reference types="react" />
+import { IBKJComboBoxAsyncOption } from '../BKJComboBoxAsync.types.js';
+export declare const BKJComboBoxAsyncItem: import("react").ForwardRefExoticComponent<IBKJComboBoxAsyncOption & import("react").RefAttributes<HTMLLIElement>>;
 //# sourceMappingURL=BKJComboBoxAsyncItem.d.ts.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsyncItem.js

@@ -1,22 +1,22 @@
-import { createElement as _createElement } from "react";
-import { forwardRef } from 'react';
-import { BKJListItem } from '../../BKJListItem/index.js';
-import { useBKJComboBoxAsyncContext } from './BKJComboBoxAsync.context.js';
-export const BKJComboBoxAsyncItem = forwardRef((props, ref) => {
-    const { value, index, label, style, disabled, type } = props;
-    const { getItemProps, selectedItem, highlightedIndex, name } = useBKJComboBoxAsyncContext();
-    const itemProps = getItemProps({
-        item: props,
-        isSelected: selectedItem?.value === value,
-        index,
-        value,
-        label,
-        checked: selectedItem?.value === value,
-        disabled,
-        style,
-        name,
-        ref,
-    });
-    return (_createElement(BKJListItem, Object.assign({ variant: "SpaceBetween", isTargeted: highlightedIndex === index }, itemProps, { selected: [selectedItem?.value], ref: ref, key: `${value}`, type: type })));
-});
+import { createElement as _createElement } from "react";
+import { forwardRef } from 'react';
+import { BKJListItem } from '../../BKJListItem/index.js';
+import { useBKJComboBoxAsyncContext } from './BKJComboBoxAsync.context.js';
+export const BKJComboBoxAsyncItem = forwardRef((props, ref) => {
+    const { value, index, label, style, disabled, type } = props;
+    const { getItemProps, selectedItem, highlightedIndex, name } = useBKJComboBoxAsyncContext();
+    const itemProps = getItemProps({
+        item: props,
+        isSelected: selectedItem?.value === value,
+        index,
+        value,
+        label,
+        checked: selectedItem?.value === value,
+        disabled,
+        style,
+        name,
+        ref,
+    });
+    return (_createElement(BKJListItem, Object.assign({ variant: "SpaceBetween", isTargeted: highlightedIndex === index }, itemProps, { selected: [selectedItem?.value], ref: ref, key: `${value}`, type: type })));
+});
 //# sourceMappingURL=BKJComboBoxAsyncItem.js.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsyncOptions.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { IBKJComboBoxAsyncProps } from '../BKJComboBoxAsync.types.js';
-export declare const BKJComboBoxOptions: FC<{
-    overrides: IBKJComboBoxAsyncProps['overrides'];
-}>;
+import { FC } from 'react';
+import { IBKJComboBoxAsyncProps } from '../BKJComboBoxAsync.types.js';
+export declare const BKJComboBoxOptions: FC<{
+    overrides: IBKJComboBoxAsyncProps['overrides'];
+}>;
 //# sourceMappingURL=BKJComboBoxAsyncOptions.d.ts.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsyncOptions.js

@@ -1,26 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment, useMemo } from 'react';
-import { usePopper } from 'react-popper';
-import { BKJDropdown } from '../../BKJDropdown/index.js';
-import { mergeRefs } from '../../BKJSelect/utils/mergeRefs.js';
-import { Portal } from '../../Portal/Portal.js';
-import { getPopperOptions, optionsVariant } from '../BKJComboBoxAsync.utils.js';
-import { useBKJComboBoxAsyncContext } from './BKJComboBoxAsync.context.js';
-import { BKJComboBoxAsyncOptionsMapper } from './BKJComboBoxAsyncOptionsMapper.js';
-const variantMap = {
-    Search: 'SeamlessRounded',
-};
-export const BKJComboBoxOptions = ({ overrides = [], }) => {
-    const { error, isOpen, parentRef, getMenuProps, anchorElement, dropdownElement, setDropdownElement, portalTargetElement, searchValue, } = useBKJComboBoxAsyncContext();
-    const popperOpts = useMemo(getPopperOptions, []);
-    const { styles } = usePopper(anchorElement, dropdownElement, popperOpts);
-    if (overrides.includes('NoInitialResults')) {
-        if (typeof searchValue === 'string' && searchValue === '')
-            return _jsx(Fragment, {}, void 0);
-    }
-    return (_jsx(Portal, Object.assign({ targetElement: portalTargetElement }, { children: _jsx(BKJDropdown, Object.assign({ "$isOpen": isOpen, "$dropdownVariant": variantMap[optionsVariant], error: error }, getMenuProps({
-            ref: mergeRefs([parentRef, setDropdownElement]),
-            style: styles['popper'],
-        }), { children: isOpen && _jsx(BKJComboBoxAsyncOptionsMapper, { overrides: overrides }, void 0) }), void 0) }), void 0));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useMemo } from 'react';
+import { usePopper } from 'react-popper';
+import { BKJDropdown } from '../../BKJDropdown/index.js';
+import { mergeRefs } from '../../BKJSelect/utils/mergeRefs.js';
+import { Portal } from '../../Portal/Portal.js';
+import { getPopperOptions, optionsVariant } from '../BKJComboBoxAsync.utils.js';
+import { useBKJComboBoxAsyncContext } from './BKJComboBoxAsync.context.js';
+import { BKJComboBoxAsyncOptionsMapper } from './BKJComboBoxAsyncOptionsMapper.js';
+const variantMap = {
+    Search: 'SeamlessRounded',
+};
+export const BKJComboBoxOptions = ({ overrides = [], }) => {
+    const { error, isOpen, parentRef, getMenuProps, anchorElement, dropdownElement, setDropdownElement, portalTargetElement, searchValue, } = useBKJComboBoxAsyncContext();
+    const popperOpts = useMemo(getPopperOptions, []);
+    const { styles } = usePopper(anchorElement, dropdownElement, popperOpts);
+    if (overrides.includes('NoInitialResults')) {
+        if (typeof searchValue === 'string' && searchValue === '')
+            return _jsx(Fragment, {}, void 0);
+    }
+    return (_jsx(Portal, Object.assign({ targetElement: portalTargetElement }, { children: _jsx(BKJDropdown, Object.assign({ "$isOpen": isOpen, "$dropdownVariant": variantMap[optionsVariant], error: error }, getMenuProps({
+            ref: mergeRefs([parentRef, setDropdownElement]),
+            style: styles['popper'],
+        }), { children: isOpen && _jsx(BKJComboBoxAsyncOptionsMapper, { overrides: overrides }, void 0) }), void 0) }), void 0));
+};
 //# sourceMappingURL=BKJComboBoxAsyncOptions.js.map

package/lib/components/BKJComboBoxAsync/src/BKJComboBoxAsyncOptionsMapper.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { IBKJComboBoxAsyncProps } from '../BKJComboBoxAsync.types.js';
-export declare const BKJComboBoxAsyncOptionsMapper: FC<{
-    overrides?: IBKJComboBoxAsyncProps['overrides'];
-}>;
+import { FC } from 'react';
+import { IBKJComboBoxAsyncProps } from '../BKJComboBoxAsync.types.js';
+export declare const BKJComboBoxAsyncOptionsMapper: FC<{
+    overrides?: IBKJComboBoxAsyncProps['overrides'];
+}>;
 //# sourceMappingURL=BKJComboBoxAsyncOptionsMapper.d.ts.map