@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
18 lines (17 loc) • 1.26 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import clsx from "../../utils/clsx";
const CustomSuggestionsOptionFc = ({ disabled, index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm, }) => {
const highlightSearchTerm = (text, searchTerm) => {
if (!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.trim()))
return text;
const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
const parts = text.split(regex);
return parts.map((part, partIndex) => (partIndex % 2 === 1 ? h("mark", null, part) : part));
};
return (h("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, "aria-disabled": disabled ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: clsx('kol-custom-suggestions-option', { 'kol-custom-suggestions-option--disabled': disabled }), onKeyDown: onKeyDown }, h("span", null, highlightSearchTerm(String(option), searchTerm || ''))));
};
export default CustomSuggestionsOptionFc;
//# sourceMappingURL=CustomSuggestionsOption.js.map