From ab1350a85fe79ae5b9f275cf57b3a25fcb39bec5 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 16 Apr 2024 09:27:29 +0300
Subject: [PATCH 1/2] docs(Dropdown): async options story

---
 .../Dropdown/__stories__/dropdown.mdx         |  6 ++++
 .../Dropdown/__stories__/dropdown.stories.js  | 31 +++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.mdx b/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
index af88f451db..eb873be5cb 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
@@ -70,6 +70,12 @@ The Dropdown component supports multiple options selection in two different stat
 
 <Canvas of={DropdownStories.MultiChoiceWithDifferentStates} />
 
+### Async Options
+
+The Dropdown component supports async loading of options.
+
+<Canvas of={DropdownStories.AsyncOptions} />
+
 ### Dropdown with avatar
 
 <Canvas of={DropdownStories.DropdownWithAvatar} />
diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
index fbf707ed76..96082763f2 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
@@ -272,6 +272,37 @@ export const MultiChoiceWithDifferentStates = {
   play: multiInteractionTests
 };
 
+export const AsyncOptions = {
+  render: () => {
+    const fetchUserOptions = async () => {
+      try {
+        const response = await fetch("https://jsonplaceholder.typicode.com/users");
+        const users = await response.json();
+
+        return users.slice(0, 5).map(user => ({
+          label: user.name,
+          value: user.id
+        }));
+      } catch (error) {
+        console.error("Error fetching user data:", error);
+      }
+      return [];
+    };
+
+    return (
+      <div
+        style={{
+          width: "400px"
+        }}
+      >
+        <Dropdown asyncOptions={fetchUserOptions} placeholder="Async options" cacheOptions defaultOptions />
+      </div>
+    );
+  },
+
+  name: "Async Dropdown"
+};
+
 export const DropdownWithAvatar = {
   render: () => {
     const optionsAvatar = useMemo(

From 0db8f5aa0f43ce81869ce91cc42bf5b8300cf3c2 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 16 Apr 2024 17:24:47 +0300
Subject: [PATCH 2/2] docs(Dropdown): fake fetch

---
 .../__stories__/dropdown.stories.helpers.tsx     | 16 ++++++++++++++++
 .../Dropdown/__stories__/dropdown.stories.js     |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.helpers.tsx b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.helpers.tsx
index 0220c34771..1536e02774 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.helpers.tsx
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.helpers.tsx
@@ -20,3 +20,19 @@ export const TipDevTipPopover = () => (
     .
   </Tip>
 );
+
+export const fakeFetchUsers = () => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const users = [
+        { id: "1", name: "Yossi Saadi" },
+        { id: "2", name: "Shahar Zilberman" },
+        { id: "3", name: "Tal Koren" },
+        { id: "4", name: "Meirav Ron" },
+        { id: "5", name: "Yael Bein" }
+      ];
+
+      resolve({ json: () => Promise.resolve(users) });
+    }, 1000);
+  });
+};
diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
index 96082763f2..99ece63eb5 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
@@ -10,6 +10,7 @@ import { Attach, Email } from "../../Icon/Icons";
 import { Avatar, Box, Button, DialogContentContainer, Dropdown, Flex, Label, Modal, ModalContent } from "../../index";
 import ModalExampleContent from "../../../storybook/patterns/dropdown-in-modals/ModalExampleContent";
 import "./dropdown.stories.scss";
+import { fakeFetchUsers } from "./dropdown.stories.helpers";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Dropdown,
@@ -276,7 +277,7 @@ export const AsyncOptions = {
   render: () => {
     const fetchUserOptions = async () => {
       try {
-        const response = await fetch("https://jsonplaceholder.typicode.com/users");
+        const response = await fakeFetchUsers();
         const users = await response.json();
 
         return users.slice(0, 5).map(user => ({