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 +### Async Options + +The Dropdown component supports async loading of options. + + + ### Dropdown with avatar 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 = () => ( . ); + +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 fbf707ed76..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, @@ -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 ( +
+ +
+ ); + }, + + name: "Async Dropdown" +}; + export const DropdownWithAvatar = { render: () => { const optionsAvatar = useMemo(