@ibobbyts/svelte-ui-utils 0.2.11 → 0.2.12

package/README.md

@@ -76,6 +76,14 @@ import { ToastManager, Dropdown, DropdownSearch, Dialog, DataTable } from '@ibob
 Supported positions are `top-left`, `top-center`, `top-right`, `right-center`,
 `bottom-right`, `bottom-center`, `bottom-left`, and `left-center`.
 
+## Dropdown
+
+Dropdown menus default to `placement="auto"` and open toward whichever side of
+the trigger has more available viewport space. The direction is recalculated
+while the menu is open when the viewport is resized or a scroll container
+moves. Set `placement="up"` or `placement="down"` to force a direction. Use
+`fitViewport={true}` as well to constrain the panel height to the chosen side.
+
 ## DropdownSearch
 
 ```svelte
@@ -279,6 +287,13 @@ 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.
 
+The original flat `options` API and all default behavior remain unchanged. New
+callers may opt into grouped options with `optionGroups`; each group can have an
+optional accessible label and its options keep the same keyboard and disabled
+semantics. `width`, `minWidth`, `maxWidth`, and `className` are optional styling
+hooks. `onTriggerClick` runs before the dropdown toggles, so a nested control
+can stop event propagation without preventing the dropdown from opening.
+
 ## DataTable
 
 ```svelte

package/dist/dropdown/Dropdown.svelte

@@ -2,18 +2,32 @@
 
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
-  import type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
+  import type {
+    DropdownChangeHandler,
+    DropdownMenuAlign,
+    DropdownOption,
+    DropdownOptionGroup,
+    DropdownPlacement,
+    DropdownTriggerClickHandler,
+    DropdownValue
+  } from './types.js';
 
   export let id: string | undefined = undefined;
   export let value: DropdownValue = '';
   export let options: DropdownOption[] = [];
+  export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
-  export let placement: DropdownPlacement = 'down';
+  export let placement: DropdownPlacement = 'auto';
   export let menuAlign: DropdownMenuAlign = 'right';
   export let fitViewport = false;
   export let fitContent = false;
   export let disabled = false;
+  export let width: string | undefined = undefined;
+  export let minWidth: string | undefined = undefined;
+  export let maxWidth: string | undefined = undefined;
+  export let className: string | undefined = undefined;
   export let onChange: DropdownChangeHandler | undefined = undefined;
+  export let onTriggerClick: DropdownTriggerClickHandler | undefined = undefined;
 
   const viewportMargin = 20;
   const menuGap = 6;
@@ -22,10 +36,12 @@
   let activeValue: DropdownValue = value;
   let dropdownElement: HTMLSpanElement | undefined;
   let buttonElement: HTMLButtonElement | undefined;
+  let resolvedPlacement: Exclude<DropdownPlacement, 'auto'> = placement === 'up' ? 'up' : 'down';
   let viewportPanelMaxHeight: string | undefined = undefined;
   let removeOpenViewportListeners: (() => void) | undefined = undefined;
 
-  $: selectedOption = options.find((option) => option.value === value);
+  $: resolvedOptions = optionGroups === undefined ? options : optionGroups.flatMap((group) => group.options);
+  $: selectedOption = resolvedOptions.find((option) => option.value === value);
   $: selectedText = selectedOption?.label ?? String(value);
   $: if (!open) {
     activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
@@ -37,28 +53,29 @@
       void updateViewportPanelMaxHeight();
     } else {
       disableOpenViewportTracking();
+      resolvedPlacement = placement === 'up' ? 'up' : 'down';
       viewportPanelMaxHeight = undefined;
     }
   }
 
   function firstEnabledOption(): DropdownOption | undefined {
-    return options.find((option) => !option.disabled);
+    return resolvedOptions.find((option) => !option.disabled);
   }
 
   function activeOptionIndex(nextActiveValue: DropdownValue): number {
-    const index = options.findIndex((option) => option.value === nextActiveValue && !option.disabled);
+    const index = resolvedOptions.findIndex((option) => option.value === nextActiveValue && !option.disabled);
     if (index >= 0) {
       return index;
     }
-    const fallbackIndex = options.findIndex((option) => option.value === value && !option.disabled);
+    const fallbackIndex = resolvedOptions.findIndex((option) => option.value === value && !option.disabled);
     if (fallbackIndex >= 0) {
       return fallbackIndex;
     }
-    return options.findIndex((option) => !option.disabled);
+    return resolvedOptions.findIndex((option) => !option.disabled);
   }
 
   function moveActiveOption(offset: number) {
-    const enabledOptions = options.filter((option) => !option.disabled);
+    const enabledOptions = resolvedOptions.filter((option) => !option.disabled);
     if (enabledOptions.length === 0) {
       return;
     }
@@ -82,10 +99,18 @@
     if (disabled) {
       return;
     }
+    if (!open) {
+      updateResolvedPlacement();
+    }
     open = !open;
     activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
   }
 
+  function handleTriggerClick(event: MouseEvent) {
+    onTriggerClick?.(event);
+    toggleOpen();
+  }
+
   function handleKeydown(event: KeyboardEvent) {
     if (disabled) {
       return;
@@ -102,6 +127,7 @@
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
       if (!open) {
+        updateResolvedPlacement();
         open = true;
         activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
       }
@@ -112,7 +138,7 @@
     if ((event.key === 'Enter' || event.key === ' ') && open) {
       event.preventDefault();
       const index = activeOptionIndex(activeValue);
-      const option = index >= 0 ? options[index] : undefined;
+      const option = index >= 0 ? resolvedOptions[index] : undefined;
       if (option) {
         selectOption(option);
       }
@@ -144,6 +170,21 @@
     return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
   }
 
+  function updateResolvedPlacement(rect = dropdownElement?.getBoundingClientRect()) {
+    if (placement !== 'auto') {
+      resolvedPlacement = placement;
+      return;
+    }
+    if (!rect || typeof window === 'undefined') {
+      resolvedPlacement = 'down';
+      return;
+    }
+
+    const availableAbove = rect.top - viewportMargin - menuGap;
+    const availableBelow = window.innerHeight - rect.bottom - viewportMargin - menuGap;
+    resolvedPlacement = availableBelow >= availableAbove ? 'down' : 'up';
+  }
+
   async function updateViewportPanelMaxHeight() {
     await tick();
 
@@ -156,17 +197,18 @@
       return;
     }
 
-    if (!fitViewport) {
+    const rect = dropdownElement?.getBoundingClientRect();
+    if (!rect) {
       return;
     }
 
-    const rect = dropdownElement?.getBoundingClientRect();
-    if (!rect) {
+    updateResolvedPlacement(rect);
+    if (!fitViewport) {
       return;
     }
 
     const available =
-      placement === 'up'
+      resolvedPlacement === 'up'
         ? rect.top - viewportMargin - menuGap
         : window.innerHeight - rect.bottom - viewportMargin - menuGap;
     viewportPanelMaxHeight = `${Math.max(0, Math.floor(available))}px`;
@@ -199,8 +241,17 @@
 
 <span
   bind:this={dropdownElement}
-  class="suu-dropdown"
+  class={[
+    'suu-dropdown',
+    width !== undefined || minWidth !== undefined || maxWidth !== undefined
+      ? 'suu-dropdown--sized'
+      : '',
+    className ?? ''
+  ].filter(Boolean).join(' ')}
   style:--suu-dropdown-panel-max-height={viewportPanelMaxHeight}
+  style:width
+  style:min-width={minWidth}
+  style:max-width={maxWidth}
   on:focusout={handleFocusout}
 >
   <button
@@ -213,7 +264,7 @@
     aria-haspopup="listbox"
     aria-expanded={open}
     data-value={String(value)}
-    on:click={toggleOpen}
+    on:click={handleTriggerClick}
     on:keydown={handleKeydown}
   >
     <span>{selectedText}</span>
@@ -223,35 +274,67 @@
   {#if open}
     <div
       class="suu-dropdown__menu"
-      class:suu-dropdown__menu--up={placement === 'up'}
-      class:suu-dropdown__menu--down={placement === 'down'}
+      class:suu-dropdown__menu--up={resolvedPlacement === 'up'}
+      class:suu-dropdown__menu--down={resolvedPlacement === 'down'}
       class:suu-dropdown__menu--left={menuAlign === 'left'}
       class:suu-dropdown__menu--right={menuAlign === 'right'}
       class:suu-dropdown__menu--fit-content={fitContent}
     >
       <div class="suu-dropdown__panel" role="listbox" aria-label={ariaLabel}>
-        {#each options as option}
-          <button
-            type="button"
-            class="suu-dropdown__option"
-            class:suu-dropdown__option--active={option.value === activeValue}
-            class:suu-dropdown__option--disabled={option.disabled}
-            role="option"
-            aria-selected={option.value === value}
-            aria-disabled={option.disabled}
-            disabled={option.disabled}
-            data-value={String(option.value)}
-            on:mousedown|preventDefault={() => undefined}
-            on:mouseenter={() => {
-              if (!option.disabled) {
-                activeValue = option.value;
-              }
-            }}
-            on:click={() => selectOption(option)}
-          >
-            {option.label}
-          </button>
-        {/each}
+        {#if optionGroups === undefined}
+          {#each options as option}
+            <button
+              type="button"
+              class="suu-dropdown__option"
+              class:suu-dropdown__option--active={option.value === activeValue}
+              class:suu-dropdown__option--disabled={option.disabled}
+              role="option"
+              aria-selected={option.value === value}
+              aria-disabled={option.disabled}
+              disabled={option.disabled}
+              data-value={String(option.value)}
+              on:mousedown|preventDefault={() => undefined}
+              on:mouseenter={() => {
+                if (!option.disabled) {
+                  activeValue = option.value;
+                }
+              }}
+              on:click={() => selectOption(option)}
+            >
+              {option.label}
+            </button>
+          {/each}
+        {:else}
+          {#each optionGroups as group}
+            <div class="suu-dropdown__group" role="group" aria-label={group.label}>
+              {#if group.label}
+                <div class="suu-dropdown__group-label">{group.label}</div>
+              {/if}
+              {#each group.options as option}
+                <button
+                  type="button"
+                  class="suu-dropdown__option"
+                  class:suu-dropdown__option--active={option.value === activeValue}
+                  class:suu-dropdown__option--disabled={option.disabled}
+                  role="option"
+                  aria-selected={option.value === value}
+                  aria-disabled={option.disabled}
+                  disabled={option.disabled}
+                  data-value={String(option.value)}
+                  on:mousedown|preventDefault={() => undefined}
+                  on:mouseenter={() => {
+                    if (!option.disabled) {
+                      activeValue = option.value;
+                    }
+                  }}
+                  on:click={() => selectOption(option)}
+                >
+                  {option.label}
+                </button>
+              {/each}
+            </div>
+          {/each}
+        {/if}
       </div>
     </div>
   {/if}

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
+import type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownTriggerClickHandler, DropdownValue } 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;
@@ -16,13 +16,19 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     id?: string | undefined;
     value?: DropdownValue;
     options?: DropdownOption[];
+    optionGroups?: DropdownOptionGroup[] | undefined;
     ariaLabel?: string | undefined;
     placement?: DropdownPlacement;
     menuAlign?: DropdownMenuAlign;
     fitViewport?: boolean;
     fitContent?: boolean;
     disabled?: boolean;
+    width?: string | undefined;
+    minWidth?: string | undefined;
+    maxWidth?: string | undefined;
+    className?: string | undefined;
     onChange?: DropdownChangeHandler | undefined;
+    onTriggerClick?: DropdownTriggerClickHandler | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAkO7H,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,QAAQ;SAVyN,MAAM,GAAG,SAAS;YAAU,aAAa;cAAY,cAAc,EAAE;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;eAA2G,qBAAqB,GAAG,SAAS;;;kBAUzb,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC;AA6RtB,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,QAAQ;SAVuW,MAAM,GAAG,SAAS;YAAU,aAAa;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;YAAwG,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;eAAa,qBAAqB,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAU7yB,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/dropdown/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Dropdown } from './Dropdown.svelte';
-export type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
+export type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownTriggerClickHandler, DropdownValue } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EACV,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC"}

package/dist/dropdown/types.d.ts

@@ -1,10 +1,15 @@
 export type DropdownValue = string | number;
-export type DropdownPlacement = 'up' | 'down';
+export type DropdownPlacement = 'auto' | 'up' | 'down';
 export type DropdownMenuAlign = 'left' | 'right';
 export interface DropdownOption {
     label: string;
     value: DropdownValue;
     disabled?: boolean;
 }
+export interface DropdownOptionGroup {
+    label?: string;
+    options: DropdownOption[];
+}
 export type DropdownChangeHandler = (value: DropdownValue) => void | Promise<void>;
+export type DropdownTriggerClickHandler = (event: MouseEvent) => void;
 //# sourceMappingURL=types.d.ts.map

package/dist/dropdown/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC"}

package/dist/style.css

@@ -1139,6 +1139,10 @@
   line-height: 1;
 }
 
+.suu-dropdown--sized .suu-dropdown__button {
+  width: 100%;
+}
+
 .suu-dropdown__button:hover,
 .suu-dropdown__button:focus-visible {
   border-color: var(--suu-color-accent);
@@ -1208,6 +1212,19 @@
   overscroll-behavior: contain;
 }
 
+.suu-dropdown__group + .suu-dropdown__group {
+  border-top: 1px solid var(--suu-color-border);
+}
+
+.suu-dropdown__group-label {
+  padding: 8px 14px 6px;
+  background: var(--suu-color-surface);
+  color: var(--suu-color-muted);
+  font-size: 0.75em;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
 .suu-dropdown__option {
   display: block;
   width: 100%;

package/package.json

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