- {currentOptions.map((option) => {
- const display = option.label || option.value;
- let match: ReactNode = [];
-
- if (matchTextSegments && !highlightValueMatch) {
- const startIdx = display
- .toLowerCase()
- .indexOf(option.currentInputValue.toLowerCase());
-
- if (startIdx !== -1) {
- const endIdx = startIdx + option.currentInputValue.length;
- match = (
- <>
- {display.substring(0, startIdx)}
-
- {display.substring(startIdx, endIdx)}
-
- {display.substring(endIdx)}
- >
- );
- } else {
- match =
{display};
+
+ {currentOptions.map((option) => {
+ const display = option.label || option.value;
+ let match: ReactNode = [];
+
+ if (matchTextSegments && !highlightValueMatch) {
+ const startIdx = display
+ .toLowerCase()
+ .indexOf(option.currentInputValue.toLowerCase());
+
+ if (startIdx !== -1) {
+ const endIdx = startIdx + option.currentInputValue.length;
+ match = (
+ <>
+ {display.substring(0, startIdx)}
+
+ {display.substring(startIdx, endIdx)}
+
+ {display.substring(endIdx)}
+ >
+ );
+ } else {
+ match = {display};
+ }
+ } else if (highlightValueMatch) {
+ match = highlightValueMatch(display, value);
}
- } else if (highlightValueMatch) {
- match = highlightValueMatch(display, value);
- }
-
- return (
- - {
- new Promise((res) => res(setNavigationOption(option))).then(
- () => {
+
+ return (
+
- {
+ new Promise((res) =>
+ res(setNavigationOption(option)),
+ ).then(() => {
handleSelect(option);
- },
- );
- }}
- className={classNames({
- [`block cursor-pointer p-8 hover:bg-${OPTION_HIGHLIGHT_COLOR} ${OPTION_CLASS_NAME}`]:
- true,
- [`bg-${OPTION_HIGHLIGHT_COLOR}`]:
- navigationOption?.id === option.id,
- })}
- >
- {matchTextSegments || highlightValueMatch ? match : display}
-
- );
- })}
-
-
+ });
+ }}
+ className={classNames({
+ [`block cursor-pointer p-8 hover:bg-${OPTION_HIGHLIGHT_COLOR} ${OPTION_CLASS_NAME}`]:
+ true,
+ [`bg-${OPTION_HIGHLIGHT_COLOR}`]:
+ navigationOption?.id === option.id,
+ })}
+ >
+ {matchTextSegments || highlightValueMatch ? match : display}
+
+ );
+ })}
+
+
+ )}
);
},
diff --git a/packages/combobox/src/props.ts b/packages/combobox/src/props.ts
index 4817236b..606838c3 100644
--- a/packages/combobox/src/props.ts
+++ b/packages/combobox/src/props.ts
@@ -117,6 +117,15 @@ export type ComboboxProps = {
/** Whether to show optional text */
optional?: boolean;
+
+ /** Feedback string to use to inform users about something. Eg. Show "Søker..." feedback to users as they type. */
+ feedbackInfo?: string;
+
+ /** Feedback string to use to warn users about something. Eg. if there are no results when searching. */
+ feedbackWarn?: string;
+
+ /** Feedback string to show users if there is an error as they interact with the combobox. */
+ feedbackError?: string;
} & Omit<
React.PropsWithoutRef