fluentui-extended 2026.2.12 → 2026.2.15

package/dist/index.d.mts

@@ -54,6 +54,16 @@ interface LookupProps extends Omit<InputProps, 'onChange' | 'value'> {
     header?: React.ReactNode;
     /** Footer content rendered at the bottom of the dropdown */
     footer?: React.ReactNode;
+    /**
+     * Controlled open state. When provided, the component will use this value
+     * instead of its internal state. Use together with `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the dropdown open state changes.
+     * Use together with `open` for controlled mode, or standalone to observe changes.
+     */
+    onOpenChange?: (open: boolean) => void;
 }
 
 declare const Lookup: React.FC<LookupProps>;

package/dist/index.d.ts

@@ -54,6 +54,16 @@ interface LookupProps extends Omit<InputProps, 'onChange' | 'value'> {
     header?: React.ReactNode;
     /** Footer content rendered at the bottom of the dropdown */
     footer?: React.ReactNode;
+    /**
+     * Controlled open state. When provided, the component will use this value
+     * instead of its internal state. Use together with `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the dropdown open state changes.
+     * Use together with `open` for controlled mode, or standalone to observe changes.
+     */
+    onOpenChange?: (open: boolean) => void;
 }
 
 declare const Lookup: React.FC<LookupProps>;

package/dist/index.js

@@ -59,11 +59,17 @@ var useLookupStyles = reactComponents.makeStyles({
     width: "20px",
     height: "20px"
   },
-  dropdownSurface: {
+  dropdownPortal: {
+    position: "absolute",
     padding: 0,
-    marginTop: "4px",
     minWidth: "220px",
-    zIndex: 1e3
+    zIndex: 1e6,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow16,
+    border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+    boxSizing: "border-box",
+    overflow: "hidden"
   },
   dropdownContent: {
     maxHeight: "350px",
@@ -205,7 +211,8 @@ var useLookupStyles = reactComponents.makeStyles({
     alignItems: "center",
     justifyContent: "space-between",
     borderRadius: reactComponents.tokens.borderRadiusMedium,
-    padding: "4px 12px",
+    padding: "6px 12px",
+    minHeight: "24px",
     backgroundColor: reactComponents.tokens.colorNeutralBackground3,
     backgroundImage: `repeating-linear-gradient(
       -45deg,
@@ -226,6 +233,7 @@ var useLookupStyles = reactComponents.makeStyles({
     alignItems: "center",
     justifyContent: "space-between",
     padding: "6px 12px",
+    minHeight: "24px",
     borderTop: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     fontSize: reactComponents.tokens.fontSizeBase200,
@@ -257,6 +265,8 @@ var Lookup = ({
   disabled,
   header,
   footer,
+  open: controlledOpen,
+  onOpenChange,
   ...inputProps
 }) => {
   const styles = useLookupStyles();
@@ -264,7 +274,19 @@ var Lookup = ({
   const ariaLabelledBy = inputProps["aria-labelledby"];
   const autoId = reactComponents.useId("lookup-");
   const lookupId = id ?? autoId;
-  const [isOpen, setIsOpen] = React3__namespace.useState(false);
+  const [internalOpen, setInternalOpen] = React3__namespace.useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const setIsOpen = React3__namespace.useCallback(
+    (value) => {
+      const nextValue = typeof value === "function" ? value(isOpen) : value;
+      if (!isControlled) {
+        setInternalOpen(nextValue);
+      }
+      onOpenChange?.(nextValue);
+    },
+    [isControlled, isOpen, onOpenChange]
+  );
   const [searchText, setSearchText] = React3__namespace.useState("");
   const [highlightedIndex, setHighlightedIndex] = React3__namespace.useState(-1);
   const [expandedKeys, setExpandedKeys] = React3__namespace.useState(/* @__PURE__ */ new Set());
@@ -274,7 +296,7 @@ var Lookup = ({
   const dropdownRef = React3__namespace.useRef(null);
   const debounceRef = React3__namespace.useRef();
   const justSelectedRef = React3__namespace.useRef(false);
-  const [dropdownWidth, setDropdownWidth] = React3__namespace.useState();
+  const [dropdownPosition, setDropdownPosition] = React3__namespace.useState({ top: 0, left: 0, width: 0 });
   const selectedOption = React3__namespace.useMemo(
     () => selectedOptionProp ?? options.find((opt) => opt.key === selectedKey) ?? internalSelectedOption,
     [selectedOptionProp, options, selectedKey, internalSelectedOption]
@@ -300,6 +322,15 @@ var Lookup = ({
     }
     return selectedOption?.text ?? "";
   }, [isOpen, searchText, selectedOption]);
+  const openDropdown = React3__namespace.useCallback(() => {
+    if (disabled) return;
+    setIsOpen(true);
+  }, [disabled]);
+  const closeDropdown = React3__namespace.useCallback(() => {
+    setIsOpen(false);
+    setSearchText("");
+    setHighlightedIndex(-1);
+  }, []);
   const handleSearchChange = React3__namespace.useCallback(
     (value) => {
       setSearchText(value);
@@ -320,10 +351,10 @@ var Lookup = ({
       const value = e.target.value;
       handleSearchChange(value);
       if (!isOpen) {
-        setIsOpen(true);
+        openDropdown();
       }
     },
-    [handleSearchChange, isOpen]
+    [handleSearchChange, isOpen, openDropdown]
   );
   const handleSelectOption = React3__namespace.useCallback(
     (option) => {
@@ -353,13 +384,10 @@ var Lookup = ({
     (e) => {
       if (disabled) return;
       switch (e.key) {
-        case " ":
-          e.stopPropagation();
-          break;
         case "ArrowDown":
           e.preventDefault();
           if (!isOpen) {
-            setIsOpen(true);
+            openDropdown();
           } else {
             setHighlightedIndex(
               (prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0
@@ -382,27 +410,34 @@ var Lookup = ({
           break;
         case "Escape":
           e.preventDefault();
-          setIsOpen(false);
-          setSearchText("");
-          setHighlightedIndex(-1);
+          closeDropdown();
           break;
         case "Tab":
-          setIsOpen(false);
-          setSearchText("");
+          closeDropdown();
           break;
       }
     },
-    [disabled, isOpen, highlightedIndex, filteredOptions, handleSelectOption]
+    [disabled, isOpen, highlightedIndex, filteredOptions, handleSelectOption, openDropdown, closeDropdown]
   );
-  const handleFocus = React3__namespace.useCallback(() => {
-    if (!disabled) {
-      if (justSelectedRef.current) {
-        justSelectedRef.current = false;
-        return;
+  const handleFocus = React3__namespace.useCallback(
+    (e) => {
+      if (!disabled) {
+        if (justSelectedRef.current) {
+          justSelectedRef.current = false;
+          return;
+        }
+        openDropdown();
       }
-      setIsOpen(true);
+      inputProps.onFocus?.(e);
+    },
+    [disabled, openDropdown, inputProps.onFocus]
+  );
+  const handleWrapperClick = React3__namespace.useCallback(() => {
+    if (!disabled && !isOpen) {
+      openDropdown();
+      inputRef.current?.focus();
     }
-  }, [disabled]);
+  }, [disabled, isOpen, openDropdown]);
   React3__namespace.useEffect(() => {
     return () => {
       if (debounceRef.current) {
@@ -419,74 +454,56 @@ var Lookup = ({
     }
   }, [highlightedIndex]);
   React3__namespace.useEffect(() => {
-    if (!isOpen || !matchInputWidth) {
-      return;
-    }
-    const updateWidth = () => {
-      const width = inputWrapperRef.current?.getBoundingClientRect().width;
-      if (width && width > 0) {
-        setDropdownWidth(width);
+    if (!isOpen) return;
+    const updatePosition = () => {
+      const rect = inputWrapperRef.current?.getBoundingClientRect();
+      if (rect) {
+        setDropdownPosition({
+          top: rect.bottom + 4 + window.scrollY,
+          left: rect.left + window.scrollX,
+          width: matchInputWidth ? rect.width : 0
+        });
       }
     };
-    updateWidth();
+    updatePosition();
+    let resizeObserver;
     if (typeof ResizeObserver !== "undefined" && inputWrapperRef.current) {
-      const resizeObserver = new ResizeObserver(() => updateWidth());
+      resizeObserver = new ResizeObserver(() => updatePosition());
       resizeObserver.observe(inputWrapperRef.current);
-      return () => resizeObserver.disconnect();
     }
-    window.addEventListener("resize", updateWidth);
-    return () => window.removeEventListener("resize", updateWidth);
-  }, [isOpen, matchInputWidth]);
-  React3__namespace.useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    const closeOnScroll = (event) => {
-      const target = event.target;
-      if (target && (dropdownRef.current?.contains(target) || inputWrapperRef.current?.contains(target))) {
-        return;
-      }
-      setIsOpen(false);
-      setSearchText("");
-      setHighlightedIndex(-1);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
     };
-    window.addEventListener("scroll", closeOnScroll, true);
-    return () => window.removeEventListener("scroll", closeOnScroll, true);
-  }, [isOpen]);
+  }, [isOpen, matchInputWidth]);
   React3__namespace.useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
+    if (!isOpen) return;
     const handlePointerDownOutside = (event) => {
       const target = event.target;
-      if (!target) {
-        return;
-      }
+      if (!target) return;
       const insideInput = inputWrapperRef.current?.contains(target);
       const insideDropdown = dropdownRef.current?.contains(target);
       if (!insideInput && !insideDropdown) {
-        setIsOpen(false);
-        setSearchText("");
-        setHighlightedIndex(-1);
+        closeDropdown();
       }
     };
     document.addEventListener("mousedown", handlePointerDownOutside);
-    return () => document.removeEventListener("mousedown", handlePointerDownOutside);
-  }, [isOpen]);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDownOutside);
+    };
+  }, [isOpen, closeDropdown]);
+  const showDropdown = isOpen && !disabled;
   return /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.root }, /* @__PURE__ */ React3__namespace.createElement(
-    reactComponents.Popover,
+    "div",
     {
-      open: isOpen && !disabled,
-      onOpenChange: (_e, data) => {
-        if (data.open && !disabled) {
-          setIsOpen(true);
-        }
-      },
-      trapFocus: false,
-      withArrow: false,
-      positioning: "below-start"
+      className: styles.inputWrapper,
+      ref: inputWrapperRef,
+      onClick: handleWrapperClick
     },
-    /* @__PURE__ */ React3__namespace.createElement(reactComponents.PopoverTrigger, { disableButtonEnhancement: true }, /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.inputWrapper, ref: inputWrapperRef }, /* @__PURE__ */ React3__namespace.createElement(
+    /* @__PURE__ */ React3__namespace.createElement(
       reactComponents.Input,
       {
         ...inputProps,
@@ -517,78 +534,81 @@ var Lookup = ({
           }
         ), loading ? /* @__PURE__ */ React3__namespace.createElement(reactComponents.Spinner, { size: "tiny" }) : /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.chevronIcon }, /* @__PURE__ */ React3__namespace.createElement(reactIcons.ChevronDownRegular, null)))
       }
-    ))),
+    )
+  ), showDropdown && /* @__PURE__ */ React3__namespace.createElement(reactComponents.Portal, null, /* @__PURE__ */ React3__namespace.createElement(
+    "div",
+    {
+      className: styles.dropdownPortal,
+      style: {
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        ...matchInputWidth && dropdownPosition.width > 0 ? { width: dropdownPosition.width } : { minWidth: 220 }
+      }
+    },
     /* @__PURE__ */ React3__namespace.createElement(
-      reactComponents.PopoverSurface,
+      "div",
       {
-        className: styles.dropdownSurface,
-        style: matchInputWidth && dropdownWidth ? { width: `${dropdownWidth}px` } : void 0
+        id: `${lookupId}-listbox`,
+        className: styles.dropdownContent,
+        ref: dropdownRef,
+        role: "listbox",
+        "aria-labelledby": lookupId
       },
-      /* @__PURE__ */ React3__namespace.createElement(
-        "div",
-        {
-          id: `${lookupId}-listbox`,
-          className: styles.dropdownContent,
-          ref: dropdownRef,
-          role: "listbox",
-          "aria-labelledby": lookupId
-        },
-        header && /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.headerWrapper }, /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.header }, header)),
-        loading ? /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.loadingContainer }, /* @__PURE__ */ React3__namespace.createElement(reactComponents.Spinner, { size: "small", label: "Loading..." })) : filteredOptions.length === 0 ? /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.noResults }, noResultsMessage) : /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.optionsContainer }, /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.optionsList }, filteredOptions.map((option, index) => {
-          const isExpanded = expandedKeys.has(option.key);
-          const hasDetails = option.details && option.details.length > 0;
-          const handleExpandClick = (e) => {
-            e.stopPropagation();
-            setExpandedKeys((prev) => {
-              const next = new Set(prev);
-              if (next.has(option.key)) {
-                next.delete(option.key);
-              } else {
-                next.add(option.key);
-              }
-              return next;
-            });
-          };
-          return /* @__PURE__ */ React3__namespace.createElement(
-            "div",
+      header && /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.headerWrapper }, /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.header }, header)),
+      loading ? /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.loadingContainer }, /* @__PURE__ */ React3__namespace.createElement(reactComponents.Spinner, { size: "small", label: "Loading..." })) : filteredOptions.length === 0 ? /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.noResults }, noResultsMessage) : /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.optionsContainer }, /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.optionsList }, filteredOptions.map((option, index) => {
+        const isExpanded = expandedKeys.has(option.key);
+        const hasDetails = option.details && option.details.length > 0;
+        const handleExpandClick = (e) => {
+          e.stopPropagation();
+          setExpandedKeys((prev) => {
+            const next = new Set(prev);
+            if (next.has(option.key)) {
+              next.delete(option.key);
+            } else {
+              next.add(option.key);
+            }
+            return next;
+          });
+        };
+        return /* @__PURE__ */ React3__namespace.createElement(
+          "div",
+          {
+            key: option.key,
+            id: `${lookupId}-option-${option.key}`,
+            role: "option",
+            "data-index": index,
+            "aria-selected": option.key === selectedOption?.key ? true : false,
+            "aria-disabled": option.disabled === true ? true : void 0,
+            className: reactComponents.mergeClasses(
+              styles.option,
+              index === highlightedIndex && styles.optionHighlighted,
+              option.key === selectedOption?.key && styles.optionSelected,
+              option.disabled && styles.optionDisabled
+            ),
+            onClick: () => handleSelectOption(option),
+            onMouseEnter: () => setHighlightedIndex(index)
+          },
+          option.icon && /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionIcon }, option.icon),
+          /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionContent }, /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionText }, option.text), option.secondaryText && /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionSecondaryText }, option.secondaryText), isExpanded && hasDetails && /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.optionDetails }, option.details.map((detail, detailIndex) => /* @__PURE__ */ React3__namespace.createElement("div", { key: detailIndex, className: styles.optionDetailRow }, detail.label && /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionDetailLabel }, detail.label, ":"), /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionDetailValue }, detail.value))))),
+          hasDetails && /* @__PURE__ */ React3__namespace.createElement(
+            "span",
             {
-              key: option.key,
-              id: `${lookupId}-option-${option.key}`,
-              role: "option",
-              "data-index": index,
-              "aria-selected": option.key === selectedOption?.key ? "true" : "false",
-              "aria-disabled": option.disabled ? "true" : void 0,
+              role: "button",
+              tabIndex: -1,
               className: reactComponents.mergeClasses(
-                styles.option,
-                index === highlightedIndex && styles.optionHighlighted,
-                option.key === selectedOption?.key && styles.optionSelected,
-                option.disabled && styles.optionDisabled
+                styles.optionExpandButton,
+                isExpanded && styles.optionExpandButtonExpanded
               ),
-              onClick: () => handleSelectOption(option),
-              onMouseEnter: () => setHighlightedIndex(index)
+              onClick: handleExpandClick,
+              "aria-label": isExpanded ? "Collapse details" : "Expand details"
             },
-            option.icon && /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionIcon }, option.icon),
-            /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionContent }, /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionText }, option.text), option.secondaryText && /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionSecondaryText }, option.secondaryText), isExpanded && hasDetails && /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.optionDetails }, option.details.map((detail, detailIndex) => /* @__PURE__ */ React3__namespace.createElement("div", { key: detailIndex, className: styles.optionDetailRow }, detail.label && /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionDetailLabel }, detail.label, ":"), /* @__PURE__ */ React3__namespace.createElement("span", { className: styles.optionDetailValue }, detail.value))))),
-            hasDetails && /* @__PURE__ */ React3__namespace.createElement(
-              "span",
-              {
-                role: "button",
-                tabIndex: -1,
-                className: reactComponents.mergeClasses(
-                  styles.optionExpandButton,
-                  isExpanded && styles.optionExpandButtonExpanded
-                ),
-                onClick: handleExpandClick,
-                "aria-label": isExpanded ? "Collapse details" : "Expand details"
-              },
-              /* @__PURE__ */ React3__namespace.createElement(reactIcons.ChevronDownRegular, null)
-            )
-          );
-        }))),
-        footer && /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.footerWrapper }, /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.footer }, footer))
-      )
+            /* @__PURE__ */ React3__namespace.createElement(reactIcons.ChevronDownRegular, null)
+          )
+        );
+      }))),
+      footer && /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.footerWrapper }, /* @__PURE__ */ React3__namespace.createElement("div", { className: styles.footer }, footer))
     )
-  ));
+  )));
 };
 Lookup.displayName = "Lookup";
 var gridWithBetween = "minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto";