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

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

@@ -1,280 +1,295 @@
-import {
-  forwardRef,
-  useCallback,
-  useRef,
-  useState,
-  type FocusEvent,
-  type InputHTMLAttributes,
-  type KeyboardEvent,
-} from 'react'
-import { styled } from 'styled-components'
-import { Search, X } from 'lucide-react'
-import { PlatformIcon } from '../../chrome/PlatformIcon.js'
-import {
-  PathBreadcrumbs,
-  type PathBreadcrumbItem,
-} from '../navigation/PathBreadcrumbs.js'
-import { BareInput } from './BareInput.js'
-
-export interface HybridSearchFieldProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
-  value: string
-  onValueChange: (value: string) => void
-  breadcrumbs: PathBreadcrumbItem[]
-  onPathSelect: (path: string) => void
-  onClear?: () => void
-  clearLabel?: string
-  pathLabel?: string
-  searchPlaceholder?: string
-}
-
-//#region styled-components
-
-const StyledHybrid = styled.div`
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: center;
-  min-width: 0;
-  flex: 1 1 auto;
-  min-height: 22px;
-`
-
-const StyledLayer = styled.div<{ $visible: boolean }>`
-  grid-row: 1;
-  grid-column: 1;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  width: 100%;
-  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
-  transform: translateY(${({ $visible }) => ($visible ? '0' : '2px')});
-  transition: opacity var(--platform-transition-base),
-    transform var(--platform-transition-base);
-  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
-`
-
-const StyledPathSurface = styled.div<{ $disabled?: boolean }>`
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  width: 100%;
-  font-size: var(--platform-typography-font-size-base);
-  line-height: 1.2;
-  color: var(--platform-colors-text);
-  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};
-  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
-`
-
-const StyledPathText = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const StyledPathNav = styled.div`
-  min-width: 0;
-  overflow: hidden;
-  font-size: var(--platform-typography-font-size-base);
-
-  button {
-    font-size: inherit;
-  }
-
-  span[aria-hidden='true'] {
-    font-size: inherit;
-  }
-`
-
-const StyledSearchRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--platform-spacing-xs);
-  min-width: 0;
-  width: 100%;
-`
-
-const StyledIcon = styled.span`
-  display: inline-flex;
-  flex: 0 0 auto;
-  color: var(--platform-colors-text-secondary);
-`
-
-const StyledInput = styled(BareInput)`
-  flex: 1 1 auto;
-  min-height: 22px;
-  font-size: var(--platform-typography-font-size-sm);
-  line-height: 1.2;
-`
-
-const StyledClear = styled.button`
-  display: grid;
-  place-items: center;
-  flex: 0 0 auto;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--platform-radius-sm);
-  background: transparent;
-  color: var(--platform-colors-text-secondary);
-  cursor: pointer;
-  transition: color var(--platform-transition-fast);
-
-  &:hover {
-    color: var(--platform-colors-text);
-  }
-`
-
-//#endregion
-
-function pathSummary(items: PathBreadcrumbItem[]): string {
-  if (items.length === 0) return './'
-  if (items.length === 1) return './'
-  return items.map(item => item.label).join(' / ')
-}
-
-export const HybridSearchField = forwardRef<
-  HTMLInputElement,
-  HybridSearchFieldProps
->(function HybridSearchField(
-  {
-    value,
-    onValueChange,
-    breadcrumbs,
-    onPathSelect,
-    onClear,
-    clearLabel = 'Clear search',
-    pathLabel = 'Current folder path',
-    searchPlaceholder = 'Search this folder',
-    disabled = false,
-    ...rest
-  },
-  ref,
-) {
-  const rootRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [focused, setFocused] = useState(false)
-  const active = !disabled && (focused || value.trim().length > 0)
-  const showClear = Boolean(value) && !disabled
-
-  const setInputRef = useCallback(
-    (node: HTMLInputElement | null) => {
-      inputRef.current = node
-      if (typeof ref === 'function') ref(node)
-      else if (ref) ref.current = node
-    },
-    [ref],
-  )
-
-  const activate = useCallback(() => {
-    if (disabled) return
-    setFocused(true)
-    requestAnimationFrame(() => inputRef.current?.focus())
-  }, [disabled])
-
-  const deactivate = useCallback(() => {
-    setFocused(false)
-  }, [])
-
-  const handleContainerBlur = useCallback(
-    (event: FocusEvent<HTMLDivElement>) => {
-      const next = event.relatedTarget
-      if (next instanceof Node && rootRef.current?.contains(next)) return
-      if (!value.trim()) deactivate()
-    },
-    [deactivate, value],
-  )
-
-  const handlePathKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (disabled) return
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault()
-        activate()
-      }
-    },
-    [activate, disabled],
-  )
-
-  const handleInputKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key !== 'Escape') return
-      onValueChange('')
-      onClear?.()
-      deactivate()
-      inputRef.current?.blur()
-    },
-    [deactivate, onClear, onValueChange],
-  )
-
-  return (
-    <StyledHybrid ref={rootRef} onBlur={handleContainerBlur}>
-      <StyledLayer $visible={!active} aria-hidden={active}>
-        <StyledPathSurface
-          role="button"
-          tabIndex={disabled ? -1 : 0}
-          aria-label={`${pathLabel}: ${pathSummary(
-            breadcrumbs,
-          )}. Activate search.`}
-          $disabled={disabled}
-          onClick={activate}
-          onKeyDown={handlePathKeyDown}
-        >
-          {breadcrumbs.length <= 1 ? (
-            <StyledPathText>
-              {breadcrumbs.length === 1 ? `./${breadcrumbs[0].label}` : './'}
-            </StyledPathText>
-          ) : (
-            <StyledPathNav
-              onClick={event => event.stopPropagation()}
-              onKeyDown={event => event.stopPropagation()}
-            >
-              <PathBreadcrumbs
-                items={breadcrumbs}
-                nowrap
-                aria-label={pathLabel}
-                onSelect={onPathSelect}
-              />
-            </StyledPathNav>
-          )}
-        </StyledPathSurface>
-      </StyledLayer>
-
-      <StyledLayer $visible={active} aria-hidden={!active}>
-        <StyledSearchRow>
-          <StyledIcon aria-hidden="true">
-            <PlatformIcon icon={Search} size={14} strokeWidth={1.75} />
-          </StyledIcon>
-          <StyledInput
-            ref={setInputRef}
-            type="search"
-            value={value}
-            disabled={disabled}
-            placeholder={searchPlaceholder}
-            aria-label={searchPlaceholder}
-            onFocus={() => setFocused(true)}
-            onKeyDown={handleInputKeyDown}
-            onChange={event => onValueChange(event.target.value)}
-            {...rest}
-          />
-          {showClear ? (
-            <StyledClear
-              type="button"
-              title={clearLabel}
-              aria-label={clearLabel}
-              onClick={() => {
-                onClear?.()
-                onValueChange('')
-                requestAnimationFrame(() => inputRef.current?.focus())
-              }}
-            >
-              <PlatformIcon icon={X} size={12} strokeWidth={2} />
-            </StyledClear>
-          ) : null}
-        </StyledSearchRow>
-      </StyledLayer>
-    </StyledHybrid>
-  )
-})
-
-HybridSearchField.displayName = 'HybridSearchField'
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  useState,
+  type FocusEvent,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+} from 'react'
+import { styled } from 'styled-components'
+import { Search, X } from 'lucide-react'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import {
+  PathBreadcrumbs,
+  type PathBreadcrumbItem,
+} from '../navigation/PathBreadcrumbs.js'
+import { BareInput } from './BareInput.js'
+
+export interface HybridSearchFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  value: string
+  onValueChange: (value: string) => void
+  breadcrumbs: PathBreadcrumbItem[]
+  onPathSelect: (path: string) => void
+  onClear?: () => void
+  clearLabel?: string
+  pathLabel?: string
+  searchPlaceholder?: string
+}
+
+//#region styled-components
+
+const StyledHybrid = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 22px;
+`
+
+const StyledLayer = styled.div<{ $visible: boolean }>`
+  grid-row: 1;
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transform: translateY(${({ $visible }) => ($visible ? '0' : '2px')});
+  transition: opacity var(--platform-transition-base),
+    transform var(--platform-transition-base);
+  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
+`
+
+const StyledPathSurface = styled.div<{ $disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  font-size: var(
+    --platform-hybrid-search-path-font-size,
+    var(--platform-typography-font-size-base)
+  );
+  font-weight: var(
+    --platform-hybrid-search-path-font-weight,
+    var(--platform-typography-font-weight-normal)
+  );
+  line-height: var(--platform-hybrid-search-path-line-height, 1.2);
+  color: var(--platform-hybrid-search-path-color, var(--platform-colors-text));
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+`
+
+const StyledPathText = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledPathNav = styled.div`
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(
+    --platform-hybrid-search-path-font-size,
+    var(--platform-typography-font-size-base)
+  );
+  font-weight: var(
+    --platform-hybrid-search-path-font-weight,
+    var(--platform-typography-font-weight-normal)
+  );
+  line-height: var(--platform-hybrid-search-path-line-height, 1.2);
+
+  button {
+    font-size: inherit;
+  }
+
+  span[aria-hidden='true'] {
+    font-size: inherit;
+  }
+`
+
+const StyledSearchRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  width: 100%;
+`
+
+const StyledIcon = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledInput = styled(BareInput)`
+  flex: 1 1 auto;
+  min-height: 22px;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1.2;
+`
+
+const StyledClear = styled.button`
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--platform-radius-sm);
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  cursor: pointer;
+  transition: color var(--platform-transition-fast);
+
+  &:hover {
+    color: var(--platform-colors-text);
+  }
+`
+
+//#endregion
+
+function pathSummary(items: PathBreadcrumbItem[]): string {
+  if (items.length === 0) return './'
+  if (items.length === 1) return './'
+  return items.map(item => item.label).join(' / ')
+}
+
+export const HybridSearchField = forwardRef<
+  HTMLInputElement,
+  HybridSearchFieldProps
+>(function HybridSearchField(
+  {
+    value,
+    onValueChange,
+    breadcrumbs,
+    onPathSelect,
+    onClear,
+    clearLabel = 'Clear search',
+    pathLabel = 'Current folder path',
+    searchPlaceholder = 'Search this folder',
+    disabled = false,
+    ...rest
+  },
+  ref,
+) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [focused, setFocused] = useState(false)
+  const active = !disabled && (focused || value.trim().length > 0)
+  const showClear = Boolean(value) && !disabled
+
+  const setInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      inputRef.current = node
+      if (typeof ref === 'function') ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref],
+  )
+
+  const activate = useCallback(() => {
+    if (disabled) return
+    setFocused(true)
+    requestAnimationFrame(() => inputRef.current?.focus())
+  }, [disabled])
+
+  const deactivate = useCallback(() => {
+    setFocused(false)
+  }, [])
+
+  const handleContainerBlur = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      const next = event.relatedTarget
+      if (next instanceof Node && rootRef.current?.contains(next)) return
+      if (!value.trim()) deactivate()
+    },
+    [deactivate, value],
+  )
+
+  const handlePathKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+        activate()
+      }
+    },
+    [activate, disabled],
+  )
+
+  const handleInputKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== 'Escape') return
+      onValueChange('')
+      onClear?.()
+      deactivate()
+      inputRef.current?.blur()
+    },
+    [deactivate, onClear, onValueChange],
+  )
+
+  return (
+    <StyledHybrid ref={rootRef} onBlur={handleContainerBlur}>
+      <StyledLayer $visible={!active} aria-hidden={active}>
+        <StyledPathSurface
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-label={`${pathLabel}: ${pathSummary(
+            breadcrumbs,
+          )}. Activate search.`}
+          $disabled={disabled}
+          onClick={activate}
+          onKeyDown={handlePathKeyDown}
+        >
+          {breadcrumbs.length <= 1 ? (
+            <StyledPathText>
+              {breadcrumbs.length === 1 ? `./${breadcrumbs[0].label}` : './'}
+            </StyledPathText>
+          ) : (
+            <StyledPathNav
+              onClick={event => event.stopPropagation()}
+              onKeyDown={event => event.stopPropagation()}
+            >
+              <PathBreadcrumbs
+                items={breadcrumbs}
+                nowrap
+                aria-label={pathLabel}
+                onSelect={onPathSelect}
+              />
+            </StyledPathNav>
+          )}
+        </StyledPathSurface>
+      </StyledLayer>
+
+      <StyledLayer $visible={active} aria-hidden={!active}>
+        <StyledSearchRow>
+          <StyledIcon aria-hidden="true">
+            <PlatformIcon icon={Search} size={14} strokeWidth={1.75} />
+          </StyledIcon>
+          <StyledInput
+            ref={setInputRef}
+            type="search"
+            value={value}
+            disabled={disabled}
+            placeholder={searchPlaceholder}
+            aria-label={searchPlaceholder}
+            onFocus={() => setFocused(true)}
+            onKeyDown={handleInputKeyDown}
+            onChange={event => onValueChange(event.target.value)}
+            {...rest}
+          />
+          {showClear ? (
+            <StyledClear
+              type="button"
+              title={clearLabel}
+              aria-label={clearLabel}
+              onClick={() => {
+                onClear?.()
+                onValueChange('')
+                requestAnimationFrame(() => inputRef.current?.focus())
+              }}
+            >
+              <PlatformIcon icon={X} size={12} strokeWidth={2} />
+            </StyledClear>
+          ) : null}
+        </StyledSearchRow>
+      </StyledLayer>
+    </StyledHybrid>
+  )
+})
+
+HybridSearchField.displayName = 'HybridSearchField'