From 67dda493593c1f199a216b7d35e636efd1f6b994 Mon Sep 17 00:00:00 2001
From: Moshe Zemah <moshe@monday.com>
Date: Sun, 6 Oct 2024 10:38:16 +0300
Subject: [PATCH] SSR support fixes [prerelease]

---
 .../Dropdown/__stories__/Dropdown.mdx         |   6 +
 .../__stories__/Dropdown.stories.helpers.tsx  |   8 +
 .../Dropdown/__stories__/Dropdown.stories.js  |  11 +-
 .../Dropdown.snapshot.test.js.snap            | 381 +-----------------
 4 files changed, 25 insertions(+), 381 deletions(-)

diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx b/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx
index 08d54e086b..9003737c7e 100644
--- a/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx
+++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx
@@ -155,6 +155,12 @@ A dropdown menu can include labels.
 
 <Canvas of={DropdownStories.DropdownWithLabels} />
 
+### Dropdown with virtualized items
+
+A dropdown with many items, can be virtualized using `isVirtualized`.
+
+<Canvas of={DropdownStories.VirtualizedDropdown} />
+
 ### Dropdown inside a form
 
 A classic dropdown presents options a user needs to choose from.
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 0c904b396c..09f0305d9d 100644
--- a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx
+++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx
@@ -37,3 +37,11 @@ export const fakeFetchUsers = () => {
     }, 1000);
   });
 };
+
+export const generateItems = (itemsCount = 100) => {
+  const items = [];
+  for (let i = 0; i < itemsCount; i++) {
+    items.push({ value: i, label: `Item ${i}` });
+  }
+  return items;
+};
diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
index 1308abb1ad..6b03a35bba 100644
--- a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
+++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
@@ -10,7 +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";
+import { fakeFetchUsers, generateItems } from "./Dropdown.stories.helpers";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Dropdown,
@@ -673,6 +673,15 @@ export const DropdownWithLabels = {
   name: "Dropdown with labels"
 };
 
+export const VirtualizedDropdown = {
+  render: () => {
+    const options = useMemo(() => generateItems(300), []);
+
+    return <Dropdown options={options} isVirtualized className="dropdown-stories-styles_with-chips" />;
+  },
+  name: "Virtualized dropdown"
+};
+
 export const DropdownInsideAForm = {
   render: () => {
     const options = useMemo(
diff --git a/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap b/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
index c89c69d1b8..29c15a7595 100644
--- a/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
+++ b/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
@@ -880,386 +880,7 @@ exports[`Dropdown renders correctly snapshot driver should use async if set 1`]
 </DocumentFragment>
 `;
 
-exports[`Dropdown renders correctly snapshot driver should use virtualization if set 1`] = `
-<DocumentFragment>
-  <div
-    class="dropdown dropdown-story css-bbwnb8-container"
-    id="dropdown-menu-id"
-  >
-    <div>
-      <div
-        class=" css-11nd28h-control"
-      >
-        <div
-          class=" css-1ht1nal-Component"
-        >
-          <div
-            class=" css-1usuuna-placeholder"
-          />
-          <div
-            class="css-lkl2xd-Component"
-          >
-            <div
-              class=""
-              style="display: inline-block;"
-            >
-              <input
-                aria-activedescendant="react-select-29-option-0"
-                aria-autocomplete="list"
-                aria-controls="dropdown-menu-list-id"
-                aria-expanded="true"
-                aria-label="Dropdown input"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                id="react-select-29-input"
-                role="combobox"
-                spellcheck="false"
-                style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-              <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class=" css-1aqjfd-Component"
-        >
-          <span
-            class=" css-ds71as-Component"
-          />
-          <div
-            aria-hidden="true"
-            class="dropdown-indicator css-1pxbrck-indicatorContainer"
-          >
-            <svg
-              aria-hidden="false"
-              class="icon clickable"
-              data-testid="icon"
-              fill="currentColor"
-              height="20px"
-              role="button"
-              tabindex="-1"
-              viewBox="0 0 20 20"
-              width="20px"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M10.5303 12.5303L10 12L9.46967 12.5303C9.76256 12.8232 10.2374 12.8232 10.5303 12.5303ZM10 10.9393L6.53033 7.46967C6.23744 7.17678 5.76256 7.17678 5.46967 7.46967C5.17678 7.76256 5.17678 8.23744 5.46967 8.53033L9.46967 12.5303L10 12L10.5303 12.5303L14.5303 8.53033C14.8232 8.23744 14.8232 7.76256 14.5303 7.46967C14.2374 7.17678 13.7626 7.17678 13.4697 7.46967L10 10.9393Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="dropdownMenuWrapper withoutAnimation css-1ysewv0-menu"
-    >
-      <div
-        class=""
-        style="position: relative; height: 300px; overflow: auto; will-change: transform; direction: ltr; overflow-y: auto; box-sizing: border-box;"
-      >
-        <div
-          style="height: 350008px; width: 100%;"
-        >
-          <div
-            style="position: absolute; left: 0px; top: 4px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-1iwu591-option"
-                id="react-select-29-option-0"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    1
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 39px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-1"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    2
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 74px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-2"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    3
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 109px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-3"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    4
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 144px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-4"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    5
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 179px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-5"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    6
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 214px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-6"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    7
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 249px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-7"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    8
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 284px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-8"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    9
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 319px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-9"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    10
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style="position: absolute; left: 0px; top: 354px; height: 35px; width: 100%;"
-          >
-            <div>
-              <div
-                aria-selected="false"
-                class="optionReset css-6ztf41-option"
-                id="react-select-29-option-10"
-                role="option"
-                tabindex="-1"
-              >
-                <div
-                  class="valueContainer"
-                  data-testid="dropdown-option-content"
-                >
-                  <div
-                    class="typography inherit start singleLineEllipsis text text2Normal"
-                    data-testid="text"
-                    style="--text-clamp-lines: 1;"
-                  >
-                    11
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
+exports[`Dropdown renders correctly snapshot driver should use virtualization if set 1`] = `<DocumentFragment />`;
 
 exports[`Dropdown renders correctly when disabled 1`] = `
 <div