@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/menu/menu.tsx

@@ -0,0 +1,326 @@
+import { createComponent, Shade } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../../services/css-variable-theme.js'
+import type { MenuEntry, MenuMode } from './menu-types.js'
+import { getNavigableKeys } from './menu-types.js'
+
+export type MenuProps = {
+  /** Menu items to render */
+  items: MenuEntry[]
+  /** Layout mode */
+  mode?: MenuMode
+  /** Currently selected item key */
+  selectedKey?: string
+  /** Called when an item is selected */
+  onSelect?: (key: string) => void
+}
+
+const renderItems = (
+  items: MenuEntry[],
+  options: {
+    selectedKey?: string
+    focusedKey: string
+    expandedGroups: string[]
+    onSelect?: (key: string) => void
+    setFocusedKey: (key: string) => void
+    onToggleGroup: (key: string) => void
+    isInline: boolean
+  },
+): JSX.Element[] => {
+  return items.map((item) => {
+    if (item.type === 'divider') {
+      return <div role="separator" className="menu-divider" />
+    }
+
+    if (item.type === 'group') {
+      const isExpanded = !options.isInline || options.expandedGroups.includes(item.key)
+
+      return (
+        <div role="group" aria-label={item.label} className="menu-group" data-group-key={item.key}>
+          <div
+            className={`menu-group-label${options.isInline ? ' menu-group-label-inline' : ''}`}
+            onclick={
+              options.isInline
+                ? () => {
+                    options.onToggleGroup(item.key)
+                  }
+                : undefined
+            }
+          >
+            <span>{item.label}</span>
+            {options.isInline ? (
+              <span className={`menu-group-arrow${isExpanded ? ' expanded' : ''}`}>&#9656;</span>
+            ) : null}
+          </div>
+          <div className="menu-group-children" style={{ display: isExpanded ? '' : 'none' }}>
+            {renderItems(item.children, options)}
+          </div>
+        </div>
+      )
+    }
+
+    const isSelected = options.selectedKey === item.key
+    const isFocused = options.focusedKey === item.key
+
+    const classNames = [
+      'menu-item',
+      isSelected ? 'selected' : '',
+      item.disabled ? 'disabled' : '',
+      isFocused ? 'focused' : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+    return (
+      <div
+        role="menuitem"
+        className={classNames}
+        aria-disabled={item.disabled ? 'true' : undefined}
+        aria-current={isSelected ? 'true' : undefined}
+        data-key={item.key}
+        tabIndex={-1}
+        onclick={() => {
+          if (!item.disabled) {
+            options.onSelect?.(item.key)
+          }
+        }}
+        onmouseenter={() => {
+          if (!item.disabled) {
+            options.setFocusedKey(item.key)
+          }
+        }}
+      >
+        {item.icon && <span className="menu-item-icon">{item.icon}</span>}
+        <span className="menu-item-label">{item.label}</span>
+      </div>
+    )
+  })
+}
+
+export const Menu = Shade<MenuProps>({
+  shadowDomName: 'shade-menu',
+  css: {
+    display: 'flex',
+    outline: 'none',
+    listStyle: 'none',
+    margin: '0',
+    padding: `${cssVariableTheme.spacing.xs} 0`,
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    fontSize: cssVariableTheme.typography.fontSize.md,
+    color: cssVariableTheme.text.primary,
+
+    '&[data-mode="horizontal"]': {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: '0',
+      gap: '2px',
+    },
+
+    '&[data-mode="vertical"], &:not([data-mode])': {
+      flexDirection: 'column',
+    },
+
+    '&[data-mode="inline"]': {
+      flexDirection: 'column',
+    },
+
+    // Menu item
+    '& .menu-item': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: cssVariableTheme.spacing.sm,
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+      cursor: 'pointer',
+      userSelect: 'none',
+      borderRadius: cssVariableTheme.shape.borderRadius.sm,
+      transition: buildTransition(
+        ['background-color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+      whiteSpace: 'nowrap',
+    },
+
+    '& .menu-item:hover:not(.disabled), & .menu-item.focused:not(.disabled)': {
+      backgroundColor: cssVariableTheme.action.hoverBackground,
+    },
+
+    '& .menu-item.selected': {
+      color: cssVariableTheme.palette.primary.main,
+      backgroundColor: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 10%, transparent)`,
+    },
+
+    '& .menu-item.disabled': {
+      opacity: '0.5',
+      cursor: 'not-allowed',
+    },
+
+    '& .menu-item-icon': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+      width: '20px',
+    },
+
+    '& .menu-item-label': {
+      flex: '1',
+    },
+
+    // Horizontal mode item tweaks
+    '&[data-mode="horizontal"] .menu-item': {
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+    },
+
+    '&[data-mode="horizontal"] .menu-item.selected': {
+      boxShadow: `inset 0 -2px 0 ${cssVariableTheme.palette.primary.main}`,
+      borderRadius: '0',
+    },
+
+    // Divider
+    '& .menu-divider': {
+      height: '1px',
+      margin: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+      backgroundColor: cssVariableTheme.divider,
+    },
+
+    '&[data-mode="horizontal"] .menu-divider': {
+      width: '1px',
+      height: 'auto',
+      alignSelf: 'stretch',
+      margin: '4px 2px',
+    },
+
+    // Group
+    '& .menu-group-label': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.md}`,
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      fontWeight: cssVariableTheme.typography.fontWeight.bold,
+      color: cssVariableTheme.text.secondary,
+      textTransform: 'uppercase',
+      letterSpacing: cssVariableTheme.typography.letterSpacing.wider,
+      userSelect: 'none',
+    },
+
+    '& .menu-group-label-inline': {
+      cursor: 'pointer',
+      justifyContent: 'space-between',
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+      fontSize: cssVariableTheme.typography.fontSize.md,
+      fontWeight: cssVariableTheme.typography.fontWeight.medium,
+      textTransform: 'none',
+      letterSpacing: 'normal',
+      color: cssVariableTheme.text.primary,
+    },
+
+    '& .menu-group-label-inline:hover': {
+      backgroundColor: cssVariableTheme.action.hoverBackground,
+      borderRadius: cssVariableTheme.shape.borderRadius.sm,
+    },
+
+    '& .menu-group-arrow': {
+      display: 'inline-block',
+      transition: buildTransition([
+        'transform',
+        cssVariableTheme.transitions.duration.fast,
+        cssVariableTheme.transitions.easing.default,
+      ]),
+    },
+
+    '& .menu-group-arrow.expanded': {
+      transform: 'rotate(90deg)',
+    },
+
+    '& .menu-group-children': {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+
+    '&[data-mode="inline"] .menu-group-children': {
+      paddingLeft: cssVariableTheme.spacing.md,
+    },
+  },
+  render: ({ props, useState, useHostProps }) => {
+    const { items, mode = 'vertical', selectedKey, onSelect } = props
+
+    const [focusedKey, setFocusedKey] = useState('focusedKey', '')
+    const [expandedGroups, setExpandedGroups] = useState<string[]>('expandedGroups', [])
+
+    useHostProps({
+      role: mode === 'horizontal' ? 'menubar' : 'menu',
+      'data-mode': mode,
+      tabindex: '0',
+    })
+
+    useHostProps({
+      onkeydown: (ev: KeyboardEvent) => {
+        const navigableKeys = getNavigableKeys(items)
+        if (navigableKeys.length === 0) return
+
+        const isHorizontal = mode === 'horizontal'
+        const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown'
+        const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp'
+
+        switch (ev.key) {
+          case nextKey: {
+            ev.preventDefault()
+            const currentIndex = navigableKeys.indexOf(focusedKey)
+            const nextIndex = currentIndex < navigableKeys.length - 1 ? currentIndex + 1 : 0
+            setFocusedKey(navigableKeys[nextIndex])
+            break
+          }
+          case prevKey: {
+            ev.preventDefault()
+            const currentIndex = navigableKeys.indexOf(focusedKey)
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : navigableKeys.length - 1
+            setFocusedKey(navigableKeys[prevIndex])
+            break
+          }
+          case 'Home': {
+            ev.preventDefault()
+            setFocusedKey(navigableKeys[0])
+            break
+          }
+          case 'End': {
+            ev.preventDefault()
+            setFocusedKey(navigableKeys[navigableKeys.length - 1])
+            break
+          }
+          case 'Enter':
+          case ' ': {
+            ev.preventDefault()
+            if (focusedKey) {
+              onSelect?.(focusedKey)
+            }
+            break
+          }
+          default:
+            break
+        }
+      },
+    })
+
+    const handleToggleGroup = (key: string) => {
+      if (expandedGroups.includes(key)) {
+        setExpandedGroups(expandedGroups.filter((k) => k !== key))
+      } else {
+        setExpandedGroups([...expandedGroups, key])
+      }
+    }
+
+    return (
+      <div style={{ display: 'contents' }}>
+        {renderItems(items, {
+          selectedKey,
+          focusedKey,
+          expandedGroups,
+          onSelect,
+          setFocusedKey,
+          onToggleGroup: handleToggleGroup,
+          isInline: mode === 'inline',
+        })}
+      </div>
+    )
+  },
+})

package/src/components/modal.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { initializeShadeRoot, createComponent } from '@furystack/shades'
-import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
+import { initializeShadeRoot, createComponent, Shade, flushUpdates } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Modal } from './modal.js'
 
@@ -17,13 +17,12 @@ describe('Modal', () => {
     it('should render when isVisible is true', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(true)
 
         initializeShadeRoot({
           injector,
           rootElement,
           jsxElement: (
-            <Modal isVisible={isVisible}>
+            <Modal isVisible={true}>
               <div id="modal-content">Modal Content</div>
             </Modal>
           ),
@@ -38,13 +37,12 @@ describe('Modal', () => {
     it('should not render when isVisible is false', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(false)
 
         initializeShadeRoot({
           injector,
           rootElement,
           jsxElement: (
-            <Modal isVisible={isVisible}>
+            <Modal isVisible={false}>
               <div id="modal-content">Modal Content</div>
             </Modal>
           ),
@@ -57,24 +55,30 @@ describe('Modal', () => {
     })
 
     it('should show modal when isVisible changes from false to true', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(false)
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: (
-            <Modal isVisible={isVisible}>
+      let setVisible!: (v: boolean) => void
+
+      const Wrapper = Shade({
+        shadowDomName: 'modal-visibility-test-show',
+        render: ({ useState }) => {
+          const [visible, setter] = useState('visible', false)
+          setVisible = setter
+          return (
+            <Modal isVisible={visible}>
               <div id="modal-content">Modal Content</div>
             </Modal>
-          ),
-        })
+          )
+        },
+      })
 
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Wrapper /> })
         await sleepAsync(50)
         expect(document.body.innerHTML).not.toContain('modal-content')
 
-        isVisible.setValue(true)
+        setVisible(true)
+        await flushUpdates()
         await sleepAsync(50)
 
         expect(document.body.innerHTML).toContain('shade-backdrop')
@@ -83,24 +87,30 @@ describe('Modal', () => {
     })
 
     it('should hide modal when isVisible changes from true to false', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(true)
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: (
-            <Modal isVisible={isVisible}>
+      let setVisible!: (v: boolean) => void
+
+      const Wrapper = Shade({
+        shadowDomName: 'modal-visibility-test-hide',
+        render: ({ useState }) => {
+          const [visible, setter] = useState('visible', true)
+          setVisible = setter
+          return (
+            <Modal isVisible={visible}>
               <div id="modal-content">Modal Content</div>
             </Modal>
-          ),
-        })
+          )
+        },
+      })
+
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Wrapper /> })
         await sleepAsync(50)
         expect(document.body.innerHTML).toContain('modal-content')
 
-        isVisible.setValue(false)
+        setVisible(false)
+        await flushUpdates()
         await sleepAsync(50)
 
         expect(document.body.innerHTML).not.toContain('shade-backdrop')
@@ -113,14 +123,13 @@ describe('Modal', () => {
     it('should call onClose when backdrop is clicked', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(true)
         const onClose = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
           jsxElement: (
-            <Modal isVisible={isVisible} onClose={onClose}>
+            <Modal isVisible={true} onClose={onClose}>
               <div id="modal-content">Modal Content</div>
             </Modal>
           ),
@@ -140,7 +149,6 @@ describe('Modal', () => {
     it('should call hideAnimation before onClose when backdrop is clicked', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(true)
         const callOrder: string[] = []
         const hideAnimation = vi.fn(async () => {
           callOrder.push('hideAnimation')
@@ -153,7 +161,7 @@ describe('Modal', () => {
           injector,
           rootElement,
           jsxElement: (
-            <Modal isVisible={isVisible} onClose={onClose} hideAnimation={hideAnimation}>
+            <Modal isVisible={true} onClose={onClose} hideAnimation={hideAnimation}>
               <div id="modal-content">Modal Content</div>
             </Modal>
           ),
@@ -175,14 +183,13 @@ describe('Modal', () => {
     it('should call showAnimation when modal becomes visible', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(true)
         const showAnimation = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
           jsxElement: (
-            <Modal isVisible={isVisible} showAnimation={showAnimation}>
+            <Modal isVisible={true} showAnimation={showAnimation}>
               <div id="modal-content">Modal Content</div>
             </Modal>
           ),
@@ -194,25 +201,31 @@ describe('Modal', () => {
     })
 
     it('should call showAnimation with element when visibility changes to true', async () => {
-      await usingAsync(new Injector(), async (injector) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(false)
-        const showAnimation = vi.fn()
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: (
-            <Modal isVisible={isVisible} showAnimation={showAnimation}>
+      let setVisible!: (v: boolean) => void
+      const showAnimation = vi.fn()
+
+      const Wrapper = Shade({
+        shadowDomName: 'modal-show-animation-test',
+        render: ({ useState }) => {
+          const [visible, setter] = useState('visible', false)
+          setVisible = setter
+          return (
+            <Modal isVisible={visible} showAnimation={showAnimation}>
               <div id="modal-content">Modal Content</div>
             </Modal>
-          ),
-        })
+          )
+        },
+      })
+
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Wrapper /> })
         await sleepAsync(50)
         expect(showAnimation).not.toHaveBeenCalled()
 
-        isVisible.setValue(true)
+        setVisible(true)
+        await flushUpdates()
         await sleepAsync(50)
 
         expect(showAnimation).toHaveBeenCalled()
@@ -223,14 +236,13 @@ describe('Modal', () => {
     it('should call hideAnimation with element on backdrop click', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(true)
         const hideAnimation = vi.fn()
 
         initializeShadeRoot({
           injector,
           rootElement,
           jsxElement: (
-            <Modal isVisible={isVisible} hideAnimation={hideAnimation}>
+            <Modal isVisible={true} hideAnimation={hideAnimation}>
               <div id="modal-content">Modal Content</div>
             </Modal>
           ),
@@ -251,7 +263,6 @@ describe('Modal', () => {
     it('should apply custom backdropStyle', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(true)
         const backdropStyle: Partial<CSSStyleDeclaration> = {
           backgroundColor: 'rgba(0, 0, 0, 0.5)',
           zIndex: '1000',
@@ -261,7 +272,7 @@ describe('Modal', () => {
           injector,
           rootElement,
           jsxElement: (
-            <Modal isVisible={isVisible} backdropStyle={backdropStyle}>
+            <Modal isVisible={true} backdropStyle={backdropStyle}>
               <div id="modal-content">Modal Content</div>
             </Modal>
           ),
@@ -280,13 +291,12 @@ describe('Modal', () => {
     it('should render children inside the backdrop', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const isVisible = new ObservableValue(true)
 
         initializeShadeRoot({
           injector,
           rootElement,
           jsxElement: (
-            <Modal isVisible={isVisible}>
+            <Modal isVisible={true}>
               <div id="child-1">First Child</div>
               <div id="child-2">Second Child</div>
             </Modal>

package/src/components/modal.tsx

@@ -1,9 +1,8 @@
 import { Shade, createComponent } from '@furystack/shades'
-import type { ObservableValue } from '@furystack/utils'
 
 export type ModalProps = {
   backdropStyle?: Partial<CSSStyleDeclaration>
-  isVisible: ObservableValue<boolean>
+  isVisible: boolean
   onClose?: () => void
   showAnimation?: (el: Element | null) => Promise<unknown>
   hideAnimation?: (el: Element | null) => Promise<unknown>
@@ -21,18 +20,22 @@ export const Modal = Shade<ModalProps>({
       left: '0',
     },
   },
-  render: ({ props, children, useObservable, element }) => {
-    const [isVisible] = useObservable('isVisible', props.isVisible)
+  render: ({ props, children, useRef }) => {
+    const { isVisible } = props
+    const backdropRef = useRef<HTMLDivElement>('backdrop')
 
     if (isVisible) {
-      void props.showAnimation?.(element)
+      queueMicrotask(() => {
+        void props.showAnimation?.(backdropRef.current)
+      })
     }
 
     return isVisible ? (
       <div
+        ref={backdropRef}
         className="shade-backdrop"
         onclick={async () => {
-          await props.hideAnimation?.(element)
+          await props.hideAnimation?.(backdropRef.current)
           props.onClose?.()
         }}
         style={props.backdropStyle}