{isSearchActive
? __(
'Looks like we cannot find a page with that name. Double check your spellings or try a different term.',
'smashballoon-wpchat-livechat-customer-support',
)
: __(
'Start typing to search for a page, category, tag or custom post type.',
'smashballoon-wpchat-livechat-customer-support',
)}
)}
);
};
/**
* MultipleComboBox component
*
* Renders a combo box that allows users to select multiple items from a list.
*
* @component
* @param {Object} props - Component props
* @param {Array} props.itemsList - Full list of selectable items
* @param {string} props.label - Label displayed above or beside the combo box
* @param {string} props.placeholder - Placeholder text displayed when no items are selected
* @param {boolean} props.loading - Whether the component is in a loading state
* @param {Function} props.onInputChange - Callback when input value changes
* @param {Function} props.onScrollEnd - Callback when user scrolls to the end of the list
* @param {boolean} props.hasMore - Whether there are more items to load
* @param {boolean} props.isSearchActive - Whether search is currently active
* @param {Array} props.selectedItems - Array of currently selected items
* @param {Function} props.onSelectedItemsChange - Callback when selected items change
* @returns {JSX.Element} Rendered MultipleComboBox component
*/
export function MultipleComboBox({
itemsList = [],
label,
placeholder,
loading = false,
onInputChange,
onScrollEnd,
hasMore = false,
isSearchActive = false,
selectedItems = [],
onSelectedItemsChange,
}) {
// Refs
const wrapperRef = useRef(null);
const menuRef = useRef(null);
const spanRef = useRef(null);
// State
const [inputValue, setInputValue] = useState('');
const [inputWidth, setInputWidth] = useState(20);
const [isFocused, setIsFocused] = useState(false);
const [showAllSelected, setShowAllSelected] = useState(false);
// Filter out already selected items from the list
const itemsToRender = useMemo(() => {
const selectedIds = selectedItems.map((item) => item.id);
return itemsList.filter((item) => !selectedIds.includes(item.id));
}, [itemsList, selectedItems]);
// Handle focus events for the combo box
useEffect(() => {
const wrapper = wrapperRef.current;
if (!wrapper) return;
const handleFocusIn = () => {
setIsFocused(true);
if (onInputChange) {
onInputChange(inputValue);
}
};
const handleFocusOut = (e) => {
const isFocusLeavingWrapper = !wrapper.contains(e.relatedTarget);
const isFocusGoingToMenu = menuRef.current && menuRef.current.contains(e.relatedTarget);
if (isFocusLeavingWrapper && !isFocusGoingToMenu) {
setTimeout(() => {
if (
!document.activeElement ||
(!wrapper.contains(document.activeElement) &&
!menuRef.current?.contains(document.activeElement))
) {
setIsFocused(false);
}
}, 0);
}
};
wrapper.addEventListener('focusin', handleFocusIn);
wrapper.addEventListener('focusout', handleFocusOut);
return () => {
wrapper.removeEventListener('focusin', handleFocusIn);
wrapper.removeEventListener('focusout', handleFocusOut);
};
}, [wrapperRef.current, menuRef.current, onInputChange, inputValue]);
// Update input width based on content
useEffect(() => {
if (spanRef.current) {
const width = spanRef.current.offsetWidth;
setInputWidth(width + 5);
}
}, [inputValue, isFocused, selectedItems]);
useEffect(() => {
const node = spanRef.current;
if (!node) return;
const observer = new ResizeObserver(() => {
setInputWidth(node.offsetWidth + 5);
});
observer.observe(node);
return () => {
observer.disconnect();
};
}, []);
// Multiple selection hook
const { getSelectedItemProps, getDropdownProps } = useMultipleSelection({
selectedItems,
onStateChange({ selectedItems: newSelectedItems, type }) {
switch (type) {
case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
onSelectedItemsChange(newSelectedItems);
break;
default:
break;
}
},
});
// Combobox hook
const {
isOpen,
getToggleButtonProps,
getLabelProps,
getMenuProps,
getInputProps,
highlightedIndex,
getItemProps,
} = useCombobox({
items: itemsToRender,
itemToString(item) {
return item ? item.title : '';
},
defaultHighlightedIndex: 0,
selectedItem: null,
inputValue,
stateReducer(state, actionAndChanges) {
const { changes, type } = actionAndChanges;
switch (type) {
case useCombobox.stateChangeTypes.InputKeyDownEnter:
case useCombobox.stateChangeTypes.ItemClick:
return {
...changes,
isOpen: true,
highlightedIndex: 0,
};
default:
return changes;
}
},
onStateChange({ inputValue: newInputValue, type, selectedItem: newSelectedItem }) {
switch (type) {
case useCombobox.stateChangeTypes.InputKeyDownEnter:
case useCombobox.stateChangeTypes.ItemClick:
case useCombobox.stateChangeTypes.InputBlur:
if (newSelectedItem) {
const itemAlreadySelected = selectedItems.some(
(item) => item.id === newSelectedItem.id,
);
if (!itemAlreadySelected) {
if (onSelectedItemsChange) {
onSelectedItemsChange([newSelectedItem, ...selectedItems]);
}
}
setInputValue('');
if (onInputChange) {
onInputChange('');
}
}
break;
case useCombobox.stateChangeTypes.InputChange:
setInputValue(newInputValue);
if (onInputChange) {
onInputChange(newInputValue);
}
break;
default:
break;
}
},
});
// Handle scroll to load more items
const handleScroll = useCallback(() => {
const menu = menuRef.current;
if (menu && hasMore && onScrollEnd && !loading) {
const { scrollTop, clientHeight, scrollHeight } = menu;
const scrollThreshold = 20;
if (scrollHeight - scrollTop - clientHeight <= scrollThreshold) {
onScrollEnd();
}
}
}, [hasMore, onScrollEnd, loading]);
// Create a debounced version of handleScroll
const debouncedHandleScroll = useMemo(() => debounce(handleScroll, 100), [handleScroll]);
// Attach and clean up the scroll listener
useEffect(() => {
const menu = menuRef.current;
if (menu) {
menu.addEventListener('scroll', debouncedHandleScroll);
return () => {
menu.removeEventListener('scroll', debouncedHandleScroll);
debouncedHandleScroll.cancel();
};
}
return () => {
debouncedHandleScroll.cancel();
};
}, [debouncedHandleScroll]);
const handleRemoveItem = (item) => {
if (onSelectedItemsChange) {
onSelectedItemsChange(selectedItems.filter((i) => i.id !== item.id));
}
};
return (
<>