@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/list/list.tsx

@@ -0,0 +1,92 @@
+import type { ChildrenList, PartialElement } from '@furystack/shades'
+import { createComponent, Shade } from '@furystack/shades'
+import { ClickAwayService } from '../../services/click-away-service.js'
+import type { ListService } from '../../services/list-service.js'
+import { ListItem } from './list-item.js'
+
+export type ListItemState = {
+  isFocused: boolean
+  isSelected: boolean
+}
+
+export type ListProps<T> = {
+  items: T[]
+  listService: ListService<T>
+  renderItem: (item: T, state: ListItemState) => JSX.Element
+  renderIcon?: (item: T) => JSX.Element
+  renderSecondaryActions?: (item: T) => JSX.Element[]
+  variant?: 'contained' | 'outlined'
+  onItemActivate?: (item: T) => void
+  onSelectionChange?: (selected: T[]) => void
+} & PartialElement<HTMLDivElement>
+
+export const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
+  shadowDomName: 'shade-list',
+  css: {
+    display: 'block',
+    width: '100%',
+    overflow: 'auto',
+  },
+  render: ({ props, useDisposable, useHostProps, useRef }) => {
+    const wrapperRef = useRef<HTMLDivElement>('listWrapper')
+
+    useDisposable('keydown-handler', () => {
+      const listener = (ev: KeyboardEvent) => {
+        props.listService.handleKeyDown(ev)
+
+        if (ev.key === 'Enter' && props.listService.hasFocus.getValue()) {
+          const focusedItem = props.listService.focusedItem.getValue()
+          if (focusedItem && props.onItemActivate) {
+            props.onItemActivate(focusedItem)
+          }
+        }
+      }
+      window.addEventListener('keydown', listener)
+      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener) }
+    })
+
+    props.listService.items.setValue(props.items)
+
+    useDisposable(
+      'clickAway',
+      () =>
+        new ClickAwayService(wrapperRef, () => {
+          props.listService.hasFocus.setValue(false)
+        }),
+    )
+
+    if (props.onSelectionChange) {
+      const { onSelectionChange } = props
+      useDisposable('selectionChangeCallback', () =>
+        props.listService.selection.subscribe((newSelection) => {
+          onSelectionChange(newSelection)
+        }),
+      )
+    }
+
+    useHostProps({
+      'data-variant': props.variant || undefined,
+    })
+
+    return (
+      <div
+        ref={wrapperRef}
+        role="listbox"
+        ariaMultiSelectable="true"
+        className="shade-list-wrapper"
+        onclick={() => props.listService.hasFocus.setValue(true)}
+      >
+        {props.items.map((item) => (
+          <ListItem
+            item={item}
+            listService={props.listService}
+            renderItem={props.renderItem}
+            renderIcon={props.renderIcon}
+            renderSecondaryActions={props.renderSecondaryActions}
+            onActivate={props.onItemActivate}
+          />
+        ))}
+      </div>
+    )
+  },
+})

package/src/components/loader.spec.tsx

@@ -1,7 +1,8 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 import { Loader } from './loader.js'
 
@@ -40,307 +41,322 @@ describe('Loader', () => {
   })
 
   it('should render with shadow DOM', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader')
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader')
+      expect(loader).not.toBeNull()
+    })
   })
 
   it('should have initial opacity of 0', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader') as HTMLElement
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
 
-    const computedStyle = window.getComputedStyle(loader)
-    expect(computedStyle.opacity).toBe('0')
+      const computedStyle = window.getComputedStyle(loader)
+      expect(computedStyle.opacity).toBe('0')
+    })
   })
 
   it('should have correct css styles applied', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader') as HTMLElement
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
 
-    const computedStyle = window.getComputedStyle(loader)
-    expect(computedStyle.display).toBe('inline-block')
-    expect(computedStyle.transformOrigin).toBe('center')
+      const computedStyle = window.getComputedStyle(loader)
+      expect(computedStyle.display).toBe('inline-block')
+      expect(computedStyle.transformOrigin).toBe('center')
+    })
   })
 
   it('should use default delay of 500ms', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const fadeInCall = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
-    )
+      const fadeInCall = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
+      )
 
-    expect(fadeInCall).toBeDefined()
-    expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(500)
+      expect(fadeInCall).toBeDefined()
+      expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(500)
+    })
   })
 
   it('should use custom delay when provided', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader delay={200} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader delay={200} />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const fadeInCall = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
-    )
+      const fadeInCall = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
+      )
 
-    expect(fadeInCall).toBeDefined()
-    expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(200)
+      expect(fadeInCall).toBeDefined()
+      expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(200)
+    })
   })
 
   it('should start fade-in animation with correct parameters', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader delay={100} />,
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader delay={100} />,
+      })
+
+      await sleepAsync(50)
+
+      const fadeInCall = animateCalls.find(
+        (call) =>
+          Array.isArray(call.keyframes) &&
+          call.keyframes.length === 2 &&
+          (call.keyframes[0] as Keyframe).opacity === '0' &&
+          (call.keyframes[1] as Keyframe).opacity === '1',
+      )
+
+      expect(fadeInCall).toBeDefined()
+
+      const options = fadeInCall?.options as KeyframeAnimationOptions
+      expect(options.fill).toBe('forwards')
+      expect(options.duration).toBe(500)
+      expect(options.delay).toBe(100)
     })
-
-    await sleepAsync(50)
-
-    const fadeInCall = animateCalls.find(
-      (call) =>
-        Array.isArray(call.keyframes) &&
-        call.keyframes.length === 2 &&
-        (call.keyframes[0] as Keyframe).opacity === '0' &&
-        (call.keyframes[1] as Keyframe).opacity === '1',
-    )
-
-    expect(fadeInCall).toBeDefined()
-
-    const options = fadeInCall?.options as KeyframeAnimationOptions
-    expect(options.fill).toBe('forwards')
-    expect(options.duration).toBe(500)
-    expect(options.delay).toBe(100)
   })
 
   it('should start rotation animation', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const rotationCall = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'transform' in kf),
-    )
+      const rotationCall = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'transform' in kf),
+      )
 
-    expect(rotationCall).toBeDefined()
+      expect(rotationCall).toBeDefined()
 
-    const options = rotationCall?.options as KeyframeAnimationOptions
-    expect(options.duration).toBe(1500)
-    expect(options.easing).toBe('ease-in-out')
-    expect(options.iterations).toBe(Infinity)
+      const options = rotationCall?.options as KeyframeAnimationOptions
+      expect(options.duration).toBe(1500)
+      expect(options.easing).toBe('ease-in-out')
+      expect(options.iterations).toBe(Infinity)
+    })
   })
 
   it('should have rotation keyframes from 0 to 360 degrees', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const rotationCall = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'transform' in kf),
-    )
+      const rotationCall = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'transform' in kf),
+      )
 
-    expect(rotationCall).toBeDefined()
+      expect(rotationCall).toBeDefined()
 
-    const keyframes = rotationCall?.keyframes as Keyframe[]
-    expect(keyframes).toHaveLength(3)
-    expect(keyframes[0].transform).toBe('rotate(0deg)')
-    expect(keyframes[1].transform).toBe('rotate(180deg)')
-    expect(keyframes[2].transform).toBe('rotate(360deg)')
+      const keyframes = rotationCall?.keyframes as Keyframe[]
+      expect(keyframes).toHaveLength(3)
+      expect(keyframes[0].transform).toBe('rotate(0deg)')
+      expect(keyframes[1].transform).toBe('rotate(180deg)')
+      expect(keyframes[2].transform).toBe('rotate(360deg)')
+    })
   })
 
   it('should use default borderWidth of 15px', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader') as HTMLElement
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
 
-    const innerDiv = loader.querySelector('div') as HTMLElement
-    expect(innerDiv).not.toBeNull()
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
 
-    expect(innerDiv.style.width).toBe('calc(100% - 30px)')
-    expect(innerDiv.style.height).toBe('calc(100% - 30px)')
-    expect(innerDiv.style.borderTopWidth).toBe('15px')
+      expect(innerDiv.style.width).toBe('calc(100% - 30px)')
+      expect(innerDiv.style.height).toBe('calc(100% - 30px)')
+      const styleAttr = innerDiv.getAttribute('style') || ''
+      expect(styleAttr).toContain('15px solid')
+    })
   })
 
   it('should use custom borderWidth when provided', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader borderWidth={10} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader borderWidth={10} />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader') as HTMLElement
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
 
-    const innerDiv = loader.querySelector('div') as HTMLElement
-    expect(innerDiv).not.toBeNull()
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
 
-    expect(innerDiv.style.width).toBe('calc(100% - 20px)')
-    expect(innerDiv.style.height).toBe('calc(100% - 20px)')
-    expect(innerDiv.style.borderTopWidth).toBe('10px')
+      expect(innerDiv.style.width).toBe('calc(100% - 20px)')
+      expect(innerDiv.style.height).toBe('calc(100% - 20px)')
+      const styleAttr = innerDiv.getAttribute('style') || ''
+      expect(styleAttr).toContain('10px solid')
+    })
   })
 
   it('should use custom borderColor when provided', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader borderColor="#ff0000" />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader borderColor="#ff0000" />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader') as HTMLElement
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
 
-    const innerDiv = loader.querySelector('div') as HTMLElement
-    expect(innerDiv).not.toBeNull()
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
 
-    expect(innerDiv.style.borderBottomColor).toBe('rgb(255, 0, 0)')
+      expect(innerDiv.style.borderBottomColor).toBe('rgb(255, 0, 0)')
+    })
   })
 
   it('should use theme primary color as default borderColor', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader') as HTMLElement
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
 
-    const innerDiv = loader.querySelector('div') as HTMLElement
-    expect(innerDiv).not.toBeNull()
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
 
-    const themeService = injector.getInstance(ThemeProviderService)
-    expect(innerDiv.style.borderBottom).toContain(themeService.theme.palette.primary.main)
+      const themeService = injector.getInstance(ThemeProviderService)
+      expect(innerDiv.style.borderBottom).toContain(themeService.theme.palette.primary.main)
+    })
   })
 
   it('should render with circular shape', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader') as HTMLElement
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
 
-    const innerDiv = loader.querySelector('div') as HTMLElement
-    expect(innerDiv).not.toBeNull()
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
 
-    expect(innerDiv.style.borderRadius).toBe('50%')
-    expect(innerDiv.style.position).toBe('relative')
+      expect(innerDiv.style.borderRadius).toBe(cssVariableTheme.shape.borderRadius.full)
+      expect(innerDiv.style.position).toBe('relative')
+    })
   })
 
   it('should have a semi-transparent main border and colored bottom border', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Loader borderColor="#00ff00" />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader borderColor="#00ff00" />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const loader = document.querySelector('shade-loader') as HTMLElement
-    expect(loader).not.toBeNull()
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
 
-    const innerDiv = loader.querySelector('div') as HTMLElement
-    expect(innerDiv).not.toBeNull()
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
 
-    expect(innerDiv.style.borderTopColor).toBe('rgba(128, 128, 128, 0.1)')
-    expect(innerDiv.style.borderBottomColor).toBe('rgb(0, 255, 0)')
+      expect(innerDiv.style.borderBottom).toContain('rgb(0, 255, 0)')
+    })
   })
 })