@ibobbyts/svelte-ui-utils 0.4.6 → 0.5.0

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
@@ -766,10 +668,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)
         }),
@@ -811,13 +711,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
@@ -832,6 +725,28 @@ period, including days after today. The `last24Hours` preset also emits
 a consuming app can run an exact timestamp query while still showing the covered
 dates in the inputs.
 
+Pass `presets` to fully control the preset row. Each entry is one of:
+
+- a built-in preset key: `'last24Hours'`, `'last7Days'`, `'last30Days'`,
+  `'today'`, `'thisWeek'`, `'thisMonth'`, `'thisYear'`;
+- a custom preset object `{ key, label?, resolve }`, where `resolve` receives
+  `{ now, weekStartsOn }` and returns `{ startDate, endDate }` dates that the
+  component formats into the value;
+- a consumer-controlled select object `{ type: 'select', key, value, options,
+  ariaLabel?, onChange }`, rendered as a dropdown inside the preset row (for
+  example a year picker whose selection feeds custom preset resolvers); the
+  component only reports selection changes, the consumer owns the value;
+- `'quickMonth'` or `'quickYear'` for the quick month/year selects;
+- `'divider'` for a visual separator between entries.
+
+When `presets` is omitted the default row is used: the seven built-in buttons
+with dividers after `last 30 days` and `this year`, then both quick selects.
+Custom preset keys are stored in `value.preset` as plain strings, so
+`defaultPreset` and the active-button highlight work with them too. Custom
+labels resolve from `label`, then `presetLabels[key]`, then the key itself.
+Preset and select `key`s must be unique within one `presets` list; duplicate
+keys make the active-state highlight and the `defaultPreset` lookup ambiguous.
+
 `numberRange` renders min/max number inputs and supports `prefixLabel`, for
 example `$` for currency filters.
 
@@ -928,21 +843,18 @@ calculations.
 ## Release
 
 Do not publish this package as part of consumer-app local integration work.
-Publish only when a release is explicitly requested. Releases are published
-directly from the maintainer's machine to npm; do not create a GitHub Actions
-secret or a GitHub Release for package publishing.
-
-The npm token is exported as `NPM_TOKEN` from `~/.zshrc`. After updating the
-package version, run the validation and publish commands locally:
-
-```bash
-npm run check
-npm test
-npm run package
-npm publish --access public
-```
-
-Never commit the npm token or copy it into repository settings.
+Publish only when a release is explicitly requested.
+
+Releases publish from CI via npm Trusted Publishing (OIDC): bump the version
+in `package.json`, commit, then push a `vX.Y.Z` tag. That runs
+[.github/workflows/npm-publish.yml](.github/workflows/npm-publish.yml), which
+installs from the committed lockfile, runs `svelte-check` and `vitest`, and
+publishes with no npm token in the environment — the runner's OIDC identity is
+the credential (`id-token: write`). The tag must match `package.json`'s
+version. The trusted publisher is linked on npmjs.com (user `iBobbyTS`, repo
+`svelte-ui-utils`, workflow `npm-publish.yml`); the workflow filename is part
+of that link and must not be renamed. `prepublishOnly` builds `dist/` before
+the tarball is packed, so no publish path can ship stale output.
 
 ## Bun install verification
 

package/dist/data-table/DateRangeFilter.svelte

@@ -4,8 +4,14 @@
   import { onMount } from 'svelte';
   import Dropdown from '../dropdown/Dropdown.svelte';
   import { getUiMessages, type UiLanguage } from '../i18n.js';
-  import { endOfMonth, formatDate, resolveDateRangePreset, startOfDay } from './date-range.js';
-  import type { DateRangeFilterValue, DateRangePreset } from './types.js';
+  import { endOfMonth, formatDate, isDateRangePreset, resolveDateRangePreset, startOfDay } from './date-range.js';
+  import type {
+    CustomDateRangePreset,
+    DateRangeFilterValue,
+    DateRangePreset,
+    DateRangePresetEntry,
+    DateRangePresetSelect
+  } from './types.js';
 
   export let value: DateRangeFilterValue = {
     startDate: '',
@@ -15,23 +21,29 @@
   export let language: UiLanguage = 'en_us';
   export let startLabel: string | undefined = undefined;
   export let endLabel: string | undefined = undefined;
-  export let presetLabels: Partial<Record<DateRangePreset, string>> = {};
-  export let defaultPreset: DateRangePreset | undefined = undefined;
+  export let presets: DateRangePresetEntry[] | undefined = undefined;
+  export let presetLabels: Partial<Record<string, string>> = {};
+  export let defaultPreset: string | undefined = undefined;
   export let quickYears: number[] | undefined = undefined;
   export let now: () => Date = () => new Date();
   export let weekStartsOn: 0 | 1 = 1;
   export let onChange: ((value: DateRangeFilterValue) => void) | undefined = undefined;
 
-  const presets: DateRangePreset[] = [
+  const defaultPresetEntries: DateRangePresetEntry[] = [
     'last24Hours',
     'last7Days',
     'last30Days',
+    'divider',
     'today',
     'thisWeek',
     'thisMonth',
-    'thisYear'
+    'thisYear',
+    'divider',
+    'quickMonth',
+    'quickYear'
   ];
   const monthNumbers = Array.from({ length: 12 }, (_, index) => index + 1);
+  const structuralEntryKeys = new Set(['quickMonth', 'quickYear', 'divider']);
 
   let quickYear = '';
   let quickMonth = '';
@@ -39,6 +51,7 @@
   $: messages = getUiMessages(language);
   $: resolvedStartLabel = startLabel ?? messages.dateRange.startLabel;
   $: resolvedEndLabel = endLabel ?? messages.dateRange.endLabel;
+  $: presetEntries = presets ?? defaultPresetEntries;
   $: currentYear = startOfDay(now()).getFullYear();
   $: quickYearOptions = quickYears ?? [currentYear - 1, currentYear, currentYear + 1];
   $: quickMonthOptions = [
@@ -71,8 +84,38 @@
     quickMonth = '';
   }
 
-  function resolvePreset(preset: DateRangePreset): DateRangeFilterValue {
-    return resolveDateRangePreset(preset, now(), weekStartsOn);
+  function isSelectEntry(entry: DateRangePresetEntry): entry is DateRangePresetSelect {
+    return typeof entry === 'object' && 'type' in entry && entry.type === 'select';
+  }
+
+  function isPresetButtonEntry(entry: DateRangePresetEntry): entry is DateRangePreset | CustomDateRangePreset {
+    if (typeof entry === 'string') {
+      return !structuralEntryKeys.has(entry);
+    }
+    return !isSelectEntry(entry);
+  }
+
+  function presetKeyOf(entry: DateRangePreset | CustomDateRangePreset): string {
+    return typeof entry === 'string' ? entry : entry.key;
+  }
+
+  function resolvePresetEntry(entry: DateRangePreset | CustomDateRangePreset): DateRangeFilterValue {
+    if (typeof entry === 'string') {
+      return resolveDateRangePreset(entry, now(), weekStartsOn);
+    }
+
+    const range = entry.resolve({ now: now(), weekStartsOn });
+    return {
+      startDate: formatDate(range.startDate),
+      endDate: formatDate(range.endDate),
+      preset: entry.key
+    };
+  }
+
+  function findPresetEntryByKey(key: string): DateRangePreset | CustomDateRangePreset | undefined {
+    return presetEntries
+      .filter(isPresetButtonEntry)
+      .find((entry) => presetKeyOf(entry) === key);
   }
 
   function emit(next: DateRangeFilterValue) {
@@ -132,18 +175,22 @@
     emit(resolveQuickRange(Number(quickYear), Number(nextValue)));
   }
 
-  function applyPreset(preset: DateRangePreset) {
+  function applyPresetEntry(entry: DateRangePreset | CustomDateRangePreset) {
     clearQuickSelection();
-    if (value.preset === preset) {
+    if (value.preset === presetKeyOf(entry)) {
       emit(emptyRange());
       return;
     }
 
-    emit(resolvePreset(preset));
+    emit(resolvePresetEntry(entry));
   }
 
-  function labelFor(preset: DateRangePreset) {
-    return presetLabels[preset] ?? messages.dateRange.presetLabels[preset];
+  function labelFor(entry: DateRangePreset | CustomDateRangePreset) {
+    if (typeof entry === 'string') {
+      return presetLabels[entry] ?? messages.dateRange.presetLabels[entry] ?? entry;
+    }
+
+    return entry.label ?? presetLabels[entry.key] ?? entry.key;
   }
 
   function monthLabel(month: number) {
@@ -151,8 +198,14 @@
   }
 
   onMount(() => {
-    if (defaultPreset && isEmptyRange(value)) {
-      emit(resolvePreset(defaultPreset));
+    if (!defaultPreset || !isEmptyRange(value)) {
+      return;
+    }
+
+    const entry = findPresetEntryByKey(defaultPreset) ??
+      (isDateRangePreset(defaultPreset) ? defaultPreset : undefined);
+    if (entry) {
+      emit(resolvePresetEntry(entry));
     }
   });
 </script>
@@ -175,40 +228,59 @@
     />
   </label>
   <div class="suu-filter-preset-row">
-    {#each presets as preset}
-      <button
-        type="button"
-        class="suu-filter-preset"
-        class:suu-filter-preset--active={value.preset === preset}
-        on:click={() => applyPreset(preset)}
-      >
-        {labelFor(preset)}
-      </button>
-      {#if preset === 'last30Days' || preset === 'thisYear'}
+    {#each presetEntries as entry}
+      {#if entry === 'divider'}
         <span class="suu-filter-preset-divider" aria-hidden="true"></span>
+      {:else if entry === 'quickMonth'}
+        <label class="suu-filter-preset-select">
+          <span class="suu-visually-hidden">{messages.dateRange.quickMonthLabel}</span>
+          <Dropdown
+            ariaLabel={messages.dateRange.quickMonthLabel}
+            value={quickMonth}
+            options={quickMonthOptions}
+            fitViewport={true}
+            fitContent={true}
+            onChange={(nextValue) => updateQuickMonth(String(nextValue))}
+          />
+        </label>
+      {:else if entry === 'quickYear'}
+        <label class="suu-filter-preset-select">
+          <span class="suu-visually-hidden">{messages.dateRange.quickYearLabel}</span>
+          <Dropdown
+            ariaLabel={messages.dateRange.quickYearLabel}
+            value={quickYear}
+            options={quickYearDropdownOptions}
+            fitViewport={true}
+            fitContent={true}
+            onChange={(nextValue) => updateQuickYear(String(nextValue))}
+          />
+        </label>
+      {:else if isSelectEntry(entry)}
+        <label class="suu-filter-preset-select">
+          <span class="suu-visually-hidden">{entry.ariaLabel ?? entry.key}</span>
+          <Dropdown
+            ariaLabel={entry.ariaLabel ?? entry.key}
+            value={entry.value}
+            options={entry.options}
+            fitViewport={true}
+            fitContent={true}
+            onChange={(nextValue) => {
+              if (isSelectEntry(entry)) {
+                void entry.onChange(String(nextValue));
+              }
+            }}
+          />
+        </label>
+      {:else}
+        <button
+          type="button"
+          class="suu-filter-preset"
+          class:suu-filter-preset--active={value.preset === presetKeyOf(entry)}
+          on:click={() => applyPresetEntry(entry)}
+        >
+          {labelFor(entry)}
+        </button>
       {/if}
     {/each}
-    <label class="suu-filter-preset-select">
-      <span class="suu-visually-hidden">{messages.dateRange.quickMonthLabel}</span>
-      <Dropdown
-        ariaLabel={messages.dateRange.quickMonthLabel}
-        value={quickMonth}
-        options={quickMonthOptions}
-        fitViewport={true}
-        fitContent={true}
-        onChange={(nextValue) => updateQuickMonth(String(nextValue))}
-      />
-    </label>
-    <label class="suu-filter-preset-select">
-      <span class="suu-visually-hidden">{messages.dateRange.quickYearLabel}</span>
-      <Dropdown
-        ariaLabel={messages.dateRange.quickYearLabel}
-        value={quickYear}
-        options={quickYearDropdownOptions}
-        fitViewport={true}
-        fitContent={true}
-        onChange={(nextValue) => updateQuickYear(String(nextValue))}
-      />
-    </label>
   </div>
 </div>

package/dist/data-table/DateRangeFilter.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type UiLanguage } from '../i18n.js';
-import type { DateRangeFilterValue, DateRangePreset } from './types.js';
+import type { DateRangeFilterValue, DateRangePresetEntry } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -18,8 +18,9 @@ declare const DateRangeFilter: $$__sveltets_2_IsomorphicComponent<{
     language?: UiLanguage;
     startLabel?: string | undefined;
     endLabel?: string | undefined;
-    presetLabels?: Partial<Record<DateRangePreset, string>>;
-    defaultPreset?: DateRangePreset | undefined;
+    presets?: DateRangePresetEntry[] | undefined;
+    presetLabels?: Partial<Record<string, string>>;
+    defaultPreset?: string | undefined;
     quickYears?: number[] | undefined;
     now?: () => Date;
     weekStartsOn?: 0 | 1;

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DateRangeFilter.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAgMxE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;YAV2O,oBAAoB;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;mBAAiB,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;oBAAkB,eAAe,GAAG,SAAS;iBAAe,MAAM,EAAE,GAAG,SAAS;UAAQ,MAAM,IAAI;mBAAiB,CAAC,GAAG,CAAC;eAAa,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC,GAAG,SAAS;;;kBAUxf,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DateRangeFilter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DateRangeFilter.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EAER,oBAAoB,EAEpB,oBAAoB,EAErB,MAAM,YAAY,CAAC;AA2PtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;YAV8P,oBAAoB;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;cAAY,oBAAoB,EAAE,GAAG,SAAS;mBAAiB,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;oBAAkB,MAAM,GAAG,SAAS;iBAAe,MAAM,EAAE,GAAG,SAAS;UAAQ,MAAM,IAAI;mBAAiB,CAAC,GAAG,CAAC;eAAa,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC,GAAG,SAAS;;;kBAUviB,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/data-table/FilterControl.svelte

@@ -3,11 +3,16 @@
 <script lang="ts">
   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 +37,111 @@
     }
   }
 
+  // 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]
+    : [];
+
 </script>
 
 {#if control.type === 'container'}
@@ -110,37 +220,36 @@
     {/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}
     {language}
     startLabel={control.startLabel}
     endLabel={control.endLabel}
+    presets={control.presets}
     presetLabels={control.presetLabels ?? {}}
     defaultPreset={control.defaultPreset}
     quickYears={control.quickYears}