npm - @membranehq/react - Versions diffs - 0.4.0 → 0.5.1 - Mend

@membranehq/react 0.4.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (727) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,22 +2,18 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.4.0
+ * v0.5.1
  */
 '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 CHANGED Viewed

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

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

@@ -0,0 +1,255 @@
+"use strict";
+/*
+ * Membrane React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.5.1
+ */
+'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 CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/components/ComboBox/options-factories/formula/config-mapping.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/options-factories/formula/index.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/options-factories/generate-schema-options.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/options-factories/object-fields.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/options-factories/reference-records.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/options-factories/root.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/options-factories/utils.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/options-factories/variable.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/shared.mjs CHANGED Viewed

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

package/dist/esm/components/ComboBox/value-spec.mjs CHANGED Viewed

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