@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/command-palette/command-palette-suggestion-list.tsx

@@ -9,7 +9,7 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
     '& .suggestion-items-container': {
       borderTop: 'none',
       position: 'absolute',
-      borderRadius: '0px 0px 12px 12px',
+      borderRadius: `0px 0px ${cssVariableTheme.shape.borderRadius.lg} ${cssVariableTheme.shape.borderRadius.lg}`,
       marginLeft: '14px',
       marginTop: '4px',
       overflow: 'hidden',
@@ -17,9 +17,9 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
       zIndex: '1',
       left: 'auto',
       backgroundColor: cssVariableTheme.background.paper,
-      boxShadow: '0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12)',
+      boxShadow: cssVariableTheme.shadows.lg,
       backdropFilter: 'blur(20px)',
-      border: '1px solid rgba(128,128,128,0.2)',
+      border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
     },
     '& .suggestion-item': {
       padding: '0.875em 1.25em',
@@ -27,43 +27,40 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
       background: 'transparent',
       fontWeight: '400',
       borderLeft: '3px solid transparent',
-      transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+      transition: `all ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
       fontSize: '0.95em',
       letterSpacing: '0.01em',
     },
     '& .suggestion-item:hover': {
-      background: 'rgba(128,128,128,0.1)',
+      background: cssVariableTheme.action.hoverBackground,
     },
     '& .suggestion-item.selected': {
-      background: 'rgba(128,128,128,0.2)',
+      background: cssVariableTheme.action.activeBackground,
       fontWeight: '500',
       borderLeft: `3px solid ${cssVariableTheme.text.primary}`,
     },
     '& .suggestion-item.selected:hover': {
-      background: 'rgba(128,128,128,0.2)',
+      background: cssVariableTheme.action.activeBackground,
     },
   },
-  render: ({ element, injector, props, useObservable }) => {
+  render: ({ injector, props, useObservable, useRef }) => {
     const { manager } = props
+    const containerRef = useRef<HTMLDivElement>('container')
 
     const [suggestions] = useObservable('suggestions', props.manager.currentSuggestions)
-    const [selectedIndex] = useObservable('selectedIndex', props.manager.selectedIndex, {
-      onChange: (idx) => {
-        ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).forEach((s, i) => {
-          s.classList.toggle('selected', i === idx)
-        })
-      },
-    })
+    const [selectedIndex] = useObservable('selectedIndex', props.manager.selectedIndex)
 
     const [isOpenedAtRender] = useObservable('isOpenedAtRender', props.manager.isOpened, {
       onChange: (isOpened) => {
-        const container = element.firstElementChild as HTMLDivElement
+        const container = containerRef.current
+        if (!container) return
+        const hostParentWidth =
+          container.closest('shade-command-palette-suggestion-list')?.parentElement?.getBoundingClientRect().width ||
+          200
         if (isOpened) {
           container.style.display = 'initial'
           container.style.zIndex = '1'
-          container.style.width = `calc(${Math.round(
-            element.parentElement?.getBoundingClientRect().width || 200,
-          )}px - 3em)`
+          container.style.width = `calc(${Math.round(hostParentWidth)}px - 3em)`
           void promisifyAnimation(
             container,
             [
@@ -87,13 +84,18 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
       },
     })
 
+    const hostParentWidth =
+      containerRef.current?.closest('shade-command-palette-suggestion-list')?.parentElement?.getBoundingClientRect()
+        .width || 200
+
     return (
       <div
+        ref={containerRef}
         className="suggestion-items-container"
         style={{
           opacity: manager.isOpened.getValue() ? '1' : '0',
           maxHeight: `${window.innerHeight * 0.8}px`,
-          width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
+          width: `calc(${Math.round(hostParentWidth)}px - 3em)`,
           ...(props.fullScreenSuggestions ? { left: '0', width: 'calc(100% - 42px)' } : {}),
         }}
       >

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

@@ -334,7 +334,7 @@ describe('CommandPalette', () => {
         termIcon.click()
         await sleepAsync(100) // Wait longer for the opened state to propagate
 
-        expect(commandPalette.classList.contains('opened')).toBe(true)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(true)
 
         const input = commandPalette.querySelector('input') as HTMLInputElement
         input.value = 'test'
@@ -349,7 +349,7 @@ describe('CommandPalette', () => {
         await sleepAsync(100)
 
         // Clicking a suggestion should close the palette
-        expect(commandPalette.classList.contains('opened')).toBe(false)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(false)
       })
     })
 
@@ -374,7 +374,7 @@ describe('CommandPalette', () => {
         termIcon.click()
         await sleepAsync(50)
 
-        expect(commandPalette.classList.contains('opened')).toBe(true)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(true)
 
         const input = commandPalette.querySelector('input') as HTMLInputElement
         input.value = 'test'
@@ -386,7 +386,7 @@ describe('CommandPalette', () => {
         triggerKeyup(input, 'Enter')
         await sleepAsync(50)
 
-        expect(commandPalette.classList.contains('opened')).toBe(false)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(false)
       })
     })
   })
@@ -512,13 +512,13 @@ describe('CommandPalette', () => {
         await sleepAsync(50)
 
         const commandPalette = document.querySelector('shade-command-palette') as HTMLElement
-        expect(commandPalette.classList.contains('opened')).toBe(false)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(false)
 
         const termIcon = commandPalette.querySelector('.term-icon') as HTMLElement
         termIcon.click()
         await sleepAsync(50)
 
-        expect(commandPalette.classList.contains('opened')).toBe(true)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(true)
       })
     })
 
@@ -540,14 +540,14 @@ describe('CommandPalette', () => {
         const termIcon = commandPalette.querySelector('.term-icon') as HTMLElement
         termIcon.click()
         await sleepAsync(50)
-        expect(commandPalette.classList.contains('opened')).toBe(true)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(true)
 
         // Close
         const closeButton = commandPalette.querySelector('.close-suggestions') as HTMLElement
         closeButton.click()
         await sleepAsync(50)
 
-        expect(commandPalette.classList.contains('opened')).toBe(false)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(false)
       })
     })
 
@@ -580,11 +580,11 @@ describe('CommandPalette', () => {
 
         await sleepAsync(260) // After debounce but before provider resolves
 
-        expect(commandPalette.classList.contains('loading')).toBe(true)
+        expect(commandPalette.hasAttribute('data-loading')).toBe(true)
 
         await sleepAsync(200) // Wait for provider to resolve
 
-        expect(commandPalette.classList.contains('loading')).toBe(false)
+        expect(commandPalette.hasAttribute('data-loading')).toBe(false)
       })
     })
   })
@@ -613,14 +613,14 @@ describe('CommandPalette', () => {
         const termIcon = commandPalette.querySelector('.term-icon') as HTMLElement
         termIcon.click()
         await sleepAsync(50)
-        expect(commandPalette.classList.contains('opened')).toBe(true)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(true)
 
         // Click outside
         const outsideElement = document.getElementById('outside') as HTMLElement
         outsideElement.dispatchEvent(new MouseEvent('click', { bubbles: true }))
         await sleepAsync(50)
 
-        expect(commandPalette.classList.contains('opened')).toBe(false)
+        expect(commandPalette.hasAttribute('data-opened')).toBe(false)
       })
     })
   })

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

@@ -1,8 +1,9 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { ClickAwayService } from '../../services/click-away-service.js'
-import { cssVariableTheme } from '../../services/css-variable-theme.js'
-import { promisifyAnimation } from '../../utils/promisify-animation.js'
+import { Icon } from '../icons/icon.js'
+import { close } from '../icons/icon-definitions.js'
 import { Loader } from '../loader.js'
+import { searchableInputStyles } from '../searchable-input-styles.js'
 import { CommandPaletteInput } from './command-palette-input.js'
 import { CommandPaletteManager } from './command-palette-manager.js'
 import { CommandPaletteSuggestionList } from './command-palette-suggestion-list.js'
@@ -23,125 +24,47 @@ export interface CommandPaletteProps {
 export const CommandPalette = Shade<CommandPaletteProps>({
   shadowDomName: 'shade-command-palette',
   css: {
-    flexGrow: '1',
+    ...searchableInputStyles,
     '& .command-palette-wrapper': {
       display: 'flex',
       flexDirection: 'column',
     },
-    '& .input-container': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      padding: '0 1.25em',
-      borderRadius: '12px',
-      position: 'relative',
-      background: 'rgba(128,128,128,0.08)',
-      border: '1px solid rgba(128,128,128,0.15)',
-      boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-    '&.opened .input-container': {
-      border: '1px solid rgba(128,128,128,0.3)',
-      boxShadow: '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)',
-    },
-    '& .term-icon': {
-      cursor: 'pointer',
-      color: cssVariableTheme.text.secondary,
-      fontWeight: '600',
-      fontSize: '0.95em',
-      transition: 'color 0.2s ease',
-      padding: '0.5em 0.75em 0.5em 0',
-      userSelect: 'none',
-    },
-    '& .term-icon:hover': {
-      color: cssVariableTheme.text.primary,
-    },
-    '& .post-controls': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      width: '0px',
-      overflow: 'hidden',
-    },
-    '&.opened .post-controls': {
-      width: '50px',
-    },
     '& .loader-container': {
       width: '20px',
       height: '20px',
       opacity: '0',
     },
-    '&.loading .loader-container': {
+    '&[data-loading] .loader-container': {
       opacity: '1',
     },
-    '& .close-suggestions': {
-      width: '24px',
-      height: '24px',
-      opacity: '0',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      borderRadius: '6px',
-      transition: 'all 0.2s ease',
-      fontSize: '14px',
-      color: cssVariableTheme.text.secondary,
-      background: 'transparent',
-      transform: 'scale(1)',
-    },
-    '&.opened .close-suggestions': {
-      opacity: '1',
-    },
-    '& .close-suggestions:hover': {
-      background: 'rgba(255,255,255,0.15)',
-      transform: 'scale(1.1)',
-    },
   },
-  render: ({ props, injector, element, useState, useDisposable, useObservable }) => {
+  render: ({ props, injector, useState, useDisposable, useObservable, useHostProps, useRef }) => {
     const [manager] = useState('manager', new CommandPaletteManager(props.commandProviders))
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
 
-    useDisposable('clickAwayService', () => new ClickAwayService(element, () => manager.isOpened.setValue(false)))
-
-    useObservable('isLoading', manager.isLoading, {
-      onChange: (isLoading) => {
-        element.classList.toggle('loading', isLoading)
-      },
-    })
-
-    const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened, {
-      onChange: (isOpened) => {
-        element.classList.toggle('opened', isOpened)
-        const inputContainer = element.querySelector('.input-container') as HTMLDivElement
-        if (isOpened) {
-          void promisifyAnimation(
-            inputContainer,
-            [{ background: 'transparent' }, { background: cssVariableTheme.background.default }],
-            {
-              duration: 500,
-              fill: 'forwards',
-              easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-            },
-          )
-        } else {
-          void promisifyAnimation(
-            inputContainer,
-            [{ background: cssVariableTheme.background.default }, { background: 'transparent' }],
-            {
-              duration: 300,
-              fill: 'forwards',
-              easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-            },
-          )
+    useDisposable('clickAwayService', () => {
+      // Defer to next microtask so the ref is populated after mount
+      let clickAway: ClickAwayService | null = null
+      queueMicrotask(() => {
+        const hostEl = wrapperRef.current?.closest('shade-command-palette') as HTMLElement | null
+        if (hostEl) {
+          clickAway = new ClickAwayService(hostEl, () => manager.isOpened.setValue(false))
         }
-      },
+      })
+      return { [Symbol.dispose]: () => clickAway?.[Symbol.dispose]() }
     })
 
-    if (isOpenedAtRender) {
-      element.classList.add('opened')
-    }
+    const [isLoading] = useObservable('isLoading', manager.isLoading)
+    const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened)
+
+    useHostProps({
+      ...(isLoading ? { 'data-loading': '' } : {}),
+      ...(isOpenedAtRender ? { 'data-opened': '' } : {}),
+    })
 
     return (
       <div
+        ref={wrapperRef}
         className="command-palette-wrapper"
         onkeyup={(ev) => {
           if (ev.key === 'Enter') {
@@ -173,7 +96,7 @@ export const CommandPalette = Shade<CommandPaletteProps>({
               <Loader style={{ width: '100%', height: '100%' }} />
             </div>
             <div className="close-suggestions" onclick={() => setIsOpened(false)}>
-              ✖
+              <Icon icon={close} size={14} />
             </div>
           </div>
         </div>

package/src/components/context-menu/context-menu-item.tsx

@@ -0,0 +1,85 @@
+import type { ChildrenList } from '@furystack/shades'
+import { createComponent, Shade } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../../services/css-variable-theme.js'
+import type { ContextMenuItem, ContextMenuManager } from './context-menu-manager.js'
+
+export type ContextMenuItemProps<T> = {
+  item: ContextMenuItem<T>
+  index: number
+  manager: ContextMenuManager<T>
+}
+
+export const ContextMenuItemComponent: <T>(props: ContextMenuItemProps<T>, children: ChildrenList) => JSX.Element<any> =
+  Shade<ContextMenuItemProps<any>>({
+    shadowDomName: 'shade-context-menu-item',
+    css: {
+      display: 'flex',
+      alignItems: 'center',
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+      cursor: 'default',
+      userSelect: 'none',
+      gap: cssVariableTheme.spacing.sm,
+      opacity: '0',
+      transform: 'translateY(-4px)',
+      transition: buildTransition(
+        ['opacity', cssVariableTheme.transitions.duration.slow, 'ease-out'],
+        ['transform', cssVariableTheme.transitions.duration.fast, 'ease-out'],
+        ['background-color', cssVariableTheme.transitions.duration.fast, 'ease'],
+      ),
+      '&[data-visible]': {
+        opacity: '1',
+        transform: 'translateY(0)',
+      },
+      '&:not([data-disabled]):hover, &[data-focused]': {
+        backgroundColor: cssVariableTheme.action.hoverBackground,
+      },
+      '&[data-disabled]': {
+        opacity: '0.5',
+        cursor: 'not-allowed',
+      },
+    },
+    render: ({ props, useObservable, useDisposable, useHostProps, useState }) => {
+      const [isVisible, setVisible] = useState('isVisible', false)
+
+      useDisposable('enter-animation', () => {
+        const timer = setTimeout(() => setVisible(true), props.index * 30)
+        return { [Symbol.dispose]: () => clearTimeout(timer) }
+      })
+
+      const { item, index, manager } = props
+
+      const [focusedIndex] = useObservable('focusedIndex', manager.focusedIndex)
+
+      useHostProps({
+        role: 'menuitem',
+        onclick: () => {
+          if (!item.disabled) {
+            manager.selectItem(index)
+          }
+        },
+        ...(isVisible ? { 'data-visible': '' } : {}),
+        ...(item.disabled ? { 'data-disabled': '', 'aria-disabled': 'true' } : {}),
+        ...(focusedIndex === index ? { 'data-focused': '' } : {}),
+      })
+
+      return (
+        <>
+          {item.icon && <span className="context-menu-item-icon">{item.icon}</span>}
+          <span className="context-menu-item-content" style={{ flex: '1' }}>
+            <div className="context-menu-item-label">{item.label}</div>
+            {item.description && (
+              <div
+                className="context-menu-item-description"
+                style={{
+                  fontSize: '0.85em',
+                  color: cssVariableTheme.text.secondary,
+                }}
+              >
+                {item.description}
+              </div>
+            )}
+          </span>
+        </>
+      )
+    },
+  })