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}