@ibobbyts/svelte-ui-utils 0.4.7 → 0.5.1

package/README.md

@@ -40,7 +40,6 @@ import '@ibobbyts/svelte-ui-utils/style.css';
 <script lang="ts">
   import { ToastManager, toast } from '@ibobbyts/svelte-ui-utils/toast';
   import { Dropdown } from '@ibobbyts/svelte-ui-utils/dropdown';
-  import { DropdownSearch, DropdownSearchMultiSelect } from '@ibobbyts/svelte-ui-utils/dropdown-search';
   import { Dialog, ConfirmDialog, InputDialog, CsvUploadDialog, ImagePreviewDialog, PasswordCopyDialog } from '@ibobbyts/svelte-ui-utils/dialog';
   import { DataTable, DateRangeFilter, FilterTable, NumberRangeFilter } from '@ibobbyts/svelte-ui-utils/table';
 </script>
@@ -49,7 +48,7 @@ import '@ibobbyts/svelte-ui-utils/style.css';
 The package root also re-exports the public modules:
 
 ```ts
-import { ToastManager, Dropdown, DropdownSearch, Dialog, DataTable } from '@ibobbyts/svelte-ui-utils';
+import { ToastManager, Dropdown, Dialog, DataTable } from '@ibobbyts/svelte-ui-utils';
 ```
 
 ## Toast
@@ -85,103 +84,6 @@ moves. Set `placement="up"` or `placement="down"` to force a direction. Use
 `fitViewport={false}` to disable the default panel-height constraint for the
 chosen side.
 
-## DropdownSearch
-
-`DropdownSearch` is the free-text input entry with server-driven validation
-(`exactMatch`), input statuses, focus options, footer text, a clear button, and
-multiselect chips. For a trigger-style dropdown that combines single or multi
-select with async search and dynamic result groups, use the unified `Dropdown`
-search mode instead.
-
-```svelte
-<script lang="ts">
-  import { DropdownSearch } from '@ibobbyts/svelte-ui-utils/dropdown-search';
-
-  async function loadOptions(query, { limit, signal }) {
-    const response = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=${limit}`, { signal });
-    return response.json();
-  }
-</script>
-
-<DropdownSearch
-  language="en_us"
-  placeholder="Search"
-  debounceMs={500}
-  clearLabel="Clear search"
-  width="24rem"
-  maxWidth="100%"
-  {loadOptions}
-  searchOnExternalValueChange={true}
-  closeOnValid={true}
-/>
-```
-
-`loadOptions` returns `{ options, exactMatch }`. An item uses this shape:
-
-```ts
-{
-  value: '123',
-  label: 'Jane Doe',
-  param_dict: { ID: 'M-123' }
-}
-```
-
-`label` is the display text and `value` is the submitted string identifier;
-extra fields such as `param_dict` are preserved as business metadata. The
-free-text `value` prop and `onChange` detail stay the raw input text, so they
-never collide with the submitted `item.value`.
-
-The input is valid when the server returns one unique `exactMatch`, or when the
-user selects an item. Non-empty text without a unique match is invalid.
-Set `validate={false}` when the field should only show selectable options and
-stay visually neutral instead of turning green or red. In that mode the
-component ignores `exactMatch` for status and auto-selection.
-Use `searchOnExternalValueChange` for scanner or programmatic input workflows.
-Set `closeOnValid={true}` to hide the result list after validation finds a
-usable exact match. The default is `false`, so existing validated searches keep
-showing their current result list until the field closes or the user selects an
-option.
-Use `showOptionsOnFocus={true}` with `focusOptions` to show a controlled set of
-options as soon as the field receives focus, including when the current value is
-empty or already valid. Pass `footerText` to render a non-selectable note below
-the options, separated by a divider.
-When the input has text, `DropdownSearch` shows an internal clear button on the
-right side of the field. Use `clearLabel` to localize that button's accessible
-label, or use `language` to select the package default.
-Use `width`, `minWidth`, and `maxWidth` to size the control directly when a
-wrapper is not convenient.
-Server-side code and Node tests that only need pure helpers should import from
-`@ibobbyts/svelte-ui-utils/dropdown-search/state` so they do not load Svelte
-component files.
-
-Set `multiselect={true}` when the search box should collect multiple selected
-items as chips. `DropdownSearchMultiSelect` is a convenience wrapper with the
-same controlled contract:
-
-```svelte
-<script lang="ts">
-  import { DropdownSearchMultiSelect, type DropdownSearchItem } from '@ibobbyts/svelte-ui-utils/dropdown-search';
-
-  let selectedMembers: DropdownSearchItem[] = [];
-</script>
-
-<DropdownSearchMultiSelect
-  language="en_us"
-  placeholder="Search members"
-  selectedItems={selectedMembers}
-  selectedItemsLabel="Selected members"
-  removeSelectedItemLabel={(item) => `Remove ${item.label}`}
-  {loadOptions}
-  onSelectedItemsChange={(items) => {
-    selectedMembers = items;
-  }}
-/>
-```
-
-In multiselect mode, the text input remains a search query. Selecting an item
-adds or removes it from `selectedItems`, clears the query, and emits both
-`onChange` and `onSelectedItemsChange`.
-
 ## SortableList
 
 `SortableList` provides controlled vertical HTML5 drag-and-drop ordering. Each
@@ -417,8 +319,8 @@ the menu to its longest option while keeping the selected edge aligned.
 `DataTable` uses this same component for its page-size picker.
 
 Set `search={true}` with `loadOptions` to load remote options as the user
-types. The default `input_style="dropdown"` keeps the search field inside the
-expanded menu. Set `input_style="input"` to render a directly editable input;
+types. The default `inputStyle="dropdown"` keeps the search field inside the
+expanded menu. Set `inputStyle="input"` to render a directly editable input;
 results appear while it is focused and hide on blur. In input style, the
 optional `getItemLabel` callback controls the displayed label while `value`
 and `onChange` continue to represent submitted option values. The input style
@@ -603,6 +505,54 @@ render source and `loadOptions` is never called. Type the loader with
 `DropdownLoadOptions`/`DropdownLoadOptionsResult`, exported from the package
 root.
 
+### loadOptions factories
+
+Most `loadOptions` implementations only differ in the item source: filter a
+local array, or POST one JSON endpoint. The factories exported from
+`@ibobbyts/svelte-ui-utils/dropdown` (and the package root) build loaders that
+fit both the root `Dropdown` search mode and the data-table
+`filter.dropdownSearch` control:
+
+```ts
+import { createFetchLoadOptions, createLocalLoadOptions } from '@ibobbyts/svelte-ui-utils';
+
+// Local list: filter, map to options, slice to the limit.
+const loadFromRoster = createLocalLoadOptions(
+  () => rosterUsers,
+  {
+    toOption: (user) => ({ value: String(user.id), label: user.displayName }),
+    matches: (user, query) => matchesPinyin(user.displayName, query),
+    limit: 5
+  }
+);
+
+// JSON endpoint: URL, body builder, payload decoding, abort and error policy.
+const loadFromApi = createFetchLoadOptions({
+  url: '/api/members/search',
+  buildBody: (query, limit) => ({ groupId, query, limit }),
+  mapOptions: (payload) => (payload as { options: MemberOption[] }).options ?? [],
+  throwOnError: true
+});
+```
+
+`createLocalLoadOptions(source, config?)` accepts a static array or a getter
+re-evaluated on every search. `toOption` converts domain items (omit it when
+the items already satisfy the `{ label, value }` contract); `matches` receives
+the raw item and the trimmed query, and defaults to a case-insensitive
+substring match over the converted option's `label`/`searchText`, where an
+empty query matches everything. `limit` caps the context limit.
+
+`createFetchLoadOptions(config)` skips the request for a blank query, posts
+JSON (default body `{ query, limit }`), passes `context.signal` through, and
+decodes the payload with `mapOptions` before slicing to the limit. HTTP and
+network failures resolve with no options by default; `throwOnError: true`
+rethrows them (aborted requests always resolve with no options) so wrappers
+that surface errors keep working.
+
+Multiselect handlers can also stop repeating the `string | string[]` narrowing:
+`toMultiSelection(selection)` and `toSingleSelection(selection)` normalize a
+`Dropdown` `onChange` argument to the shape the handler needs.
+
 ## DataTable
 
 ```svelte
@@ -766,10 +716,8 @@ for the left column and a controlled filter created with the `filter` helper:
         filter.dropdownSearch({
           value: searchValue,
           selectedItem,
-          status: searchStatus,
           width: '24rem',
           maxWidth: '100%',
-          clearLabel: 'Clear search',
           loadOptions,
           onChange: (detail) => updateSearch(detail)
         }),
@@ -786,6 +734,29 @@ for the left column and a controlled filter created with the `filter` helper:
 and `var(--suu-radius)` corner radius as a bordered `DataTable`. Set
 `bordered={false}` to remove both the border and outer corner radius.
 
+`filter.text` renders a free-text search input for `keyword contains`-style
+filtering. Unlike `filter.dropdownSearch` it has no selection semantics: the
+value is the raw input text, and matching stays in the consuming app:
+
+```svelte
+{
+  key: 'location',
+  title: 'Location',
+  filter: filter.text({
+    value: locationQuery,
+    placeholder: 'Search location',
+    ariaLabel: 'Location filter',
+    onChange: (value) => (locationQuery = value)
+  })
+}
+```
+
+Every keystroke reports by default; pass `debounceMs` to batch changes (Enter
+flushes the pending draft immediately). The input stays a controlled input:
+applying the new value from `onChange` keeps typing intact, and resetting
+`value` clears the field. Width follows the `width`/`minWidth`/`maxWidth`
+props when the full-row default is not what you want.
+
 `filter.select` uses the shared `Dropdown` component, so select filters keep the
 same menu, keyboard, and visual behavior as standalone dropdowns.
 
@@ -811,13 +782,6 @@ same menu, keyboard, and visual behavior as standalone dropdowns.
 }
 ```
 
-If a dropdown-style filter appears clipped, check the parent containers first.
-`DropdownSearch` renders its result list as an absolutely positioned child, so
-any ancestor with `overflow: hidden`, `overflow: auto`, or `overflow: scroll`
-can clip the menu even when the menu has a high `z-index`. Keep the nearest
-filter container at `overflow: visible`, or move the clipping/scrolling behavior
-to a parent that does not wrap the dropdown menu directly.
-
 `dateRange` renders two browser date inputs, preset buttons, and quick month/year
 selects. The presets are `last 24 hours`, `last 7 days`, `last 30 days`,
 `today`, `this week`, `this month`, and `this year`. Manual changes and quick

package/dist/data-table/FilterControl.svelte

@@ -1,13 +1,19 @@
 <svelte:options runes={false} />
 
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import Dropdown from '../dropdown/Dropdown.svelte';
   import DropdownMultiSelect from '../dropdown/DropdownMultiSelect.svelte';
-  import DropdownSearch from '../dropdown-search/DropdownSearch.svelte';
+  import type {
+    DropdownLoadContext,
+    DropdownLoadOptionsResult,
+    DropdownOption,
+    DropdownSelection
+  } from '../dropdown/types.js';
   import type { UiLanguage } from '../i18n.js';
   import DateRangeFilter from './DateRangeFilter.svelte';
   import NumberRangeFilter from './NumberRangeFilter.svelte';
-  import type { FilterControl } from './types.js';
+  import type { DropdownSearchChangeDetail, DropdownSearchItem, FilterControl } from './types.js';
 
   export let control: FilterControl;
   export let language: UiLanguage = 'en_us';
@@ -32,6 +38,171 @@
     }
   }
 
+  // The removed DropdownSearch spoke free text in `value` while the root
+  // Dropdown reports option identifiers. This adapter keeps the legacy
+  // `{ value: label, selectedItem, selectedItems, status }` detail by resolving
+  // each identifier back to the item that loadOptions returned.
+  let dropdownSearchQuery = '';
+  const dropdownSearchItems = new Map<string, DropdownSearchItem>();
+
+  function resolveDropdownSearchItemLabel(item: DropdownSearchItem): string {
+    return control.type === 'dropdownSearch' && control.getItemLabel
+      ? control.getItemLabel(item)
+      : item.label;
+  }
+
+  // The root Dropdown types labels against its own option shape; the options it
+  // hands back are the very `DropdownSearchItem` objects we returned, so the
+  // structural widening is lossless for consumers' getItemLabel callbacks.
+  function dropdownSearchOptionLabel(option: DropdownOption): string {
+    return resolveDropdownSearchItemLabel(option as DropdownSearchItem);
+  }
+
+  function findDropdownSearchItem(identifier: string): DropdownSearchItem | undefined {
+    const cached = dropdownSearchItems.get(identifier);
+    if (cached !== undefined) {
+      return cached;
+    }
+    if (control.type === 'dropdownSearch' && control.selectedItem?.value === identifier) {
+      return control.selectedItem;
+    }
+    return undefined;
+  }
+
+  async function loadDropdownSearchOptions(
+    rawQuery: string,
+    context: DropdownLoadContext
+  ): Promise<DropdownLoadOptionsResult> {
+    if (control.type !== 'dropdownSearch') {
+      return { options: [] };
+    }
+
+    const query = rawQuery.trim();
+    // minLength has no root Dropdown counterpart, so the wrapper keeps the old
+    // "below threshold returns no options" contract itself.
+    if (query.length < (control.minLength ?? 1)) {
+      return { options: [] };
+    }
+
+    const result = await control.loadOptions(query, context);
+    // Stale responses must not seed the identifier cache either.
+    if (context.signal.aborted) {
+      return { options: [] };
+    }
+    const items = result?.options ?? [];
+    for (const item of items) {
+      dropdownSearchItems.set(item.value, item);
+    }
+
+    return { options: items };
+  }
+
+  function handleDropdownSearchQueryChange(query: string) {
+    dropdownSearchQuery = query;
+  }
+
+  function handleDropdownSearchChange(selection: DropdownSelection) {
+    if (control.type !== 'dropdownSearch') {
+      return;
+    }
+
+    const identifier = Array.isArray(selection) ? (selection[0] ?? '') : selection;
+    // The root Dropdown reports an empty identifier when the user types over a
+    // controlled selection (input/value divergence). That divergent-clear is
+    // dropped so `onChange` stays a selection-change (submit) event; a real
+    // selection always carries a non-empty identifier.
+    if (!identifier) {
+      return;
+    }
+    const item = findDropdownSearchItem(identifier);
+    const detail: DropdownSearchChangeDetail = {
+      value: item ? resolveDropdownSearchItemLabel(item) : identifier,
+      selectedItem: item ?? null,
+      selectedItems: [],
+      status: item ? 'valid' : dropdownSearchQuery.trim() ? 'invalid' : 'empty'
+    };
+    void control.onChange(detail);
+  }
+
+  // External value/selected-item changes rebuild the root Dropdown instance:
+  // controlled `value` resets its internal query, results, and draft, and
+  // `selectedOptions` then displays the new selection.
+  $: dropdownSearchKey = control.type === 'dropdownSearch'
+    ? `${control.value}\u0000${control.selectedItem?.value ?? ''}`
+    : '';
+  // A selected item displays through `selectedOptions`; a free-text external
+  // value has no option to resolve and falls back to the Dropdown value itself.
+  $: dropdownSearchValue = control.type === 'dropdownSearch'
+    ? control.selectedItem
+      ? control.selectedItem.value
+      : control.value
+    : '';
+  // The raw item is handed to the Dropdown untouched so its `getItemLabel` prop
+  // is the single label conversion on the display path.
+  $: dropdownSearchSelectedOptions = control.type === 'dropdownSearch' && control.selectedItem
+    ? [control.selectedItem]
+    : [];
+
+  // Free-text filter input: with debounceMs > 0 the draft lives here until the
+  // timer fires or Enter flushes it; the controlled `value` only catches up
+  // once the parent applies onChange, and Svelte leaves the DOM value alone
+  // until then so typing is never clobbered mid-draft.
+  let textInputTimer: ReturnType<typeof setTimeout> | null = null;
+  let textInputPending: string | null = null;
+
+  function flushTextInput() {
+    if (textInputTimer !== null) {
+      clearTimeout(textInputTimer);
+      textInputTimer = null;
+    }
+    if (textInputPending !== null && control.type === 'text') {
+      const value = textInputPending;
+      textInputPending = null;
+      void control.onChange(value);
+    }
+  }
+
+  function handleTextInput(value: string) {
+    if (control.type !== 'text') {
+      return;
+    }
+    const debounceMs = control.debounceMs ?? 0;
+    if (debounceMs <= 0) {
+      void control.onChange(value);
+      return;
+    }
+    textInputPending = value;
+    if (textInputTimer !== null) {
+      clearTimeout(textInputTimer);
+    }
+    textInputTimer = setTimeout(flushTextInput, debounceMs);
+  }
+
+  function handleTextKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && control.type === 'text') {
+      event.preventDefault();
+      flushTextInput();
+    }
+  }
+
+  $: textInputStyle = control.type === 'text'
+    ? [
+        control.width ? `width: ${control.width}` : '',
+        control.minWidth ? `min-width: ${control.minWidth}` : '',
+        control.maxWidth ? `max-width: ${control.maxWidth}` : ''
+      ]
+      .filter(Boolean)
+      .join('; ')
+    : '';
+
+  onDestroy(() => {
+    if (textInputTimer !== null) {
+      clearTimeout(textInputTimer);
+      textInputTimer = null;
+    }
+    textInputPending = null;
+  });
+
 </script>
 
 {#if control.type === 'container'}
@@ -110,31 +281,29 @@
     {/each}
   </div>
 {:else if control.type === 'dropdownSearch'}
-  <DropdownSearch
-    value={control.value}
-    selectedItem={control.selectedItem}
-    status={control.status}
-    placeholder={control.placeholder ?? ''}
-    ariaLabel={control.ariaLabel}
-    debounceMs={control.debounceMs ?? 500}
-    limit={control.limit ?? 10}
-    minLength={control.minLength ?? 1}
-    closeOnValid={control.closeOnValid ?? false}
-    showOptionsOnFocus={control.showOptionsOnFocus ?? false}
-    focusOptions={control.focusOptions ?? []}
-    footerText={control.footerText}
-    {language}
-    noResultsText={control.noResultsText}
-    loadingText={control.loadingText}
-    clearLabel={control.clearLabel}
-    searchOnExternalValueChange={control.searchOnExternalValueChange ?? false}
-    width={control.width}
-    minWidth={control.minWidth}
-    maxWidth={control.maxWidth}
-    getItemLabel={control.getItemLabel}
-    loadOptions={control.loadOptions}
-    onChange={(detail) => control.type === 'dropdownSearch' && void control.onChange(detail)}
-  />
+  {#key dropdownSearchKey}
+    <Dropdown
+      value={dropdownSearchValue}
+      search
+      inputStyle="input"
+      portal
+      selectedOptions={dropdownSearchSelectedOptions}
+      loadOptions={loadDropdownSearchOptions}
+      searchDebounceMs={control.debounceMs ?? 500}
+      searchLimit={control.limit ?? 10}
+      placeholder={control.placeholder ?? ''}
+      ariaLabel={control.ariaLabel}
+      {language}
+      noResultsText={control.noResultsText}
+      loadingText={control.loadingText}
+      width={control.width}
+      minWidth={control.minWidth}
+      maxWidth={control.maxWidth}
+      getItemLabel={dropdownSearchOptionLabel}
+      onChange={handleDropdownSearchChange}
+      onSearchChange={handleDropdownSearchQueryChange}
+    />
+  {/key}
 {:else if control.type === 'dateRange'}
   <DateRangeFilter
     value={control.value}
@@ -264,4 +433,16 @@
     onChange={control.onChange}
     onTriggerClick={control.onTriggerClick}
   />
+{:else if control.type === 'text'}
+  <input
+    class="suu-filter-table__text-input"
+    type="search"
+    value={control.value}
+    placeholder={control.placeholder ?? ''}
+    aria-label={control.ariaLabel}
+    disabled={control.disabled}
+    style={textInputStyle}
+    on:input={(event) => handleTextInput((event.currentTarget as HTMLInputElement).value)}
+    on:keydown={handleTextKeydown}
+  />
 {/if}

package/dist/data-table/FilterControl.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterControl.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/FilterControl.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AA6JhD,QAAA,MAAM,aAAa,KAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FilterControl.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/FilterControl.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAkD,aAAa,EAAE,MAAM,YAAY,CAAC;AAuUhG,QAAA,MAAM,aAAa,KAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/data-table/filter.d.ts

@@ -1,4 +1,4 @@
-import type { CheckboxFilterControl, DateRangeFilterControl, DropdownFilterControl, DropdownMultiSelectFilterControl, DropdownSearchFilterControl, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterSelectControl, NumberRangeFilterControl, RadioFilterControl } from './types.js';
+import type { CheckboxFilterControl, DateRangeFilterControl, DropdownFilterControl, DropdownMultiSelectFilterControl, DropdownSearchFilterControl, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterSelectControl, NumberRangeFilterControl, RadioFilterControl, TextInputFilterControl } from './types.js';
 declare function checkbox(options: Omit<CheckboxFilterControl, 'type'>): CheckboxFilterControl;
 declare function radio(options: Omit<RadioFilterControl, 'type'>): RadioFilterControl;
 declare function dropdownSearch(options: Omit<DropdownSearchFilterControl, 'type'>): DropdownSearchFilterControl;
@@ -10,6 +10,7 @@ declare function select(options: Omit<FilterSelectControl, 'type'>): FilterSelec
 declare function dropdown(options: Omit<DropdownFilterControl, 'type'>): DropdownFilterControl;
 declare function dropdownMultiSelect(options: Omit<DropdownMultiSelectFilterControl, 'type'>): DropdownMultiSelectFilterControl;
 declare function container(controls: FilterControl[]): FilterContainerControl;
+declare function text(options: Omit<TextInputFilterControl, 'type'>): TextInputFilterControl;
 export declare const filter: {
     checkbox: typeof checkbox;
     radio: typeof radio;
@@ -22,6 +23,7 @@ export declare const filter: {
     dropdown: typeof dropdown;
     dropdownMultiSelect: typeof dropdownMultiSelect;
     container: typeof container;
+    text: typeof text;
 };
 export {};
 //# sourceMappingURL=filter.d.ts.map

package/dist/data-table/filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/filter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,gCAAgC,EAChC,2BAA2B,EAC3B,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAEpB,iBAAS,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAErF;AAED,iBAAS,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAE5E;AAED,iBAAS,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,2BAA2B,EAAE,MAAM,CAAC,GAAG,2BAA2B,CAEvG;AAED,iBAAS,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,GAAG,sBAAsB,CAExF;AAED,iBAAS,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC,GAAG,wBAAwB,CAE9F;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAAG,iBAAiB,CAEzE;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAErF;AAED,iBAAS,mBAAmB,CAC1B,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,MAAM,CAAC,GACtD,gCAAgC,CAElC;AAED,iBAAS,SAAS,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,sBAAsB,CAEpE;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/filter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,gCAAgC,EAChC,2BAA2B,EAC3B,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAEpB,iBAAS,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAErF;AAED,iBAAS,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAE5E;AAED,iBAAS,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,2BAA2B,EAAE,MAAM,CAAC,GAAG,2BAA2B,CAEvG;AAED,iBAAS,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,GAAG,sBAAsB,CAExF;AAED,iBAAS,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC,GAAG,wBAAwB,CAE9F;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAAG,iBAAiB,CAEzE;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAErF;AAED,iBAAS,mBAAmB,CAC1B,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,MAAM,CAAC,GACtD,gCAAgC,CAElC;AAED,iBAAS,SAAS,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,sBAAsB,CAEpE;AAED,iBAAS,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,GAAG,sBAAsB,CAEnF;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAalB,CAAC"}

package/dist/data-table/filter.js

@@ -31,6 +31,9 @@ function dropdownMultiSelect(options) {
 function container(controls) {
     return { type: 'container', controls };
 }
+function text(options) {
+    return { type: 'text', ...options };
+}
 export const filter = {
     checkbox,
     radio,
@@ -42,5 +45,6 @@ export const filter = {
     select,
     dropdown,
     dropdownMultiSelect,
-    container
+    container,
+    text
 };

package/dist/data-table/index.d.ts

@@ -8,5 +8,5 @@ export { isDateRangePreset, resolveDateRangePreset } from './date-range.js';
 export { getUiMessages, resolveUiLanguage, uiLanguages } from '../i18n.js';
 export { getAriaSort, getCellValue, getPageCount, normalizePagination, setDataTableFilters, setDataTablePageSize, setDataTablePagination, setDataTableSort, toggleSort } from './state.js';
 export type { UiLanguage, UiMessages } from '../i18n.js';
-export type { CheckboxFilterDefinition, CheckboxFilterControl, CustomDateRangePreset, DataTableColumn, DataTableCellValue, DataTableClassValue, DataTableHorizontalAlign, DataTableLayout, DataTablePaginationQueryKey, DataTableServerPagination, DataTableVerticalAlign, DateRangeFilterDefinition, DateRangeFilterControl, DateRangeFilterValue, DateRangePreset, DateRangePresetContext, DateRangePresetEntry, DateRangePresetSelect, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, DataTableState, DataTableStateChangeHandler, DropdownSearchFilterDefinition, DropdownSearchFilterControl, DropdownFilterDefinition, DropdownFilterControl, DropdownMultiSelectFilterDefinition, DropdownMultiSelectFilterControl, FilterDefinition, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterOption, FilterSelectControl, FilterState, FilterTableRow, FilterValue, NumberRangeFilterDefinition, NumberRangeFilterControl, NumberRangeFilterValue, PaginationState, PaginationChangeHandler, PaginationDropdownPlacement, RadioFilterDefinition, RadioFilterControl, SortDirection, SortState } from './types.js';
+export type { CheckboxFilterDefinition, CheckboxFilterControl, CustomDateRangePreset, DataTableColumn, DataTableCellValue, DataTableClassValue, DataTableHorizontalAlign, DataTableLayout, DataTablePaginationQueryKey, DataTableServerPagination, DataTableVerticalAlign, DateRangeFilterDefinition, DateRangeFilterControl, DateRangeFilterValue, DateRangePreset, DateRangePresetContext, DateRangePresetEntry, DateRangePresetSelect, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, DataTableState, DataTableStateChangeHandler, DropdownSearchFilterDefinition, DropdownSearchFilterControl, DropdownFilterDefinition, DropdownFilterControl, DropdownMultiSelectFilterDefinition, DropdownMultiSelectFilterControl, FilterDefinition, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterOption, FilterSelectControl, FilterState, FilterTableRow, FilterValue, NumberRangeFilterDefinition, NumberRangeFilterControl, NumberRangeFilterValue, PaginationState, PaginationChangeHandler, PaginationDropdownPlacement, RadioFilterDefinition, RadioFilterControl, SortDirection, SortState, TextInputFilterDefinition, TextInputFilterControl } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/data-table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,UAAU,EACX,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,2BAA2B,EAC3B,yBAAyB,EACzB,sBAAsB,EACtB,yBAAyB,EACzB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,cAAc,EACd,2BAA2B,EAC3B,8BAA8B,EAC9B,2BAA2B,EAC3B,wBAAwB,EACxB,qBAAqB,EACrB,mCAAmC,EACnC,gCAAgC,EAChC,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,2BAA2B,EAC3B,wBAAwB,EACxB,sBAAsB,EACtB,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,SAAS,EACV,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,UAAU,EACX,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,2BAA2B,EAC3B,yBAAyB,EACzB,sBAAsB,EACtB,yBAAyB,EACzB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,cAAc,EACd,2BAA2B,EAC3B,8BAA8B,EAC9B,2BAA2B,EAC3B,wBAAwB,EACxB,qBAAqB,EACrB,mCAAmC,EACnC,gCAAgC,EAChC,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,2BAA2B,EAC3B,wBAAwB,EACxB,sBAAsB,EACtB,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,SAAS,EACT,yBAAyB,EACzB,sBAAsB,EACvB,MAAM,YAAY,CAAC"}

package/dist/data-table/types.d.ts

@@ -1,4 +1,3 @@
-import type { DropdownSearchChangeDetail, DropdownSearchItem, DropdownSearchItemLabelGetter, DropdownSearchLoadOptions, DropdownSearchStatus } from '../dropdown-search/types.js';
 import type { DropdownLoadOptions, DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelection, DropdownSelectionChangeHandler, DropdownTriggerClickHandler } from '../dropdown/types.js';
 export type SortDirection = 'asc' | 'desc';
 export type DataTableLayout = 'auto' | 'fixed';
@@ -187,6 +186,42 @@ export interface RadioFilterControl {
     options: FilterOption[];
     onChange: (value: string) => void | Promise<void>;
 }
+/**
+ * Data-table-local copy of the structural types that the removed free-text
+ * search component family used to host. The `dropdownSearch` filter control
+ * contract is unchanged; only that module is gone.
+ */
+export type DropdownSearchStatus = 'empty' | 'loading' | 'valid' | 'invalid' | 'error';
+/**
+ * Search options and selected chips use the unified label/value contract:
+ * `label` is the display text, `value` is the submitted string identifier.
+ * Extra business fields (e.g. `param_dict`) are preserved as metadata.
+ */
+export interface DropdownSearchItem {
+    label: string;
+    value: string;
+    param_dict?: Record<string, string | number | null>;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface DropdownSearchLoadContext {
+    limit: number;
+    signal: AbortSignal;
+}
+export interface DropdownSearchResult {
+    options: DropdownSearchItem[];
+    exactMatch?: DropdownSearchItem | null;
+}
+export type DropdownSearchLoadOptions = (query: string, context: DropdownSearchLoadContext) => Promise<DropdownSearchResult> | DropdownSearchResult;
+export interface DropdownSearchChangeDetail {
+    /** Free-text input content; distinct from the submitted `DropdownSearchItem.value`. */
+    value: string;
+    selectedItem: DropdownSearchItem | null;
+    selectedItems: DropdownSearchItem[];
+    status: DropdownSearchStatus;
+}
+/** Returns the input text shown for a selected item; defaults to the item label. */
+export type DropdownSearchItemLabelGetter = (item: DropdownSearchItem) => string;
 export interface DropdownSearchFilterControl {
     type: 'dropdownSearch';
     value: string;
@@ -241,7 +276,25 @@ export interface FilterContainerControl {
     type: 'container';
     controls: FilterControl[];
 }
-export type FilterControl = CheckboxFilterControl | RadioFilterControl | DropdownSearchFilterControl | DateRangeFilterControl | NumberRangeFilterControl | FilterButtonControl | FilterLinkControl | FilterSelectControl | DropdownFilterControl | DropdownMultiSelectFilterControl | FilterContainerControl;
+/**
+ * Free-text filter input for `keyword contains`-style filtering. Unlike
+ * `dropdownSearch` it has no selection semantics: every (debounced) change is
+ * the raw input text, so it pairs with consumer-side row matching.
+ */
+export interface TextInputFilterControl {
+    type: 'text';
+    value: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    /** Milliseconds to batch changes before `onChange` fires; 0 (default) reports every keystroke. */
+    debounceMs?: number;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    disabled?: boolean;
+    onChange: (value: string) => void | Promise<void>;
+}
+export type FilterControl = CheckboxFilterControl | RadioFilterControl | DropdownSearchFilterControl | DateRangeFilterControl | NumberRangeFilterControl | FilterButtonControl | FilterLinkControl | FilterSelectControl | DropdownFilterControl | DropdownMultiSelectFilterControl | FilterContainerControl | TextInputFilterControl;
 export interface FilterTableRow {
     key: string;
     title: string;
@@ -275,5 +328,9 @@ export type NumberRangeFilterDefinition = NumberRangeFilterControl & {
     key: string;
     label: string;
 };
-export type FilterDefinition = CheckboxFilterDefinition | RadioFilterDefinition | DropdownSearchFilterDefinition | DropdownFilterDefinition | DropdownMultiSelectFilterDefinition | DateRangeFilterDefinition | NumberRangeFilterDefinition;
+export type TextInputFilterDefinition = TextInputFilterControl & {
+    key: string;
+    label: string;
+};
+export type FilterDefinition = CheckboxFilterDefinition | RadioFilterDefinition | DropdownSearchFilterDefinition | DropdownFilterDefinition | DropdownMultiSelectFilterDefinition | DateRangeFilterDefinition | NumberRangeFilterDefinition | TextInputFilterDefinition;
 //# sourceMappingURL=types.d.ts.map