@likec4/diagram 1.32.0 → 1.32.2

package/src/search/components/PickView.tsx

@@ -10,14 +10,8 @@ import * as styles from './styles.css'
 import { ViewButton } from './ViewsColum'
 
 export function PickView({ elementFqn }: { elementFqn: Fqn }) {
-  const { searchActorRef } = useSearchActor()
+  const searchActorRef = useSearchActor()
   const element = useLikeC4Model().element(elementFqn)
-  // const pickview = usePickView()
-  // const navigateTo = useCloseSearchAndNavigateTo()
-  // const focusTrapRef = useFocusTrap(!!pickview)
-  // useFocusReturn({
-  //   opened: !!pickview,
-  // })
   const scoped = [] as LikeC4ViewModel[]
   const others = [] as LikeC4ViewModel[]
 
@@ -61,44 +55,44 @@ export function PickView({ elementFqn }: { elementFqn: Fqn }) {
           closePickView()
         }}>
       </m.div>
-      <m.div
-        key="pickview"
-        initial={{
-          opacity: 0,
-          scale: 0.95,
-          originY: 0,
-          translateX: '-50%',
-          translateY: -20,
-        }}
-        animate={{
-          opacity: 1,
-          scale: 1,
-          translateY: 0,
-        }}
-        exit={{
-          opacity: 0,
-          scale: 0.98,
-          translateY: -20,
-          transition: {
-            duration: 0.1,
-          },
-        }}
-        className={styles.pickview}
-        data-likec4-search-views>
-        <Group px="sm" py="md" justify="space-between">
-          <Title order={2} lh={1}>Select view</Title>
-          <ActionIcon
-            size={'md'}
-            variant="default"
-            onClick={(e) => {
-              e.stopPropagation()
-              closePickView()
-            }}>
-            <IconX />
-          </ActionIcon>
-        </Group>
-        <FocusTrap>
-          <ScrollAreaAutosize mah={'calc(100vh - 8rem - 50px)'} type="never">
+      <FocusTrap>
+        <m.div
+          key="pickview"
+          initial={{
+            opacity: 0,
+            scale: 0.95,
+            originY: 0,
+            translateX: '-50%',
+            translateY: -20,
+          }}
+          animate={{
+            opacity: 1,
+            scale: 1,
+            translateY: 0,
+          }}
+          exit={{
+            opacity: 0,
+            scale: 0.98,
+            translateY: -20,
+            transition: {
+              duration: 0.1,
+            },
+          }}
+          className={styles.pickview}
+          data-likec4-search-views>
+          <Group px="sm" py="md" justify="space-between">
+            <Title order={2} lh={1}>Select view</Title>
+            <ActionIcon
+              size={'md'}
+              variant="default"
+              onClick={(e) => {
+                e.stopPropagation()
+                closePickView()
+              }}>
+              <IconX />
+            </ActionIcon>
+          </Group>
+          <ScrollAreaAutosize mah={'calc(100vh - 110px)'} type="never">
             {scoped.length > 0 && (
               <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
                 <Title order={6} c={'dimmed'}>scoped views of the element</Title>
@@ -133,8 +127,8 @@ export function PickView({ elementFqn }: { elementFqn: Fqn }) {
               </Stack>
             )}
           </ScrollAreaAutosize>
-        </FocusTrap>
-      </m.div>
+        </m.div>
+      </FocusTrap>
     </>
   )
 }

package/src/search/components/SearchByTags.tsx

@@ -2,12 +2,14 @@ import { css } from '@likec4/styles/css'
 import { HStack } from '@likec4/styles/jsx'
 import { Button } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
+import { useRef } from 'react'
 import { ElementTag } from '../../base/primitives'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
 import { useNormalizedSearch, useUpdateSearch } from '../hooks'
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils'
 
 export function SearchByTags() {
+  const ref = useRef<HTMLDivElement>(null)
   let tags = useLikeC4Model().tagsSortedByUsage
   let setSearch = useUpdateSearch()
   let search = useNormalizedSearch()
@@ -24,6 +26,7 @@ export function SearchByTags() {
 
   return (
     <HStack
+      ref={ref}
       css={{
         gap: 'md',
         paddingLeft: 48,
@@ -84,7 +87,7 @@ export function SearchByTags() {
               setSearch(`#${tag}`)
               // Let react to display filtered elements
               setTimeout(() => {
-                focusToFirstFoundElement()
+                focusToFirstFoundElement(ref.current)
               }, 350)
             }}
           />
@@ -97,7 +100,7 @@ export function SearchByTags() {
           onClick={(e) => {
             e.stopPropagation()
             setSearch('')
-            moveFocusToSearchInput()
+            moveFocusToSearchInput(ref.current)
           }}
           rightSection={<IconX size={14} />}
         >

package/src/search/components/SearchInput.tsx

@@ -11,11 +11,10 @@ import {
   Text,
   useCombobox,
 } from '@mantine/core'
-import { useFocusWithin, useWindowEvent } from '@mantine/hooks'
-import { usePreviousDistinct } from '@react-hookz/web'
+import { useFocusWithin, useMergedRef, useWindowEvent } from '@mantine/hooks'
 import { IconSearch } from '@tabler/icons-react'
-import { type ReactNode, memo } from 'react'
-import { keys, only } from 'remeda'
+import { type ReactNode, memo, useRef } from 'react'
+import { keys } from 'remeda'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
 import { useSearch, useSearchActor } from '../hooks'
 import * as css from './styles.css'
@@ -28,11 +27,12 @@ function startingWithKind(search: string) {
 const SEARCH_PREFIXES = ['#', 'kind:']
 
 export const LikeC4SearchInput = memo(() => {
-  const { close, searchActorRef } = useSearchActor()
+  const searchActorRef = useSearchActor()
   const likec4model = useLikeC4Model()
+  const inputRef = useRef<HTMLInputElement>(null)
   const { ref, focused } = useFocusWithin<HTMLInputElement>()
   const [search, setSearch] = useSearch()
-  const previous = usePreviousDistinct(search)
+  // const previous = usePreviousDistinct(search)
 
   // const [isEmptyForSomeTime, cancel] = useDebouncedValue(
   //   focused ? search : 'rstrs',
@@ -60,7 +60,7 @@ export const LikeC4SearchInput = memo(() => {
             event.key.match(/^\p{L}$/u)
           )
         ) {
-          moveFocusToSearchInput()
+          moveFocusToSearchInput(inputRef.current)
         }
       } catch (e) {
         console.warn(e)
@@ -84,14 +84,15 @@ export const LikeC4SearchInput = memo(() => {
     case search.startsWith('#'): {
       const searchTag = search.toLocaleLowerCase().slice(1)
       const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag))
-      isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag
       if (alloptions.length === 0) {
+        isExactMatch = false
         options = [
           <ComboboxEmpty key="empty-tags">
             No tags found
           </ComboboxEmpty>,
         ]
       } else {
+        isExactMatch = likec4model.tags.some((tag) => tag.toLocaleLowerCase() === searchTag)
         options = alloptions.map((tag) => (
           <ComboboxOption value={`#${tag}`} key={tag}>
             <Text component="span" opacity={.5} mr={1} fz={'sm'}>#</Text>
@@ -107,15 +108,16 @@ export const LikeC4SearchInput = memo(() => {
       let alloptions = keys(likec4model.specification.elements)
       if (term) {
         alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))
-        isExactMatch = only(alloptions)?.toLocaleLowerCase() === term
       }
       if (alloptions.length === 0) {
+        isExactMatch = false
         options = [
           <ComboboxEmpty key="empty-kinds">
             No kinds found
           </ComboboxEmpty>,
         ]
       } else {
+        isExactMatch = alloptions.some((kind) => kind.toLocaleLowerCase() === term)
         options = alloptions.map((kind) => (
           <ComboboxOption value={`kind:${kind}`} key={kind}>
             <Text component="span" opacity={.5} mr={1} fz={'sm'}>kind:</Text>
@@ -136,7 +138,7 @@ export const LikeC4SearchInput = memo(() => {
           combobox.closeDropdown()
           // Let react to display filtered elements
           setTimeout(() => {
-            focusToFirstFoundElement()
+            focusToFirstFoundElement(inputRef.current)
           }, 350)
         }
       }}
@@ -152,10 +154,11 @@ export const LikeC4SearchInput = memo(() => {
     >
       <ComboboxTarget>
         <Input
-          ref={ref}
-          id="likec4searchinput"
+          ref={useMergedRef(inputRef, ref)}
           placeholder="Search by title, description or start with # or kind:"
           autoFocus
+          data-autofocus
+          data-likec4-search-input
           tabIndex={0}
           classNames={{
             input: css.input,
@@ -169,7 +172,7 @@ export const LikeC4SearchInput = memo(() => {
                 e.stopPropagation()
                 const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch
                 if (search === '' || search === openedWithSearch) {
-                  close()
+                  searchActorRef.send({ type: 'close' })
                 } else {
                   setSearch('')
                 }
@@ -244,7 +247,7 @@ export const LikeC4SearchInput = memo(() => {
             ) {
               combobox.closeDropdown()
               stopAndPrevent(e)
-              focusToFirstFoundElement()
+              focusToFirstFoundElement(inputRef.current)
               return
             }
           }} />

package/src/search/components/ViewsColum.tsx

@@ -15,14 +15,14 @@ import {
 } from '@mantine/core'
 import { IconStack2, IconZoomScan } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
-import { memo } from 'react'
+import { memo, useRef } from 'react'
 import { first } from 'remeda'
 import { useCurrentViewId } from '../../hooks/useCurrentViewId'
 import { useDiagram } from '../../hooks/useDiagram'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import { useNormalizedSearch } from '../hooks'
+import { useNormalizedSearch, useSearchActor } from '../hooks'
 import { buttonsva } from './_shared.css'
-import { centerY, moveFocusToSearchInput } from './utils'
+import { centerY, moveFocusToSearchInput, queryAllFocusable } from './utils'
 import * as styles from './ViewsColumn.css'
 
 export const NothingFound = () => (
@@ -32,6 +32,7 @@ export const NothingFound = () => (
 )
 
 export const ViewsColumn = memo(() => {
+  const ref = useRef<HTMLDivElement>(null)
   let views = [...useLikeC4Model().views()]
   let search = useNormalizedSearch()
   if (search) {
@@ -49,15 +50,14 @@ export const ViewsColumn = memo(() => {
 
   return (
     <Stack
+      ref={ref}
       renderRoot={props => <m.div layout {...props} />}
       gap={8}
       data-likec4-search-views
       onKeyDown={(e) => {
         if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
           const maxY = (e.target as HTMLElement).getBoundingClientRect().y
-          const elementButtons = [...document.querySelectorAll<HTMLButtonElement>(
-            `[data-likec4-search-elements] .likec4-focusable`,
-          )]
+          const elementButtons = queryAllFocusable(ref.current, 'elements', '.likec4-element-button')
           let elementButton = elementButtons.length > 1
             ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
             : null
@@ -78,7 +78,7 @@ export const ViewsColumn = memo(() => {
             tabIndex={-1}
             onFocus={e => {
               e.stopPropagation()
-              moveFocusToSearchInput()
+              moveFocusToSearchInput(ref.current)
             }} />
         </VisuallyHidden>
       )}
@@ -107,10 +107,18 @@ export function ViewButton(
     & UnstyledButtonProps
     & ElementProps<'button'>,
 ) {
+  const searchActorRef = useSearchActor()
   const diagram = useDiagram()
-  // const navigateTo = useCloseSearchAndNavigateTo()
   const currentViewId = useCurrentViewId()
   const isCurrentView = view.id === currentViewId
+
+  const navigate = () => {
+    searchActorRef.send({ type: 'close' })
+    setTimeout(() => {
+      diagram.navigateTo(view.id)
+    }, 100)
+  }
+
   return (
     <UnstyledButton
       {...props}
@@ -119,7 +127,7 @@ export function ViewButton(
       {...isCurrentView && { 'data-disabled': true }}
       onClick={(e) => {
         e.stopPropagation()
-        diagram.navigateTo(view.id)
+        navigate()
       }}
       onKeyDown={createScopedKeydownHandler({
         siblingSelector: '[data-likec4-view]',
@@ -130,7 +138,7 @@ export function ViewButton(
         onKeyDown: (e) => {
           if (e.nativeEvent.code === 'Space') {
             e.stopPropagation()
-            diagram.navigateTo(view.id)
+            navigate()
           }
         },
       })}>

package/src/search/components/utils.ts

@@ -1,3 +1,4 @@
+import { isFunction } from 'remeda'
 import { focusable } from './_shared.css'
 
 export function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent) {
@@ -12,8 +13,17 @@ export function centerY(element: HTMLElement) {
   return y
 }
 
-export function moveFocusToSearchInput() {
-  const input = document.getElementById('likec4searchinput') as HTMLInputElement | null
+export function moveFocusToSearchInput(from: HTMLElement | null | undefined) {
+  if (!from) {
+    console.error('moveFocusToSearchInput: from is null or undefined')
+    return
+  }
+  const root = from.getRootNode() as Document | ShadowRoot
+  if (!isFunction(root.querySelector)) {
+    console.error('moveFocusToSearchInput: root.querySelector is not a function')
+    return
+  }
+  let input = root.querySelector('[data-likec4-search-input]') as HTMLInputElement | null
   if (input) {
     const length = input.value.length
     input.focus()
@@ -21,7 +31,34 @@ export function moveFocusToSearchInput() {
   }
 }
 
-export function focusToFirstFoundElement() {
-  let firstFoundElement = document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${focusable}`)
+export function focusToFirstFoundElement(from: HTMLElement | null | undefined) {
+  if (!from) {
+    console.error('focusToFirstFoundElement: from is null or undefined')
+    return
+  }
+  const root = from.getRootNode() as Document | ShadowRoot
+  if (!isFunction(root.querySelector)) {
+    console.error('focusToFirstFoundElement: root.querySelector is not a function')
+    return
+  }
+  let firstFoundElement = root.querySelector<HTMLButtonElement>(`[data-likec4-search] .${focusable}`)
   firstFoundElement?.focus()
 }
+
+export function queryAllFocusable(
+  from: HTMLElement | null | undefined,
+  where: 'elements' | 'views',
+  selector: string = `.${focusable}`,
+): HTMLButtonElement[] {
+  if (!from) {
+    console.error('queryAllFocusable: from is null or undefined')
+    return []
+  }
+  const root = from.getRootNode() as Document | ShadowRoot
+  if (!isFunction(root.querySelectorAll)) {
+    console.error('queryAllFocusable: root.querySelectorAll is not a function')
+    return []
+  }
+  const elements = root.querySelectorAll<HTMLButtonElement>(`[data-likec4-search-${where}] ${selector}`)
+  return [...elements]
+}

package/src/search/hooks.ts

@@ -3,14 +3,11 @@ import { useSelector } from '@xstate/react'
 import { useCallback, useDeferredValue } from 'react'
 import type { SearchActorRef, SearchActorSnapshot } from './searchActor'
 
-export const [SearchActorContext, useSearchActor] = createSafeContext<{
-  searchActorRef: SearchActorRef
-  close: (cb?: () => void) => void
-}>('SearchActorContext')
+export const [SearchActorContext, useSearchActor] = createSafeContext<SearchActorRef>('SearchActorContext')
 
 const selectSearchValue = (s: SearchActorSnapshot) => s.context.searchValue
 export function useSearch(): [string, (search: string) => void] {
-  const { searchActorRef } = useSearchActor()
+  const searchActorRef = useSearchActor()
   const searchValue = useSelector(searchActorRef, selectSearchValue)
   const updateSearch = useCallback((search: string) => {
     searchActorRef.send({ type: 'change.search', search })
@@ -23,12 +20,12 @@ const selectNormalizedSearchValue = (s: SearchActorSnapshot) => {
   return v.length > 1 ? v : ''
 }
 export function useNormalizedSearch() {
-  const { searchActorRef } = useSearchActor()
+  const searchActorRef = useSearchActor()
   return useDeferredValue(useSelector(searchActorRef, selectNormalizedSearchValue))
 }
 
 export function useUpdateSearch() {
-  const { searchActorRef } = useSearchActor()
+  const searchActorRef = useSearchActor()
   return useCallback((search: string) => {
     searchActorRef.send({ type: 'change.search', search })
   }, [searchActorRef])
@@ -36,6 +33,6 @@ export function useUpdateSearch() {
 
 const selectPickViewFor = (s: SearchActorSnapshot) => s.context.pickViewFor
 export function usePickViewFor() {
-  const { searchActorRef } = useSearchActor()
+  const searchActorRef = useSearchActor()
   return useSelector(searchActorRef, selectPickViewFor)
 }

package/src/state/DiagramActorProvider.tsx

@@ -1,4 +1,5 @@
 import type { DiagramView, WhereOperator } from '@likec4/core/types'
+import { useLogger } from '@mantine/hooks'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
@@ -41,7 +42,7 @@ export function DiagramActorProvider({
           // Slightly defer callback for better responsiveness
           setTimeout(() => {
             handlersRef.current.onNavigateTo?.(viewId)
-          }, 30)
+          }, 40)
         }),
 
         'trigger:OnChange': ((_, params) => {

package/src/state/diagram-machine.ts

@@ -1023,12 +1023,14 @@ const _diagramMachine = setup({
         'closeAllOverlays',
         'closeSearch',
         'stopSyncLayout',
-        {
-          type: 'trigger:NavigateTo',
-          params: ({ context }) => ({
-            viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
-          }),
-        },
+        enqueueActions(({ enqueue, context }) => {
+          enqueue({
+            type: 'trigger:NavigateTo',
+            params: {
+              viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
+            },
+          })
+        }),
       ],
       on: {
         'update.view': {