@ibobbyts/svelte-ui-utils 0.2.10 → 0.2.11

package/README.md

@@ -274,6 +274,11 @@ trigger's left edge; the default is `right` for backward compatibility.
 longest option while keeping its left edge aligned. `DataTable` uses this same
 component for its page-size picker.
 
+The dropdown panel defaults to the viewport height (`100vh`) and remains
+scrollable when its contents exceed that height. When `fitViewport` is enabled,
+the component replaces that default with the space available above or below the
+trigger.
+
 ## DataTable
 
 ```svelte
@@ -403,6 +408,9 @@ for the left column and a controlled filter created with the `filter` helper:
 <FilterTable rows={filterRows} language="en_us" />
 ```
 
+`filter.select` uses the shared `Dropdown` component, so select filters keep the
+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`

package/dist/data-table/FilterControl.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes={false} />
 
 <script lang="ts">
+  import Dropdown from '../dropdown/Dropdown.svelte';
   import DropdownSearch from '../dropdown-search/DropdownSearch.svelte';
   import type { UiLanguage } from '../i18n.js';
   import DateRangeFilter from './DateRangeFilter.svelte';
@@ -30,11 +31,6 @@
     }
   }
 
-  function runSelect(event: Event) {
-    if (control.type === 'select') {
-      void control.onChange((event.currentTarget as HTMLSelectElement).value);
-    }
-  }
 </script>
 
 {#if control.type === 'container'}
@@ -184,9 +180,15 @@
     <span>{control.label}</span>
   </a>
 {:else if control.type === 'select'}
-  <select class="suu-filter-table__select" aria-label={control.ariaLabel} value={control.value} on:change={runSelect}>
-    {#each control.options as option}
-      <option value={option.value} disabled={option.disabled}>{option.label}</option>
-    {/each}
-  </select>
+  <Dropdown
+    value={control.value}
+    options={control.options}
+    ariaLabel={control.ariaLabel}
+    fitContent
+    onChange={(value) => {
+      if (control.type === 'select') {
+        void control.onChange(String(value));
+      }
+    }}
+  />
 {/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":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AA4IhD,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":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwIhD,QAAA,MAAM,aAAa,KAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/style.css

@@ -1202,7 +1202,7 @@
 }
 
 .suu-dropdown__panel {
-  max-height: var(--suu-dropdown-panel-max-height, 220px);
+  max-height: var(--suu-dropdown-panel-max-height, 100vh);
   overflow-y: auto;
   background: var(--suu-color-bg);
   overscroll-behavior: contain;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",