@furystack/shades-common-components 11.0.0 → 12.0.1

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'
 
@@ -30,21 +31,27 @@ export const Loader = Shade<LoaderProps>({
     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
+}