fluentui-extended 2026.8.30 → 2026.8.31

package/README.md

@@ -293,6 +293,45 @@ Run the test harness with `npm run harness` to see all examples in action.
 | `disabled` | `boolean` | `false` | Disable the lookup |
 | `open` | `boolean` | - | Controlled open state for the dropdown |
 | `onOpenChange` | `(open: boolean) => void` | - | Callback when dropdown open state changes |
+| `disableClientFilter` | `boolean` | `false` | Disable client-side filtering of options. Use this when filtering is performed server-side via `onSearchChange` |
+| `searchFields` | `string` | - | Hidden searchable text (never rendered). Use this to include additional searchable content (codes, IDs) while displaying JSX in `secondaryText` |
+
+### Client-Side Filtering
+
+By default, the Lookup component filters options client-side as the user types. The filtering logic works as follows:
+
+1. **Primary field (`text`)** — Always searched, regardless of other props
+2. **Search fields (`searchFields`)** — If provided, this hidden text is searched (useful when `secondaryText` is JSX)
+3. **Secondary text (`secondaryText`)** — Only searched if it's a string (JSX elements are skipped)
+
+This allows you to use rich JSX (badges, icons) in `secondaryText` while still providing searchable text via `searchFields`:
+
+```tsx
+const options: LookupOption[] = [
+  {
+    key: 'PROD-001',
+    text: 'Acme Widget',                           // Always searchable
+    searchFields: 'PROD-001 SKU-12345 acme-widget', // Hidden searchable text
+    secondaryText: (                               // Rich display (not searchable)
+      <span style={{ display: 'flex', gap: 4 }}>
+        <Badge size="small">PROD-001</Badge>
+        <Badge size="small" color="brand">SKU-12345</Badge>
+      </span>
+    ),
+  },
+];
+```
+
+**Server-Side Filtering:** When using `onSearchChange` to fetch results from an API, set `disableClientFilter={true}` to prevent the client from re-filtering server results:
+
+```tsx
+<Lookup
+  options={apiResults}
+  onSearchChange={(searchText) => fetchFromApi(searchText)}
+  disableClientFilter={true}  // API already filtered the results
+  loading={isLoading}
+/>
+```
 
 ### Cross-Document Support (Dynamics 365 Iframes)
 
@@ -327,6 +366,7 @@ interface LookupOption {
   key: string;                      // Unique identifier (required)
   text: string;                     // Display text (required)
   secondaryText?: ReactNode;        // Secondary line - string, Badge, or JSX
+  searchFields?: string;            // Hidden searchable text (never rendered)
   icon?: ReactNode;                 // Icon component (e.g., <BuildingRegular />)
   details?: LookupOptionDetail[];   // Expandable details (chevron appears)
   data?: unknown;                   // Custom data payload for your app
@@ -339,7 +379,7 @@ interface LookupOptionDetail {
 }
 ```
 
-> **Note:** Both `secondaryText` and `details` support React elements, not just strings. See [Rich Secondary Text](#rich-secondary-text-with-react-elements) for examples.
+> **Note:** Both `secondaryText` and `details` support React elements, not just strings. See [Rich Secondary Text](#rich-secondary-text-with-react-elements) for examples. When using JSX in `secondaryText`, use `searchFields` to provide hidden searchable text (see [Client-Side Filtering](#client-side-filtering)).
 
 ## Keyboard Navigation
 

package/dist/index.d.mts

@@ -14,6 +14,13 @@ interface LookupOption {
     text: string;
     /** Optional secondary text - can be a string or React element */
     secondaryText?: React.ReactNode;
+    /**
+     * Optional searchable text that is never rendered. Use this to include
+     * additional searchable content (codes, IDs, etc.) without affecting display.
+     * Client-side filtering will search this field in addition to `text` and
+     * string `secondaryText`.
+     */
+    searchFields?: string;
     /** Optional icon to display */
     icon?: React.ReactNode;
     /** Optional expandable details */
@@ -64,6 +71,12 @@ interface LookupProps extends Omit<InputProps, 'onChange' | 'value'> {
      * Use together with `open` for controlled mode, or standalone to observe changes.
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Disable client-side filtering of options. Use this when filtering is
+     * performed server-side via `onSearchChange` and the returned options are
+     * already filtered. Defaults to `false` (client-side filtering enabled).
+     */
+    disableClientFilter?: boolean;
 }
 
 declare const Lookup: React.FC<LookupProps>;

package/dist/index.d.ts

@@ -14,6 +14,13 @@ interface LookupOption {
     text: string;
     /** Optional secondary text - can be a string or React element */
     secondaryText?: React.ReactNode;
+    /**
+     * Optional searchable text that is never rendered. Use this to include
+     * additional searchable content (codes, IDs, etc.) without affecting display.
+     * Client-side filtering will search this field in addition to `text` and
+     * string `secondaryText`.
+     */
+    searchFields?: string;
     /** Optional icon to display */
     icon?: React.ReactNode;
     /** Optional expandable details */
@@ -64,6 +71,12 @@ interface LookupProps extends Omit<InputProps, 'onChange' | 'value'> {
      * Use together with `open` for controlled mode, or standalone to observe changes.
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Disable client-side filtering of options. Use this when filtering is
+     * performed server-side via `onSearchChange` and the returned options are
+     * already filtered. Defaults to `false` (client-side filtering enabled).
+     */
+    disableClientFilter?: boolean;
 }
 
 declare const Lookup: React.FC<LookupProps>;

package/dist/index.js

@@ -281,6 +281,7 @@ var Lookup = ({
   footer,
   open: controlledOpen,
   onOpenChange,
+  disableClientFilter = false,
   ...inputProps
 }) => {
   const styles = useLookupStyles();
@@ -316,6 +317,9 @@ var Lookup = ({
     [selectedOptionProp, options, selectedKey, internalSelectedOption]
   );
   const filteredOptions = React3__namespace.useMemo(() => {
+    if (disableClientFilter) {
+      return options;
+    }
     if (!searchText || searchText.length < minSearchLength) {
       return options;
     }
@@ -324,12 +328,15 @@ var Lookup = ({
       if (opt.text.toLowerCase().includes(lowerSearch)) {
         return true;
       }
+      if (opt.searchFields && opt.searchFields.toLowerCase().includes(lowerSearch)) {
+        return true;
+      }
       if (typeof opt.secondaryText === "string") {
         return opt.secondaryText.toLowerCase().includes(lowerSearch);
       }
       return false;
     });
-  }, [options, searchText, minSearchLength]);
+  }, [options, searchText, minSearchLength, disableClientFilter]);
   const highlightedOptionId = React3__namespace.useMemo(() => {
     if (!isOpen || highlightedIndex < 0 || highlightedIndex >= filteredOptions.length) {
       return void 0;