@ibobbyts/svelte-ui-utils 0.3.1 → 0.3.4

package/dist/dropdown/Dropdown.svelte

@@ -26,6 +26,7 @@
   export let minWidth: string | undefined = undefined;
   export let maxWidth: string | undefined = undefined;
   export let className: string | undefined = undefined;
+  export let portal = false;
   export let onChange: DropdownChangeHandler | undefined = undefined;
   export let onTriggerClick: DropdownTriggerClickHandler | undefined = undefined;
 
@@ -36,8 +37,13 @@
   let activeValue: DropdownValue = value;
   let dropdownElement: HTMLSpanElement | undefined;
   let buttonElement: HTMLButtonElement | undefined;
+  let menuElement: HTMLDivElement | undefined;
   let resolvedPlacement: Exclude<DropdownPlacement, 'auto'> = placement === 'up' ? 'up' : 'down';
   let viewportPanelMaxHeight: string | undefined = undefined;
+  let portalMenuTop = '-9999px';
+  let portalMenuLeft: string | undefined = undefined;
+  let portalMenuRight: string | undefined = undefined;
+  let portalMenuWidth: string | undefined = undefined;
   let removeOpenViewportListeners: (() => void) | undefined = undefined;
 
   $: resolvedOptions = optionGroups === undefined ? options : optionGroups.flatMap((group) => group.options);
@@ -147,6 +153,9 @@
 
   function handleFocusout(event: FocusEvent) {
     const nextTarget = event.relatedTarget;
+    if (portal && nextTarget instanceof Node && menuElement?.contains(nextTarget)) {
+      return;
+    }
     if (nextTarget instanceof Node && event.currentTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
       return;
     }
@@ -204,6 +213,7 @@
 
     updateResolvedPlacement(rect);
     if (!fitViewport) {
+      updatePortalPosition(rect);
       return;
     }
 
@@ -212,6 +222,39 @@
         ? rect.top - viewportMargin - menuGap
         : window.innerHeight - rect.bottom - viewportMargin - menuGap;
     viewportPanelMaxHeight = `${Math.max(0, Math.floor(available))}px`;
+    updatePortalPosition(rect);
+  }
+
+  function updatePortalPosition(rect: DOMRect) {
+    if (!portal || typeof window === 'undefined') {
+      return;
+    }
+
+    const menuHeight = menuElement?.getBoundingClientRect().height ?? 0;
+    portalMenuTop = `${Math.round(
+      resolvedPlacement === 'up' ? rect.top - menuHeight - menuGap : rect.bottom + menuGap
+    )}px`;
+    if (menuAlign === 'right') {
+      portalMenuLeft = undefined;
+      portalMenuRight = `${Math.round(window.innerWidth - rect.right)}px`;
+    } else {
+      portalMenuLeft = `${Math.round(rect.left)}px`;
+      portalMenuRight = undefined;
+    }
+    portalMenuWidth = fitContent ? undefined : `${Math.round(rect.width)}px`;
+  }
+
+  function portalMenu(node: HTMLDivElement, enabled: boolean) {
+    if (enabled && typeof document !== 'undefined') {
+      document.body.appendChild(node);
+    }
+    return {
+      destroy() {
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      }
+    };
   }
 
   function enableOpenViewportTracking() {
@@ -267,18 +310,25 @@
     on:click={handleTriggerClick}
     on:keydown={handleKeydown}
   >
-    <span>{selectedText}</span>
+    <span class="suu-dropdown__label">{selectedText}</span>
     <span class="suu-dropdown__chevron" aria-hidden="true"></span>
   </button>
 
   {#if open}
     <div
+      bind:this={menuElement}
+      use:portalMenu={portal}
       class="suu-dropdown__menu"
+      class:suu-dropdown__menu--portal={portal}
       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}
+      style:--suu-dropdown-menu-top={portalMenuTop}
+      style:--suu-dropdown-menu-left={portalMenuLeft}
+      style:--suu-dropdown-menu-right={portalMenuRight}
+      style:--suu-dropdown-menu-width={portalMenuWidth}
     >
       <div class="suu-dropdown__panel" role="listbox" aria-label={ariaLabel}>
         {#if optionGroups === undefined}
@@ -301,7 +351,7 @@
               }}
               on:click={() => selectOption(option)}
             >
-              {option.label}
+              <span class="suu-dropdown__label">{option.label}</span>
             </button>
           {/each}
         {:else}
@@ -329,7 +379,7 @@
                   }}
                   on:click={() => selectOption(option)}
                 >
-                  {option.label}
+                  <span class="suu-dropdown__label">{option.label}</span>
                 </button>
               {/each}
             </div>

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

@@ -27,6 +27,7 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     minWidth?: string | undefined;
     maxWidth?: string | undefined;
     className?: string | undefined;
+    portal?: boolean;
     onChange?: DropdownChangeHandler | undefined;
     onTriggerClick?: DropdownTriggerClickHandler | undefined;
 }, {

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,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"}
+{"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;AAwUtB,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;SAVwX,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;;eAAqC,qBAAqB,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUt1B,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/style.css

@@ -1128,7 +1128,8 @@
   gap: var(--suu-dropdown-space);
   align-items: center;
   justify-content: space-between;
-  height: 42px;
+  min-height: 42px;
+  height: auto;
   padding: 0 var(--suu-dropdown-space);
   border: 1px solid var(--suu-color-border);
   border-radius: var(--suu-radius);
@@ -1137,6 +1138,21 @@
   cursor: pointer;
   font: inherit;
   line-height: 1;
+  text-align: left;
+}
+
+.suu-dropdown__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  white-space: normal;
+  overflow-wrap: break-word;
+  line-height: 1.2;
 }
 
 .suu-dropdown--sized .suu-dropdown__button {
@@ -1155,6 +1171,7 @@
 }
 
 .suu-dropdown__chevron {
+  flex: 0 0 auto;
   width: 0.58em;
   height: 0.58em;
   border-right: 2px solid currentcolor;
@@ -1176,17 +1193,26 @@
   box-shadow: 0 18px 42px rgb(15 23 42 / 0.16);
 }
 
-.suu-dropdown__menu--left {
+.suu-dropdown__menu--portal {
+  position: fixed;
+  top: var(--suu-dropdown-menu-top);
+  right: var(--suu-dropdown-menu-right, auto);
+  left: var(--suu-dropdown-menu-left, auto);
+  width: var(--suu-dropdown-menu-width, max-content);
+  z-index: 1200;
+}
+
+.suu-dropdown__menu--left:not(.suu-dropdown__menu--portal) {
   right: auto;
   left: 0;
 }
 
-.suu-dropdown__menu--right {
+.suu-dropdown__menu--right:not(.suu-dropdown__menu--portal) {
   right: 0;
   left: auto;
 }
 
-.suu-dropdown__menu--up {
+.suu-dropdown__menu--up:not(.suu-dropdown__menu--portal) {
   top: auto;
   bottom: calc(100% + 6px);
 }
@@ -1205,6 +1231,16 @@
   white-space: nowrap;
 }
 
+.suu-dropdown__menu--fit-content .suu-dropdown__option .suu-dropdown__label {
+  overflow: visible;
+  text-overflow: clip;
+  display: block;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
 .suu-dropdown__panel {
   max-height: var(--suu-dropdown-panel-max-height, 100vh);
   overflow-y: auto;

package/package.json

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