Added renderEmpty function for Dropdown.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-basics",
-  "version": "0.115.0",
+  "version": "0.116.0",
   "description": "Everyday components for React",
   "license": "MIT",
   "repository": {

src/components/input/Dropdown.module.css

@@ -1,7 +1,3 @@
-.menu {
-  border-top: 1px solid var(--border-color);
-}
-
 .field {
   cursor: pointer;
 }
@@ -29,6 +25,8 @@
 
 .search {
   border: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .loading {

src/components/input/Dropdown.tsx

@@ -16,14 +16,15 @@ export interface DropdownProps extends CommonProps {
   name?: string;
   value?: string;
   renderValue?: (value: string) => ReactNode;
+  renderEmpty?: (search: string) => ReactNode;
   menuProps?: MenuProps;
   searchProps?: SearchFieldProps;
   position?: 'top' | 'bottom' | 'left' | 'right';
   alignment?: 'start' | 'end' | 'center';
   allowSearch?: boolean;
   isLoading?: boolean;
   placeholder?: string;
-  onChange?: (key: Key, e: MouseEvent) => void;
+  onSelect?: (key: Key, e: MouseEvent) => void;
   onSearch?: (value: string) => void;
 }
 
@@ -33,14 +34,15 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
     name,
     value = '',
     renderValue,
+    renderEmpty,
     menuProps = {},
     searchProps = {},
     position = 'bottom',
     alignment = 'start',
     allowSearch = false,
     isLoading,
     placeholder,
-    onChange,
+    onSelect,
     onSearch,
     className,
     children,
@@ -50,7 +52,7 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
 
   const handleSelect = (close: () => void, key: Key, e: MouseEvent) => {
     e.stopPropagation();
-    onChange?.(key, e);
+    onSelect?.(key, e);
     close();
   };
 
@@ -86,16 +88,17 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
               )}
               {isLoading ? (
                 <Loading className={styles.loading} icon="dots" position="center" />
-              ) : (
+              ) : items?.length ? (
                 <Menu
                   {...menuProps}
-                  className={classNames(styles.menu, menuProps?.className)}
                   items={items}
                   selectedKey={value}
                   onSelect={handleSelect.bind(null, close)}
                 >
                   {children}
                 </Menu>
+              ) : (
+                renderEmpty?.(search)
               )}
             </div>
           );

src/stories/Dropdown.stories.tsx

@@ -15,13 +15,14 @@ export default {
 } as Meta<typeof Dropdown>;
 
 const Template: StoryFn<typeof Dropdown> = args => {
-  const [value, setValue] = useState<any>(args.value);
+  const { value, items } = args;
+  const [selected, setSelected] = useState<any>(value);
   const [search, setSearch] = useState('');
 
-  const renderValue = v => items.find(e => e.value === v)?.label;
+  const renderValue = v => items?.find(e => e.value === v)?.label;
 
   const filteredItems = search
-    ? items.filter(({ label }) => label.toLowerCase().includes(search.toLowerCase()))
+    ? items?.filter(({ label }) => label.toLowerCase().includes(search.toLowerCase()))
     : items;
 
   return (
@@ -31,36 +32,41 @@ const Template: StoryFn<typeof Dropdown> = args => {
         items={filteredItems}
         renderValue={renderValue}
         name="dropdown"
-        value={value}
-        onChange={setValue}
+        value={selected}
+        onSelect={setSelected}
         onSearch={setSearch}
+        renderEmpty={() => <div style={{ textAlign: 'center', padding: 20 }}>No results.</div>}
       />
     </div>
   );
 };
 
 export const Basic = makeStory(Template, {
   args: {
+    items,
     children: ({ value, label }) => <Item key={value}>{label}</Item>,
   },
 });
 
 export const Preselect = makeStory(Template, {
   args: {
+    items,
     value: 'two',
     children: ({ value, label }) => <Item key={value}>{label}</Item>,
   },
 });
 
 export const WithSearch = makeStory(Template, {
   args: {
+    items,
     allowSearch: true,
     children: ({ value, label }) => <Item key={value}>{label}</Item>,
   },
 });
 
 export const IsLoading = makeStory(Template, {
   args: {
+    items,
     isLoading: true,
     allowSearch: true,
     children: ({ value, label }) => <Item key={value}>{label}</Item>,