@boxcustodia/library 2.0.0-alpha.27 → 2.0.0-alpha.29

package/src/components/combobox/combobox.tsx

@@ -621,6 +621,34 @@ function useChipOverflow(
     setStableCount({ items: itemCount, visible });
   }, [isMeasuring, itemCount, containerRef]);
 
+  // Fallback: fires after browser paint. Handles two failure modes of the layout effect:
+  // 1. container null on first commit (Base UI CompositeList chip registration races our effect)
+  // 2. chips measured with offsetWidth=0 before the browser has done a layout pass
+  React.useEffect(() => {
+    const hasBadMeasurement =
+      chipWidthsRef.current.length > 0 &&
+      chipWidthsRef.current.every((w) => w === 0);
+
+    if (!isMeasuring && !hasBadMeasurement) return;
+
+    const container = containerRef?.current as HTMLElement | null;
+    if (!container) return;
+
+    const chipEls = container.querySelectorAll('[data-slot="combobox-chip"]');
+    if (!chipEls.length) return;
+
+    const widths = Array.from(chipEls).map(
+      (el) => (el as HTMLElement).offsetWidth,
+    );
+    if (widths.every((w) => w === 0)) return;
+
+    chipWidthsRef.current = widths;
+    const visible = calculateChipVisible(container.clientWidth, widths);
+    setStableCount((prev) =>
+      prev ? { ...prev, visible } : { items: itemCount, visible },
+    );
+  }, [isMeasuring, itemCount, containerRef]);
+
   React.useEffect(() => {
     const container = containerRef?.current as HTMLElement | null;
     if (!container) return;
@@ -771,6 +799,8 @@ type ComboboxBaseProps<TItem = unknown> = Omit<
   /** Icon or element displayed before the input text (single mode) or chips (multiple mode). */
   startAddon?: React.ReactNode;
   showClear?: boolean;
+  /** When false, hides the search input inside the popup in multiple-select mode. Default true. */
+  searchable?: boolean;
   /** Styles applied to each internal slot. */
   classNames?: {
     /** Text input field in single-select mode. */
@@ -839,6 +869,7 @@ export function Combobox<TItem = unknown>(
     startAddon,
     classNames,
     showClear = true,
+    searchable = true,
     ...rest
   } = allProps as ComboboxBaseProps<TItem> & {
     multiple?: boolean;
@@ -880,7 +911,7 @@ export function Combobox<TItem = unknown>(
         />
       )}
       <ComboboxPopup className={classNames?.popup}>
-        {multiple && (
+        {multiple && searchable && (
           <div
             className="border-b p-2"
             data-slot="combobox-chips-input-wrapper"

package/src/components/otp/otp.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { OTPFieldPreview as OTPPrimitive } from "@base-ui/react/otp-field";
+import { OTPField as OTPPrimitive } from "@base-ui/react/otp-field";
 import type React from "react";
 import { Fragment } from "react";