docs(Dropdown): async options story (#2069)

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} />

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);
+  });
+};

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,
@@ -272,6 +273,37 @@ export const MultiChoiceWithDifferentStates = {
   play: multiInteractionTests
 };
 
+export const AsyncOptions = {
+  render: () => {
+    const fetchUserOptions = async () => {
+      try {
+        const response = await fakeFetchUsers();
+        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(