@strapi/ui-primitives 2.0.0-rc.8 → 2.0.0

package/dist/index.mjs

@@ -17,6 +17,7 @@ import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
 import { hideOthers } from "aria-hidden";
 import * as ReactDOM from "react-dom";
 import { RemoveScroll } from "react-remove-scroll";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { clamp } from "@radix-ui/number";
 import { createCollection as createCollection$1 } from "@radix-ui/react-collection";
 import { useDirection } from "@radix-ui/react-direction";
@@ -151,6 +152,75 @@ const usePrev = (value) => {
   });
   return ref.current;
 };
+const VirtualizedViewport = React.forwardRef(
+  ({ children, estimatedItemSize = 40, overscan = 5, getItemCount, onViewportChange, ...props }, forwardedRef) => {
+    const parentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, parentRef, onViewportChange);
+    const childArray = React.useMemo(() => React.Children.toArray(children), [children]);
+    const virtualizer = useVirtualizer({
+      count: getItemCount(),
+      getScrollElement: () => parentRef.current,
+      estimateSize: () => estimatedItemSize,
+      overscan
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `[data-radix-combobox-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-combobox-viewport]::-webkit-scrollbar{display:none}`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Primitive.div,
+        {
+          "data-radix-combobox-viewport": "",
+          role: "presentation",
+          ...props,
+          ref: composedRefs,
+          style: {
+            position: "relative",
+            flex: 1,
+            overflow: "auto",
+            ...props.style
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: `${virtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative"
+              },
+              children: virtualItems.map((virtualItem) => {
+                const child = childArray[virtualItem.index];
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-index": virtualItem.index,
+                    ref: virtualizer.measureElement,
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      transform: `translateY(${virtualItem.start}px)`
+                    },
+                    children: child
+                  },
+                  virtualItem.key
+                );
+              })
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+VirtualizedViewport.displayName = "VirtualizedViewport";
 const OPEN_KEYS$1 = [" ", "Enter", "ArrowUp", "ArrowDown"];
 const SELECTION_KEYS$1 = ["Enter"];
 const defaultIsPrintableCharacter = (str) => {
@@ -195,7 +265,11 @@ const Combobox = (props) => {
     filterValue: filterValueProp,
     defaultFilterValue,
     onFilterValueChange,
-    isPrintableCharacter = defaultIsPrintableCharacter
+    isPrintableCharacter = defaultIsPrintableCharacter,
+    visible = false,
+    virtualized = "auto",
+    estimatedItemSize = 40,
+    overscan = 5
   } = props;
   const [trigger, setTrigger] = React.useState(null);
   const [viewport, setViewport] = React.useState(null);
@@ -284,6 +358,10 @@ const Combobox = (props) => {
       onFilterValueChange: setFilterValue,
       onVisuallyFocussedItemChange: setVisuallyFocussedItem,
       isPrintableCharacter,
+      visible,
+      virtualized,
+      estimatedItemSize,
+      overscan,
       children
     }
   ) });
@@ -691,6 +769,22 @@ const VIEWPORT_NAME$1 = "ComboboxViewport";
 const ComboboxViewport = React.forwardRef((props, forwardedRef) => {
   const comboboxContext = useComboboxContext(VIEWPORT_NAME$1);
   const composedRefs = useComposedRefs(forwardedRef, comboboxContext.onViewportChange);
+  const childArray = React.useMemo(() => React.Children.toArray(props.children), [props.children]);
+  const itemCount = childArray.length;
+  const shouldVirtualize = comboboxContext.virtualized === true || comboboxContext.virtualized === "auto" && itemCount > 100;
+  if (shouldVirtualize) {
+    return /* @__PURE__ */ jsx(Collection$1.Slot, { scope: void 0, children: /* @__PURE__ */ jsx(
+      VirtualizedViewport,
+      {
+        ...props,
+        ref: composedRefs,
+        getItemCount: () => itemCount,
+        estimatedItemSize: comboboxContext.estimatedItemSize,
+        overscan: comboboxContext.overscan,
+        onViewportChange: comboboxContext.onViewportChange
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "style",
@@ -851,23 +945,31 @@ const ComboboxItemIndicator = React.forwardRef((props, forwardedRef) => {
 ComboboxItemIndicator.displayName = ITEM_INDICATOR_NAME$1;
 const NO_VALUE_FOUND_NAME = "ComboboxNoValueFound";
 const ComboboxNoValueFound = React.forwardRef((props, ref) => {
-  const { textValue = "", filterValue = "", locale, autocomplete } = useComboboxContext(NO_VALUE_FOUND_NAME);
+  const {
+    textValue = "",
+    filterValue = "",
+    visible = false,
+    locale,
+    autocomplete
+  } = useComboboxContext(NO_VALUE_FOUND_NAME);
   const [items, setItems] = React.useState([]);
   const { subscribe } = useCollection$1(void 0);
   const { startsWith, contains } = useFilter(locale, { sensitivity: "base" });
   React.useEffect(() => {
     const unsub = subscribe((state) => {
-      setItems(state);
+      if (visible) {
+        const filteredItems = state.filter((item) => item.type !== "create");
+        setItems(filteredItems);
+      } else {
+        setItems(state);
+      }
     });
     return () => {
       unsub();
     };
-  }, [subscribe]);
-  if (items.length === 0)
+  }, [visible, subscribe]);
+  if (autocomplete.type === "none" && items.length > 0)
     return null;
-  if (autocomplete.type === "none") {
-    return null;
-  }
   if (autocomplete.type === "list" && autocomplete.filter === "startsWith" && items.some((item) => startsWith(item.textValue, textValue))) {
     return null;
   }
@@ -914,7 +1016,7 @@ const ComboboxCreateItem = React.forwardRef((props, ref) => {
       unsub();
     };
   }, [textValue, subscribe, getItems]);
-  if (!textValue || !show) {
+  if ((!textValue || !show) && !context.visible) {
     return null;
   }
   return /* @__PURE__ */ jsx(