diff --git a/src/components/drops/menu/dropdown.js b/src/components/drops/menu/dropdown.js
index cb7ed6d87..88474a3eb 100644
--- a/src/components/drops/menu/dropdown.js
+++ b/src/components/drops/menu/dropdown.js
@@ -2,6 +2,7 @@ import React, { useMemo, useState, useRef } from "react"
import styled from "styled-components"
import { useVirtualizer } from "@tanstack/react-virtual"
import Flex from "@/components/templates/flex"
+import { Text } from "@/components/typography"
import Search from "@/components/search"
import Box from "@/components/templates/box"
import { mergeRefs } from "@/utils"
@@ -15,6 +16,14 @@ const Container = styled(Flex)`
const defaultEstimateSize = () => 28
+const DefaultNoSearchResultsComponent = () => {
+ return (
+
+ No results were found
+
+ )
+}
+
const Dropdown = ({
hideShadow,
itemProps,
@@ -26,12 +35,15 @@ const Dropdown = ({
Footer,
value,
hasSearch,
+ renderComponent,
searchMargin = [4],
gap = 0,
estimateSize = defaultEstimateSize,
close,
containerRef,
ref: forwardedRef,
+ showNoSearchResults = true,
+ NoSearchResultsComponent = DefaultNoSearchResultsComponent,
...rest
}) => {
const [searchValue, setSearchValue] = useState("")
@@ -41,7 +53,9 @@ const Dropdown = ({
const searchLowerCase = searchValue.toLowerCase()
- return items.filter(({ label, value: val }) => {
+ return items.filter(({ label, value: val, customFiltering }) => {
+ if (typeof customFiltering === "function")
+ return customFiltering({ searchValue, label, value: val })
if (typeof label === "string" && label.toLowerCase().includes(searchLowerCase)) return true
if (!label && typeof val === "string" && val.toLowerCase().includes(searchLowerCase))
return true
@@ -80,6 +94,10 @@ const Dropdown = ({
)}
+ {typeof renderComponent === "function" && renderComponent({ searchValue, filteredItems })}
+ {showNoSearchResults && filteredItems.length === 0 && searchValue ? (
+
+ ) : null}