Fixed dropdown rendering.

Author: mikecao

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-basics",
-  "version": "0.121.0",
+  "version": "0.122.0",
   "description": "Everyday components for React",
   "license": "MIT",
   "repository": {
@@ -124,7 +124,7 @@
     "rollup": "^2.79.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^5.1.1",
-    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "7.0.18",
     "storybook-css-modules": "^1.0.8",

src/components/input/Dropdown.tsx

@@ -86,9 +86,8 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
                   autoFocus={true}
                 />
               )}
-              {isLoading ? (
-                <Loading className={styles.loading} icon="dots" position="center" />
-              ) : items?.length ? (
+              {isLoading && <Loading className={styles.loading} icon="dots" position="center" />}
+              {!isLoading && (
                 <Menu
                   {...menuProps}
                   items={items}
@@ -97,9 +96,8 @@ function Dropdown(props: DropdownProps, ref: Ref<HTMLInputElement>) {
                 >
                   {children}
                 </Menu>
-              ) : (
-                renderEmpty?.(search)
               )}
+              {!isLoading && search && items?.length === 0 && renderEmpty?.(search)}
             </div>
           );
         }}

src/components/utils.ts

@@ -65,7 +65,7 @@ export function renderChildren(
   handler: (child: ReactElement, index: number) => object | undefined,
   options?: { validChildren?: any[]; onlyRenderValid?: boolean },
 ): ReactNode {
-  if (typeof children === 'function' && items) {
+  if (typeof children === 'function' && items?.length > 0) {
     return cloneChildren(items.map(children), handler, options);
   }
 

src/stories/Dropdown.stories.tsx

@@ -19,12 +19,17 @@ const Template: StoryFn<typeof Dropdown> = args => {
   const [selected, setSelected] = useState<any>(value);
   const [search, setSearch] = useState('');
 
-  const renderValue = v => items?.find(e => e.value === v)?.label;
+  const renderValue = (value: string) => {
+    console.log({ value });
+    return items?.find(e => e.value === value)?.label;
+  };
 
   const filteredItems = search
     ? items?.filter(({ label }) => label.toLowerCase().includes(search.toLowerCase()))
     : items;
 
+  console.log({ selected });
+
   return (
     <div style={{ width: 200 }}>
       <Dropdown
@@ -33,7 +38,7 @@ const Template: StoryFn<typeof Dropdown> = args => {
         renderValue={renderValue}
         name="dropdown"
         value={selected}
-        onSelect={setSelected}
+        onChange={setSelected}
         onSearch={setSearch}
         renderEmpty={() => <div style={{ textAlign: 'center', padding: 20 }}>No results.</div>}
       />
@@ -56,6 +61,19 @@ export const Preselect = makeStory(Template, {
   },
 });
 
+export const NoItemsProp = makeStory(Template, {
+  args: {
+    items,
+    children: (
+      <>
+        <Item key="one">One</Item>
+        <Item key="two">Two</Item>
+        <Item key="three">Three</Item>
+      </>
+    ),
+  },
+});
+
 export const WithSearch = makeStory(Template, {
   args: {
     items,

yarn.lock

@@ -2315,7 +2315,7 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^5.0.0":
+"@rollup/pluginutils@^5.0.0", "@rollup/pluginutils@^5.0.5":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
   integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
@@ -6057,16 +6057,16 @@ es-get-iterator@^1.1.2:
     is-string "^1.0.5"
     isarray "^2.0.5"
 
-es-module-lexer@^1.0.5:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.1.0.tgz"
-  integrity sha512-fJg+1tiyEeS8figV+fPcPpm8WqJEflG3yPU0NOm5xMvrNkuiy7HzX/Ljng4Y0hAoiw4/3hQTCFYw+ub8+a2pRA==
-
 es-module-lexer@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz"
   integrity sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==
 
+es-module-lexer@^1.3.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.4.1.tgz#41ea21b43908fe6a287ffcbe4300f790555331f5"
+  integrity sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==
+
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz"
@@ -6990,6 +6990,13 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+get-tsconfig@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.2.tgz#0dcd6fb330391d46332f4c6c1bf89a6514c2ddce"
+  integrity sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==
+  dependencies:
+    resolve-pkg-maps "^1.0.0"
+
 gh-pages@^3.2.3:
   version "3.2.3"
   resolved "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz"
@@ -8456,11 +8463,6 @@ jest@^27.2.4:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
-joycon@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz"
-  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -8579,11 +8581,6 @@ json5@^2.1.2, json5@^2.2.2, json5@^2.2.3:
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jsonc-parser@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz"
-  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
-
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
@@ -11257,6 +11254,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pkg-maps@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
+  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
+
 resolve.exports@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz"
@@ -11344,16 +11346,15 @@ rollup-plugin-dts@^5.1.1:
   optionalDependencies:
     "@babel/code-frame" "^7.18.6"
 
-rollup-plugin-esbuild@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-esbuild/-/rollup-plugin-esbuild-5.0.0.tgz"
-  integrity sha512-1cRIOHAPh8WQgdQQyyvFdeOdxuiyk+zB5zJ5+YOwrZP4cJ0MT3Fs48pQxrZeyZHcn+klFherytILVfE4aYrneg==
+rollup-plugin-esbuild@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-esbuild/-/rollup-plugin-esbuild-6.1.0.tgz#966d297fe9edea3e6ba5dfd8ca3208825c82d7ce"
+  integrity sha512-HPpXU65V8bSpW8eSYPahtUJaJHmbxJGybuf/M8B3bz/6i11YaYHlNNJIQ38gSEV0FyohQOgVxJ2YMEEZtEmwvA==
   dependencies:
-    "@rollup/pluginutils" "^5.0.1"
+    "@rollup/pluginutils" "^5.0.5"
     debug "^4.3.4"
-    es-module-lexer "^1.0.5"
-    joycon "^3.1.1"
-    jsonc-parser "^3.2.0"
+    es-module-lexer "^1.3.1"
+    get-tsconfig "^4.7.2"
 
 rollup-plugin-postcss@^4.0.2:
   version "4.0.2"