@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/inputs/WorkspacePicker.tsx

@@ -1,349 +1,349 @@
-import {
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-} from 'react'
-import { ChevronDown, Plus, Search } from 'lucide-react'
-import { styled } from 'styled-components'
-import { PlatformIcon } from '../../chrome/PlatformIcon.js'
-import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
-
-export interface WorkspacePickerOption {
-  id: string
-  name: string
-  meta?: string | number
-}
-
-export interface WorkspacePickerProps {
-  label?: string
-  options: readonly WorkspacePickerOption[]
-  activeId: string | null
-  placeholder?: string
-  createLabel?: string
-  createPlaceholderName?: string
-  showCreateWhenEmpty?: boolean
-  disabled?: boolean
-  menuPlacement?: 'below' | 'above' | 'auto'
-  onSelect: (id: string) => void
-  onCreate: (name: string) => void
-}
-
-const StyledRoot = styled.div`
-  position: relative;
-  min-width: 0;
-  width: 100%;
-`
-
-const StyledLabel = styled.label`
-  display: block;
-  margin-bottom: 8px;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-sm);
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-`
-
-const StyledControl = styled.div<{ $open: boolean }>`
-  position: relative;
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) 18px;
-  align-items: center;
-  gap: 8px;
-  min-height: 38px;
-  padding: 0 10px;
-  border: 1px solid
-    ${({ $open }) =>
-      $open
-        ? 'var(--platform-colors-border-strong)'
-        : 'var(--platform-colors-border)'};
-  border-radius: 9px;
-  background: var(--platform-colors-surface);
-  color: var(--platform-colors-text);
-`
-
-const StyledIconSlot = styled.span`
-  display: inline-flex;
-  color: var(--platform-colors-text-secondary);
-`
-
-const StyledInput = styled.input`
-  min-width: 0;
-  border: 0;
-  background: transparent;
-  color: var(--platform-colors-text);
-  font: inherit;
-  font-size: var(--platform-typography-font-size-sm);
-  line-height: 1.2;
-
-  &:focus {
-    outline: none;
-  }
-`
-
-const StyledMenu = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-height: min(280px, 100%);
-  overflow-y: auto;
-`
-
-const StyledOption = styled.button<{ $active?: boolean }>`
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  min-height: 32px;
-  padding: 6px 8px;
-  border: 0;
-  border-radius: 7px;
-  background: ${({ $active }) =>
-    $active ? 'var(--platform-colors-surface-active)' : 'transparent'};
-  color: var(--platform-colors-text);
-  font: inherit;
-  font-size: var(--platform-typography-font-size-sm);
-  text-align: left;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--platform-colors-surface-hover);
-  }
-`
-
-const StyledOptionName = styled.span`
-  overflow: hidden;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const StyledOptionMeta = styled.span`
-  min-width: 22px;
-  padding: 1px 7px;
-  border-radius: var(--platform-radius-full);
-  background: var(--platform-colors-bg);
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: 700;
-  text-align: center;
-`
-
-const StyledCreateOption = styled(StyledOption)`
-  grid-template-columns: 18px minmax(0, 1fr);
-  margin-top: 4px;
-  border-top: 1px solid var(--platform-colors-border);
-  border-radius: 0;
-  padding-top: 10px;
-  color: var(--platform-colors-text);
-`
-
-const StyledEmpty = styled.div`
-  padding: 8px;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-sm);
-`
-
-function normalizeName(value: string): string {
-  return value.trim().replace(/\s+/g, ' ')
-}
-
-export function WorkspacePicker({
-  label = 'Workspace',
-  options,
-  activeId,
-  placeholder = 'Find or create workspace',
-  createLabel = 'Create',
-  createPlaceholderName,
-  showCreateWhenEmpty = false,
-  disabled,
-  menuPlacement = 'below',
-  onSelect,
-  onCreate,
-}: WorkspacePickerProps): React.ReactElement {
-  const rootRef = useRef<HTMLDivElement | null>(null)
-  const controlRef = useRef<HTMLDivElement | null>(null)
-  const inputRef = useRef<HTMLInputElement | null>(null)
-  const inputId = useId()
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [highlightedIndex, setHighlightedIndex] = useState(0)
-  const safeOptions = useMemo(
-    () =>
-      options
-        .filter(option => option?.id && typeof option.name === 'string')
-        .map(option => ({
-          ...option,
-          name: option.name.trim() || 'Untitled',
-        })),
-    [options],
-  )
-
-  const activeOption =
-    safeOptions.find(option => option.id === activeId) ?? safeOptions[0] ?? null
-  const normalizedQuery = normalizeName(query)
-  const lowerQuery = normalizedQuery.toLocaleLowerCase()
-
-  const filteredOptions = useMemo(() => {
-    if (!lowerQuery) return [...safeOptions]
-    return safeOptions.filter(option =>
-      option.name.toLocaleLowerCase().includes(lowerQuery),
-    )
-  }, [lowerQuery, safeOptions])
-
-  const canCreate =
-    Boolean(normalizedQuery) &&
-    !safeOptions.some(option => option.name.toLocaleLowerCase() === lowerQuery)
-  const canCreateEmpty = showCreateWhenEmpty && !normalizedQuery
-  const showCreateOption = canCreate || canCreateEmpty
-
-  const menuItemCount = filteredOptions.length + (showCreateOption ? 1 : 0)
-
-  useEffect(() => {
-    setHighlightedIndex(0)
-  }, [query, open])
-
-  const showMenu = (): void => {
-    if (disabled) return
-    setOpen(true)
-    setQuery('')
-  }
-
-  const selectOption = (id: string): void => {
-    onSelect(id)
-    setOpen(false)
-    setQuery('')
-    inputRef.current?.blur()
-  }
-
-  const createWorkspace = (): void => {
-    if (!showCreateOption) return
-    onCreate(normalizedQuery || createPlaceholderName || '')
-    setOpen(false)
-    setQuery('')
-    inputRef.current?.blur()
-  }
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
-    if (!open && ['ArrowDown', 'Enter'].includes(event.key)) {
-      event.preventDefault()
-      showMenu()
-      return
-    }
-
-    if (!open) return
-
-    if (event.key === 'Escape') {
-      event.preventDefault()
-      setOpen(false)
-      setQuery('')
-      inputRef.current?.blur()
-      return
-    }
-
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      event.preventDefault()
-      if (!menuItemCount) return
-      setHighlightedIndex(current => {
-        const offset = event.key === 'ArrowDown' ? 1 : -1
-        return (current + offset + menuItemCount) % menuItemCount
-      })
-      return
-    }
-
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      const highlightedOption = filteredOptions[highlightedIndex]
-      if (highlightedOption) {
-        selectOption(highlightedOption.id)
-        return
-      }
-      if (showCreateOption) createWorkspace()
-    }
-  }
-
-  return (
-    <StyledRoot ref={rootRef}>
-      {label ? <StyledLabel htmlFor={inputId}>{label}</StyledLabel> : null}
-      <StyledControl ref={controlRef} $open={open}>
-        <StyledIconSlot aria-hidden="true">
-          <PlatformIcon icon={Search} size={14} strokeWidth={1.8} />
-        </StyledIconSlot>
-        <StyledInput
-          ref={inputRef}
-          id={inputId}
-          value={open ? query : activeOption?.name ?? ''}
-          placeholder={placeholder}
-          disabled={disabled}
-          role="combobox"
-          aria-expanded={open}
-          aria-autocomplete="list"
-          onFocus={showMenu}
-          onChange={event => {
-            setQuery(event.target.value)
-            setOpen(true)
-          }}
-          onKeyDown={handleKeyDown}
-        />
-        <StyledIconSlot aria-hidden="true">
-          <PlatformIcon icon={ChevronDown} size={14} strokeWidth={1.8} />
-        </StyledIconSlot>
-      </StyledControl>
-      <SelectMenuControl
-        anchorRef={controlRef}
-        open={open}
-        placement={menuPlacement}
-        minWidth={320}
-        panelVariant="workspace"
-        wrapChildren={false}
-        role="listbox"
-        aria-label={label}
-        onClose={() => {
-          setOpen(false)
-          setQuery('')
-        }}
-      >
-        <StyledMenu>
-          {filteredOptions.map((option, index) => (
-            <StyledOption
-              key={option.id}
-              type="button"
-              role="option"
-              aria-selected={option.id === activeId}
-              $active={index === highlightedIndex || option.id === activeId}
-              onPointerEnter={() => setHighlightedIndex(index)}
-              onClick={() => selectOption(option.id)}
-            >
-              <StyledOptionName>{option.name}</StyledOptionName>
-              {option.meta === undefined || option.meta === null ? null : (
-                <StyledOptionMeta>{option.meta}</StyledOptionMeta>
-              )}
-            </StyledOption>
-          ))}
-          {showCreateOption ? (
-            <StyledCreateOption
-              type="button"
-              $active={highlightedIndex === filteredOptions.length}
-              onPointerEnter={() => setHighlightedIndex(filteredOptions.length)}
-              onClick={createWorkspace}
-            >
-              <PlatformIcon icon={Plus} size={14} strokeWidth={1.9} />
-              <StyledOptionName>
-                {normalizedQuery
-                  ? `${createLabel} "${normalizedQuery}"`
-                  : createLabel}
-              </StyledOptionName>
-            </StyledCreateOption>
-          ) : null}
-          {!filteredOptions.length && !showCreateOption ? (
-            <StyledEmpty>No matching workspaces.</StyledEmpty>
-          ) : null}
-        </StyledMenu>
-      </SelectMenuControl>
-    </StyledRoot>
-  )
-}
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from 'react'
+import { ChevronDown, Plus, Search } from 'lucide-react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
+
+export interface WorkspacePickerOption {
+  id: string
+  name: string
+  meta?: string | number
+}
+
+export interface WorkspacePickerProps {
+  label?: string
+  options: readonly WorkspacePickerOption[]
+  activeId: string | null
+  placeholder?: string
+  createLabel?: string
+  createPlaceholderName?: string
+  showCreateWhenEmpty?: boolean
+  disabled?: boolean
+  menuPlacement?: 'below' | 'above' | 'auto'
+  onSelect: (id: string) => void
+  onCreate: (name: string) => void
+}
+
+const StyledRoot = styled.div`
+  position: relative;
+  min-width: 0;
+  width: 100%;
+`
+
+const StyledLabel = styled.label`
+  display: block;
+  margin-bottom: 8px;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+`
+
+const StyledControl = styled.div<{ $open: boolean }>`
+  position: relative;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 18px;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 1px solid
+    ${({ $open }) =>
+      $open
+        ? 'var(--platform-colors-border-strong)'
+        : 'var(--platform-colors-border)'};
+  border-radius: 9px;
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+`
+
+const StyledIconSlot = styled.span`
+  display: inline-flex;
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledInput = styled.input`
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1.2;
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const StyledMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: min(280px, 100%);
+  overflow-y: auto;
+`
+
+const StyledOption = styled.button<{ $active?: boolean }>`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: ${({ $active }) =>
+    $active ? 'var(--platform-colors-surface-active)' : 'transparent'};
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+const StyledOptionName = styled.span`
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledOptionMeta = styled.span`
+  min-width: 22px;
+  padding: 1px 7px;
+  border-radius: var(--platform-radius-full);
+  background: var(--platform-colors-bg);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: 700;
+  text-align: center;
+`
+
+const StyledCreateOption = styled(StyledOption)`
+  grid-template-columns: 18px minmax(0, 1fr);
+  margin-top: 4px;
+  border-top: 1px solid var(--platform-colors-border);
+  border-radius: 0;
+  padding-top: 10px;
+  color: var(--platform-colors-text);
+`
+
+const StyledEmpty = styled.div`
+  padding: 8px;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+function normalizeName(value: string): string {
+  return value.trim().replace(/\s+/g, ' ')
+}
+
+export function WorkspacePicker({
+  label = 'Workspace',
+  options,
+  activeId,
+  placeholder = 'Find or create workspace',
+  createLabel = 'Create',
+  createPlaceholderName,
+  showCreateWhenEmpty = false,
+  disabled,
+  menuPlacement = 'below',
+  onSelect,
+  onCreate,
+}: WorkspacePickerProps): React.ReactElement {
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const controlRef = useRef<HTMLDivElement | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const inputId = useId()
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [highlightedIndex, setHighlightedIndex] = useState(0)
+  const safeOptions = useMemo(
+    () =>
+      options
+        .filter(option => option?.id && typeof option.name === 'string')
+        .map(option => ({
+          ...option,
+          name: option.name.trim() || 'Untitled',
+        })),
+    [options],
+  )
+
+  const activeOption =
+    safeOptions.find(option => option.id === activeId) ?? safeOptions[0] ?? null
+  const normalizedQuery = normalizeName(query)
+  const lowerQuery = normalizedQuery.toLocaleLowerCase()
+
+  const filteredOptions = useMemo(() => {
+    if (!lowerQuery) return [...safeOptions]
+    return safeOptions.filter(option =>
+      option.name.toLocaleLowerCase().includes(lowerQuery),
+    )
+  }, [lowerQuery, safeOptions])
+
+  const canCreate =
+    Boolean(normalizedQuery) &&
+    !safeOptions.some(option => option.name.toLocaleLowerCase() === lowerQuery)
+  const canCreateEmpty = showCreateWhenEmpty && !normalizedQuery
+  const showCreateOption = canCreate || canCreateEmpty
+
+  const menuItemCount = filteredOptions.length + (showCreateOption ? 1 : 0)
+
+  useEffect(() => {
+    setHighlightedIndex(0)
+  }, [query, open])
+
+  const showMenu = (): void => {
+    if (disabled) return
+    setOpen(true)
+    setQuery('')
+  }
+
+  const selectOption = (id: string): void => {
+    onSelect(id)
+    setOpen(false)
+    setQuery('')
+    inputRef.current?.blur()
+  }
+
+  const createWorkspace = (): void => {
+    if (!showCreateOption) return
+    onCreate(normalizedQuery || createPlaceholderName || '')
+    setOpen(false)
+    setQuery('')
+    inputRef.current?.blur()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (!open && ['ArrowDown', 'Enter'].includes(event.key)) {
+      event.preventDefault()
+      showMenu()
+      return
+    }
+
+    if (!open) return
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      setOpen(false)
+      setQuery('')
+      inputRef.current?.blur()
+      return
+    }
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      if (!menuItemCount) return
+      setHighlightedIndex(current => {
+        const offset = event.key === 'ArrowDown' ? 1 : -1
+        return (current + offset + menuItemCount) % menuItemCount
+      })
+      return
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      const highlightedOption = filteredOptions[highlightedIndex]
+      if (highlightedOption) {
+        selectOption(highlightedOption.id)
+        return
+      }
+      if (showCreateOption) createWorkspace()
+    }
+  }
+
+  return (
+    <StyledRoot ref={rootRef}>
+      {label ? <StyledLabel htmlFor={inputId}>{label}</StyledLabel> : null}
+      <StyledControl ref={controlRef} $open={open}>
+        <StyledIconSlot aria-hidden="true">
+          <PlatformIcon icon={Search} size={14} strokeWidth={1.8} />
+        </StyledIconSlot>
+        <StyledInput
+          ref={inputRef}
+          id={inputId}
+          value={open ? query : activeOption?.name ?? ''}
+          placeholder={placeholder}
+          disabled={disabled}
+          role="combobox"
+          aria-expanded={open}
+          aria-autocomplete="list"
+          onFocus={showMenu}
+          onChange={event => {
+            setQuery(event.target.value)
+            setOpen(true)
+          }}
+          onKeyDown={handleKeyDown}
+        />
+        <StyledIconSlot aria-hidden="true">
+          <PlatformIcon icon={ChevronDown} size={14} strokeWidth={1.8} />
+        </StyledIconSlot>
+      </StyledControl>
+      <SelectMenuControl
+        anchorRef={controlRef}
+        open={open}
+        placement={menuPlacement}
+        minWidth={320}
+        panelVariant="workspace"
+        wrapChildren={false}
+        role="listbox"
+        aria-label={label}
+        onClose={() => {
+          setOpen(false)
+          setQuery('')
+        }}
+      >
+        <StyledMenu>
+          {filteredOptions.map((option, index) => (
+            <StyledOption
+              key={option.id}
+              type="button"
+              role="option"
+              aria-selected={option.id === activeId}
+              $active={index === highlightedIndex || option.id === activeId}
+              onPointerEnter={() => setHighlightedIndex(index)}
+              onClick={() => selectOption(option.id)}
+            >
+              <StyledOptionName>{option.name}</StyledOptionName>
+              {option.meta === undefined || option.meta === null ? null : (
+                <StyledOptionMeta>{option.meta}</StyledOptionMeta>
+              )}
+            </StyledOption>
+          ))}
+          {showCreateOption ? (
+            <StyledCreateOption
+              type="button"
+              $active={highlightedIndex === filteredOptions.length}
+              onPointerEnter={() => setHighlightedIndex(filteredOptions.length)}
+              onClick={createWorkspace}
+            >
+              <PlatformIcon icon={Plus} size={14} strokeWidth={1.9} />
+              <StyledOptionName>
+                {normalizedQuery
+                  ? `${createLabel} "${normalizedQuery}"`
+                  : createLabel}
+              </StyledOptionName>
+            </StyledCreateOption>
+          ) : null}
+          {!filteredOptions.length && !showCreateOption ? (
+            <StyledEmpty>No matching workspaces.</StyledEmpty>
+          ) : null}
+        </StyledMenu>
+      </SelectMenuControl>
+    </StyledRoot>
+  )
+}