@invopop/popui 0.1.94 → 0.1.96

package/dist/MenuItem.svelte

@@ -1,22 +1,13 @@
 <script lang="ts">
   import MenuItem from './MenuItem.svelte'
-  import { flip, shift, offset } from 'svelte-floating-ui/dom'
-  import { createFloatingActions } from 'svelte-floating-ui'
   import clsx from 'clsx'
-  import type { MenuItemProps, DrawerOption, AnyProp } from './types.ts'
+  import { cn } from './utils.js'
+  import type { MenuItemProps } from './types.ts'
   import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
   import { ChevronDown, ChevronRight } from '@invopop/ui-icons'
-  import { FolderL } from '@invopop/ui-icons'
   import { resolveIcon } from './helpers.js'
-  import DrawerContext from './DrawerContext.svelte'
   import TagBeta from './TagBeta.svelte'
 
-  const [floatingRef, floatingContent] = createFloatingActions({
-    strategy: 'absolute',
-    placement: 'bottom-start',
-    middleware: [offset(-4), flip(), shift()]
-  })
-
   let {
     label = '',
     url = '',
@@ -24,50 +15,40 @@
     collapsable = false,
     open = $bindable(false),
     active = false,
-    collapsedSidebar = false,
     iconTheme = 'default',
     icon = undefined,
+    imageUrl = undefined,
     beta = false,
     children = undefined,
+    action,
+    ref = $bindable(null),
+    class: className,
     onclick
   }: MenuItemProps = $props()
 
   let resolvedIcon: IconSource | undefined = $state()
-  let hovered = $state(false)
-  let highlight = $state(false)
-  let leaveHoverTimeout: ReturnType<typeof setTimeout> | null = null
-  let itemStyles = $derived(
+  let rowStyles = $derived(
+    clsx('flex items-center rounded-lg border border-transparent p-1', {
+      'gap-1.5': action || collapsable,
+      'bg-background-selected-inverse': active,
+      'hover:bg-background-selected-inverse': !active
+    })
+  )
+  let buttonStyles = $derived(
     clsx(
-      { 'text-foreground-inverse font-medium': !isFolderItem },
-      { 'text-foreground-inverse-secondary': isFolderItem && !active },
+      'flex-1 min-w-0 h-6 cursor-pointer text-base flex items-center hover:text-white focus:text-white',
       {
-        'border border-transparent hover:bg-background-selected-inverse group p-[7px] size-8':
-          collapsedSidebar
-      },
-      { 'w-full px-2 py-1.5 h-8': !collapsedSidebar },
-      {
-        'bg-background-selected-inverse text-white': active
-      },
-      { 'hover:bg-background-selected-inverse': !active }
+        'text-foreground-inverse font-medium': !isFolderItem,
+        'text-foreground-inverse-secondary': isFolderItem && !active,
+        'text-white': active
+      }
     )
   )
-  let iconStyles = $derived(
-    clsx({ 'group-hover:text-white text-icon-inverse-bold!': collapsedSidebar })
-  )
   let wrapperStyles = $derived(
     clsx({
-      'ml-4 border-l border-white-10 pl-2 pt-0.5 relative': isFolderItem
+      'group/menu-item ml-4 border-l border-white-10 pl-2 pt-0.5 relative': isFolderItem
     })
   )
-  let items = $derived([
-    { label, value: url, selected: active, icon: resolvedIcon },
-    ...(children || []).map((c) => ({
-      label: c.label || '',
-      value: c.url || '',
-      selected: c.active,
-      icon: FolderL
-    }))
-  ] as DrawerOption[])
 
   $effect(() => {
     resolveIcon(icon).then((res) => (resolvedIcon = res))
@@ -80,84 +61,68 @@
 
     onclick?.(url)
   }
-
-  function handleClickChild(value: AnyProp) {
-    hovered = false
-    onclick?.(value as string)
-  }
-
-  function handleHover() {
-    highlight = true
-    if (leaveHoverTimeout) {
-      clearTimeout(leaveHoverTimeout)
-    }
-    hovered = true
-  }
-
-  function handleBlur() {
-    highlight = false
-    leaveHoverTimeout = setTimeout(() => {
-      hovered = false
-    }, 200)
-  }
 </script>
 
-<div class={wrapperStyles}>
-  {#if isFolderItem && (highlight || active)}
-    <div class="border-l border-white h-3 w-px absolute top-3.5 left-0 -m-px"></div>
+<div bind:this={ref} class={cn(wrapperStyles, className)} data-menu-item-root>
+  {#if isFolderItem}
+    <div
+      class={clsx('border-l border-white h-3 w-px absolute top-3.5 left-0 -m-px', {
+        'opacity-0 group-hover/menu-item:opacity-100': !active
+      })}
+      data-menu-item-tree-indicator
+    ></div>
   {/if}
-  <button
-    use:floatingRef
-    onmouseenter={handleHover}
-    onmouseleave={handleBlur}
-    onclick={handleClick}
-    title={label}
-    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-lg"
-  >
-    <span class="flex items-center space-x-1.5">
-      {#if resolvedIcon}
-        <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 text-icon-inverse" />
-      {/if}
-      {#if !collapsedSidebar}
-        <span class="whitespace-nowrap tracking-normal">{label}</span>
+  <div class={rowStyles} data-menu-item-row>
+    <button
+      onclick={handleClick}
+      title={label}
+      data-menu-item-button
+      class={buttonStyles}
+    >
+      <span class="flex items-center space-x-1.5 min-w-0 flex-1" data-menu-item-content>
+        {#if imageUrl}
+          <img
+            src={imageUrl}
+            alt={label}
+            class="size-4 shrink-0 rounded bg-white object-contain"
+            data-menu-item-image
+          />
+        {:else if resolvedIcon}
+          <Icon
+            src={resolvedIcon}
+            theme={iconTheme}
+            class="h-4 w-4 text-icon-inverse"
+            data-menu-item-icon
+          />
+        {/if}
+        <span class="truncate tracking-normal" data-menu-item-label>{label}</span>
         {#if beta}
           <TagBeta />
         {/if}
-      {/if}
-    </span>
-    {#if collapsable && !collapsedSidebar}
+      </span>
+    </button>
+    {#if action}
+      <span class="shrink-0" data-menu-item-action>
+        {@render action()}
+      </span>
+    {/if}
+    {#if collapsable}
       <button
-        class="cursor-pointer"
-        onclick={(e) => {
-          e.stopPropagation()
-          open = !open
-        }}
+        class="shrink-0 cursor-pointer"
+        data-menu-item-chevron
+        onclick={() => (open = !open)}
       >
         <Icon src={open ? ChevronDown : ChevronRight} class="h-4 w-4 text-white-40" />
       </button>
     {/if}
-  </button>
-  {#if children?.length}
-    {#if collapsedSidebar}
-      {#if hovered}
-        <div
-          use:floatingContent
-          role="contentinfo"
-          onmouseenter={handleHover}
-          onmouseleave={handleBlur}
-          class="pt-4 z-30"
-        >
-          <DrawerContext autofocus onclick={handleClickChild} {items} />
-        </div>
-      {/if}
-    {:else if open || !collapsable}
-      <ul>
-        {#each children as child}
-          <li>
-            <MenuItem {...child} isFolderItem {onclick} />
-          </li>
-        {/each}
-      </ul>
-    {/if}
+  </div>
+  {#if children?.length && (open || !collapsable)}
+    <ul data-menu-item-children>
+      {#each children as child}
+        <li>
+          <MenuItem {...child} isFolderItem {onclick} />
+        </li>
+      {/each}
+    </ul>
   {/if}
 </div>

package/dist/MenuItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import MenuItem from './MenuItem.svelte';
 import type { MenuItemProps } from './types.ts';
-declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "open">;
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "open" | "ref">;
 type MenuItem = ReturnType<typeof MenuItem>;
 export default MenuItem;

package/dist/types.d.ts

@@ -533,11 +533,14 @@ export interface MenuItemProps {
     collapsable?: boolean;
     open?: boolean;
     active?: boolean;
-    collapsedSidebar?: boolean;
     iconTheme?: IconTheme;
     icon?: IconSource | string | undefined;
+    imageUrl?: string;
     beta?: boolean;
     children?: MenuItemProps[] | undefined;
+    action?: Snippet;
+    ref?: HTMLDivElement | null;
+    class?: string;
     onclick?: (url: string) => void;
 }
 export interface MenuItemCollapsibleProps {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.94",
+  "version": "0.1.96",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },