@membranehq/react 0.4.0 → 0.5.0

package/dist/esm/components/ComboBox/Dropdown/Categories/LookupOptions/ParametersPanel.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/LookupOptions/UiComponents.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/LookupOptions/index.mjs

@@ -2,14 +2,13 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useState, useRef, useEffect } from 'react';
 import { getReferenceCollectionPointerForSchema, getMissingRequiredFields, extractIntegrationAppErrorData } from '@membranehq/sdk';
-import deepEqual from 'fast-deep-equal';
 import { DropdownUI } from '../../../../DropdownUI/index.mjs';
 import { SvgIconType } from '../../../../SvgIcon/svg-icon-type.mjs';
 import { useIntegrationAppClient } from '../../../../../contexts/integration-app-client-context.mjs';
@@ -32,9 +31,8 @@ import { useComboBox } from '../../../context/combobox-context.mjs';
 import { useComboBoxDropdownContext } from '../../../context/combobox-dropdown-context.mjs';
 import { useComboBoxDropdownSearchContext } from '../../../context/combobox-dropdown-search.mjs';
 import { filterOptionsByLabel } from '../../../options-factories/utils.mjs';
-import { useNavigationContext } from '../../KeyboardNavigation/NavigationContext.mjs';
 import { useKeyboardBinding } from '../../KeyboardNavigation/useKeyboardBinding.mjs';
-import DropdownOption from '../../Option.mjs';
+import { VirtualizedDropdownList } from '../../VirtualizedDropdownList.mjs';
 
 const lookupOptionsRecipe = sva({
   className: "lookup-config-options",
@@ -251,49 +249,24 @@ function LookupOptionsList({
   onOptionSelect
 }) {
   const { isOptionSelected } = useComboBoxDropdownContext();
-  const { currentItem } = useNavigationContext(options, []);
+  const deduplicatedFallback = options.length > 0 ? [] : fallbackOptions;
   useKeyboardBinding({
     options,
-    fallbackOptions
+    fallbackOptions: deduplicatedFallback
   });
   function handleOptionSelect(option) {
     onOptionSelect(option);
   }
   return /* @__PURE__ */ jsx(DropdownUI.List, { className: css({ "&:not(:last-child)": { mb: "1" } }), children: /* @__PURE__ */ jsx(
-    DropdownListOptions,
+    VirtualizedDropdownList,
     {
-      fallbackOptions,
       options,
-      currentItem,
+      fallbackOptions: deduplicatedFallback,
       isOptionSelected,
       handleOptionSelect
     }
   ) });
 }
-function DropdownListOptions({
-  options,
-  fallbackOptions,
-  currentItem,
-  isOptionSelected,
-  handleOptionSelect
-}) {
-  const items = options.length ? options : fallbackOptions;
-  const isFallback = !options.length;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isFallback && /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: "No options found" }),
-    isFallback && !!items.length && /* @__PURE__ */ jsx("hr", { className: css({ my: 2 }) }),
-    items.map((option, idx) => /* @__PURE__ */ jsx(
-      DropdownOption,
-      {
-        option,
-        selected: isOptionSelected(option),
-        current: deepEqual(option, currentItem),
-        onSelect: () => handleOptionSelect(option)
-      },
-      idx
-    ))
-  ] });
-}
 function OptionsParametersRequiredAlert() {
   const styles2 = lookupOptionsRecipe();
   return /* @__PURE__ */ jsxs(Root, { className: styles2["required-message-container"], children: [

package/dist/esm/components/ComboBox/Dropdown/Categories/Options.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/Root.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/Variables.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/getLookupCollection.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/DrillUpButton.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Dropdown.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/KeyboardNavigation/NavigationContext.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/KeyboardNavigation/useKeyboardBinding.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Option.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/OptionsList.mjs

@@ -2,22 +2,18 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import deepEqual from 'fast-deep-equal';
 import { toSnakeCase } from 'js-convert-case';
-import { css } from '../../../styled-system/css/css.mjs';
-import '../../../styled-system/helpers.mjs';
-import DropdownOption from './Option.mjs';
+import { VirtualizedDropdownList } from './VirtualizedDropdownList.mjs';
 import useDataBuilder from '../../DataBuilder/data-builder-context.mjs';
 import useDataBuilderField from '../../DataBuilder/field-context.mjs';
 import { DropdownUI } from '../../DropdownUI/index.mjs';
-import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
-import { useNavigationContext } from './KeyboardNavigation/NavigationContext.mjs';
 import { useComboBox } from '../context/combobox-context.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
 import { useKeyboardBinding } from './KeyboardNavigation/useKeyboardBinding.mjs';
 
 function OptionsList({ onOptionSelect }) {
@@ -47,7 +43,7 @@ function OptionsList({ onOptionSelect }) {
     }
   }
   return /* @__PURE__ */ jsx(DropdownListState, { state: optionsState, error: optionsError, children: /* @__PURE__ */ jsx(
-    DropdownListOptions,
+    VirtualizedDropdownList,
     {
       searchTerm: canUseParentInputSearchValue ? parentInputValue : void 0,
       options,
@@ -74,38 +70,5 @@ function DropdownListState({
   }
   return children;
 }
-function DropdownListOptions({
-  options,
-  fallbackOptions,
-  isOptionSelected,
-  handleOptionSelect,
-  searchTerm
-}) {
-  const { currentItem } = useNavigationContext();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !options.length && /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: searchTerm ? `No results found for: ${searchTerm}` : "No results found" }),
-    options.map((option, idx) => /* @__PURE__ */ jsx(
-      DropdownOption,
-      {
-        option,
-        selected: isOptionSelected(option),
-        current: deepEqual(option, currentItem),
-        onSelect: () => handleOptionSelect(option)
-      },
-      idx
-    )),
-    fallbackOptions.length > 0 && /* @__PURE__ */ jsx("hr", { className: css({ my: 2 }) }),
-    fallbackOptions.map((option, idx) => /* @__PURE__ */ jsx(
-      DropdownOption,
-      {
-        option,
-        selected: isOptionSelected(option),
-        current: deepEqual(option, currentItem),
-        onSelect: () => handleOptionSelect(option)
-      },
-      idx
-    ))
-  ] });
-}
 
 export { OptionsList };

package/dist/esm/components/ComboBox/Dropdown/SearchInput.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/VirtualizedDropdownList.mjs

@@ -0,0 +1,255 @@
+"use strict";
+/*
+ * Membrane React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.5.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import deepEqual from 'fast-deep-equal';
+import { css } from '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import DropdownOption from './Option.mjs';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useNavigationContext } from './KeyboardNavigation/NavigationContext.mjs';
+
+const NO_RESULTS_MESSAGE_COUNT = 1;
+const SEPARATOR_COUNT = 1;
+const placeholderItemStyles = css({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "full"
+});
+const virtualItemStyles = css({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "max-content",
+  minWidth: "full"
+});
+function VirtualizedDropdownList({
+  options,
+  fallbackOptions,
+  isOptionSelected,
+  handleOptionSelect,
+  searchTerm
+}) {
+  const { currentItem } = useNavigationContext();
+  const parentRef = useRef(null);
+  const maxItemWidthRef = useRef(0);
+  const innerContainerRef = useRef(null);
+  const hasMainOptions = hasOptions(options);
+  const hasFallbackOptions = hasOptions(fallbackOptions);
+  const showSeparator = shouldShowSeparator(options, fallbackOptions);
+  const showNoResultsMessage = shouldShowNoResultsMessage(options, fallbackOptions);
+  const totalCount = getTotalCount(options, fallbackOptions, showSeparator, showNoResultsMessage);
+  const storeWidestItemSize = useCallback(
+    (rect) => {
+      if (rect.width > maxItemWidthRef.current) {
+        maxItemWidthRef.current = rect.width;
+        requestAnimationFrame(() => {
+          if (innerContainerRef.current) {
+            innerContainerRef.current.style.width = `${rect.width}px`;
+          }
+        });
+      }
+    },
+    [maxItemWidthRef]
+  );
+  const rowVirtualizer = useVirtualizer({
+    count: totalCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 32,
+    overscan: 15,
+    measureElement: (element) => {
+      const rect = element.getBoundingClientRect();
+      storeWidestItemSize(rect);
+      return rect.height;
+    }
+  });
+  useEffect(() => {
+    maxItemWidthRef.current = 0;
+    if (innerContainerRef.current) {
+      innerContainerRef.current.style.width = "auto";
+    }
+  }, [options, fallbackOptions]);
+  useEffect(() => {
+    if (!currentItem || currentItem === "drill-up") return;
+    const currentIndex = findCurrentItemIndex(
+      currentItem,
+      options,
+      fallbackOptions,
+      showSeparator,
+      showNoResultsMessage
+    );
+    if (currentIndex !== -1) {
+      rowVirtualizer.scrollToIndex(currentIndex, { align: "auto" });
+    }
+  }, [currentItem, options, fallbackOptions, showSeparator, showNoResultsMessage, rowVirtualizer]);
+  const getItemAtIndex = (index) => {
+    if (showNoResultsMessage) {
+      if (index === 0) {
+        return { type: "no-results", searchTerm };
+      }
+      if (index === 1) {
+        return { type: "separator" };
+      }
+      const fallbackOptionIndex2 = index - NO_RESULTS_MESSAGE_COUNT - SEPARATOR_COUNT;
+      return {
+        type: "option",
+        option: fallbackOptions[fallbackOptionIndex2],
+        isFromFallback: true
+      };
+    }
+    if (index < options.length) {
+      return {
+        type: "option",
+        option: options[index],
+        isFromFallback: false
+      };
+    }
+    const separatorIndex = options.length;
+    if (showSeparator && index === separatorIndex) {
+      return { type: "separator" };
+    }
+    const offsetForSeparator = showSeparator ? SEPARATOR_COUNT : 0;
+    const fallbackStartIndex = options.length + offsetForSeparator;
+    const fallbackOptionIndex = index - fallbackStartIndex;
+    return {
+      type: "option",
+      option: fallbackOptions[fallbackOptionIndex],
+      isFromFallback: true
+    };
+  };
+  if (!hasMainOptions && !hasFallbackOptions) {
+    return /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: searchTerm ? `No results found for: ${searchTerm}` : "No results found" });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: parentRef,
+      className: css({
+        maxHeight: "80vh",
+        overflow: "auto",
+        position: "relative",
+        width: "max-content",
+        minWidth: "100%"
+      }),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: innerContainerRef,
+          className: css({
+            position: "relative",
+            minWidth: "100%"
+          }),
+          style: {
+            height: `${rowVirtualizer.getTotalSize()}px`
+          },
+          children: rowVirtualizer.getVirtualItems().map((virtualItem) => {
+            const item = getItemAtIndex(virtualItem.index);
+            if (item.type === "no-results") {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: rowVirtualizer.measureElement,
+                  "data-index": virtualItem.index,
+                  className: placeholderItemStyles,
+                  style: {
+                    transform: `translateY(${virtualItem.start}px)`
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    DropdownUI.NoOptionsHeading,
+                    {
+                      text: item.searchTerm ? `No results found for: ${item.searchTerm}` : "No results found"
+                    }
+                  )
+                },
+                virtualItem.key
+              );
+            }
+            if (item.type === "separator") {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: rowVirtualizer.measureElement,
+                  "data-index": virtualItem.index,
+                  className: placeholderItemStyles,
+                  style: {
+                    transform: `translateY(${virtualItem.start}px)`
+                  },
+                  children: /* @__PURE__ */ jsx("hr", { className: css({ my: 2 }) })
+                },
+                virtualItem.key
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: rowVirtualizer.measureElement,
+                "data-index": virtualItem.index,
+                className: virtualItemStyles,
+                style: {
+                  transform: `translateY(${virtualItem.start}px)`
+                },
+                children: /* @__PURE__ */ jsx(
+                  DropdownOption,
+                  {
+                    option: item.option,
+                    selected: isOptionSelected(item.option),
+                    current: deepEqual(item.option, currentItem),
+                    onSelect: () => handleOptionSelect(item.option)
+                  }
+                )
+              },
+              virtualItem.key
+            );
+          })
+        }
+      )
+    }
+  );
+}
+function hasOptions(options) {
+  return options.length > 0;
+}
+function shouldShowSeparator(options, fallbackOptions) {
+  return options.length > 0 && fallbackOptions.length > 0;
+}
+function shouldShowNoResultsMessage(options, fallbackOptions) {
+  return options.length === 0 && fallbackOptions.length > 0;
+}
+function getTotalCount(options, fallbackOptions, showSeparator, showNoResultsMessage) {
+  if (showNoResultsMessage) {
+    return NO_RESULTS_MESSAGE_COUNT + SEPARATOR_COUNT + fallbackOptions.length;
+  }
+  const mainOptionsCount = options.length;
+  const separatorCount = showSeparator ? SEPARATOR_COUNT : 0;
+  const fallbackOptionsCount = fallbackOptions.length;
+  return mainOptionsCount + separatorCount + fallbackOptionsCount;
+}
+function findCurrentItemIndex(currentItem, options, fallbackOptions, showSeparator, showNoResultsMessage) {
+  if (showNoResultsMessage) {
+    const fallbackIndex2 = fallbackOptions.findIndex((opt) => deepEqual(opt, currentItem));
+    if (fallbackIndex2 !== -1) {
+      return NO_RESULTS_MESSAGE_COUNT + SEPARATOR_COUNT + fallbackIndex2;
+    }
+    return -1;
+  }
+  const mainIndex = options.findIndex((opt) => deepEqual(opt, currentItem));
+  if (mainIndex !== -1) {
+    return mainIndex;
+  }
+  const fallbackIndex = fallbackOptions.findIndex((opt) => deepEqual(opt, currentItem));
+  if (fallbackIndex !== -1) {
+    const separatorOffset = showSeparator ? SEPARATOR_COUNT : 0;
+    return options.length + separatorOffset + fallbackIndex;
+  }
+  return -1;
+}
+
+export { VirtualizedDropdownList };

package/dist/esm/components/ComboBox/Dropdown/categoryContentMapping.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/DropdownPopover/DropdownPositioner.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/DropdownPopover/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/FocusTrap/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/context/combobox-context.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/context/combobox-dropdown-context.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/context/combobox-dropdown-search.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/context/combobox-dropdown-stack.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/context/helpers.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/options-factories/boolean.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/options-factories/constant.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/options-factories/custom-field/constants.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/options-factories/custom-field/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/options-factories/enum.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.0
  */
 'use client';