@likec4/diagram 1.31.0 → 1.32.1

package/src/search/components/SearchByTags.tsx

@@ -0,0 +1,112 @@
+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()
+  let countBefore = tags.length
+  if (search.startsWith('#')) {
+    const searchTag = search.slice(1)
+    tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag))
+  }
+  if (tags.length === 0) {
+    return null
+  }
+
+  const isFiltered = tags.length !== countBefore
+
+  return (
+    <HStack
+      ref={ref}
+      css={{
+        gap: 'md',
+        paddingLeft: 48,
+        flexWrap: 'nowrap',
+      }}
+    >
+      <HStack
+        css={{
+          gap: 6,
+          flexWrap: 'wrap',
+          opacity: isFiltered ? 1 : .3,
+          grayscale: isFiltered ? 0 : .9,
+          filter: 'auto',
+          transition: 'fast',
+          _groupHover: {
+            opacity: 1,
+            grayscale: 0,
+          },
+          _groupFocusWithin: {
+            opacity: 1,
+            grayscale: 0,
+          },
+        }}
+      >
+        {tags.map(({ tag }) => (
+          // <Pill
+          //   key={tag}
+          //   data-likec4-tag={tag}
+          //   className={cx(
+          //     likec4tag(),
+          //     css({
+          //       minWidth: 'unset',
+          //       cursor: 'pointer',
+          //     }),
+          //   )}
+          //   onClick={(e) => {
+          //     e.stopPropagation()
+          //     setSearch(`#${tag}`)
+          //   }}
+          //   onRemove={() => {
+          //     setSearch('#')
+          //     moveFocusToSearchInput()
+          //   }}
+          //   withRemoveButton={tag === `${search.slice(1)}`}
+          // >
+          //   <span style={{ opacity: 0.7, fontSize: '1.05em' }}>#</span>
+          //   {tag}
+          // </Pill>
+          <ElementTag
+            key={tag}
+            tag={tag}
+            className={css({
+              userSelect: 'none',
+              cursor: 'pointer',
+            })}
+            onClick={(e) => {
+              e.stopPropagation()
+              setSearch(`#${tag}`)
+              // Let react to display filtered elements
+              setTimeout(() => {
+                focusToFirstFoundElement(ref.current)
+              }, 350)
+            }}
+          />
+        ))}
+      </HStack>
+      {isFiltered && (
+        <Button
+          size="compact-xs"
+          variant="light"
+          onClick={(e) => {
+            e.stopPropagation()
+            setSearch('')
+            moveFocusToSearchInput(ref.current)
+          }}
+          rightSection={<IconX size={14} />}
+        >
+          Clear
+        </Button>
+      )}
+    </HStack>
+  )
+}

package/src/{likec4diagram/ui/search → search/components}/SearchInput.tsx

@@ -1,4 +1,3 @@
-import { compareNatural } from '@likec4/core'
 import {
   Combobox,
   ComboboxDropdown,
@@ -12,15 +11,14 @@ import {
   Text,
   useCombobox,
 } from '@mantine/core'
-import { useDebouncedValue, useFocusWithin, useIsFirstRender, 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 } from 'react'
-import { isString, keys, only } from 'remeda'
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
-import * as css from './LikeC4Search.css'
-import { setSearch, useIsPickViewActive, useSearch } from './state'
-import { moveFocusToSearchInput, stopAndPrevent } from './utils'
+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'
+import { focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent } from './utils'
 
 function startingWithKind(search: string) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null
@@ -28,31 +26,41 @@ function startingWithKind(search: string) {
 
 const SEARCH_PREFIXES = ['#', 'kind:']
 
-export function LikeC4SearchInput() {
-  const isPickViewActive = useIsPickViewActive()
-  const likec4model = useLikeC4Model(true)
+export const LikeC4SearchInput = memo(() => {
+  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 [isEmptyForSomeTime, cancel] = useDebouncedValue(
+  //   focused ? search : 'rstrs',
+  //   2000,
+  // )
+  // // useF
+  // // const isEmptyForSomeTime = debouncedSearch === ''
+  // useEffect(() => {
+  //   // cancel()
+  // }, [])
+
   const combobox = useCombobox({
     scrollBehavior: 'smooth',
+    loop: false,
   })
-  const { ref, focused } = useFocusWithin<HTMLInputElement>()
-  const search = useSearch()
-  const previous = usePreviousDistinct(search)
-  const isFirstRender = useIsFirstRender()
-
-  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 500 : 2000)
 
   useWindowEvent(
     'keydown',
     (event) => {
       try {
         if (
-          !focused && !isPickViewActive && (
+          !focused && (
             event.key === 'Backspace' ||
             event.key.startsWith('Arrow') ||
             event.key.match(/^\p{L}$/u)
           )
         ) {
-          moveFocusToSearchInput()
+          moveFocusToSearchInput(inputRef.current)
         }
       } catch (e) {
         console.warn(e)
@@ -64,28 +72,27 @@ export function LikeC4SearchInput() {
   let isExactMatch = false
 
   switch (true) {
-    case search === '' && (isEmptyForSomeTime || SEARCH_PREFIXES.includes(previous ?? '')): {
-      options = SEARCH_PREFIXES.map((prefix) => (
-        <ComboboxOption value={prefix} key={prefix}>
-          <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
-          {prefix}
-        </ComboboxOption>
-      ))
-      break
-    }
+    // case search === '' && isEmptyForSomeTime === '': {
+    //   options = SEARCH_PREFIXES.map((prefix) => (
+    //     <ComboboxOption value={prefix} key={prefix}>
+    //       <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
+    //       {prefix}
+    //     </ComboboxOption>
+    //   ))
+    //   break
+    // }
     case search.startsWith('#'): {
       const searchTag = search.toLocaleLowerCase().slice(1)
-      const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
-        compareNatural,
-      )
-      isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag
+      const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(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>
@@ -98,18 +105,19 @@ export function LikeC4SearchInput() {
     case search.startsWith('kind:'):
     case startingWithKind(search): {
       const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : ''
-      let alloptions = keys(likec4model.$model.specification.elements)
+      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>
@@ -130,8 +138,8 @@ export function LikeC4SearchInput() {
           combobox.closeDropdown()
           // Let react to display filtered elements
           setTimeout(() => {
-            document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${css.focusable}`)?.focus()
-          }, 50)
+            focusToFirstFoundElement(inputRef.current)
+          }, 350)
         }
       }}
       width={'max-content'}
@@ -146,16 +154,31 @@ export function LikeC4SearchInput() {
     >
       <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,
           }}
-          size="xl"
+          size="lg"
           value={search}
           leftSection={<IconSearch style={{ width: rem(20) }} stroke={2} />}
+          rightSection={
+            <Input.ClearButton
+              onClick={(e) => {
+                e.stopPropagation()
+                const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch
+                if (search === '' || search === openedWithSearch) {
+                  searchActorRef.send({ type: 'close' })
+                } else {
+                  setSearch('')
+                }
+              }} />
+          }
+          rightSectionPointerEvents="auto"
           onChange={(event) => {
             setSearch(event.currentTarget.value)
             combobox.openDropdown()
@@ -207,6 +230,13 @@ export function LikeC4SearchInput() {
               combobox.closeDropdown()
               return
             }
+            if (
+              e.key === 'ArrowUp' && combobox.dropdownOpened && search === '' && combobox.getSelectedOptionIndex() === 0
+            ) {
+              combobox.closeDropdown()
+              stopAndPrevent(e)
+              return
+            }
             if (
               e.key === 'ArrowDown' && (
                 !combobox.dropdownOpened ||
@@ -217,7 +247,7 @@ export function LikeC4SearchInput() {
             ) {
               combobox.closeDropdown()
               stopAndPrevent(e)
-              document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${css.focusable}`)?.focus()
+              focusToFirstFoundElement(inputRef.current)
               return
             }
           }} />
@@ -232,4 +262,4 @@ export function LikeC4SearchInput() {
       </ComboboxDropdown>
     </Combobox>
   )
-}
+})

package/src/{likec4diagram/ui/search → search/components}/ViewsColum.tsx

@@ -1,8 +1,4 @@
-import {
-  type LikeC4Model,
-  type Tag,
-  isDeploymentView,
-} from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
 import {
@@ -19,12 +15,14 @@ import {
 } from '@mantine/core'
 import { IconStack2, IconZoomScan } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
+import { memo, useRef } from 'react'
 import { first } from 'remeda'
-import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import { useCurrentViewId } from '../../hooks/useCurrentViewId'
+import { useDiagram } from '../../hooks/useDiagram'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useNormalizedSearch, useSearchActor } from '../hooks'
 import { buttonsva } from './_shared.css'
-import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
-import { centerY, moveFocusToSearchInput } from './utils'
+import { centerY, moveFocusToSearchInput, queryAllFocusable } from './utils'
 import * as styles from './ViewsColumn.css'
 
 export const NothingFound = () => (
@@ -33,16 +31,17 @@ export const NothingFound = () => (
   </Box>
 )
 
-export function ViewsColumn() {
-  const search = useNormalizedSearch()
-  let views = [...useLikeC4Model(true).views()]
+export const ViewsColumn = memo(() => {
+  const ref = useRef<HTMLDivElement>(null)
+  let views = [...useLikeC4Model().views()]
+  let search = useNormalizedSearch()
   if (search) {
     if (search.startsWith('kind:')) {
       views = []
     } else {
       views = views.filter(view => {
         if (search.startsWith('#')) {
-          return view.tags.some((tag: Tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
+          return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
         }
         return (view.title ?? '' + view.$view.description ?? '').toLocaleLowerCase().includes(search)
       })
@@ -51,15 +50,14 @@ export function ViewsColumn() {
 
   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-element-button`,
-          )]
+          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
@@ -80,7 +78,7 @@ export function ViewsColumn() {
             tabIndex={-1}
             onFocus={e => {
               e.stopPropagation()
-              moveFocusToSearchInput()
+              moveFocusToSearchInput(ref.current)
             }} />
         </VisuallyHidden>
       )}
@@ -95,7 +93,7 @@ export function ViewsColumn() {
       ))}
     </Stack>
   )
-}
+})
 
 const btn = buttonsva()
 
@@ -109,9 +107,18 @@ export function ViewButton(
     & UnstyledButtonProps
     & ElementProps<'button'>,
 ) {
-  const navigateTo = useCloseSearchAndNavigateTo()
+  const searchActorRef = useSearchActor()
+  const diagram = useDiagram()
   const currentViewId = useCurrentViewId()
   const isCurrentView = view.id === currentViewId
+
+  const navigate = () => {
+    searchActorRef.send({ type: 'close' })
+    setTimeout(() => {
+      diagram.navigateTo(view.id)
+    }, 100)
+  }
+
   return (
     <UnstyledButton
       {...props}
@@ -120,7 +127,7 @@ export function ViewButton(
       {...isCurrentView && { 'data-disabled': true }}
       onClick={(e) => {
         e.stopPropagation()
-        navigateTo(view.id)
+        navigate()
       }}
       onKeyDown={createScopedKeydownHandler({
         siblingSelector: '[data-likec4-view]',
@@ -131,12 +138,12 @@ export function ViewButton(
         onKeyDown: (e) => {
           if (e.nativeEvent.code === 'Space') {
             e.stopPropagation()
-            navigateTo(view.id)
+            navigate()
           }
         },
       })}>
       <ThemeIcon variant="transparent" className={btn.icon!}>
-        {isDeploymentView(view)
+        {view.isDeploymentView()
           ? <IconStack2 stroke={1.8} />
           : <IconZoomScan stroke={1.8} />}
       </ThemeIcon>

package/src/{likec4diagram/ui/search → search/components}/_shared.css.ts

@@ -1,5 +1,4 @@
 import { css, sva } from '@likec4/styles/css'
-import type { ColorToken } from '@likec4/styles/tokens'
 
 // export const titleColor = '--title-color'
 // export const descriptionColor = '---description-color'
@@ -13,21 +12,6 @@ const buttonFocused = css.raw({
 
 const _treenodefocus = '.mantine-Tree-node:focus > .mantine-Tree-label &'
 
-function colors(color: ColorToken, hover: ColorToken) {
-  return {
-    color,
-    _groupHover: {
-      color: hover,
-    },
-    _groupFocus: {
-      color: hover,
-    },
-    [_treenodefocus]: {
-      color: hover,
-    },
-  }
-}
-
 const button = css.raw({
   display: 'flex',
   width: '100%',
@@ -35,7 +19,7 @@ const button = css.raw({
   rounded: 'sm',
   padding: `12px 8px 12px 14px`,
   minHeight: '60px',
-  gap: '8',
+  gap: 8,
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -76,9 +60,14 @@ const iconSize = {
 }
 
 const icon = css.raw({
-  ...colors('mantine.colors.dimmed', 'mantine.colors.primary[0]'),
-  _light: {
-    ...colors('mantine.colors.gray[6]', 'mantine.colors.primary[3]'),
+  color: {
+    base: 'mantine.colors.dimmed',
+    _light: 'mantine.colors.gray[5]',
+    _groupHover: 'mantine.colors.primary[0]',
+    _groupFocus: 'mantine.colors.primary[0]',
+  },
+  [_treenodefocus]: {
+    color: 'mantine.colors.primary[0]',
   },
   flex: `0 0 ${iconSize.ref}`,
   height: iconSize.ref,
@@ -116,23 +105,23 @@ const title = css.raw({
     opacity: 0.4,
   },
 
-  // color: 'mantine.colors.dark[1]',
-  // _groupHover: {
-  //   color: 'mantine.colors.primary[1]',
-  // },
-  // _groupFocus: {
-  //   color: 'mantine.colors.primary[1]',
-  // },
-  ...colors('mantine.colors.dark[1]', 'mantine.colors.primary[1]'),
-  _light: {
-    ...colors('mantine.colors.gray[6]', 'mantine.colors.primary[3]'),
-    // color: `mantine.colors.gray[6]`,
-    // _groupHover: {
-    //   color: 'mantine.colors.primary[3]',
-    // },
-    // _groupFocus: {
-    //   color: 'mantine.colors.primary[3]',
-    // },
+  color: {
+    base: 'mantine.colors.dark[1]',
+    _light: 'mantine.colors.gray[7]',
+    _groupHover: {
+      base: 'mantine.colors.primary[1]',
+      _light: 'mantine.colors.white',
+    },
+    _groupFocus: {
+      base: 'mantine.colors.primary[1]',
+      _light: 'mantine.colors.white',
+    },
+  },
+  [_treenodefocus]: {
+    color: {
+      base: 'mantine.colors.primary[1]',
+      _light: 'mantine.colors.white',
+    },
   },
 })
 const descriptionColor = css.raw({

package/src/{likec4diagram/ui/search/LikeC4Search.css.ts → search/components/styles.css.ts}

@@ -1,44 +1,17 @@
 import { css } from '@likec4/styles/css'
 export { focusable } from './_shared.css'
 
-export const backdrop = css({
-  position: 'fixed',
-  zIndex: 900,
-  inset: '0px',
-  backgroundColor: '[rgb(34 34 34 / 0.95)]',
-  backdropFilter: 'auto',
-  backdropBlur: '10px',
-  _light: {
-    backgroundColor: '[rgb(255 255 255 / 0.92 )]',
-  },
-})
-export const root = css({
-  containerName: 'likec4-search',
-  containerType: 'size',
-  position: 'fixed',
-  zIndex: 901,
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  maxHeight: '100vh',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'stretch',
-  gap: 'md',
-  paddingTop: '32px',
-  paddingLeft: '16px',
-  paddingRight: '16px',
-  paddingBottom: 0,
-})
 export const input = css({
   border: 'transparent',
-  background: 'transparent',
-  _focusWithin: {
-    background: `mantine.colors.gray[3]/55`,
-    _dark: {
-      background: `mantine.colors.dark[4]/55`,
+  background: {
+    base: 'transparent',
+    _focusWithin: {
+      base: `mantine.colors.gray[4]/55 !important`,
+      _dark: `mantine.colors.dark[5]/55 !important`,
+    },
+    _groupHover: {
+      base: 'mantine.colors.gray[3]/35',
+      _dark: 'mantine.colors.dark[5]/35',
     },
   },
 })

package/src/search/components/utils.ts

@@ -0,0 +1,64 @@
+import { isFunction } from 'remeda'
+import { focusable } from './_shared.css'
+
+export function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent) {
+  e.stopPropagation()
+  e.preventDefault()
+  return
+}
+
+export function centerY(element: HTMLElement) {
+  const rect = element.getBoundingClientRect()
+  const y = rect.y + Math.floor(rect.height / 2)
+  return y
+}
+
+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()
+    input.setSelectionRange(length, length)
+  }
+}
+
+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]
+}