@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -0,0 +1,362 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+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'
+
+describe('Loader', () => {
+  let originalAnimate: typeof Element.prototype.animate
+  let animateCalls: Array<{ keyframes: unknown; options: unknown }>
+
+  beforeEach(() => {
+    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(),
+        }
+
+        return mockAnimation as unknown as Animation
+      },
+    ) as typeof Element.prototype.animate
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    Element.prototype.animate = originalAnimate
+    vi.restoreAllMocks()
+  })
+
+  it('should render with shadow DOM', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      const loader = document.querySelector('shade-loader')
+      expect(loader).not.toBeNull()
+    })
+  })
+
+  it('should have initial opacity of 0', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
+
+      const computedStyle = window.getComputedStyle(loader)
+      expect(computedStyle.opacity).toBe('0')
+    })
+  })
+
+  it('should have correct css styles applied', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      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')
+    })
+  })
+
+  it('should use default delay of 500ms', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      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)
+    })
+  })
+
+  it('should use custom delay when provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader delay={200} />,
+      })
+
+      await sleepAsync(50)
+
+      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)
+    })
+  })
+
+  it('should start fade-in animation with correct parameters', async () => {
+    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)
+    })
+  })
+
+  it('should start rotation animation', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      const rotationCall = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'transform' in kf),
+      )
+
+      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)
+    })
+  })
+
+  it('should have rotation keyframes from 0 to 360 degrees', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      const rotationCall = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'transform' in kf),
+      )
+
+      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)')
+    })
+  })
+
+  it('should use default borderWidth of 15px', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).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)')
+      const styleAttr = innerDiv.getAttribute('style') || ''
+      expect(styleAttr).toContain('15px solid')
+    })
+  })
+
+  it('should use custom borderWidth when provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader borderWidth={10} />,
+      })
+
+      await sleepAsync(50)
+
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).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)')
+      const styleAttr = innerDiv.getAttribute('style') || ''
+      expect(styleAttr).toContain('10px solid')
+    })
+  })
+
+  it('should use custom borderColor when provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader borderColor="#ff0000" />,
+      })
+
+      await sleepAsync(50)
+
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
+
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
+
+      expect(innerDiv.style.borderBottomColor).toBe('rgb(255, 0, 0)')
+    })
+  })
+
+  it('should use theme primary color as default borderColor', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).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)
+    })
+  })
+
+  it('should render with circular shape', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader />,
+      })
+
+      await sleepAsync(50)
+
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
+
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
+
+      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 () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Loader borderColor="#00ff00" />,
+      })
+
+      await sleepAsync(50)
+
+      const loader = document.querySelector('shade-loader') as HTMLElement
+      expect(loader).not.toBeNull()
+
+      const innerDiv = loader.querySelector('div') as HTMLElement
+      expect(innerDiv).not.toBeNull()
+
+      expect(innerDiv.style.borderBottom).toContain('rgb(0, 255, 0)')
+    })
+  })
+})

package/src/components/loader.tsx

@@ -1,4 +1,5 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 import { promisifyAnimation } from '../utils/promisify-animation.js'
 
@@ -25,26 +26,32 @@ interface LoaderProps {
 
 export const Loader = Shade<LoaderProps>({
   shadowDomName: 'shade-loader',
-  style: {
+  css: {
     display: 'inline-block',
     transformOrigin: 'center',
     opacity: '0',
   },
-  render: ({ element, props, injector }) => {
+  render: ({ props, injector, useRef }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
+    const spinnerRef = useRef<HTMLDivElement>('spinner')
 
     const { delay = 500 } = props
     const { borderWidth = 15 } = props
     const { borderColor = theme.palette.primary.main } = props
 
     setTimeout(() => {
-      void promisifyAnimation(element, [{ opacity: '0' }, { opacity: '1' }], {
-        duration: 500,
-        delay,
-        fill: 'forwards',
-      })
+      const spinner = spinnerRef.current
+      if (!spinner) return
+      const host = spinner.parentElement
+      if (host) {
+        void promisifyAnimation(host, [{ opacity: '0' }, { opacity: '1' }], {
+          duration: 500,
+          delay,
+          fill: 'forwards',
+        })
+      }
       void promisifyAnimation(
-        element.firstElementChild,
+        spinner,
         [{ transform: 'rotate(0deg)' }, { transform: 'rotate(180deg)' }, { transform: 'rotate(360deg)' }],
         {
           duration: 1500,
@@ -55,13 +62,14 @@ export const Loader = Shade<LoaderProps>({
     }, 1)
     return (
       <div
+        ref={spinnerRef}
         style={{
           position: 'relative',
           width: `calc(100% - ${borderWidth * 2}px)`,
           height: `calc(100% - ${borderWidth * 2}px)`,
-          border: `${borderWidth}px solid rgba(128,128,128,0.1)`,
+          border: `${borderWidth}px solid ${cssVariableTheme.action.subtleBorder}`,
           borderBottom: `${borderWidth}px solid ${borderColor}`,
-          borderRadius: '50%',
+          borderRadius: cssVariableTheme.shape.borderRadius.full,
         }}
       />
     )

package/src/components/menu/index.ts

@@ -0,0 +1,2 @@
+export * from './menu-types.js'
+export * from './menu.js'

package/src/components/menu/menu-types.spec.ts

@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest'
+import type { MenuEntry } from './menu-types.js'
+import { getNavigableKeys } from './menu-types.js'
+
+describe('getNavigableKeys', () => {
+  it('should return keys of non-disabled items', () => {
+    const items: MenuEntry[] = [
+      { key: 'a', label: 'A' },
+      { key: 'b', label: 'B' },
+      { key: 'c', label: 'C' },
+    ]
+
+    expect(getNavigableKeys(items)).toEqual(['a', 'b', 'c'])
+  })
+
+  it('should skip dividers', () => {
+    const items: MenuEntry[] = [{ key: 'a', label: 'A' }, { type: 'divider' }, { key: 'b', label: 'B' }]
+
+    expect(getNavigableKeys(items)).toEqual(['a', 'b'])
+  })
+
+  it('should skip disabled items', () => {
+    const items: MenuEntry[] = [
+      { key: 'a', label: 'A' },
+      { key: 'b', label: 'B', disabled: true },
+      { key: 'c', label: 'C' },
+    ]
+
+    expect(getNavigableKeys(items)).toEqual(['a', 'c'])
+  })
+
+  it('should flatten group children', () => {
+    const items: MenuEntry[] = [
+      { key: 'a', label: 'A' },
+      {
+        type: 'group',
+        key: 'group1',
+        label: 'Group',
+        children: [
+          { key: 'b', label: 'B' },
+          { key: 'c', label: 'C' },
+        ],
+      },
+      { key: 'd', label: 'D' },
+    ]
+
+    expect(getNavigableKeys(items)).toEqual(['a', 'b', 'c', 'd'])
+  })
+
+  it('should skip disabled items inside groups', () => {
+    const items: MenuEntry[] = [
+      {
+        type: 'group',
+        key: 'group1',
+        label: 'Group',
+        children: [
+          { key: 'a', label: 'A' },
+          { key: 'b', label: 'B', disabled: true },
+          { key: 'c', label: 'C' },
+        ],
+      },
+    ]
+
+    expect(getNavigableKeys(items)).toEqual(['a', 'c'])
+  })
+
+  it('should skip dividers inside groups', () => {
+    const items: MenuEntry[] = [
+      {
+        type: 'group',
+        key: 'group1',
+        label: 'Group',
+        children: [{ key: 'a', label: 'A' }, { type: 'divider' }, { key: 'b', label: 'B' }],
+      },
+    ]
+
+    expect(getNavigableKeys(items)).toEqual(['a', 'b'])
+  })
+
+  it('should return empty array for empty items', () => {
+    expect(getNavigableKeys([])).toEqual([])
+  })
+
+  it('should return empty array when all items are dividers', () => {
+    const items: MenuEntry[] = [{ type: 'divider' }, { type: 'divider' }]
+
+    expect(getNavigableKeys(items)).toEqual([])
+  })
+
+  it('should return empty array when all items are disabled', () => {
+    const items: MenuEntry[] = [
+      { key: 'a', label: 'A', disabled: true },
+      { key: 'b', label: 'B', disabled: true },
+    ]
+
+    expect(getNavigableKeys(items)).toEqual([])
+  })
+
+  it('should handle nested groups', () => {
+    const items: MenuEntry[] = [
+      {
+        type: 'group',
+        key: 'outer',
+        label: 'Outer',
+        children: [
+          { key: 'a', label: 'A' },
+          {
+            type: 'group',
+            key: 'inner',
+            label: 'Inner',
+            children: [
+              { key: 'b', label: 'B' },
+              { key: 'c', label: 'C' },
+            ],
+          },
+        ],
+      },
+    ]
+
+    expect(getNavigableKeys(items)).toEqual(['a', 'b', 'c'])
+  })
+})

package/src/components/menu/menu-types.ts

@@ -0,0 +1,43 @@
+/**
+ * Type definitions for Menu and Dropdown items
+ */
+
+export type MenuItemEntry = {
+  type?: 'item'
+  key: string
+  label: string | JSX.Element
+  icon?: JSX.Element
+  disabled?: boolean
+}
+
+export type MenuGroupEntry = {
+  type: 'group'
+  key: string
+  label: string
+  children: MenuEntry[]
+}
+
+export type MenuDividerEntry = {
+  type: 'divider'
+  key?: string
+}
+
+export type MenuEntry = MenuItemEntry | MenuGroupEntry | MenuDividerEntry
+
+export type MenuMode = 'vertical' | 'horizontal' | 'inline'
+
+/**
+ * Returns a flat list of navigable (non-divider, non-disabled) item keys from the menu entries
+ */
+export const getNavigableKeys = (items: MenuEntry[]): string[] => {
+  const keys: string[] = []
+  for (const item of items) {
+    if (item.type === 'divider') continue
+    if (item.type === 'group') {
+      keys.push(...getNavigableKeys(item.children))
+    } else {
+      if (!item.disabled) keys.push(item.key)
+    }
+  }
+  return keys
+}