@usefragments/ui 1.1.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/ui",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -99,6 +99,16 @@
         "default": "./dist/data-table.cjs"
       }
     },
+    "./data-table-virtual": {
+      "import": {
+        "types": "./dist/components/DataTable/DataTable.virtual.d.ts",
+        "default": "./dist/data-table-virtual.js"
+      },
+      "require": {
+        "types": "./dist/components/DataTable/DataTable.virtual.d.ts",
+        "default": "./dist/data-table-virtual.cjs"
+      }
+    },
     "./editor": {
       "import": {
         "types": "./dist/components/Editor/index.d.ts",
@@ -110,10 +120,12 @@
       }
     },
     "./styles": {
+      "types": "./src/styles/styles.d.ts",
       "sass": "./src/styles/globals.scss",
       "default": "./dist/assets/ui.css"
     },
     "./globals": {
+      "types": "./src/styles/styles.d.ts",
       "sass": "./src/styles/globals.scss",
       "default": "./dist/assets/ui.css"
     },
@@ -155,6 +167,44 @@
     "remark-gfm": ">=4.0.0",
     "shiki": ">=1.0.0"
   },
+  "peerDependenciesMeta": {
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "react-colorful": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@base-ui/react": "1.6.0",
     "@phosphor-icons/react": "^2.1.10"
@@ -190,10 +240,12 @@
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@usefragments/core": "1.2.0"
+    "@usefragments/core": "1.4.0"
   },
   "files": [
     "src",
+    "!src/**/.fragments/**",
+    "!src/**/.impeccable/**",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
     "!src/test/",
@@ -201,7 +253,10 @@
     "!src/**/*.block.ts",
     "!src/blocks/",
     "!src/assets/*.svg",
+    "!src/**/*.stories.tsx",
+    "!src/components/Cloud/",
     "dist",
+    "!dist/components/Cloud/",
     "fragments.json"
   ],
   "scripts": {

package/src/components/Checkbox/Checkbox.contract.json

@@ -3,13 +3,7 @@
   "name": "Checkbox",
   "description": "Binary toggle for form fields. Use for options that require explicit submission, unlike Switch which takes effect immediately.",
   "category": "forms",
-  "tags": [
-    "checkbox",
-    "form",
-    "boolean",
-    "selection",
-    "input"
-  ],
+  "tags": ["checkbox", "form", "boolean", "selection", "input"],
   "status": "stable",
   "sourcePath": "src/components/Checkbox/index.tsx",
   "exportName": "Checkbox",
@@ -78,21 +72,14 @@
       "description": "Checkbox size",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "variant": {
       "type": "enum",
       "description": "Visual variant. 'default' is the inline checkbox, 'card' renders as a full-width clickable card with the checkbox tucked inside.",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "card"
-      ]
+      "values": ["default", "card"]
     },
     "label": {
       "type": "string",
@@ -235,17 +222,11 @@
       "description: string - deprecated alias for helperText",
       "controlClassName/contentClassName - explicit styling targets for control and content"
     ],
-    "a11yRules": [
-      "A11Y_CHECKBOX_LABEL",
-      "A11Y_CHECKBOX_FOCUS",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_CHECKBOX_LABEL", "A11Y_CHECKBOX_FOCUS", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
+    "subComponents": ["Root"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Checkbox/Checkbox.module.scss

@@ -1,6 +1,8 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
 
+$fui-checkbox-radius: 0.25rem !default;
+
 // Wrapper for checkbox + label
 .wrapper {
   display: inline-flex;
@@ -34,7 +36,7 @@
   margin-top: 0;
   background-color: var(--fui-field-bg, $fui-bg-elevated);
   border: 1px solid var(--fui-field-border, $fui-border-strong);
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-checkbox-radius, $fui-checkbox-radius);
   cursor: inherit;
 
   &:hover:not([data-disabled]) {
@@ -87,7 +89,7 @@
 .sm {
   width: var(--fui-icon-xs, $fui-icon-xs);
   height: var(--fui-icon-xs, $fui-icon-xs);
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-checkbox-radius, $fui-checkbox-radius);
 }
 
 .md {

package/src/components/Chip/Chip.contract.json

@@ -3,14 +3,7 @@
   "name": "Chip",
   "description": "Interactive pill-shaped element for filtering, selecting, and tagging. Supports single and multi-select via Chip.Group.",
   "category": "forms",
-  "tags": [
-    "chip",
-    "tag",
-    "filter",
-    "selection",
-    "multi-select",
-    "action"
-  ],
+  "tags": ["chip", "tag", "filter", "selection", "multi-select", "action"],
   "status": "stable",
   "sourcePath": "src/components/Chip/index.tsx",
   "exportName": "Chip",
@@ -37,24 +30,14 @@
       "description": "Visual style variant",
       "default": "filled",
       "required": false,
-      "values": [
-        "filled",
-        "outlined",
-        "outline",
-        "soft"
-      ]
+      "values": ["filled", "outlined", "outline", "soft"]
     },
     "size": {
       "type": "enum",
       "description": "Chip size",
       "default": "md",
       "required": false,
-      "values": [
-        "xs",
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["xs", "sm", "md", "lg"]
     },
     "selected": {
       "type": "boolean",
@@ -135,7 +118,7 @@
     {
       "name": "Selected",
       "description": "Chip in selected state across variants",
-      "code": "<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</div>"
+      "code": "<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</Stack>"
     },
     {
       "name": "With Avatar",
@@ -147,6 +130,11 @@
       "description": "Removable chip with dismiss button",
       "code": "<div style={{ display: 'flex', gap: '8px' }}>\n  <Chip onRemove={() => {}}>React</Chip>\n  <Chip onRemove={() => {}}>TypeScript</Chip>\n  <Chip onRemove={() => {}}>SCSS</Chip>\n</div>"
     },
+    {
+      "name": "Selected Removable",
+      "description": "Selected removable chips retain the shared selection treatment across variants",
+      "code": "<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected onRemove={() => {}}>Filled</Chip>\n  <Chip variant=\"outlined\" selected onRemove={() => {}}>Outlined</Chip>\n  <Chip variant=\"soft\" selected onRemove={() => {}}>Soft</Chip>\n</Stack>"
+    },
     {
       "name": "Chip Group",
       "description": "Multi-select chip set with shared state",
@@ -192,16 +180,11 @@
       "Chip.Group forwards DOM props (id, role, aria-*, data-*, handlers)",
       "Chip.Group: non-string chip labels should set an explicit value"
     ],
-    "a11yRules": [
-      "A11Y_CHIP_SELECTION",
-      "A11Y_CHIP_DISMISS"
-    ]
+    "a11yRules": ["A11Y_CHIP_SELECTION", "A11Y_CHIP_DISMISS"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Group"
-    ]
+    "subComponents": ["Group"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Chip/Chip.module.scss

@@ -1,5 +1,19 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+
+@mixin selected-surface {
+  background-color: var(--fui-field-selection-bg, $fui-bg-hover);
+  color: var(--fui-field-selection-color, $fui-text-primary);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
+    box-shadow: inset 0 0 0 1px var(--fui-field-selection-border, $fui-border-strong);
+  }
+}
 
 .chip {
   @include button-reset;
@@ -61,16 +75,7 @@
   }
 
   &.selected {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-color-on-accent, $fui-color-on-accent);
-
-    &:hover:not(:disabled) {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-    }
+    @include selected-surface;
   }
 }
 
@@ -89,19 +94,8 @@
   }
 
   &.selected {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-color-on-accent, $fui-color-on-accent);
-    border-color: var(--fui-color-accent, $fui-color-accent);
-
-    &:hover:not(:disabled) {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-      border-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-      border-color: var(--fui-color-accent-active, $fui-color-accent-active);
-    }
+    @include selected-surface;
+    border-color: var(--fui-field-selection-border, $fui-border-strong);
   }
 }
 
@@ -118,16 +112,7 @@
   }
 
   &.selected {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-color-on-accent, $fui-color-on-accent);
-
-    &:hover:not(:disabled) {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-    }
+    @include selected-surface;
   }
 }
 
@@ -244,17 +229,8 @@
 }
 
 .selected + .remove {
-  background-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-color-on-accent, $fui-color-on-accent);
+  @include selected-surface;
   border-left-color: transparent;
-
-  &:hover:not(:disabled) {
-    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-  }
-
-  &:active:not(:disabled) {
-    background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-  }
 }
 
 // Chip.Group

package/src/components/Combobox/Combobox.contract.json

@@ -3,15 +3,7 @@
   "name": "Combobox",
   "description": "Searchable select input that filters a dropdown list of options as you type. Supports single and multiple selection with chips.",
   "category": "forms",
-  "tags": [
-    "combobox",
-    "autocomplete",
-    "search",
-    "select",
-    "typeahead",
-    "form",
-    "multiselect"
-  ],
+  "tags": ["combobox", "autocomplete", "search", "select", "typeahead", "form", "multiselect"],
   "status": "stable",
   "sourcePath": "src/components/Combobox/index.tsx",
   "exportName": "Combobox",
@@ -110,11 +102,7 @@
       "description": "Size variant",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "className": {
       "type": "string",
@@ -163,6 +151,7 @@
       "Use helperText for guidance and error for validation messages",
       "Provide an empty state message when no results match",
       "Group related options with Combobox.Group for large lists",
+      "Static items may be composed through fragments and groups; filtering preserves wrapper composition",
       "Keep option text concise and searchable",
       "Use multiple prop for multi-select with chip display"
     ],
@@ -198,7 +187,7 @@
     {
       "name": "With Groups",
       "description": "Options organized into groups",
-      "code": "<StatefulCombobox placeholder=\"Search countries...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <Combobox.Group>\n      <Combobox.GroupLabel>North America</Combobox.GroupLabel>\n      <Combobox.Item value=\"us\">United States</Combobox.Item>\n      <Combobox.Item value=\"ca\">Canada</Combobox.Item>\n      <Combobox.Item value=\"mx\">Mexico</Combobox.Item>\n    </Combobox.Group>\n    <Combobox.Group>\n      <Combobox.GroupLabel>Europe</Combobox.GroupLabel>\n      <Combobox.Item value=\"uk\">United Kingdom</Combobox.Item>\n      <Combobox.Item value=\"de\">Germany</Combobox.Item>\n      <Combobox.Item value=\"fr\">France</Combobox.Item>\n    </Combobox.Group>\n  </Combobox.Content>\n</StatefulCombobox>"
+      "code": "<StatefulCombobox placeholder=\"Search countries...\">\n  <Combobox.Input />\n  <Combobox.Content>\n    <>\n      <Combobox.Group>\n        <Combobox.GroupLabel>North America</Combobox.GroupLabel>\n        <Combobox.Item value=\"us\">United States</Combobox.Item>\n        <Combobox.Item value=\"ca\">Canada</Combobox.Item>\n        <Combobox.Item value=\"mx\">Mexico</Combobox.Item>\n      </Combobox.Group>\n      <Combobox.Group>\n        <Combobox.GroupLabel>Europe</Combobox.GroupLabel>\n        <Combobox.Item value=\"uk\">United Kingdom</Combobox.Item>\n        <Combobox.Item value=\"de\">Germany</Combobox.Item>\n        <Combobox.Item value=\"fr\">France</Combobox.Item>\n      </Combobox.Group>\n      <Combobox.Empty>No matching country</Combobox.Empty>\n    </>\n  </Combobox.Content>\n</StatefulCombobox>"
     },
     {
       "name": "With Empty State",
@@ -260,11 +249,7 @@
       "Combobox.Input showTrigger: boolean - hide built-in trigger when using Combobox.Trigger explicitly",
       "maxVisibleItems: number - max visible options before scrolling (default 4)"
     ],
-    "a11yRules": [
-      "A11Y_COMBOBOX_KEYBOARD",
-      "A11Y_COMBOBOX_LABEL",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_COMBOBOX_KEYBOARD", "A11Y_COMBOBOX_LABEL", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
@@ -278,10 +263,7 @@
       "Group",
       "GroupLabel"
     ],
-    "requiredChildren": [
-      "Input",
-      "Content"
-    ],
+    "requiredChildren": ["Input", "Content"],
     "commonPatterns": [
       "<Combobox placeholder=\"Search...\"><Combobox.Input /><Combobox.Content><Combobox.Item value=\"opt1\">{label1}</Combobox.Item><Combobox.Item value=\"opt2\">{label2}</Combobox.Item></Combobox.Content></Combobox>",
       "<Combobox multiple placeholder=\"Select items...\"><Combobox.Input /><Combobox.Content><Combobox.Item value=\"opt1\">{label1}</Combobox.Item><Combobox.Item value=\"opt2\">{label2}</Combobox.Item></Combobox.Content></Combobox>",

package/src/components/Combobox/index.tsx

@@ -168,6 +168,7 @@ interface ComboboxContextValue {
   placeholder?: string;
   multiple?: boolean;
   selectedValues: string[];
+  staticLabels: ReadonlyMap<string, string>;
   itemsRef: React.MutableRefObject<Map<string, string>>;
   itemsVersion: number;
   incrementItemsVersion: () => void;
@@ -178,8 +179,11 @@ interface ComboboxContextValue {
   inputId?: string;
 }
 
+const EMPTY_STATIC_LABELS = new Map<string, string>();
+
 const ComboboxContext = React.createContext<ComboboxContextValue>({
   selectedValues: [],
+  staticLabels: EMPTY_STATIC_LABELS,
   itemsRef: { current: new Map() },
   itemsVersion: 0,
   incrementItemsVersion: () => {},
@@ -188,6 +192,16 @@ const ComboboxContext = React.createContext<ComboboxContextValue>({
   size: "md",
 });
 
+const EMPTY_FILTERED_ITEM_INDICES = new Map<string, number>();
+const ComboboxFilteredItemIndexContext = React.createContext<ReadonlyMap<string, number>>(
+  EMPTY_FILTERED_ITEM_INDICES
+);
+
+function itemIndicesFromSerializedValues(serializedValues: string): ReadonlyMap<string, number> {
+  const values = JSON.parse(serializedValues) as string[];
+  return new Map(values.map((value, index) => [value, index]));
+}
+
 function getNodeText(node: React.ReactNode): string {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
@@ -197,6 +211,84 @@ function getNodeText(node: React.ReactNode): string {
   return "";
 }
 
+interface ComboboxStaticItem {
+  label: string;
+  value: string;
+}
+
+function collectStaticItems(node: React.ReactNode): ComboboxStaticItem[] {
+  const items: ComboboxStaticItem[] = [];
+
+  React.Children.forEach(node, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === ComboboxItem) {
+      const props = child.props as ComboboxItemProps;
+      items.push({
+        label: getNodeText(props.children).trim() || props.value,
+        value: props.value,
+      });
+      return;
+    }
+    collectStaticItems((child.props as { children?: React.ReactNode }).children).forEach((item) =>
+      items.push(item)
+    );
+  });
+
+  return items;
+}
+
+interface FilterStaticChildrenResult {
+  children: React.ReactNode;
+  visibleItemCount: number;
+  changed: boolean;
+}
+
+function filterStaticChildren(
+  node: React.ReactNode,
+  visibleValues: ReadonlySet<string>
+): FilterStaticChildrenResult {
+  let visibleItemCount = 0;
+  let changed = false;
+
+  const filteredChildren = React.Children.map(node, (child) => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type === ComboboxItem) {
+      const props = child.props as ComboboxItemProps;
+      if (visibleValues.has(props.value)) {
+        visibleItemCount += 1;
+        return child;
+      }
+      changed = true;
+      return null;
+    }
+
+    const props = child.props as { children?: React.ReactNode };
+    if (props.children === undefined) return child;
+
+    const nested = filterStaticChildren(props.children, visibleValues);
+    visibleItemCount += nested.visibleItemCount;
+
+    if (child.type === ComboboxGroup && nested.visibleItemCount === 0) {
+      changed = true;
+      return null;
+    }
+    if (!nested.changed) return child;
+
+    changed = true;
+    return React.cloneElement(
+      child as React.ReactElement<{ children?: React.ReactNode }>,
+      undefined,
+      nested.children
+    );
+  });
+
+  return {
+    children: changed ? filteredChildren : node,
+    visibleItemCount,
+    changed,
+  };
+}
+
 // ============================================
 // Components
 // ============================================
@@ -230,6 +322,12 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
   ref
 ) {
   const size = useResolvedControlSize(sizeProp);
+  const staticItems = React.useMemo(() => collectStaticItems(children), [children]);
+  const staticValues = React.useMemo(() => staticItems.map((item) => item.value), [staticItems]);
+  const staticLabels = React.useMemo(
+    () => new Map(staticItems.map((item) => [item.value, item.label])),
+    [staticItems]
+  );
   // Track selected values for chip rendering
   const [internalValue, setInternalValue] = React.useState<string | string[] | null>(
     value ?? defaultValue ?? (multiple ? [] : null)
@@ -262,9 +360,11 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
   );
 
   // Convert value → label for input display
-  const itemToStringLabel = React.useCallback((itemValue: string) => {
-    return itemsRef.current.get(itemValue) ?? itemValue;
-  }, []);
+  const itemToStringLabel = React.useCallback(
+    (itemValue: string) =>
+      staticLabels.get(itemValue) ?? itemsRef.current.get(itemValue) ?? itemValue,
+    [staticLabels]
+  );
 
   // Derive selected values array for chip rendering
   const currentValue = value !== undefined ? value : internalValue;
@@ -292,6 +392,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
       placeholder,
       multiple,
       selectedValues,
+      staticLabels,
       itemsRef,
       itemsVersion,
       incrementItemsVersion,
@@ -304,6 +405,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
       placeholder,
       multiple,
       selectedValues,
+      staticLabels,
       itemsVersion,
       incrementItemsVersion,
       explicitTriggerCount,
@@ -347,6 +449,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
       <ComboboxContext.Provider value={contextValue}>
         {wrapperContent(
           <BaseCombobox.Root<string, true>
+            items={staticValues}
             value={controlledValue}
             defaultValue={uncontrolledValue}
             onValueChange={handleValueChange}
@@ -391,6 +494,7 @@ const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxProps>(function Co
     <ComboboxContext.Provider value={contextValue}>
       {wrapperContent(
         <BaseCombobox.Root<string, false>
+          items={staticValues}
           value={controlledValue}
           defaultValue={uncontrolledValue ?? null}
           onValueChange={handleValueChange}
@@ -450,7 +554,9 @@ function ComboboxInput({
             {context.selectedValues.map((chipValue) => (
               <BaseCombobox.Chip key={chipValue} className={styles.chip}>
                 <span className={styles.chipLabel}>
-                  {context.itemsRef.current.get(chipValue) ?? chipValue}
+                  {context.staticLabels.get(chipValue) ??
+                    context.itemsRef.current.get(chipValue) ??
+                    chipValue}
                 </span>
                 <BaseCombobox.ChipRemove className={styles.chipRemove}>
                   <XIcon />
@@ -512,6 +618,17 @@ function ComboboxContent({
   ...htmlProps
 }: ComboboxContentProps) {
   const popupClasses = [styles.popup, className].filter(Boolean).join(" ");
+  const filteredItems = BaseCombobox.useFilteredItems() as string[];
+  const serializedFilteredItems = JSON.stringify(filteredItems);
+  const filteredItemIndices = React.useMemo(
+    () => itemIndicesFromSerializedValues(serializedFilteredItems),
+    [serializedFilteredItems]
+  );
+  const visibleValues = React.useMemo(() => new Set(filteredItems), [filteredItems]);
+  const filteredContent = React.useMemo(
+    () => filterStaticChildren(children, visibleValues),
+    [children, visibleValues]
+  );
 
   const popupStyle =
     maxVisibleItems != null
@@ -530,7 +647,9 @@ function ComboboxContent({
         className={styles.positioner}
       >
         <BaseCombobox.Popup {...htmlProps} className={popupClasses} style={popupStyle}>
-          {children}
+          <ComboboxFilteredItemIndexContext.Provider value={filteredItemIndices}>
+            {filteredContent.children}
+          </ComboboxFilteredItemIndexContext.Provider>
         </BaseCombobox.Popup>
       </BaseCombobox.Positioner>
     </BaseCombobox.Portal>
@@ -539,6 +658,7 @@ function ComboboxContent({
 
 function ComboboxItem({ children, value, disabled, className, ...htmlProps }: ComboboxItemProps) {
   const { itemsRef, incrementItemsVersion } = React.useContext(ComboboxContext);
+  const filteredItemIndices = React.useContext(ComboboxFilteredItemIndexContext);
   const classes = [styles.item, className].filter(Boolean).join(" ");
 
   // Register this item's label in the registry so the input can display it
@@ -555,7 +675,13 @@ function ComboboxItem({ children, value, disabled, className, ...htmlProps }: Co
   }, [itemsRef, incrementItemsVersion, value, label]);
 
   return (
-    <BaseCombobox.Item {...htmlProps} value={value} disabled={disabled} className={classes}>
+    <BaseCombobox.Item
+      {...htmlProps}
+      value={value}
+      index={filteredItemIndices.get(value)}
+      disabled={disabled}
+      className={classes}
+    >
       {children}
       <BaseCombobox.ItemIndicator className={styles.itemIndicator}>
         <CheckIcon />