@bookjane2/bookjane-design-library 7.2.8 → 7.2.9

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

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { IBKJComboBoxContextValue, IBKJComboBoxProviderProps } from '../BKJComboBox.types.js';
-export declare const BKJComboBoxContext: import("react").Context<IBKJComboBoxContextValue>;
-export declare const BKJComboBoxProvider: FC<IBKJComboBoxProviderProps>;
-export declare const useBKJComboBoxContext: () => IBKJComboBoxContextValue;
+import { FC } from 'react';
+import { IBKJComboBoxContextValue, IBKJComboBoxProviderProps } from '../BKJComboBox.types.js';
+export declare const BKJComboBoxContext: import("react").Context<IBKJComboBoxContextValue>;
+export declare const BKJComboBoxProvider: FC<IBKJComboBoxProviderProps>;
+export declare const useBKJComboBoxContext: () => IBKJComboBoxContextValue;
 //# sourceMappingURL=BKJComboBox.context.d.ts.map

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

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

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

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

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

@@ -1,199 +1,199 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCombobox } from 'downshift';
-import { createContext, useCallback, useContext, useEffect, useRef } from 'react';
-import { useVirtual } from 'react-virtual';
-import { isNumber } from '../../../common.types.js';
-import { filterPredicateMap as filterFnMap, itemToString } from '../BKJComboBox.utils.js';
-import { useBKJComboBoxContextHooks } from './BKJComboBox.context.hooks.js';
-export const BKJComboBoxContext = createContext({});
-function extractInitialSelectedItem({ value, options, type }) {
-    if (type === 'Multiple')
-        return undefined;
-    if (value.length === 1) {
-        return options.find((option) => String(option.value) === String(value[0]));
-    }
-    return undefined;
-}
-export const BKJComboBoxProvider = ({ options: __options__, label, type, variant, placeholder, filter, onChange, name, value, error, action, portalTargetElement, leftIconProps, disabled, required, children, overrides, onIsOpenChange: __onIsOpenChange__, }) => {
-    const [{ inputValue, anchorElement, dropdownElement }, { setInputValue, setAnchorElement, setDropdownElement },] = useBKJComboBoxContextHooks();
-    const isDropdownReverse = dropdownElement?.style?.top === 'auto' && dropdownElement?.style?.bottom === '0px';
-    const isLabelValueShown = !overrides.includes('HIDE_VALUE_LABEL');
-    const filterFn = filterFnMap[filter];
-    const options = filterFn(inputValue, __options__);
-    const parentRef = useRef(null);
-    const estimateSize = useCallback(() => 38, []);
-    const rowVirtualizer = useVirtual({
-        size: options.length,
-        parentRef,
-        estimateSize,
-        overscan: 2,
-        keyExtractor: (index) => options[index].id,
-    });
-    const { reset, isOpen, openMenu, closeMenu, toggleMenu, selectedItem, selectItem, getMenuProps, getItemProps, getInputProps, getLabelProps, getComboboxProps, highlightedIndex, setHighlightedIndex, getToggleButtonProps, setInputValue: __downShiftSetInputValue__, } = useCombobox({
-        inputValue,
-        itemToString,
-        items: options,
-        initialSelectedItem: extractInitialSelectedItem({
-            value,
-            options,
-            type,
-        }),
-        scrollIntoView: () => void 0,
-        onInputValueChange: ({ inputValue: __inputValue__, isOpen: __isOpen__ }) => {
-            if (__isOpen__)
-                setInputValue(__inputValue__ || '');
-            if (!isLabelValueShown) {
-                if (!__isOpen__)
-                    setInputValue('');
-            }
-        },
-        onHighlightedIndexChange: ({ highlightedIndex: __i__ }) => {
-            if (isNumber(__i__) && __i__ >= 0)
-                rowVirtualizer.scrollToIndex(__i__);
-        },
-        onSelectedItemChange: (event) => {
-            switch (type) {
-                case 'Multiple': {
-                    const { selectedItem } = event;
-                    const selectedItemValue = String(selectedItem?.value || '');
-                    const target = {
-                        ...selectedItem,
-                        name,
-                        value: value.includes(selectedItemValue)
-                            ? value.filter((strValue) => strValue !== selectedItemValue)
-                            : [...value, selectedItemValue],
-                    };
-                    if (isLabelValueShown)
-                        __downShiftSetInputValue__(target?.label || '');
-                    else
-                        __downShiftSetInputValue__('');
-                    if (onChange)
-                        onChange({ target });
-                    return void 0;
-                }
-                case 'Single': {
-                    const { selectedItem } = event;
-                    const target = {
-                        ...selectedItem,
-                        name,
-                        value: selectedItem?.value ? [selectedItem?.value] : undefined,
-                    };
-                    if (isLabelValueShown)
-                        __downShiftSetInputValue__(target?.label || '');
-                    else
-                        __downShiftSetInputValue__('');
-                    if (onChange)
-                        onChange({ target });
-                    closeMenu();
-                    anchorElement?.blur();
-                    return void 0;
-                }
-            }
-        },
-        onIsOpenChange: ({ isOpen: __isOpen__, highlightedIndex: __highlightedIndex__ }) => {
-            if (__onIsOpenChange__)
-                __onIsOpenChange__({ isOpen: !!__isOpen__, highlightedIndex: __highlightedIndex__ });
-            if (__isOpen__) {
-                if (isNumber(__highlightedIndex__) && __highlightedIndex__ >= 0) {
-                    rowVirtualizer.scrollToIndex(__highlightedIndex__, { align: 'auto' });
-                }
-            }
-            __downShiftSetInputValue__('');
-        },
-    });
-    const handleInputFocus = useCallback(openMenu, [openMenu]);
-    const handleInputKeyDown = useCallback(({ key, nativeEvent }) => {
-        switch (action) {
-            case 'OpenToggle':
-                switch (key) {
-                    case 'Escape':
-                        nativeEvent.preventDownshiftDefault = true;
-                        if (isOpen && inputValue !== '')
-                            setInputValue('');
-                        if (isOpen && inputValue === '') {
-                            closeMenu();
-                            anchorElement?.blur();
-                        }
-                        break;
-                }
-                break;
-            case 'ClearInputValue': {
-                break;
-            }
-        }
-    }, [action, anchorElement, closeMenu, inputValue, isOpen, setInputValue]);
-    const handleMultiSelectClick = useCallback((event) => {
-        if (type === 'Multiple') {
-            const selectedItem = options.find((option) => option.value === event.target.value);
-            const selectedItemValue = String(selectedItem?.value || '');
-            const target = {
-                ...selectedItem,
-                name,
-                value: value.includes(selectedItemValue)
-                    ? value.filter((strValue) => strValue !== selectedItemValue)
-                    : [...value, selectedItemValue],
-            };
-            if (isLabelValueShown)
-                __downShiftSetInputValue__(target?.label || '');
-            else
-                __downShiftSetInputValue__('');
-            if (onChange)
-                onChange({ target });
-        }
-    }, [__downShiftSetInputValue__, isLabelValueShown, name, onChange, options, type, value]);
-    const handleSelectClear = useCallback(() => {
-        selectItem(undefined);
-        onChange({ target: { name, value: [] } });
-    }, [name, onChange, selectItem]);
-    useEffect(() => {
-        if (options.length === 0)
-            setHighlightedIndex(-1);
-        else if (inputValue !== '' && highlightedIndex === -1 && options.length > 0)
-            setHighlightedIndex(0);
-    }, [highlightedIndex, inputValue, options.length, setHighlightedIndex]);
-    return (_jsx(BKJComboBoxContext.Provider, Object.assign({ value: {
-            type,
-            name,
-            label,
-            reset,
-            value,
-            error,
-            action,
-            isOpen,
-            filter,
-            options,
-            variant,
-            onChange,
-            required,
-            disabled,
-            openMenu,
-            parentRef,
-            closeMenu,
-            inputValue,
-            toggleMenu,
-            placeholder,
-            selectedItem,
-            getItemProps,
-            getMenuProps,
-            getInputProps,
-            getLabelProps,
-            anchorElement,
-            leftIconProps,
-            rowVirtualizer,
-            dropdownElement,
-            setAnchorElement,
-            highlightedIndex,
-            getComboboxProps,
-            isDropdownReverse,
-            setDropdownElement,
-            portalTargetElement,
-            setHighlightedIndex,
-            getToggleButtonProps,
-            handleMultiSelectClick,
-            onInputFocus: handleInputFocus,
-            onInputKeyDown: handleInputKeyDown,
-            onSelectedClear: handleSelectClear,
-        } }, { children: children }), void 0));
-};
-export const useBKJComboBoxContext = () => useContext(BKJComboBoxContext);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCombobox } from 'downshift';
+import { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+import { useVirtual } from 'react-virtual';
+import { isNumber } from '../../../common.types.js';
+import { filterPredicateMap as filterFnMap, itemToString } from '../BKJComboBox.utils.js';
+import { useBKJComboBoxContextHooks } from './BKJComboBox.context.hooks.js';
+export const BKJComboBoxContext = createContext({});
+function extractInitialSelectedItem({ value, options, type }) {
+    if (type === 'Multiple')
+        return undefined;
+    if (value.length === 1) {
+        return options.find((option) => String(option.value) === String(value[0]));
+    }
+    return undefined;
+}
+export const BKJComboBoxProvider = ({ options: __options__, label, type, variant, placeholder, filter, onChange, name, value, error, action, portalTargetElement, leftIconProps, disabled, required, children, overrides, onIsOpenChange: __onIsOpenChange__, }) => {
+    const [{ inputValue, anchorElement, dropdownElement }, { setInputValue, setAnchorElement, setDropdownElement },] = useBKJComboBoxContextHooks();
+    const isDropdownReverse = dropdownElement?.style?.top === 'auto' && dropdownElement?.style?.bottom === '0px';
+    const isLabelValueShown = !overrides.includes('HIDE_VALUE_LABEL');
+    const filterFn = filterFnMap[filter];
+    const options = filterFn(inputValue, __options__);
+    const parentRef = useRef(null);
+    const estimateSize = useCallback(() => 38, []);
+    const rowVirtualizer = useVirtual({
+        size: options.length,
+        parentRef,
+        estimateSize,
+        overscan: 2,
+        keyExtractor: (index) => options[index].id,
+    });
+    const { reset, isOpen, openMenu, closeMenu, toggleMenu, selectedItem, selectItem, getMenuProps, getItemProps, getInputProps, getLabelProps, getComboboxProps, highlightedIndex, setHighlightedIndex, getToggleButtonProps, setInputValue: __downShiftSetInputValue__, } = useCombobox({
+        inputValue,
+        itemToString,
+        items: options,
+        initialSelectedItem: extractInitialSelectedItem({
+            value,
+            options,
+            type,
+        }),
+        scrollIntoView: () => void 0,
+        onInputValueChange: ({ inputValue: __inputValue__, isOpen: __isOpen__ }) => {
+            if (__isOpen__)
+                setInputValue(__inputValue__ || '');
+            if (!isLabelValueShown) {
+                if (!__isOpen__)
+                    setInputValue('');
+            }
+        },
+        onHighlightedIndexChange: ({ highlightedIndex: __i__ }) => {
+            if (isNumber(__i__) && __i__ >= 0)
+                rowVirtualizer.scrollToIndex(__i__);
+        },
+        onSelectedItemChange: (event) => {
+            switch (type) {
+                case 'Multiple': {
+                    const { selectedItem } = event;
+                    const selectedItemValue = String(selectedItem?.value || '');
+                    const target = {
+                        ...selectedItem,
+                        name,
+                        value: value.includes(selectedItemValue)
+                            ? value.filter((strValue) => strValue !== selectedItemValue)
+                            : [...value, selectedItemValue],
+                    };
+                    if (isLabelValueShown)
+                        __downShiftSetInputValue__(target?.label || '');
+                    else
+                        __downShiftSetInputValue__('');
+                    if (onChange)
+                        onChange({ target });
+                    return void 0;
+                }
+                case 'Single': {
+                    const { selectedItem } = event;
+                    const target = {
+                        ...selectedItem,
+                        name,
+                        value: selectedItem?.value ? [selectedItem?.value] : undefined,
+                    };
+                    if (isLabelValueShown)
+                        __downShiftSetInputValue__(target?.label || '');
+                    else
+                        __downShiftSetInputValue__('');
+                    if (onChange)
+                        onChange({ target });
+                    closeMenu();
+                    anchorElement?.blur();
+                    return void 0;
+                }
+            }
+        },
+        onIsOpenChange: ({ isOpen: __isOpen__, highlightedIndex: __highlightedIndex__ }) => {
+            if (__onIsOpenChange__)
+                __onIsOpenChange__({ isOpen: !!__isOpen__, highlightedIndex: __highlightedIndex__ });
+            if (__isOpen__) {
+                if (isNumber(__highlightedIndex__) && __highlightedIndex__ >= 0) {
+                    rowVirtualizer.scrollToIndex(__highlightedIndex__, { align: 'auto' });
+                }
+            }
+            __downShiftSetInputValue__('');
+        },
+    });
+    const handleInputFocus = useCallback(openMenu, [openMenu]);
+    const handleInputKeyDown = useCallback(({ key, nativeEvent }) => {
+        switch (action) {
+            case 'OpenToggle':
+                switch (key) {
+                    case 'Escape':
+                        nativeEvent.preventDownshiftDefault = true;
+                        if (isOpen && inputValue !== '')
+                            setInputValue('');
+                        if (isOpen && inputValue === '') {
+                            closeMenu();
+                            anchorElement?.blur();
+                        }
+                        break;
+                }
+                break;
+            case 'ClearInputValue': {
+                break;
+            }
+        }
+    }, [action, anchorElement, closeMenu, inputValue, isOpen, setInputValue]);
+    const handleMultiSelectClick = useCallback((event) => {
+        if (type === 'Multiple') {
+            const selectedItem = options.find((option) => option.value === event.target.value);
+            const selectedItemValue = String(selectedItem?.value || '');
+            const target = {
+                ...selectedItem,
+                name,
+                value: value.includes(selectedItemValue)
+                    ? value.filter((strValue) => strValue !== selectedItemValue)
+                    : [...value, selectedItemValue],
+            };
+            if (isLabelValueShown)
+                __downShiftSetInputValue__(target?.label || '');
+            else
+                __downShiftSetInputValue__('');
+            if (onChange)
+                onChange({ target });
+        }
+    }, [__downShiftSetInputValue__, isLabelValueShown, name, onChange, options, type, value]);
+    const handleSelectClear = useCallback(() => {
+        selectItem(undefined);
+        onChange({ target: { name, value: [] } });
+    }, [name, onChange, selectItem]);
+    useEffect(() => {
+        if (options.length === 0)
+            setHighlightedIndex(-1);
+        else if (inputValue !== '' && highlightedIndex === -1 && options.length > 0)
+            setHighlightedIndex(0);
+    }, [highlightedIndex, inputValue, options.length, setHighlightedIndex]);
+    return (_jsx(BKJComboBoxContext.Provider, Object.assign({ value: {
+            type,
+            name,
+            label,
+            reset,
+            value,
+            error,
+            action,
+            isOpen,
+            filter,
+            options,
+            variant,
+            onChange,
+            required,
+            disabled,
+            openMenu,
+            parentRef,
+            closeMenu,
+            inputValue,
+            toggleMenu,
+            placeholder,
+            selectedItem,
+            getItemProps,
+            getMenuProps,
+            getInputProps,
+            getLabelProps,
+            anchorElement,
+            leftIconProps,
+            rowVirtualizer,
+            dropdownElement,
+            setAnchorElement,
+            highlightedIndex,
+            getComboboxProps,
+            isDropdownReverse,
+            setDropdownElement,
+            portalTargetElement,
+            setHighlightedIndex,
+            getToggleButtonProps,
+            handleMultiSelectClick,
+            onInputFocus: handleInputFocus,
+            onInputKeyDown: handleInputKeyDown,
+            onSelectedClear: handleSelectClear,
+        } }, { children: children }), void 0));
+};
+export const useBKJComboBoxContext = () => useContext(BKJComboBoxContext);
 //# sourceMappingURL=BKJComboBox.context.js.map

package/lib/components/BKJComboBox/src/BKJComboBoxInput.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
-import { IBKJComboBoxPropsOverrides } from '../BKJComboBox.types.js';
-export declare const BKJComboBoxInput: FC<{
-    className?: string;
-    autoComplete?: 'on' | 'off';
-    overrides: IBKJComboBoxPropsOverrides[];
-}>;
+import { FC } from 'react';
+import { IBKJComboBoxPropsOverrides } from '../BKJComboBox.types.js';
+export declare const BKJComboBoxInput: FC<{
+    className?: string;
+    autoComplete?: 'on' | 'off';
+    overrides: IBKJComboBoxPropsOverrides[];
+}>;
 //# sourceMappingURL=BKJComboBoxInput.d.ts.map

package/lib/components/BKJComboBox/src/BKJComboBoxInput.js

@@ -1,23 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BKJTextInput } from '../../BKJTextInput/index.js';
-import { useRightIconProps } from '../BKJComboBox.utils.js';
-import { useBKJComboBoxContext } from './BKJComboBox.context.js';
-export const BKJComboBoxInput = ({ className, autoComplete, overrides, ...rest }) => {
-    const { label, variant = 'ComboBoxSeamlessRounded', action, error, getComboboxProps, setAnchorElement, getInputProps, inputValue, getLabelProps, isOpen, onInputFocus, onInputKeyDown, selectedItem, name, leftIconProps, disabled, placeholder, required, isDropdownReverse, } = useBKJComboBoxContext();
-    const isLabelValueHidden = overrides.includes('HIDE_VALUE_LABEL');
-    const rightIconProps = useRightIconProps(action, disabled);
-    const inputProps = getInputProps({
-        ...rest,
-        onKeyDown: onInputKeyDown,
-        value: !isOpen && !isLabelValueHidden ? selectedItem?.label || '' : inputValue,
-        onFocus: onInputFocus,
-        ref: setAnchorElement,
-        placeholder,
-        required,
-        name,
-        label,
-        disabled,
-    });
-    return (_jsx(BKJTextInput, Object.assign({ isOpen: isOpen, openBorderLocation: !!isDropdownReverse ? 'top' : 'bottom', labelProps: getLabelProps(), fieldSetProps: getComboboxProps(), variant: variant }, inputProps, { value: inputProps.value, autoComplete: autoComplete, className: `${inputProps.class} ${className}`, overrides: ['NO_REQUIRED'], rightIconProps: rightIconProps, leftIconProps: leftIconProps, error: error }), void 0));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BKJTextInput } from '../../BKJTextInput/index.js';
+import { useRightIconProps } from '../BKJComboBox.utils.js';
+import { useBKJComboBoxContext } from './BKJComboBox.context.js';
+export const BKJComboBoxInput = ({ className, autoComplete, overrides, ...rest }) => {
+    const { label, variant = 'ComboBoxSeamlessRounded', action, error, getComboboxProps, setAnchorElement, getInputProps, inputValue, getLabelProps, isOpen, onInputFocus, onInputKeyDown, selectedItem, name, leftIconProps, disabled, placeholder, required, isDropdownReverse, } = useBKJComboBoxContext();
+    const isLabelValueHidden = overrides.includes('HIDE_VALUE_LABEL');
+    const rightIconProps = useRightIconProps(action, disabled);
+    const inputProps = getInputProps({
+        ...rest,
+        onKeyDown: onInputKeyDown,
+        value: !isOpen && !isLabelValueHidden ? selectedItem?.label || '' : inputValue,
+        onFocus: onInputFocus,
+        ref: setAnchorElement,
+        placeholder,
+        required,
+        name,
+        label,
+        disabled,
+    });
+    return (_jsx(BKJTextInput, Object.assign({ isOpen: isOpen, openBorderLocation: !!isDropdownReverse ? 'top' : 'bottom', labelProps: getLabelProps(), fieldSetProps: getComboboxProps(), variant: variant }, inputProps, { value: inputProps.value, autoComplete: autoComplete, className: `${inputProps.class} ${className}`, overrides: ['NO_REQUIRED'], rightIconProps: rightIconProps, leftIconProps: leftIconProps, error: error }), void 0));
+};
 //# sourceMappingURL=BKJComboBoxInput.js.map

package/lib/components/BKJComboBox/src/BKJComboBoxItem.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { IBKJComboBoxOption } from '../BKJComboBox.types.js';
-export declare const BKJComboBoxItem: FC<IBKJComboBoxOption>;
+import { FC } from 'react';
+import { IBKJComboBoxOption } from '../BKJComboBox.types.js';
+export declare const BKJComboBoxItem: FC<IBKJComboBoxOption>;
 //# sourceMappingURL=BKJComboBoxItem.d.ts.map

package/lib/components/BKJComboBox/src/BKJComboBoxItem.js

@@ -1,28 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BKJListItem } from '../../BKJListItem/index.js';
-import { useBKJComboBoxContext } from './BKJComboBox.context.js';
-export const BKJComboBoxItem = (props) => {
-    const { getItemProps, highlightedIndex, name, value, handleMultiSelectClick } = useBKJComboBoxContext();
-    const isSelected = value.includes(`${props.value}`);
-    const itemProps = getItemProps({
-        item: props,
-        isSelected,
-        index: props.index,
-        value: props.value,
-        label: props.label,
-        selected: isSelected,
-        checked: isSelected,
-        disabled: !!props.disabled,
-        style: props.style,
-        name,
-    });
-    const checkBoxVariantConfig = props.overrides && !!props.overrides.includes('CHECKBOX_VARIANT')
-        ? {
-            variant: 'LeftAlignRowReverse',
-            checkBoxVariant: 'GreenSolid',
-            onChange: handleMultiSelectClick,
-        }
-        : { variant: 'SpaceBetween' };
-    return (_jsx(BKJListItem, Object.assign({}, checkBoxVariantConfig, { isTargeted: highlightedIndex === props.index }, itemProps, { subLabel: props?.subLabel, selected: value }), void 0));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BKJListItem } from '../../BKJListItem/index.js';
+import { useBKJComboBoxContext } from './BKJComboBox.context.js';
+export const BKJComboBoxItem = (props) => {
+    const { getItemProps, highlightedIndex, name, value, handleMultiSelectClick } = useBKJComboBoxContext();
+    const isSelected = value.includes(`${props.value}`);
+    const itemProps = getItemProps({
+        item: props,
+        isSelected,
+        index: props.index,
+        value: props.value,
+        label: props.label,
+        selected: isSelected,
+        checked: isSelected,
+        disabled: !!props.disabled,
+        style: props.style,
+        name,
+    });
+    const checkBoxVariantConfig = props.overrides && !!props.overrides.includes('CHECKBOX_VARIANT')
+        ? {
+            variant: 'LeftAlignRowReverse',
+            checkBoxVariant: 'GreenSolid',
+            onChange: handleMultiSelectClick,
+        }
+        : { variant: 'SpaceBetween' };
+    return (_jsx(BKJListItem, Object.assign({}, checkBoxVariantConfig, { isTargeted: highlightedIndex === props.index }, itemProps, { subLabel: props?.subLabel, selected: value }), void 0));
+};
 //# sourceMappingURL=BKJComboBoxItem.js.map

package/lib/components/BKJComboBox/src/BKJComboBoxOptions.d.ts

@@ -1,9 +1,9 @@
-import { FC } from 'react';
-import { IBKJComboBoxPropsOverrides } from '../BKJComboBox.types.js';
-import { Placement } from '@popperjs/core';
-export declare const BKJComboBoxOptions: FC<{
-    $dropdownHeight?: string;
-    allowedAutoPlacements?: Placement[];
-    overrides?: IBKJComboBoxPropsOverrides[];
-}>;
+import { FC } from 'react';
+import { IBKJComboBoxPropsOverrides } from '../BKJComboBox.types.js';
+import { Placement } from '@popperjs/core';
+export declare const BKJComboBoxOptions: FC<{
+    $dropdownHeight?: string;
+    allowedAutoPlacements?: Placement[];
+    overrides?: IBKJComboBoxPropsOverrides[];
+}>;
 //# sourceMappingURL=BKJComboBoxOptions.d.ts.map