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

package/dist/components/Combobox/Combobox.d.ts

@@ -35,6 +35,25 @@ interface RootProps {
     filterValue?: string;
     onFilterValueChange?(value: string): void;
     isPrintableCharacter?: (str: string) => boolean;
+    visible?: boolean;
+    /**
+     * Enable virtualization for large lists
+     * - true: always virtualize
+     * - false: never virtualize
+     * - 'auto': virtualize when item count > 100 (default)
+     * @default 'auto'
+     */
+    virtualized?: boolean | 'auto';
+    /**
+     * Estimated size of each virtualized item in pixels
+     * @default 40
+     */
+    estimatedItemSize?: number;
+    /**
+     * Number of items to render outside visible area for smooth scrolling
+     * @default 5
+     */
+    overscan?: number;
 }
 type TriggerProps = PrimitiveDivProps;
 type TextInputProps = React.InputHTMLAttributes<HTMLInputElement>;

package/dist/components/Combobox/VirtualizedViewport.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Primitive } from '@radix-ui/react-primitive';
+import type { ComponentPropsWithoutRef } from '@radix-ui/react-primitive';
+/**
+ * VirtualizedViewport - Renders only visible items for performance optimization
+ * Used when Combobox/Select has many items (>100)
+ */
+type VirtualizedViewportElement = React.ElementRef<typeof Primitive.div>;
+type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
+export interface VirtualizedViewportProps extends PrimitiveDivProps {
+    /**
+     * Estimated size of each item in pixels
+     * @default 40
+     */
+    estimatedItemSize?: number;
+    /**
+     * Number of items to render outside the visible area
+     * @default 5
+     */
+    overscan?: number;
+    /**
+     * Callback to get the count of total items
+     */
+    getItemCount: () => number;
+    /**
+     * Callback when viewport ref changes
+     */
+    onViewportChange?: (node: VirtualizedViewportElement | null) => void;
+}
+export declare const VirtualizedViewport: React.ForwardRefExoticComponent<VirtualizedViewportProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/index.js

@@ -18,6 +18,7 @@ const reactUseLayoutEffect = require("@radix-ui/react-use-layout-effect");
 const ariaHidden = require("aria-hidden");
 const ReactDOM = require("react-dom");
 const reactRemoveScroll = require("react-remove-scroll");
+const reactVirtual = require("@tanstack/react-virtual");
 const number = require("@radix-ui/number");
 const reactCollection = require("@radix-ui/react-collection");
 const reactDirection = require("@radix-ui/react-direction");
@@ -173,6 +174,75 @@ const usePrev = (value) => {
   });
   return ref.current;
 };
+const VirtualizedViewport = React__namespace.forwardRef(
+  ({ children, estimatedItemSize = 40, overscan = 5, getItemCount, onViewportChange, ...props }, forwardedRef) => {
+    const parentRef = React__namespace.useRef(null);
+    const composedRefs = reactComposeRefs.useComposedRefs(forwardedRef, parentRef, onViewportChange);
+    const childArray = React__namespace.useMemo(() => React__namespace.Children.toArray(children), [children]);
+    const virtualizer = reactVirtual.useVirtualizer({
+      count: getItemCount(),
+      getScrollElement: () => parentRef.current,
+      estimateSize: () => estimatedItemSize,
+      overscan
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        reactPrimitive.Primitive.div,
+        {
+          "data-radix-combobox-viewport": "",
+          role: "presentation",
+          ...props,
+          ref: composedRefs,
+          style: {
+            position: "relative",
+            flex: 1,
+            overflow: "auto",
+            ...props.style
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                height: `${virtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative"
+              },
+              children: virtualItems.map((virtualItem) => {
+                const child = childArray[virtualItem.index];
+                return /* @__PURE__ */ jsxRuntime.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) => {
@@ -217,7 +287,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__namespace.useState(null);
   const [viewport, setViewport] = React__namespace.useState(null);
@@ -306,6 +380,10 @@ const Combobox = (props) => {
       onFilterValueChange: setFilterValue,
       onVisuallyFocussedItemChange: setVisuallyFocussedItem,
       isPrintableCharacter,
+      visible,
+      virtualized,
+      estimatedItemSize,
+      overscan,
       children
     }
   ) });
@@ -713,6 +791,22 @@ const VIEWPORT_NAME$1 = "ComboboxViewport";
 const ComboboxViewport = React__namespace.forwardRef((props, forwardedRef) => {
   const comboboxContext = useComboboxContext(VIEWPORT_NAME$1);
   const composedRefs = reactComposeRefs.useComposedRefs(forwardedRef, comboboxContext.onViewportChange);
+  const childArray = React__namespace.useMemo(() => React__namespace.Children.toArray(props.children), [props.children]);
+  const itemCount = childArray.length;
+  const shouldVirtualize = comboboxContext.virtualized === true || comboboxContext.virtualized === "auto" && itemCount > 100;
+  if (shouldVirtualize) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Collection$1.Slot, { scope: void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+      VirtualizedViewport,
+      {
+        ...props,
+        ref: composedRefs,
+        getItemCount: () => itemCount,
+        estimatedItemSize: comboboxContext.estimatedItemSize,
+        overscan: comboboxContext.overscan,
+        onViewportChange: comboboxContext.onViewportChange
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "style",
@@ -873,23 +967,31 @@ const ComboboxItemIndicator = React__namespace.forwardRef((props, forwardedRef)
 ComboboxItemIndicator.displayName = ITEM_INDICATOR_NAME$1;
 const NO_VALUE_FOUND_NAME = "ComboboxNoValueFound";
 const ComboboxNoValueFound = React__namespace.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__namespace.useState([]);
   const { subscribe } = useCollection$1(void 0);
   const { startsWith, contains } = useFilter(locale, { sensitivity: "base" });
   React__namespace.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;
   }
@@ -936,7 +1038,7 @@ const ComboboxCreateItem = React__namespace.forwardRef((props, ref) => {
       unsub();
     };
   }, [textValue, subscribe, getItems]);
-  if (!textValue || !show) {
+  if ((!textValue || !show) && !context.visible) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(