@furystack/shades-common-components 13.1.0 → 13.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "13.1.0",
+  "version": "13.3.0",
   "description": "Common UI components for FuryStack Shades",
   "type": "module",
   "scripts": {
@@ -48,11 +48,11 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "@furystack/cache": "^6.0.0",
-    "@furystack/core": "^15.2.2",
-    "@furystack/inject": "^12.0.30",
-    "@furystack/shades": "^12.2.4",
-    "@furystack/utils": "^8.1.10",
+    "@furystack/cache": "^6.1.0",
+    "@furystack/core": "^15.2.3",
+    "@furystack/inject": "^12.0.31",
+    "@furystack/shades": "^12.2.5",
+    "@furystack/utils": "^8.2.0",
     "path-to-regexp": "^8.3.0"
   },
   "engines": {

package/src/components/app-bar.tsx

@@ -5,9 +5,6 @@ export const AppBar = Shade({
   shadowDomName: 'shade-app-bar',
   css: {
     width: '100%',
-    background: `color-mix(in srgb, ${cssVariableTheme.background.paper} 85%, transparent)`,
-    backgroundImage: cssVariableTheme.background.paperImage,
-    backdropFilter: `blur(${cssVariableTheme.effects.blurLg})`,
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'center',
@@ -18,6 +15,18 @@ export const AppBar = Shade({
     zIndex: '1',
     fontFamily: cssVariableTheme.typography.fontFamily,
     color: cssVariableTheme.text.primary,
+    // backdrop-filter on the host would create a containing block for position:fixed
+    // descendants (per CSS spec), breaking Dropdown overlays inside the AppBar.
+    // Using a pseudo-element avoids this while preserving the visual effect.
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      inset: '0',
+      zIndex: '-1',
+      background: `color-mix(in srgb, ${cssVariableTheme.background.paper} 85%, transparent)`,
+      backgroundImage: cssVariableTheme.background.paperImage,
+      backdropFilter: `blur(${cssVariableTheme.effects.blurLg})`,
+    },
     '&[data-visible]': {
       opacity: '1',
     },

package/src/components/avatar.tsx

@@ -1,7 +1,6 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
-import { Icon } from './icons/icon.js'
 import { user as userIcon } from './icons/icon-definitions.js'
 
 export type AvatarProps = { avatarUrl: string; fallback?: JSX.Element } & PartialElement<HTMLDivElement>
@@ -37,14 +36,13 @@ export const Avatar = Shade<AvatarProps>({
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      width: '64px',
-      height: '64px',
+      width: '100%',
+      height: '100%',
       borderRadius: cssVariableTheme.shape.borderRadius.full,
       background: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 20%, transparent)`,
       backdropFilter: 'blur(10px)',
       textAlign: 'center',
       userSelect: 'none',
-      fontSize: '48px',
       lineHeight: '1',
     },
   },
@@ -59,7 +57,24 @@ export const Avatar = Shade<AvatarProps>({
     if (hasError) {
       return (
         <div className="avatar-fallback-container">
-          <div className="avatar-fallback-icon">{props.fallback || <Icon icon={userIcon} size={48} />}</div>
+          <div className="avatar-fallback-icon">
+            {props.fallback || (
+              <svg
+                width="100%"
+                height="100%"
+                viewBox={userIcon.viewBox ?? '0 0 24 24'}
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                {userIcon.paths.map((p) => (
+                  <path d={p.d} />
+                ))}
+              </svg>
+            )}
+          </div>
         </div>
       )
     }

package/src/components/command-palette/command-palette-input.spec.tsx

@@ -6,42 +6,14 @@ import { CommandPaletteInput } from './command-palette-input.js'
 import { CommandPaletteManager } from './command-palette-manager.js'
 
 describe('CommandPaletteInput', () => {
-  let originalAnimate: typeof Element.prototype.animate
-  let animateCalls: Array<{ keyframes: unknown; options: unknown }>
-
   beforeEach(() => {
     vi.useFakeTimers()
     document.body.innerHTML = '<div id="root"></div>'
-    animateCalls = []
-    originalAnimate = Element.prototype.animate
-
-    Element.prototype.animate = vi.fn(
-      (keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions) => {
-        animateCalls.push({ keyframes, options })
-        const mockAnimation = {
-          onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
-          oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
-          cancel: vi.fn(),
-          play: vi.fn(),
-          pause: vi.fn(),
-          finish: vi.fn(),
-          addEventListener: vi.fn(),
-          removeEventListener: vi.fn(),
-        }
-
-        setTimeout(() => {
-          mockAnimation.onfinish?.({} as AnimationPlaybackEvent)
-        }, 10)
-
-        return mockAnimation as unknown as Animation
-      },
-    ) as typeof Element.prototype.animate
   })
 
   afterEach(() => {
     vi.useRealTimers()
     document.body.innerHTML = ''
-    Element.prototype.animate = originalAnimate
     vi.restoreAllMocks()
   })
 
@@ -89,7 +61,7 @@ describe('CommandPaletteInput', () => {
     })
   })
 
-  it('should start with width 0% when closed', async () => {
+  it('should always have width 100%', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -104,15 +76,15 @@ describe('CommandPaletteInput', () => {
         await flushUpdates()
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        expect(component.hasAttribute('data-opened')).toBe(false)
+        const computedStyle = window.getComputedStyle(component)
+        expect(computedStyle.width).toBe('100%')
       })
     })
   })
 
-  it('should have width 100% when opened', async () => {
+  it('should have overflow hidden style', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(true)
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -124,73 +96,13 @@ describe('CommandPaletteInput', () => {
         await flushUpdates()
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        expect(component.hasAttribute('data-opened')).toBe(true)
-      })
-    })
-  })
-
-  it('should animate width when opening', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(false)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
-
-        manager.isOpened.setValue(true)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) =>
-            Array.isArray(call.keyframes) &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '0%') &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '100%'),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(300)
-      })
-    })
-  })
-
-  it('should animate width when closing', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(true)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
-
-        manager.isOpened.setValue(false)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) =>
-            Array.isArray(call.keyframes) &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '100%') &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '0%'),
-        )
-
-        expect(widthAnimation).toBeDefined()
+        const computedStyle = window.getComputedStyle(component)
+        expect(computedStyle.overflow).toBe('hidden')
       })
     })
   })
 
-  it('should clear input value when opening', async () => {
+  it('should focus input when opened', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -206,12 +118,12 @@ describe('CommandPaletteInput', () => {
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
         const inputElement = component?.querySelector('input') as HTMLInputElement
-        inputElement.value = 'some text'
+        const focusSpy = vi.spyOn(inputElement, 'focus')
 
         manager.isOpened.setValue(true)
         await flushUpdates()
 
-        expect(inputElement.value).toBe('')
+        expect(focusSpy).toHaveBeenCalled()
       })
     })
   })
@@ -236,35 +148,13 @@ describe('CommandPaletteInput', () => {
 
         manager.isOpened.setValue(false)
         await flushUpdates()
-        await vi.advanceTimersByTimeAsync(20)
-        await flushUpdates()
 
         expect(inputElement.value).toBe('')
       })
     })
   })
 
-  it('should have overflow hidden style', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-
-        const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        const computedStyle = window.getComputedStyle(component)
-        expect(computedStyle.overflow).toBe('hidden')
-      })
-    })
-  })
-
-  it('should use cubic-bezier easing for animations', async () => {
+  it('should preserve input value when opening', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -277,47 +167,15 @@ describe('CommandPaletteInput', () => {
         })
 
         await flushUpdates()
-        animateCalls = []
 
-        manager.isOpened.setValue(true)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.easing).toBe(
-          'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-        )
-      })
-    })
-  })
-
-  it('should fill animation forwards', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(false)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        const inputElement = component?.querySelector('input') as HTMLInputElement
+        inputElement.value = 'some text'
 
         manager.isOpened.setValue(true)
         await flushUpdates()
 
-        const widthAnimation = animateCalls.find(
-          (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+        expect(inputElement.value).toBe('some text')
       })
     })
   })

package/src/components/command-palette/command-palette-input.tsx

@@ -1,45 +1,13 @@
-import type { RefObject } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
-import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import type { CommandPaletteManager } from './command-palette-manager.js'
 
-const animateOpenState = async (
-  wrapperRef: RefObject<HTMLDivElement>,
-  inputRef: RefObject<HTMLInputElement>,
-  isOpened: boolean,
-) => {
-  const wrapper = wrapperRef.current
-  const input = inputRef.current
-  if (wrapper && input) {
-    if (isOpened) {
-      input.value = ''
-      await promisifyAnimation(wrapper, [{ width: '0%' }, { width: '100%' }], {
-        duration: 300,
-        fill: 'forwards',
-        easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-      })
-      input.focus()
-    } else {
-      await promisifyAnimation(wrapper, [{ width: '100%' }, { width: '0%' }], {
-        duration: 300,
-        fill: 'forwards',
-        easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-      })
-      input.value = ''
-    }
-  }
-}
-
 export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
   shadowDomName: 'shades-command-palette-input',
   css: {
-    width: '0%',
+    width: '100%',
     fontFamily: cssVariableTheme.typography.fontFamily,
     overflow: 'hidden',
-    '&[data-opened]': {
-      width: '100%',
-    },
     '& input': {
       color: cssVariableTheme.text.primary,
       outline: 'none',
@@ -53,20 +21,20 @@ export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
       letterSpacing: '0.01em',
     },
   },
-  render: ({ props, useObservable, useRef, useHostProps }) => {
-    const { manager } = props
-    const wrapperRef = useRef<HTMLDivElement>('wrapper')
+  render: ({ props, useObservable, useRef }) => {
     const inputRef = useRef<HTMLInputElement>('input')
-
-    const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
-      onChange: (newValue) => void animateOpenState(wrapperRef, inputRef, newValue),
+    useObservable('isOpened', props.manager.isOpened, {
+      onChange: (isOpened) => {
+        if (inputRef.current) {
+          if (isOpened) {
+            inputRef.current.focus()
+          } else {
+            inputRef.current.value = ''
+          }
+        }
+      },
     })
-    useHostProps({ ...(isCurrentlyOpened ? { 'data-opened': '' } : {}) })
 
-    return (
-      <div ref={wrapperRef} style={{ width: isCurrentlyOpened ? '100%' : '0%', overflow: 'hidden' }}>
-        <input ref={inputRef} autofocus placeholder="Type to search commands..." />
-      </div>
-    )
+    return <input ref={inputRef} autofocus placeholder="Type to search commands..." />
   },
 })

package/src/components/command-palette/index.tsx

@@ -85,6 +85,10 @@ export const CommandPalette = Shade<CommandPaletteProps>({
             )
           }
 
+          if (!manager.isOpened.getValue()) {
+            manager.isOpened.setValue(true)
+          }
+
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >

package/src/components/drawer/index.spec.tsx

@@ -718,6 +718,70 @@ describe('Drawer component', () => {
     })
   })
 
+  describe('cleanup on disposal', () => {
+    it('should call removeDrawer on LayoutService when the component is removed from DOM', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Drawer position="left" variant="collapsible">
+              <div>Drawer</div>
+            </Drawer>
+          ),
+        })
+
+        await flushUpdates()
+        expect(layoutService.drawerState.getValue().left).toBeDefined()
+
+        const removeDrawerSpy = vi.spyOn(layoutService, 'removeDrawer')
+        const drawer = document.querySelector('shade-drawer') as HTMLElement
+        drawer.remove()
+        await flushUpdates()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(removeDrawerSpy).toHaveBeenCalledWith('left')
+      })
+    })
+
+    it('should only clean up its own drawer position on disposal', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        layoutService.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Drawer position="right" variant="temporary">
+              <div>Right Drawer</div>
+            </Drawer>
+          ),
+        })
+
+        await flushUpdates()
+        expect(layoutService.drawerState.getValue().right).toBeDefined()
+        expect(layoutService.drawerState.getValue().left).toBeDefined()
+
+        const removeDrawerSpy = vi.spyOn(layoutService, 'removeDrawer')
+        const drawer = document.querySelector('shade-drawer') as HTMLElement
+        drawer.remove()
+        await flushUpdates()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(removeDrawerSpy).toHaveBeenCalledWith('right')
+        expect(removeDrawerSpy).not.toHaveBeenCalledWith('left')
+      })
+    })
+  })
+
   describe('preserving user interactions', () => {
     it('should not reset drawer state if already initialized', async () => {
       await usingAsync(new Injector(), async (injector) => {

package/src/components/drawer/index.tsx

@@ -143,6 +143,11 @@ export const Drawer = Shade<DrawerProps>({
       layoutService.setDrawerWidth(position, width)
     }
 
+    // Clean up drawer state from LayoutService when this component is disposed
+    useDisposable('drawer-cleanup', () => ({
+      [Symbol.dispose]: () => layoutService.removeDrawer(position),
+    }))
+
     // Subscribe to drawer state
     const [drawerState] = useObservable('drawerState', layoutService.drawerState)
     const isOpen = drawerState[position]?.open ?? false

package/src/components/noty-list.tsx

@@ -1,6 +1,5 @@
 import { createComponent, Shade } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
-import { getTextColor } from '../services/get-text-color.js'
 import type { NotyModel } from '../services/noty-service.js'
 import { NotyService } from '../services/noty-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
@@ -97,7 +96,6 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     const themeProvider = injector.getInstance(ThemeProviderService)
     const colors = themeProvider.theme.palette[props.model.type]
-    const textColor = getTextColor(colors.main)
 
     const removeSelf = async () => {
       const hostEl = wrapperRef.current?.closest('shade-noty') as HTMLElement | null
@@ -123,7 +121,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     useHostProps({
       'data-noty-type': props.model.type,
-      style: { '--noty-bg': colors.main, '--noty-text': textColor },
+      style: { '--noty-bg': colors.main, '--noty-text': colors.mainContrast },
     })
 
     return (

package/src/services/collection-service.spec.ts

@@ -517,4 +517,50 @@ describe('CollectionService', () => {
       })
     })
   })
+
+  describe('EventHub integration', () => {
+    it('Should allow subscribing to onRowClick via EventHub', () => {
+      const testEntries = createTestEntries()
+      const handler = vi.fn()
+
+      using(new CollectionService<TestEntry>(), (service) => {
+        service.addListener('onRowClick', handler)
+        service.data.setValue({ count: 3, entries: testEntries })
+        service.handleRowClick(testEntries[1], createMouseEvent())
+
+        expect(handler).toHaveBeenCalledTimes(1)
+        expect(handler).toHaveBeenCalledWith(testEntries[1])
+      })
+    })
+
+    it('Should allow subscribing to onRowDoubleClick via EventHub', () => {
+      const testEntries = createTestEntries()
+      const handler = vi.fn()
+
+      using(new CollectionService<TestEntry>(), (service) => {
+        service.addListener('onRowDoubleClick', handler)
+        service.data.setValue({ count: 3, entries: testEntries })
+        service.handleRowDoubleClick(testEntries[2])
+
+        expect(handler).toHaveBeenCalledTimes(1)
+        expect(handler).toHaveBeenCalledWith(testEntries[2])
+      })
+    })
+
+    it('Should support multiple subscribers for the same event', () => {
+      const testEntries = createTestEntries()
+      const handler1 = vi.fn()
+      const handler2 = vi.fn()
+
+      using(new CollectionService<TestEntry>(), (service) => {
+        service.addListener('onRowClick', handler1)
+        service.addListener('onRowClick', handler2)
+        service.data.setValue({ count: 3, entries: testEntries })
+        service.handleRowClick(testEntries[0], createMouseEvent())
+
+        expect(handler1).toHaveBeenCalledTimes(1)
+        expect(handler2).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
 })

package/src/services/collection-service.ts

@@ -1,4 +1,4 @@
-import { ObservableValue } from '@furystack/utils'
+import { EventHub, ObservableValue, type ListenerErrorPayload } from '@furystack/utils'
 
 export interface CollectionData<T> {
   entries: T[]
@@ -12,25 +12,32 @@ export interface CollectionServiceOptions<T> {
   searchField?: keyof T
   /**
    * @param entry The clicked entry
-   * optional callback for row clicks
+   * @deprecated Use `subscribe('onRowClick', ...)` instead
    */
   onRowClick?: (entry: T) => void
 
   /**
-   * Optional callback for row double clicks
    * @param entry The clicked entry
+   * @deprecated Use `subscribe('onRowDoubleClick', ...)` instead
    */
-
   onRowDoubleClick?: (entry: T) => void
 }
 
-export class CollectionService<T> implements Disposable {
+export class CollectionService<T>
+  extends EventHub<{
+    onRowClick: T
+    onRowDoubleClick: T
+    onListenerError: ListenerErrorPayload
+  }>
+  implements Disposable
+{
   public [Symbol.dispose]() {
     this.data[Symbol.dispose]()
     this.selection[Symbol.dispose]()
     this.searchTerm[Symbol.dispose]()
     this.hasFocus[Symbol.dispose]()
     this.focusedEntry[Symbol.dispose]()
+    super[Symbol.dispose]()
   }
 
   public isSelected = (entry: T) => this.selection.getValue().includes(entry)
@@ -143,7 +150,7 @@ export class CollectionService<T> implements Disposable {
   }
 
   public handleRowClick(entry: T, ev: MouseEvent) {
-    this.options.onRowClick?.(entry)
+    this.emit('onRowClick', entry)
     const currentSelectionValue = this.selection.getValue()
     const lastFocused = this.focusedEntry.getValue()
     if (ev.ctrlKey) {
@@ -171,9 +178,17 @@ export class CollectionService<T> implements Disposable {
     this.focusedEntry.setValue(entry)
   }
 
-  constructor(private options: CollectionServiceOptions<T> = {}) {}
+  constructor(private options: CollectionServiceOptions<T> = {}) {
+    super()
+    if (options.onRowClick) {
+      this.addListener('onRowClick', options.onRowClick)
+    }
+    if (options.onRowDoubleClick) {
+      this.addListener('onRowDoubleClick', options.onRowDoubleClick)
+    }
+  }
 
   public handleRowDoubleClick(entry: T) {
-    this.options.onRowDoubleClick?.(entry)
+    this.emit('onRowDoubleClick', entry)
   }
 }