@furystack/shades-common-components 10.0.35 → 12.0.0

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 { ThemeProviderService } from '../../services/theme-provider-service.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'
@@ -22,85 +23,49 @@ export interface CommandPaletteProps {
 
 export const CommandPalette = Shade<CommandPaletteProps>({
   shadowDomName: 'shade-command-palette',
-  render: ({ props, injector, element, useState, useDisposable, useObservable }) => {
-    element.style.flexGrow = '1'
+  css: {
+    ...searchableInputStyles,
+    '& .command-palette-wrapper': {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    '& .loader-container': {
+      width: '20px',
+      height: '20px',
+      opacity: '0',
+    },
+    '&[data-loading] .loader-container': {
+      opacity: '1',
+    },
+  },
+  render: ({ props, injector, useState, useDisposable, useObservable, useHostProps, useRef }) => {
     const [manager] = useState('manager', new CommandPaletteManager(props.commandProviders))
-    const { theme } = injector.getInstance(ThemeProviderService)
-
-    useDisposable('clickAwayService', () => new ClickAwayService(element, () => manager.isOpened.setValue(false)))
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
 
-    const [isLoadingAtRender] = useObservable('isLoading', manager.isLoading, {
-      onChange: (isLoading) => {
-        const loader = element.querySelector('.loader-container')
-        if (isLoading) {
-          void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
-            duration: 100,
-            fill: 'forwards',
-          })
-        } else {
-          void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
-            duration: 100,
-            fill: 'forwards',
-          })
+    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]() }
     })
 
-    const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened, {
-      onChange: (isOpened) => {
-        {
-          const suggestions = element.querySelector('.close-suggestions')
-          const postControls = element.querySelector('.post-controls')
-          const inputContainer = element.querySelector('.input-container') as HTMLDivElement
-          if (isOpened) {
-            void promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
-              duration: 500,
-              fill: 'forwards',
-            })
-
-            void promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
-              duration: 100,
-              fill: 'forwards',
-            })
-
-            void promisifyAnimation(
-              inputContainer,
-              [{ background: 'transparent' }, { background: theme.background.default }],
-              {
-                duration: 500,
-                fill: 'forwards',
-                easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-              },
-            )
-          } else {
-            void promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
-              duration: 500,
-              fill: 'forwards',
-            })
+    const [isLoading] = useObservable('isLoading', manager.isLoading)
+    const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened)
 
-            void promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
-              duration: 500,
-              fill: 'forwards',
-              delay: 300,
-            })
-
-            void promisifyAnimation(
-              inputContainer,
-              [{ background: theme.background.default }, { background: 'transparent' }],
-              {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-              },
-            )
-          }
-        }
-      },
+    useHostProps({
+      ...(isLoading ? { 'data-loading': '' } : {}),
+      ...(isOpenedAtRender ? { 'data-opened': '' } : {}),
     })
 
     return (
       <div
-        style={{ display: 'flex', flexDirection: 'column' }}
+        ref={wrapperRef}
+        className="command-palette-wrapper"
         onkeyup={(ev) => {
           if (ev.key === 'Enter') {
             ev.preventDefault()
@@ -121,88 +86,17 @@ export const CommandPalette = Shade<CommandPaletteProps>({
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >
-        <div
-          className="input-container"
-          style={{
-            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 ${manager.isOpened.getValue() ? 'rgba(128,128,128,0.3)' : 'rgba(128,128,128,0.15)'}`,
-            boxShadow: manager.isOpened.getValue()
-              ? '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)'
-              : '0 2px 4px rgba(0,0,0,0.05)',
-            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            ...props.style,
-          }}
-        >
-          <div
-            className="term-icon"
-            style={{
-              cursor: 'pointer',
-              color: theme.text.secondary,
-              fontWeight: '600',
-              fontSize: '0.95em',
-              transition: 'color 0.2s ease',
-              padding: '0.5em 0.75em 0.5em 0',
-              userSelect: 'none',
-            }}
-            onmouseenter={(ev) => {
-              ;(ev.target as HTMLElement).style.color = theme.text.primary
-            }}
-            onmouseleave={(ev) => {
-              ;(ev.target as HTMLElement).style.color = theme.text.secondary
-            }}
-            onclick={() => setIsOpened(true)}
-          >
+        <div className="input-container" style={props.style}>
+          <div className="term-icon" onclick={() => setIsOpened(true)}>
             {props.defaultPrefix}
           </div>
           <CommandPaletteInput manager={manager} />
-          <div
-            className="post-controls"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              width: isOpenedAtRender ? '50px' : '0px',
-              overflow: 'hidden',
-            }}
-          >
-            <div
-              className="loader-container"
-              style={{ width: '20px', height: '20px', opacity: isLoadingAtRender ? '1' : '0' }}
-            >
+          <div className="post-controls">
+            <div className="loader-container">
               <Loader style={{ width: '100%', height: '100%' }} />
             </div>
-            <div
-              className="close-suggestions"
-              onclick={() => setIsOpened(false)}
-              onmouseenter={(ev) => {
-                ;(ev.target as HTMLElement).style.background = 'rgba(255,255,255,0.15)'
-                ;(ev.target as HTMLElement).style.transform = 'scale(1.1)'
-              }}
-              onmouseleave={(ev) => {
-                ;(ev.target as HTMLElement).style.background = 'transparent'
-                ;(ev.target as HTMLElement).style.transform = 'scale(1)'
-              }}
-              style={{
-                width: '24px',
-                height: '24px',
-                opacity: manager.isOpened.getValue() ? '1' : '0',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: 'pointer',
-                borderRadius: '6px',
-                transition: 'all 0.2s ease',
-                fontSize: '14px',
-                color: theme.text.secondary,
-              }}
-            >
-              ✖
+            <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>
+        </>
+      )
+    },
+  })