@feugene/granularity 0.41.0 → 0.43.0

package/dist/components/GrTree/index.js

@@ -1,3 +1,3 @@
-import { t as GrTree_default } from "./chunks/GrTree-BFWFc0Bm.js";
+import { t as GrTree_default } from "./chunks/GrTree-CkHzgYg1.js";
 import { n as grTreeSafelist, t as grTreeConfig } from "../../chunks/config-CDat1wXf.js";
 export { GrTree_default as GrTree, GrTree_default as default, grTreeConfig, grTreeSafelist };

package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-DJa2lYGe.js → GrTreeSelect-DUsv3_mF.js}

@@ -15,7 +15,7 @@ import { n as panelPopTransition } from "../../../chunks/overlayPanelSurface-BKe
 import { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
 import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.js";
 import { t as GrInput_default } from "../../GrInput/chunks/GrInput-TFeBm3gQ.js";
-import { t as GrTree_default } from "../../GrTree/chunks/GrTree-BFWFc0Bm.js";
+import { t as GrTree_default } from "../../GrTree/chunks/GrTree-CkHzgYg1.js";
 import { a as grTreeSelectStateClass, i as grTreeSelectPanelClass, o as paddingX, r as grTreeSelectClass, s as trailingZoneWidth } from "../../../chunks/config-BGCyyXiD.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 //#region src/components/GrTreeSelect/GrTreeSelect.vue?vue&type=script&setup=true&lang.ts

package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-DJa2lYGe.js.map → GrTreeSelect-DUsv3_mF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrTreeSelect-DJa2lYGe.js","names":["$slots"],"sources":["../../../../src/components/GrTreeSelect/GrTreeSelect.vue","../../../../src/components/GrTreeSelect/GrTreeSelect.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any> = any\">\nimport { computed, nextTick, ref, useId, useSlots, watch } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport { useFloating } from '../../composables/useFloating'\nimport { useOverlayLayer } from '../../composables/useOverlayLayer'\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useGrComponentSize, useGrThemeAttrs } from '../GrConfigProvider/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree, {\n  type GrTreeInstance,\n  type GrTreeKey,\n  type GrTreeNode,\n} from '../GrTree'\nimport type { GrInputSize } from '../GrInput/GrInput.vue'\nimport { panelPopTransition } from '../shared/overlayTransition'\nimport type { GrTreeSelectModelValue, GrTreeSelectProps } from './grTreeSelectTypes'\nimport { grTreeSelectClass, grTreeSelectPanelClass, grTreeSelectStateClass, paddingX, trailingZoneWidth } from './grTreeSelectStyles'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconChevronDown from '~icons/lucide/chevron-down'\nimport IconLoaderCircle from '~icons/lucide/loader-circle'\nimport IconX from '~icons/lucide/x'\n\nexport interface GrTreeSelectEmits<T extends Record<string, any> = any> {\n  (e: 'update:modelValue', value: GrTreeSelectModelValue): void\n  (e: 'change', value: GrTreeSelectModelValue): void\n  /** Панель открылась/закрылась (`v-model:open`). */\n  (e: 'update:open', value: boolean): void\n  (e: 'clear'): void\n  (e: 'nodeClick', data: T, node: GrTreeNode<T>): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrTreeSelectProps<T>>(),\n  {\n    props: () => ({\n      children: 'children',\n      label: 'label',\n    }),\n    nodeKey: 'id' as any,\n    defaultExpandedKeys: () => [],\n    disabled: false,\n    placeholder: undefined,\n    size: undefined,\n    loading: false,\n    invalid: false,\n    readonly: false,\n    required: false,\n    ariaLabel: undefined,\n    state: 'default',\n    multiple: false,\n    showCheckbox: false,\n    checkStrictly: false,\n    clearable: false,\n    open: undefined,\n    name: undefined,\n    valueDisplay: 'label',\n    filterable: false,\n    filterPlaceholder: undefined,\n    filterInputmode: undefined,\n    filterNodeMethod: undefined,\n    closeOnSelect: undefined,\n    dropdownMaxHeight: 320,\n    virtual: false,\n    prefixMinWidth: undefined,\n    prefixMaxWidth: undefined,\n    suffixMinWidth: undefined,\n    suffixMaxWidth: undefined,\n    prefixFixed: false,\n    suffixFixed: false,\n  },\n)\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrTreeSelectEmits<T>>()\n\ndefineSlots<{\n  /** Рендер значения внутри триггера (вместо дефолтного текста). */\n  value?: (props: { value: GrTreeSelectModelValue, labels: string[], displayValue: string, pathLabels?: string[] }) => any\n  /** Рендер строки дерева. */\n  node?: (props: { node: GrTreeNode<T>, data: T, selected: boolean }) => any\n  /** Содержимое пустого состояния (когда нет данных). */\n  empty?: () => any\n  /** Содержимое панели, пока данные едут. */\n  loading?: () => any\n  /** Аддон слева от значения: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от значения, перед крестиком и шевроном. */\n  suffix?: () => any\n}>()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLInputElement | null>(null)\nconst treeId = `gr-tree-select-tree-${useId()}`\n\n// Контекст `GrFormField` + общий контракт форм-контрола.\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\nconst filterInputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst treeRef = ref<GrTreeInstance | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\n\n// Панель телепортирована в `body`, то есть лежит вне корня, но для пользователя\n// она часть контрола: без неё уход фокуса в панель читался бы как `blur`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n  containers: () => [panelEl.value],\n})\n\nconst clickOutsideExclude = [() => panelEl.value]\n\nlet hadPointerDownOnTrigger = false\n\n// Имя `open` сохранено: читатели работают с computed-Ref.\nconst { open, setOpen: setOpenState } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\nconst filterValue = ref('')\n\nconst { floatingStyle } = useFloating(rootEl, panelEl, open, {\n  placement: 'bottom-start',\n  matchWidth: true,\n  zIndexVar: '--gr-z-dropdown',\n})\n\nconst closeOnSelectResolved = computed(() => {\n  return props.closeOnSelect ?? !props.multiple\n})\n\nfunction getChildrenKey() {\n  return props.props.children ?? 'children'\n}\n\nfunction getLabelKey() {\n  return props.props.label ?? 'label'\n}\n\nfunction nodeLabel(data: T): string {\n  const key = getLabelKey() as keyof T\n  const v = data[key]\n  return v == null ? '' : String(v)\n}\n\nfunction nodeChildren(data: T): T[] {\n  const key = getChildrenKey() as keyof T\n  const v = data[key]\n  return Array.isArray(v) ? (v as any) : []\n}\n\nfunction nodeKeyOf(data: T, index: number, parentKey: GrTreeKey | undefined): GrTreeKey {\n  const keyName = props.nodeKey as keyof T\n  const v = data[keyName]\n  if (v != null)\n    return v as GrTreeKey\n\n  return parentKey == null ? index : `${String(parentKey)}:${index}`\n}\n\nconst labelByKey = computed(() => {\n  const map = new Map<GrTreeKey, string>()\n\n  const walk = (items: T[], parentKey: GrTreeKey | undefined) => {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i]\n      const key = nodeKeyOf(item, i, parentKey)\n      map.set(key, nodeLabel(item))\n      walk(nodeChildren(item), key)\n    }\n  }\n\n  walk(props.data ?? [], undefined)\n  return map\n})\n\nconst pathLabelsByKey = computed(() => {\n  const map = new Map<GrTreeKey, string[]>()\n\n  const walk = (items: T[], parentKey: GrTreeKey | undefined, parentPath: string[]) => {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i]\n      const key = nodeKeyOf(item, i, parentKey)\n      const label = nodeLabel(item)\n      const path = [...parentPath, label]\n      map.set(key, path)\n      walk(nodeChildren(item), key, path)\n    }\n  }\n\n  walk(props.data ?? [], undefined, [])\n  return map\n})\n\nconst selectedKeys = computed<GrTreeKey[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  const v = props.modelValue\n  if (v == null || Array.isArray(v))\n    return []\n  return [v]\n})\n\nconst selectedKeySet = computed(() => new Set(selectedKeys.value))\n\nconst selectedLabels = computed(() => {\n  const map = labelByKey.value\n  return selectedKeys.value.map(k => map.get(k) ?? String(k))\n})\n\nconst selectedPathLabels = computed<string[] | undefined>(() => {\n  if (props.multiple)\n    return undefined\n\n  const key = selectedKeys.value[0]\n  if (key == null)\n    return undefined\n\n  const path = pathLabelsByKey.value.get(key)\n  if (path?.length)\n    return path\n\n  const labels = selectedLabels.value\n  return labels.length ? [labels[0]] : undefined\n})\n\nconst displayValue = computed(() => {\n  const labels = selectedLabels.value\n  if (labels.length === 0)\n    return ''\n\n  if (!props.multiple) {\n    if (props.valueDisplay === 'path') {\n      const path = selectedPathLabels.value\n      if (path?.length)\n        return path.join(' / ')\n    }\n    return labels[0]\n  }\n\n  if (labels.length === 1)\n    return labels[0]\n  return `${labels[0]} +${labels.length - 1}`\n})\n\nconst hasSelection = computed(() => selectedKeys.value.length > 0)\n\n/** Дерево рендерится только когда есть что показать — ссылаться иначе не на что. */\nconst hasTree = computed(() => !props.loading && (props.data?.length ?? 0) > 0)\n\nconst resolvedFilterPlaceholder = computed(() => {\n  return props.filterPlaceholder ?? t('gr.treeSelect.filterPlaceholder', 'Search…')\n})\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTreeSelect' })\n\nconst className = computed(() => {\n  return grTreeSelectClass({\n    size: resolvedSize.value,\n    state: props.state,\n    invalid: isInvalid.value,\n    disabled: isDisabled.value,\n  })\n})\n\nconst panelClasses = computed(() => {\n  return grTreeSelectPanelClass\n})\n\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputSize, string> = {\n  xs: '2rem',\n  sm: '2.25rem',\n  md: '2.5rem',\n  lg: '3rem',\n}\n\nconst slots = useSlots()\n\nconst {\n  hasPrefix,\n  hasSuffix,\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: triggerStyle,\n} = useControlAddons(() => props, {\n  defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],\n  paddingX: () => paddingX[resolvedSize.value],\n  // Место под крестик и шеврон уже отдано классом `pr-9`, но инлайн-паддинг\n  // перекрывает класс целиком — с суффиксом эту зону приходится вернуть числом.\n  trailingReserve: () => (slots.suffix ? trailingZoneWidth : '0px'),\n})\n\n// Слот `value` рисуется поверх поля и обязан жить в тех же границах, что и\n// текст под ним. Без аддонов границы задаёт класс — стиль остаётся пустым.\nconst valueOverlayStyle = computed(() => ({\n  left: hasPrefix.value ? triggerStyle.value.paddingLeft : undefined,\n  right: hasSuffix.value ? triggerStyle.value.paddingRight : undefined,\n}))\n\nfunction setOpen(next: boolean) {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  setOpenState(next)\n}\n\nfunction onClickOutside(): void {\n  setOpen(false)\n}\n\nfunction openDropdown(): void {\n  setOpen(true)\n}\n\n/**\n * Стек слоёв возвращает фокус на триггер сразу после закрытия, а у триггера\n * открытие висит на `focus`. Без флага `Escape` из дерева закрывал бы панель и\n * тем же движением открывал её заново.\n */\nlet suppressFocusOpen = false\n\nfunction closeDropdown(): void {\n  suppressFocusOpen = true\n  setOpen(false)\n  setTimeout(() => {\n    suppressFocusOpen = false\n  }, 0)\n}\n\nfunction toggleDropdown(): void {\n  setOpen(!open.value)\n}\n\n// Клик по триггеру сам переключает панель через `@click`; флаг гасит открытие\n// по приходящему следом `focus`, иначе один клик открыл бы и тут же закрыл.\nfunction onTriggerPointerDown(): void {\n  hadPointerDownOnTrigger = true\n  setTimeout(() => {\n    hadPointerDownOnTrigger = false\n  }, 0)\n}\n\nfunction onTriggerFocus(): void {\n  if (hadPointerDownOnTrigger || suppressFocusOpen)\n    return\n  openDropdown()\n}\n\n// Возврат фокуса на триггер — из контракта слоя, а не руками через `nextTick`.\nuseOverlayLayer(open, closeDropdown, { root: panelEl })\n\nwatch(\n  open,\n  async (isOpen) => {\n    if (!isOpen) {\n      if (filterValue.value.trim().length > 0)\n        filterValue.value = ''\n      return\n    }\n\n    // Подсветка дерева идёт за значением: панель могли открыть после того, как\n    // значение сменили снаружи.\n    if (!props.multiple) {\n      const v = props.modelValue\n      if (v != null && !Array.isArray(v))\n        treeRef.value?.setCurrentKey(v)\n    }\n\n    if (props.filterable) {\n      await nextTick()\n      filterInputRef.value?.focus()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    if (props.multiple)\n      return\n    if (v == null || Array.isArray(v)) {\n      treeRef.value?.setCurrentKey(undefined)\n      return\n    }\n    treeRef.value?.setCurrentKey(v)\n  },\n)\n\nwatch(\n  filterValue,\n  (v) => {\n    treeRef.value?.filter(v)\n  },\n)\n\nfunction emitModel(next: GrTreeSelectModelValue) {\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nfunction clear(): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  const next: GrTreeSelectModelValue = props.multiple ? [] : null\n  emitModel(next)\n  emit('clear')\n  if (!props.multiple)\n    treeRef.value?.setCurrentKey(undefined)\n}\n\n/**\n * Отдаёт клавиатуру дереву. Панель под `v-show`, поэтому дерево уже в DOM, но\n * скрытый элемент сфокусировать нельзя — сначала открытие, потом кадр, потом\n * фокус. Дальше работают клавиши `GrTree`, а `Escape` возвращает фокус на\n * триггер силами общего стека слоёв.\n */\nasync function focusTree(): Promise<boolean> {\n  if (!open.value)\n    return false\n\n  await nextTick()\n  return treeRef.value?.focus() ?? false\n}\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (isDisabled.value)\n    return\n\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    closeDropdown()\n    return\n  }\n\n  if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault()\n    openDropdown()\n\n    // При `filterable` фокус уходит в поле поиска (см. watch на `open`), и\n    // дальше в дерево ведёт стрелка уже оттуда.\n    if (!props.filterable)\n      void focusTree()\n  }\n}\n\n/** Стрелка из поля поиска — единственный путь из фильтра в дерево. */\nfunction onFilterKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')\n    return\n\n  e.preventDefault()\n  void focusTree()\n}\n\n/** `Tab` уводит из панели — оставлять её открытой за спиной незачем. */\nfunction onPanelKeydown(e: KeyboardEvent): void {\n  if (e.key === 'Tab')\n    closeDropdown()\n}\n\n// Чекбоксы осмысленны только в множественном выборе: одиночный уже подсвечен\n// текущим узлом.\nconst checkboxMode = computed(() => props.multiple && props.showCheckbox)\n\n// В режиме чекбоксов каскад по родителям и детям считает `GrTree`, а не копия\n// его логики здесь: значение приходит обратно одним `update:checkedKeys`.\nfunction onCheckedKeys(keys: GrTreeKey[]): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  emitModel([...keys])\n}\n\nfunction onNodeClick(data: T, node: GrTreeNode<T>): void {\n  emit('nodeClick', data, node)\n\n  if (isDisabled.value)\n    return\n\n  if (checkboxMode.value) {\n    // Клик по строке — тот же переключатель отметки, что и сам чекбокс;\n    // значение придёт через `update:checkedKeys`, поэтому здесь не эмитим.\n    treeRef.value?.setChecked(node.key, !selectedKeySet.value.has(node.key))\n    return\n  }\n\n  if (props.multiple) {\n    const next = new Set(selectedKeySet.value)\n    if (next.has(node.key))\n      next.delete(node.key)\n    else\n      next.add(node.key)\n    emitModel([...next])\n\n    if (closeOnSelectResolved.value) {\n      closeDropdown()\n    }\n    return\n  }\n\n  emitModel(node.key)\n  if (closeOnSelectResolved.value) {\n    closeDropdown()\n  }\n}\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    v-click-outside=\"{ handler: onClickOutside, enabled: open, exclude: clickOutsideExclude }\"\n    data-gr-tree-select\n    class=\"relative\"\n     @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <!-- Нативная форма: hidden на каждый выбранный ключ. -->\n    <template v-if=\"name\">\n      <input\n        v-for=\"key in selectedKeys\"\n        :key=\"`hidden-${String(key)}`\"\n        type=\"hidden\"\n        :name=\"name\"\n        :value=\"String(key)\"\n      >\n    </template>\n    <div class=\"relative\">\n      <div\n        v-if=\"hasPrefix\"\n        ref=\"prefixEl\"\n        data-gr-tree-select-prefix\n        class=\"absolute inset-y-px left-px flex items-center justify-center rounded-l-[var(--gr-radius-control)] border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n        :style=\"prefixStyle\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"prefix\" />\n      </div>\n\n      <input\n        :id=\"fieldId\"\n        ref=\"triggerEl\"\n        data-testid=\"gr-tree-select-trigger\"\n        data-gr-tree-select-trigger\n        type=\"text\"\n        :value=\"displayValue\"\n        :placeholder=\"placeholder\"\n        :disabled=\"isDisabled\"\n        readonly\n        role=\"combobox\"\n        aria-readonly=\"true\"\n        aria-haspopup=\"tree\"\n        :aria-expanded=\"open ? 'true' : 'false'\"\n        :aria-controls=\"open && hasTree ? treeId : undefined\"\n        :aria-invalid=\"isInvalid ? 'true' : undefined\"\n        :aria-required=\"isRequired ? 'true' : undefined\"\n        :aria-describedby=\"describedBy\"\n        :aria-label=\"ariaLabel\"\n        class=\"w-full rounded-[var(--gr-radius-control)] border placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n        :class=\"[className, $slots.value ? 'text-transparent placeholder:text-transparent' : '']\"\n        :style=\"triggerStyle\"\n        @pointerdown=\"onTriggerPointerDown\"\n        @click=\"toggleDropdown\"\n        @focus=\"onTriggerFocus\"\n        @keydown=\"onTriggerKeydown\"\n      >\n\n      <button\n        v-if=\"clearable && hasSelection && !disabled && !isReadonly\"\n        data-testid=\"gr-tree-select-clear\"\n        data-gr-tree-select-clear\n        type=\"button\"\n        class=\"absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-[var(--gr-radius-control)] text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-muted)_25%,transparent)]\"\n        :aria-label=\"t('gr.common.clear', 'Clear')\"\n        @click.stop=\"clear\"\n      >\n        <IconX class=\"inline-block h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n\n      <span\n        v-else\n        data-testid=\"gr-tree-select-chevron\"\n        data-gr-tree-select-chevron\n        class=\"absolute top-1/2 -translate-y-1/2 right-3 text-[var(--gr-muted-fg)] pointer-events-none\"\n      >\n        <IconChevronDown\n          class=\"inline-block h-4 w-4 transition-transform duration-[var(--gr-duration-fast)]\"\n          :class=\"open ? 'rotate-180' : ''\"\n          aria-hidden=\"true\"\n        />\n      </span>\n\n      <div\n        v-if=\"hasSuffix\"\n        ref=\"suffixEl\"\n        data-gr-tree-select-suffix\n        class=\"absolute inset-y-px right-9 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n        :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n        :style=\"suffixStyle\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n\n      <div\n        v-if=\"$slots.value\"\n        class=\"absolute inset-y-0 left-3 right-9 flex items-center pointer-events-none\"\n        :style=\"valueOverlayStyle\"\n      >\n        <slot\n          name=\"value\"\n          :value=\"modelValue\"\n          :labels=\"selectedLabels\"\n          :display-value=\"displayValue\"\n          :path-labels=\"selectedPathLabels\"\n        />\n      </div>\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        :enter-active-class=\"panelPopTransition.enter\"\n        :enter-from-class=\"panelPopTransition.enterFrom\"\n        :enter-to-class=\"panelPopTransition.enterTo\"\n        :leave-active-class=\"panelPopTransition.leave\"\n        :leave-from-class=\"panelPopTransition.leaveFrom\"\n        :leave-to-class=\"panelPopTransition.leaveTo\"\n      >\n        <div\n          v-show=\"open\"\n          ref=\"panelEl\"\n          data-testid=\"gr-tree-select-panel\"\n          v-bind=\"themeAttrs\"\n          data-gr-tree-select-panel\n          data-gr-overlay-root\n          :style=\"floatingStyle\"\n          @keydown=\"onPanelKeydown\"\n        >\n          <div :class=\"panelClasses\">\n          <div v-if=\"filterable\" class=\"p-2 border-b border-[var(--gr-brd)]\">\n            <GrInput\n              ref=\"filterInputRef\"\n              v-model=\"filterValue\"\n              data-testid=\"gr-tree-select-filter\"\n              data-gr-tree-select-filter\n              type=\"search\"\n              :inputmode=\"filterInputmode\"\n              :placeholder=\"resolvedFilterPlaceholder\"\n              size=\"sm\"\n              @keydown=\"onFilterKeydown\"\n            />\n          </div>\n\n          <!--\n            Скроллер один. При виртуализации его берёт на себя дерево: своя\n            высота нужна ему, чтобы посчитать окно, а вложенный скроллер поверх\n            дал бы вторую полосу прокрутки на том же списке.\n          -->\n          <div\n            class=\"p-1\"\n            :class=\"virtual ? '' : 'overflow-auto'\"\n            :style=\"virtual ? undefined : { maxHeight: `${dropdownMaxHeight}px` }\"\n          >\n            <div\n              v-if=\"loading\"\n              data-gr-tree-select-loading\n              role=\"status\"\n              :class=\"grTreeSelectStateClass\"\n            >\n              <slot name=\"loading\">\n                <IconLoaderCircle class=\"block h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n                <span>{{ t('gr.treeSelect.loading', 'Loading…') }}</span>\n              </slot>\n            </div>\n\n            <div v-else-if=\"(data?.length ?? 0) === 0\" :class=\"grTreeSelectStateClass\">\n              <slot name=\"empty\">\n                {{ t('gr.treeSelect.empty', 'No data') }}\n              </slot>\n            </div>\n\n            <GrTree\n              v-else\n              :id=\"treeId\"\n              ref=\"treeRef\"\n              :size=\"resolvedSize\"\n              :data=\"data\"\n              :props=\"props.props\"\n              :node-key=\"nodeKey as any\"\n              :default-expanded-keys=\"defaultExpandedKeys\"\n              :filter-node-method=\"filterNodeMethod\"\n              :highlight-current=\"!multiple\"\n              :virtual=\"virtual\"\n              :max-height=\"dropdownMaxHeight\"\n              :show-checkbox=\"checkboxMode\"\n              :check-strictly=\"checkStrictly\"\n              :checked-keys=\"selectedKeys\"\n              @node-click=\"onNodeClick\"\n              @update:checked-keys=\"onCheckedKeys\"\n            >\n              <template #default=\"{ node, data }\">\n                <slot\n                  name=\"node\"\n                  :node=\"node\"\n                  :data=\"data\"\n                  :selected=\"selectedKeySet.has(node.key)\"\n                >\n                  <div class=\"flex items-center gap-2 min-w-0\">\n                    <!-- Чекбокс дерева уже показывает отметку: вторая галочка\n                         рядом читалась бы как ошибка. -->\n                    <span\n                      v-if=\"!checkboxMode\"\n                      data-gr-tree-select-check\n                      class=\"inline-block h-4 w-4 shrink-0\"\n                      aria-hidden=\"true\"\n                    >\n                      <IconCheck v-if=\"selectedKeySet.has(node.key)\" class=\"block h-4 w-4 text-[var(--gr-primary-text)]\" />\n                    </span>\n                    <span class=\"truncate\">{{ node.label }}</span>\n                  </div>\n                </slot>\n              </template>\n            </GrTree>\n          </div>\n        </div>\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends Record<string, any> = any\">\nimport { computed, nextTick, ref, useId, useSlots, watch } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport { useFloating } from '../../composables/useFloating'\nimport { useOverlayLayer } from '../../composables/useOverlayLayer'\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useGrComponentSize, useGrThemeAttrs } from '../GrConfigProvider/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree, {\n  type GrTreeInstance,\n  type GrTreeKey,\n  type GrTreeNode,\n} from '../GrTree'\nimport type { GrInputSize } from '../GrInput/GrInput.vue'\nimport { panelPopTransition } from '../shared/overlayTransition'\nimport type { GrTreeSelectModelValue, GrTreeSelectProps } from './grTreeSelectTypes'\nimport { grTreeSelectClass, grTreeSelectPanelClass, grTreeSelectStateClass, paddingX, trailingZoneWidth } from './grTreeSelectStyles'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconChevronDown from '~icons/lucide/chevron-down'\nimport IconLoaderCircle from '~icons/lucide/loader-circle'\nimport IconX from '~icons/lucide/x'\n\nexport interface GrTreeSelectEmits<T extends Record<string, any> = any> {\n  (e: 'update:modelValue', value: GrTreeSelectModelValue): void\n  (e: 'change', value: GrTreeSelectModelValue): void\n  /** Панель открылась/закрылась (`v-model:open`). */\n  (e: 'update:open', value: boolean): void\n  (e: 'clear'): void\n  (e: 'nodeClick', data: T, node: GrTreeNode<T>): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrTreeSelectProps<T>>(),\n  {\n    props: () => ({\n      children: 'children',\n      label: 'label',\n    }),\n    nodeKey: 'id' as any,\n    defaultExpandedKeys: () => [],\n    disabled: false,\n    placeholder: undefined,\n    size: undefined,\n    loading: false,\n    invalid: false,\n    readonly: false,\n    required: false,\n    ariaLabel: undefined,\n    state: 'default',\n    multiple: false,\n    showCheckbox: false,\n    checkStrictly: false,\n    clearable: false,\n    open: undefined,\n    name: undefined,\n    valueDisplay: 'label',\n    filterable: false,\n    filterPlaceholder: undefined,\n    filterInputmode: undefined,\n    filterNodeMethod: undefined,\n    closeOnSelect: undefined,\n    dropdownMaxHeight: 320,\n    virtual: false,\n    prefixMinWidth: undefined,\n    prefixMaxWidth: undefined,\n    suffixMinWidth: undefined,\n    suffixMaxWidth: undefined,\n    prefixFixed: false,\n    suffixFixed: false,\n  },\n)\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrTreeSelectEmits<T>>()\n\ndefineSlots<{\n  /** Рендер значения внутри триггера (вместо дефолтного текста). */\n  value?: (props: { value: GrTreeSelectModelValue, labels: string[], displayValue: string, pathLabels?: string[] }) => any\n  /** Рендер строки дерева. */\n  node?: (props: { node: GrTreeNode<T>, data: T, selected: boolean }) => any\n  /** Содержимое пустого состояния (когда нет данных). */\n  empty?: () => any\n  /** Содержимое панели, пока данные едут. */\n  loading?: () => any\n  /** Аддон слева от значения: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от значения, перед крестиком и шевроном. */\n  suffix?: () => any\n}>()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLInputElement | null>(null)\nconst treeId = `gr-tree-select-tree-${useId()}`\n\n// Контекст `GrFormField` + общий контракт форм-контрола.\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\nconst filterInputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst treeRef = ref<GrTreeInstance | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\n\n// Панель телепортирована в `body`, то есть лежит вне корня, но для пользователя\n// она часть контрола: без неё уход фокуса в панель читался бы как `blur`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n  containers: () => [panelEl.value],\n})\n\nconst clickOutsideExclude = [() => panelEl.value]\n\nlet hadPointerDownOnTrigger = false\n\n// Имя `open` сохранено: читатели работают с computed-Ref.\nconst { open, setOpen: setOpenState } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\nconst filterValue = ref('')\n\nconst { floatingStyle } = useFloating(rootEl, panelEl, open, {\n  placement: 'bottom-start',\n  matchWidth: true,\n  zIndexVar: '--gr-z-dropdown',\n})\n\nconst closeOnSelectResolved = computed(() => {\n  return props.closeOnSelect ?? !props.multiple\n})\n\nfunction getChildrenKey() {\n  return props.props.children ?? 'children'\n}\n\nfunction getLabelKey() {\n  return props.props.label ?? 'label'\n}\n\nfunction nodeLabel(data: T): string {\n  const key = getLabelKey() as keyof T\n  const v = data[key]\n  return v == null ? '' : String(v)\n}\n\nfunction nodeChildren(data: T): T[] {\n  const key = getChildrenKey() as keyof T\n  const v = data[key]\n  return Array.isArray(v) ? (v as any) : []\n}\n\nfunction nodeKeyOf(data: T, index: number, parentKey: GrTreeKey | undefined): GrTreeKey {\n  const keyName = props.nodeKey as keyof T\n  const v = data[keyName]\n  if (v != null)\n    return v as GrTreeKey\n\n  return parentKey == null ? index : `${String(parentKey)}:${index}`\n}\n\nconst labelByKey = computed(() => {\n  const map = new Map<GrTreeKey, string>()\n\n  const walk = (items: T[], parentKey: GrTreeKey | undefined) => {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i]\n      const key = nodeKeyOf(item, i, parentKey)\n      map.set(key, nodeLabel(item))\n      walk(nodeChildren(item), key)\n    }\n  }\n\n  walk(props.data ?? [], undefined)\n  return map\n})\n\nconst pathLabelsByKey = computed(() => {\n  const map = new Map<GrTreeKey, string[]>()\n\n  const walk = (items: T[], parentKey: GrTreeKey | undefined, parentPath: string[]) => {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i]\n      const key = nodeKeyOf(item, i, parentKey)\n      const label = nodeLabel(item)\n      const path = [...parentPath, label]\n      map.set(key, path)\n      walk(nodeChildren(item), key, path)\n    }\n  }\n\n  walk(props.data ?? [], undefined, [])\n  return map\n})\n\nconst selectedKeys = computed<GrTreeKey[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  const v = props.modelValue\n  if (v == null || Array.isArray(v))\n    return []\n  return [v]\n})\n\nconst selectedKeySet = computed(() => new Set(selectedKeys.value))\n\nconst selectedLabels = computed(() => {\n  const map = labelByKey.value\n  return selectedKeys.value.map(k => map.get(k) ?? String(k))\n})\n\nconst selectedPathLabels = computed<string[] | undefined>(() => {\n  if (props.multiple)\n    return undefined\n\n  const key = selectedKeys.value[0]\n  if (key == null)\n    return undefined\n\n  const path = pathLabelsByKey.value.get(key)\n  if (path?.length)\n    return path\n\n  const labels = selectedLabels.value\n  return labels.length ? [labels[0]] : undefined\n})\n\nconst displayValue = computed(() => {\n  const labels = selectedLabels.value\n  if (labels.length === 0)\n    return ''\n\n  if (!props.multiple) {\n    if (props.valueDisplay === 'path') {\n      const path = selectedPathLabels.value\n      if (path?.length)\n        return path.join(' / ')\n    }\n    return labels[0]\n  }\n\n  if (labels.length === 1)\n    return labels[0]\n  return `${labels[0]} +${labels.length - 1}`\n})\n\nconst hasSelection = computed(() => selectedKeys.value.length > 0)\n\n/** Дерево рендерится только когда есть что показать — ссылаться иначе не на что. */\nconst hasTree = computed(() => !props.loading && (props.data?.length ?? 0) > 0)\n\nconst resolvedFilterPlaceholder = computed(() => {\n  return props.filterPlaceholder ?? t('gr.treeSelect.filterPlaceholder', 'Search…')\n})\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTreeSelect' })\n\nconst className = computed(() => {\n  return grTreeSelectClass({\n    size: resolvedSize.value,\n    state: props.state,\n    invalid: isInvalid.value,\n    disabled: isDisabled.value,\n  })\n})\n\nconst panelClasses = computed(() => {\n  return grTreeSelectPanelClass\n})\n\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputSize, string> = {\n  xs: '2rem',\n  sm: '2.25rem',\n  md: '2.5rem',\n  lg: '3rem',\n}\n\nconst slots = useSlots()\n\nconst {\n  hasPrefix,\n  hasSuffix,\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: triggerStyle,\n} = useControlAddons(() => props, {\n  defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],\n  paddingX: () => paddingX[resolvedSize.value],\n  // Место под крестик и шеврон уже отдано классом `pr-9`, но инлайн-паддинг\n  // перекрывает класс целиком — с суффиксом эту зону приходится вернуть числом.\n  trailingReserve: () => (slots.suffix ? trailingZoneWidth : '0px'),\n})\n\n// Слот `value` рисуется поверх поля и обязан жить в тех же границах, что и\n// текст под ним. Без аддонов границы задаёт класс — стиль остаётся пустым.\nconst valueOverlayStyle = computed(() => ({\n  left: hasPrefix.value ? triggerStyle.value.paddingLeft : undefined,\n  right: hasSuffix.value ? triggerStyle.value.paddingRight : undefined,\n}))\n\nfunction setOpen(next: boolean) {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  setOpenState(next)\n}\n\nfunction onClickOutside(): void {\n  setOpen(false)\n}\n\nfunction openDropdown(): void {\n  setOpen(true)\n}\n\n/**\n * Стек слоёв возвращает фокус на триггер сразу после закрытия, а у триггера\n * открытие висит на `focus`. Без флага `Escape` из дерева закрывал бы панель и\n * тем же движением открывал её заново.\n */\nlet suppressFocusOpen = false\n\nfunction closeDropdown(): void {\n  suppressFocusOpen = true\n  setOpen(false)\n  setTimeout(() => {\n    suppressFocusOpen = false\n  }, 0)\n}\n\nfunction toggleDropdown(): void {\n  setOpen(!open.value)\n}\n\n// Клик по триггеру сам переключает панель через `@click`; флаг гасит открытие\n// по приходящему следом `focus`, иначе один клик открыл бы и тут же закрыл.\nfunction onTriggerPointerDown(): void {\n  hadPointerDownOnTrigger = true\n  setTimeout(() => {\n    hadPointerDownOnTrigger = false\n  }, 0)\n}\n\nfunction onTriggerFocus(): void {\n  if (hadPointerDownOnTrigger || suppressFocusOpen)\n    return\n  openDropdown()\n}\n\n// Возврат фокуса на триггер — из контракта слоя, а не руками через `nextTick`.\nuseOverlayLayer(open, closeDropdown, { root: panelEl })\n\nwatch(\n  open,\n  async (isOpen) => {\n    if (!isOpen) {\n      if (filterValue.value.trim().length > 0)\n        filterValue.value = ''\n      return\n    }\n\n    // Подсветка дерева идёт за значением: панель могли открыть после того, как\n    // значение сменили снаружи.\n    if (!props.multiple) {\n      const v = props.modelValue\n      if (v != null && !Array.isArray(v))\n        treeRef.value?.setCurrentKey(v)\n    }\n\n    if (props.filterable) {\n      await nextTick()\n      filterInputRef.value?.focus()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    if (props.multiple)\n      return\n    if (v == null || Array.isArray(v)) {\n      treeRef.value?.setCurrentKey(undefined)\n      return\n    }\n    treeRef.value?.setCurrentKey(v)\n  },\n)\n\nwatch(\n  filterValue,\n  (v) => {\n    treeRef.value?.filter(v)\n  },\n)\n\nfunction emitModel(next: GrTreeSelectModelValue) {\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nfunction clear(): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  const next: GrTreeSelectModelValue = props.multiple ? [] : null\n  emitModel(next)\n  emit('clear')\n  if (!props.multiple)\n    treeRef.value?.setCurrentKey(undefined)\n}\n\n/**\n * Отдаёт клавиатуру дереву. Панель под `v-show`, поэтому дерево уже в DOM, но\n * скрытый элемент сфокусировать нельзя — сначала открытие, потом кадр, потом\n * фокус. Дальше работают клавиши `GrTree`, а `Escape` возвращает фокус на\n * триггер силами общего стека слоёв.\n */\nasync function focusTree(): Promise<boolean> {\n  if (!open.value)\n    return false\n\n  await nextTick()\n  return treeRef.value?.focus() ?? false\n}\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (isDisabled.value)\n    return\n\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    closeDropdown()\n    return\n  }\n\n  if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault()\n    openDropdown()\n\n    // При `filterable` фокус уходит в поле поиска (см. watch на `open`), и\n    // дальше в дерево ведёт стрелка уже оттуда.\n    if (!props.filterable)\n      void focusTree()\n  }\n}\n\n/** Стрелка из поля поиска — единственный путь из фильтра в дерево. */\nfunction onFilterKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')\n    return\n\n  e.preventDefault()\n  void focusTree()\n}\n\n/** `Tab` уводит из панели — оставлять её открытой за спиной незачем. */\nfunction onPanelKeydown(e: KeyboardEvent): void {\n  if (e.key === 'Tab')\n    closeDropdown()\n}\n\n// Чекбоксы осмысленны только в множественном выборе: одиночный уже подсвечен\n// текущим узлом.\nconst checkboxMode = computed(() => props.multiple && props.showCheckbox)\n\n// В режиме чекбоксов каскад по родителям и детям считает `GrTree`, а не копия\n// его логики здесь: значение приходит обратно одним `update:checkedKeys`.\nfunction onCheckedKeys(keys: GrTreeKey[]): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  emitModel([...keys])\n}\n\nfunction onNodeClick(data: T, node: GrTreeNode<T>): void {\n  emit('nodeClick', data, node)\n\n  if (isDisabled.value)\n    return\n\n  if (checkboxMode.value) {\n    // Клик по строке — тот же переключатель отметки, что и сам чекбокс;\n    // значение придёт через `update:checkedKeys`, поэтому здесь не эмитим.\n    treeRef.value?.setChecked(node.key, !selectedKeySet.value.has(node.key))\n    return\n  }\n\n  if (props.multiple) {\n    const next = new Set(selectedKeySet.value)\n    if (next.has(node.key))\n      next.delete(node.key)\n    else\n      next.add(node.key)\n    emitModel([...next])\n\n    if (closeOnSelectResolved.value) {\n      closeDropdown()\n    }\n    return\n  }\n\n  emitModel(node.key)\n  if (closeOnSelectResolved.value) {\n    closeDropdown()\n  }\n}\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    v-click-outside=\"{ handler: onClickOutside, enabled: open, exclude: clickOutsideExclude }\"\n    data-gr-tree-select\n    class=\"relative\"\n     @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <!-- Нативная форма: hidden на каждый выбранный ключ. -->\n    <template v-if=\"name\">\n      <input\n        v-for=\"key in selectedKeys\"\n        :key=\"`hidden-${String(key)}`\"\n        type=\"hidden\"\n        :name=\"name\"\n        :value=\"String(key)\"\n      >\n    </template>\n    <div class=\"relative\">\n      <div\n        v-if=\"hasPrefix\"\n        ref=\"prefixEl\"\n        data-gr-tree-select-prefix\n        class=\"absolute inset-y-px left-px flex items-center justify-center rounded-l-[var(--gr-radius-control)] border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n        :style=\"prefixStyle\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"prefix\" />\n      </div>\n\n      <input\n        :id=\"fieldId\"\n        ref=\"triggerEl\"\n        data-testid=\"gr-tree-select-trigger\"\n        data-gr-tree-select-trigger\n        type=\"text\"\n        :value=\"displayValue\"\n        :placeholder=\"placeholder\"\n        :disabled=\"isDisabled\"\n        readonly\n        role=\"combobox\"\n        aria-readonly=\"true\"\n        aria-haspopup=\"tree\"\n        :aria-expanded=\"open ? 'true' : 'false'\"\n        :aria-controls=\"open && hasTree ? treeId : undefined\"\n        :aria-invalid=\"isInvalid ? 'true' : undefined\"\n        :aria-required=\"isRequired ? 'true' : undefined\"\n        :aria-describedby=\"describedBy\"\n        :aria-label=\"ariaLabel\"\n        class=\"w-full rounded-[var(--gr-radius-control)] border placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n        :class=\"[className, $slots.value ? 'text-transparent placeholder:text-transparent' : '']\"\n        :style=\"triggerStyle\"\n        @pointerdown=\"onTriggerPointerDown\"\n        @click=\"toggleDropdown\"\n        @focus=\"onTriggerFocus\"\n        @keydown=\"onTriggerKeydown\"\n      >\n\n      <button\n        v-if=\"clearable && hasSelection && !disabled && !isReadonly\"\n        data-testid=\"gr-tree-select-clear\"\n        data-gr-tree-select-clear\n        type=\"button\"\n        class=\"absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-[var(--gr-radius-control)] text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-muted)_25%,transparent)]\"\n        :aria-label=\"t('gr.common.clear', 'Clear')\"\n        @click.stop=\"clear\"\n      >\n        <IconX class=\"inline-block h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n\n      <span\n        v-else\n        data-testid=\"gr-tree-select-chevron\"\n        data-gr-tree-select-chevron\n        class=\"absolute top-1/2 -translate-y-1/2 right-3 text-[var(--gr-muted-fg)] pointer-events-none\"\n      >\n        <IconChevronDown\n          class=\"inline-block h-4 w-4 transition-transform duration-[var(--gr-duration-fast)]\"\n          :class=\"open ? 'rotate-180' : ''\"\n          aria-hidden=\"true\"\n        />\n      </span>\n\n      <div\n        v-if=\"hasSuffix\"\n        ref=\"suffixEl\"\n        data-gr-tree-select-suffix\n        class=\"absolute inset-y-px right-9 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n        :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n        :style=\"suffixStyle\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n\n      <div\n        v-if=\"$slots.value\"\n        class=\"absolute inset-y-0 left-3 right-9 flex items-center pointer-events-none\"\n        :style=\"valueOverlayStyle\"\n      >\n        <slot\n          name=\"value\"\n          :value=\"modelValue\"\n          :labels=\"selectedLabels\"\n          :display-value=\"displayValue\"\n          :path-labels=\"selectedPathLabels\"\n        />\n      </div>\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        :enter-active-class=\"panelPopTransition.enter\"\n        :enter-from-class=\"panelPopTransition.enterFrom\"\n        :enter-to-class=\"panelPopTransition.enterTo\"\n        :leave-active-class=\"panelPopTransition.leave\"\n        :leave-from-class=\"panelPopTransition.leaveFrom\"\n        :leave-to-class=\"panelPopTransition.leaveTo\"\n      >\n        <div\n          v-show=\"open\"\n          ref=\"panelEl\"\n          data-testid=\"gr-tree-select-panel\"\n          v-bind=\"themeAttrs\"\n          data-gr-tree-select-panel\n          data-gr-overlay-root\n          :style=\"floatingStyle\"\n          @keydown=\"onPanelKeydown\"\n        >\n          <div :class=\"panelClasses\">\n          <div v-if=\"filterable\" class=\"p-2 border-b border-[var(--gr-brd)]\">\n            <GrInput\n              ref=\"filterInputRef\"\n              v-model=\"filterValue\"\n              data-testid=\"gr-tree-select-filter\"\n              data-gr-tree-select-filter\n              type=\"search\"\n              :inputmode=\"filterInputmode\"\n              :placeholder=\"resolvedFilterPlaceholder\"\n              size=\"sm\"\n              @keydown=\"onFilterKeydown\"\n            />\n          </div>\n\n          <!--\n            Скроллер один. При виртуализации его берёт на себя дерево: своя\n            высота нужна ему, чтобы посчитать окно, а вложенный скроллер поверх\n            дал бы вторую полосу прокрутки на том же списке.\n          -->\n          <div\n            class=\"p-1\"\n            :class=\"virtual ? '' : 'overflow-auto'\"\n            :style=\"virtual ? undefined : { maxHeight: `${dropdownMaxHeight}px` }\"\n          >\n            <div\n              v-if=\"loading\"\n              data-gr-tree-select-loading\n              role=\"status\"\n              :class=\"grTreeSelectStateClass\"\n            >\n              <slot name=\"loading\">\n                <IconLoaderCircle class=\"block h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n                <span>{{ t('gr.treeSelect.loading', 'Loading…') }}</span>\n              </slot>\n            </div>\n\n            <div v-else-if=\"(data?.length ?? 0) === 0\" :class=\"grTreeSelectStateClass\">\n              <slot name=\"empty\">\n                {{ t('gr.treeSelect.empty', 'No data') }}\n              </slot>\n            </div>\n\n            <GrTree\n              v-else\n              :id=\"treeId\"\n              ref=\"treeRef\"\n              :size=\"resolvedSize\"\n              :data=\"data\"\n              :props=\"props.props\"\n              :node-key=\"nodeKey as any\"\n              :default-expanded-keys=\"defaultExpandedKeys\"\n              :filter-node-method=\"filterNodeMethod\"\n              :highlight-current=\"!multiple\"\n              :virtual=\"virtual\"\n              :max-height=\"dropdownMaxHeight\"\n              :show-checkbox=\"checkboxMode\"\n              :check-strictly=\"checkStrictly\"\n              :checked-keys=\"selectedKeys\"\n              @node-click=\"onNodeClick\"\n              @update:checked-keys=\"onCheckedKeys\"\n            >\n              <template #default=\"{ node, data }\">\n                <slot\n                  name=\"node\"\n                  :node=\"node\"\n                  :data=\"data\"\n                  :selected=\"selectedKeySet.has(node.key)\"\n                >\n                  <div class=\"flex items-center gap-2 min-w-0\">\n                    <!-- Чекбокс дерева уже показывает отметку: вторая галочка\n                         рядом читалась бы как ошибка. -->\n                    <span\n                      v-if=\"!checkboxMode\"\n                      data-gr-tree-select-check\n                      class=\"inline-block h-4 w-4 shrink-0\"\n                      aria-hidden=\"true\"\n                    >\n                      <IconCheck v-if=\"selectedKeySet.has(node.key)\" class=\"block h-4 w-4 text-[var(--gr-primary-text)]\" />\n                    </span>\n                    <span class=\"truncate\">{{ node.label }}</span>\n                  </div>\n                </slot>\n              </template>\n            </GrTree>\n          </div>\n        </div>\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"GrTreeSelect-DUsv3_mF.js","names":["$slots"],"sources":["../../../../src/components/GrTreeSelect/GrTreeSelect.vue","../../../../src/components/GrTreeSelect/GrTreeSelect.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any> = any\">\nimport { computed, nextTick, ref, useId, useSlots, watch } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport { useFloating } from '../../composables/useFloating'\nimport { useOverlayLayer } from '../../composables/useOverlayLayer'\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useGrComponentSize, useGrThemeAttrs } from '../GrConfigProvider/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree, {\n  type GrTreeInstance,\n  type GrTreeKey,\n  type GrTreeNode,\n} from '../GrTree'\nimport type { GrInputSize } from '../GrInput/GrInput.vue'\nimport { panelPopTransition } from '../shared/overlayTransition'\nimport type { GrTreeSelectModelValue, GrTreeSelectProps } from './grTreeSelectTypes'\nimport { grTreeSelectClass, grTreeSelectPanelClass, grTreeSelectStateClass, paddingX, trailingZoneWidth } from './grTreeSelectStyles'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconChevronDown from '~icons/lucide/chevron-down'\nimport IconLoaderCircle from '~icons/lucide/loader-circle'\nimport IconX from '~icons/lucide/x'\n\nexport interface GrTreeSelectEmits<T extends Record<string, any> = any> {\n  (e: 'update:modelValue', value: GrTreeSelectModelValue): void\n  (e: 'change', value: GrTreeSelectModelValue): void\n  /** Панель открылась/закрылась (`v-model:open`). */\n  (e: 'update:open', value: boolean): void\n  (e: 'clear'): void\n  (e: 'nodeClick', data: T, node: GrTreeNode<T>): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrTreeSelectProps<T>>(),\n  {\n    props: () => ({\n      children: 'children',\n      label: 'label',\n    }),\n    nodeKey: 'id' as any,\n    defaultExpandedKeys: () => [],\n    disabled: false,\n    placeholder: undefined,\n    size: undefined,\n    loading: false,\n    invalid: false,\n    readonly: false,\n    required: false,\n    ariaLabel: undefined,\n    state: 'default',\n    multiple: false,\n    showCheckbox: false,\n    checkStrictly: false,\n    clearable: false,\n    open: undefined,\n    name: undefined,\n    valueDisplay: 'label',\n    filterable: false,\n    filterPlaceholder: undefined,\n    filterInputmode: undefined,\n    filterNodeMethod: undefined,\n    closeOnSelect: undefined,\n    dropdownMaxHeight: 320,\n    virtual: false,\n    prefixMinWidth: undefined,\n    prefixMaxWidth: undefined,\n    suffixMinWidth: undefined,\n    suffixMaxWidth: undefined,\n    prefixFixed: false,\n    suffixFixed: false,\n  },\n)\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrTreeSelectEmits<T>>()\n\ndefineSlots<{\n  /** Рендер значения внутри триггера (вместо дефолтного текста). */\n  value?: (props: { value: GrTreeSelectModelValue, labels: string[], displayValue: string, pathLabels?: string[] }) => any\n  /** Рендер строки дерева. */\n  node?: (props: { node: GrTreeNode<T>, data: T, selected: boolean }) => any\n  /** Содержимое пустого состояния (когда нет данных). */\n  empty?: () => any\n  /** Содержимое панели, пока данные едут. */\n  loading?: () => any\n  /** Аддон слева от значения: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от значения, перед крестиком и шевроном. */\n  suffix?: () => any\n}>()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLInputElement | null>(null)\nconst treeId = `gr-tree-select-tree-${useId()}`\n\n// Контекст `GrFormField` + общий контракт форм-контрола.\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\nconst filterInputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst treeRef = ref<GrTreeInstance | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\n\n// Панель телепортирована в `body`, то есть лежит вне корня, но для пользователя\n// она часть контрола: без неё уход фокуса в панель читался бы как `blur`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n  containers: () => [panelEl.value],\n})\n\nconst clickOutsideExclude = [() => panelEl.value]\n\nlet hadPointerDownOnTrigger = false\n\n// Имя `open` сохранено: читатели работают с computed-Ref.\nconst { open, setOpen: setOpenState } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\nconst filterValue = ref('')\n\nconst { floatingStyle } = useFloating(rootEl, panelEl, open, {\n  placement: 'bottom-start',\n  matchWidth: true,\n  zIndexVar: '--gr-z-dropdown',\n})\n\nconst closeOnSelectResolved = computed(() => {\n  return props.closeOnSelect ?? !props.multiple\n})\n\nfunction getChildrenKey() {\n  return props.props.children ?? 'children'\n}\n\nfunction getLabelKey() {\n  return props.props.label ?? 'label'\n}\n\nfunction nodeLabel(data: T): string {\n  const key = getLabelKey() as keyof T\n  const v = data[key]\n  return v == null ? '' : String(v)\n}\n\nfunction nodeChildren(data: T): T[] {\n  const key = getChildrenKey() as keyof T\n  const v = data[key]\n  return Array.isArray(v) ? (v as any) : []\n}\n\nfunction nodeKeyOf(data: T, index: number, parentKey: GrTreeKey | undefined): GrTreeKey {\n  const keyName = props.nodeKey as keyof T\n  const v = data[keyName]\n  if (v != null)\n    return v as GrTreeKey\n\n  return parentKey == null ? index : `${String(parentKey)}:${index}`\n}\n\nconst labelByKey = computed(() => {\n  const map = new Map<GrTreeKey, string>()\n\n  const walk = (items: T[], parentKey: GrTreeKey | undefined) => {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i]\n      const key = nodeKeyOf(item, i, parentKey)\n      map.set(key, nodeLabel(item))\n      walk(nodeChildren(item), key)\n    }\n  }\n\n  walk(props.data ?? [], undefined)\n  return map\n})\n\nconst pathLabelsByKey = computed(() => {\n  const map = new Map<GrTreeKey, string[]>()\n\n  const walk = (items: T[], parentKey: GrTreeKey | undefined, parentPath: string[]) => {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i]\n      const key = nodeKeyOf(item, i, parentKey)\n      const label = nodeLabel(item)\n      const path = [...parentPath, label]\n      map.set(key, path)\n      walk(nodeChildren(item), key, path)\n    }\n  }\n\n  walk(props.data ?? [], undefined, [])\n  return map\n})\n\nconst selectedKeys = computed<GrTreeKey[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  const v = props.modelValue\n  if (v == null || Array.isArray(v))\n    return []\n  return [v]\n})\n\nconst selectedKeySet = computed(() => new Set(selectedKeys.value))\n\nconst selectedLabels = computed(() => {\n  const map = labelByKey.value\n  return selectedKeys.value.map(k => map.get(k) ?? String(k))\n})\n\nconst selectedPathLabels = computed<string[] | undefined>(() => {\n  if (props.multiple)\n    return undefined\n\n  const key = selectedKeys.value[0]\n  if (key == null)\n    return undefined\n\n  const path = pathLabelsByKey.value.get(key)\n  if (path?.length)\n    return path\n\n  const labels = selectedLabels.value\n  return labels.length ? [labels[0]] : undefined\n})\n\nconst displayValue = computed(() => {\n  const labels = selectedLabels.value\n  if (labels.length === 0)\n    return ''\n\n  if (!props.multiple) {\n    if (props.valueDisplay === 'path') {\n      const path = selectedPathLabels.value\n      if (path?.length)\n        return path.join(' / ')\n    }\n    return labels[0]\n  }\n\n  if (labels.length === 1)\n    return labels[0]\n  return `${labels[0]} +${labels.length - 1}`\n})\n\nconst hasSelection = computed(() => selectedKeys.value.length > 0)\n\n/** Дерево рендерится только когда есть что показать — ссылаться иначе не на что. */\nconst hasTree = computed(() => !props.loading && (props.data?.length ?? 0) > 0)\n\nconst resolvedFilterPlaceholder = computed(() => {\n  return props.filterPlaceholder ?? t('gr.treeSelect.filterPlaceholder', 'Search…')\n})\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTreeSelect' })\n\nconst className = computed(() => {\n  return grTreeSelectClass({\n    size: resolvedSize.value,\n    state: props.state,\n    invalid: isInvalid.value,\n    disabled: isDisabled.value,\n  })\n})\n\nconst panelClasses = computed(() => {\n  return grTreeSelectPanelClass\n})\n\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputSize, string> = {\n  xs: '2rem',\n  sm: '2.25rem',\n  md: '2.5rem',\n  lg: '3rem',\n}\n\nconst slots = useSlots()\n\nconst {\n  hasPrefix,\n  hasSuffix,\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: triggerStyle,\n} = useControlAddons(() => props, {\n  defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],\n  paddingX: () => paddingX[resolvedSize.value],\n  // Место под крестик и шеврон уже отдано классом `pr-9`, но инлайн-паддинг\n  // перекрывает класс целиком — с суффиксом эту зону приходится вернуть числом.\n  trailingReserve: () => (slots.suffix ? trailingZoneWidth : '0px'),\n})\n\n// Слот `value` рисуется поверх поля и обязан жить в тех же границах, что и\n// текст под ним. Без аддонов границы задаёт класс — стиль остаётся пустым.\nconst valueOverlayStyle = computed(() => ({\n  left: hasPrefix.value ? triggerStyle.value.paddingLeft : undefined,\n  right: hasSuffix.value ? triggerStyle.value.paddingRight : undefined,\n}))\n\nfunction setOpen(next: boolean) {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  setOpenState(next)\n}\n\nfunction onClickOutside(): void {\n  setOpen(false)\n}\n\nfunction openDropdown(): void {\n  setOpen(true)\n}\n\n/**\n * Стек слоёв возвращает фокус на триггер сразу после закрытия, а у триггера\n * открытие висит на `focus`. Без флага `Escape` из дерева закрывал бы панель и\n * тем же движением открывал её заново.\n */\nlet suppressFocusOpen = false\n\nfunction closeDropdown(): void {\n  suppressFocusOpen = true\n  setOpen(false)\n  setTimeout(() => {\n    suppressFocusOpen = false\n  }, 0)\n}\n\nfunction toggleDropdown(): void {\n  setOpen(!open.value)\n}\n\n// Клик по триггеру сам переключает панель через `@click`; флаг гасит открытие\n// по приходящему следом `focus`, иначе один клик открыл бы и тут же закрыл.\nfunction onTriggerPointerDown(): void {\n  hadPointerDownOnTrigger = true\n  setTimeout(() => {\n    hadPointerDownOnTrigger = false\n  }, 0)\n}\n\nfunction onTriggerFocus(): void {\n  if (hadPointerDownOnTrigger || suppressFocusOpen)\n    return\n  openDropdown()\n}\n\n// Возврат фокуса на триггер — из контракта слоя, а не руками через `nextTick`.\nuseOverlayLayer(open, closeDropdown, { root: panelEl })\n\nwatch(\n  open,\n  async (isOpen) => {\n    if (!isOpen) {\n      if (filterValue.value.trim().length > 0)\n        filterValue.value = ''\n      return\n    }\n\n    // Подсветка дерева идёт за значением: панель могли открыть после того, как\n    // значение сменили снаружи.\n    if (!props.multiple) {\n      const v = props.modelValue\n      if (v != null && !Array.isArray(v))\n        treeRef.value?.setCurrentKey(v)\n    }\n\n    if (props.filterable) {\n      await nextTick()\n      filterInputRef.value?.focus()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    if (props.multiple)\n      return\n    if (v == null || Array.isArray(v)) {\n      treeRef.value?.setCurrentKey(undefined)\n      return\n    }\n    treeRef.value?.setCurrentKey(v)\n  },\n)\n\nwatch(\n  filterValue,\n  (v) => {\n    treeRef.value?.filter(v)\n  },\n)\n\nfunction emitModel(next: GrTreeSelectModelValue) {\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nfunction clear(): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  const next: GrTreeSelectModelValue = props.multiple ? [] : null\n  emitModel(next)\n  emit('clear')\n  if (!props.multiple)\n    treeRef.value?.setCurrentKey(undefined)\n}\n\n/**\n * Отдаёт клавиатуру дереву. Панель под `v-show`, поэтому дерево уже в DOM, но\n * скрытый элемент сфокусировать нельзя — сначала открытие, потом кадр, потом\n * фокус. Дальше работают клавиши `GrTree`, а `Escape` возвращает фокус на\n * триггер силами общего стека слоёв.\n */\nasync function focusTree(): Promise<boolean> {\n  if (!open.value)\n    return false\n\n  await nextTick()\n  return treeRef.value?.focus() ?? false\n}\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (isDisabled.value)\n    return\n\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    closeDropdown()\n    return\n  }\n\n  if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault()\n    openDropdown()\n\n    // При `filterable` фокус уходит в поле поиска (см. watch на `open`), и\n    // дальше в дерево ведёт стрелка уже оттуда.\n    if (!props.filterable)\n      void focusTree()\n  }\n}\n\n/** Стрелка из поля поиска — единственный путь из фильтра в дерево. */\nfunction onFilterKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')\n    return\n\n  e.preventDefault()\n  void focusTree()\n}\n\n/** `Tab` уводит из панели — оставлять её открытой за спиной незачем. */\nfunction onPanelKeydown(e: KeyboardEvent): void {\n  if (e.key === 'Tab')\n    closeDropdown()\n}\n\n// Чекбоксы осмысленны только в множественном выборе: одиночный уже подсвечен\n// текущим узлом.\nconst checkboxMode = computed(() => props.multiple && props.showCheckbox)\n\n// В режиме чекбоксов каскад по родителям и детям считает `GrTree`, а не копия\n// его логики здесь: значение приходит обратно одним `update:checkedKeys`.\nfunction onCheckedKeys(keys: GrTreeKey[]): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  emitModel([...keys])\n}\n\nfunction onNodeClick(data: T, node: GrTreeNode<T>): void {\n  emit('nodeClick', data, node)\n\n  if (isDisabled.value)\n    return\n\n  if (checkboxMode.value) {\n    // Клик по строке — тот же переключатель отметки, что и сам чекбокс;\n    // значение придёт через `update:checkedKeys`, поэтому здесь не эмитим.\n    treeRef.value?.setChecked(node.key, !selectedKeySet.value.has(node.key))\n    return\n  }\n\n  if (props.multiple) {\n    const next = new Set(selectedKeySet.value)\n    if (next.has(node.key))\n      next.delete(node.key)\n    else\n      next.add(node.key)\n    emitModel([...next])\n\n    if (closeOnSelectResolved.value) {\n      closeDropdown()\n    }\n    return\n  }\n\n  emitModel(node.key)\n  if (closeOnSelectResolved.value) {\n    closeDropdown()\n  }\n}\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    v-click-outside=\"{ handler: onClickOutside, enabled: open, exclude: clickOutsideExclude }\"\n    data-gr-tree-select\n    class=\"relative\"\n     @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <!-- Нативная форма: hidden на каждый выбранный ключ. -->\n    <template v-if=\"name\">\n      <input\n        v-for=\"key in selectedKeys\"\n        :key=\"`hidden-${String(key)}`\"\n        type=\"hidden\"\n        :name=\"name\"\n        :value=\"String(key)\"\n      >\n    </template>\n    <div class=\"relative\">\n      <div\n        v-if=\"hasPrefix\"\n        ref=\"prefixEl\"\n        data-gr-tree-select-prefix\n        class=\"absolute inset-y-px left-px flex items-center justify-center rounded-l-[var(--gr-radius-control)] border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n        :style=\"prefixStyle\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"prefix\" />\n      </div>\n\n      <input\n        :id=\"fieldId\"\n        ref=\"triggerEl\"\n        data-testid=\"gr-tree-select-trigger\"\n        data-gr-tree-select-trigger\n        type=\"text\"\n        :value=\"displayValue\"\n        :placeholder=\"placeholder\"\n        :disabled=\"isDisabled\"\n        readonly\n        role=\"combobox\"\n        aria-readonly=\"true\"\n        aria-haspopup=\"tree\"\n        :aria-expanded=\"open ? 'true' : 'false'\"\n        :aria-controls=\"open && hasTree ? treeId : undefined\"\n        :aria-invalid=\"isInvalid ? 'true' : undefined\"\n        :aria-required=\"isRequired ? 'true' : undefined\"\n        :aria-describedby=\"describedBy\"\n        :aria-label=\"ariaLabel\"\n        class=\"w-full rounded-[var(--gr-radius-control)] border placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n        :class=\"[className, $slots.value ? 'text-transparent placeholder:text-transparent' : '']\"\n        :style=\"triggerStyle\"\n        @pointerdown=\"onTriggerPointerDown\"\n        @click=\"toggleDropdown\"\n        @focus=\"onTriggerFocus\"\n        @keydown=\"onTriggerKeydown\"\n      >\n\n      <button\n        v-if=\"clearable && hasSelection && !disabled && !isReadonly\"\n        data-testid=\"gr-tree-select-clear\"\n        data-gr-tree-select-clear\n        type=\"button\"\n        class=\"absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-[var(--gr-radius-control)] text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-muted)_25%,transparent)]\"\n        :aria-label=\"t('gr.common.clear', 'Clear')\"\n        @click.stop=\"clear\"\n      >\n        <IconX class=\"inline-block h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n\n      <span\n        v-else\n        data-testid=\"gr-tree-select-chevron\"\n        data-gr-tree-select-chevron\n        class=\"absolute top-1/2 -translate-y-1/2 right-3 text-[var(--gr-muted-fg)] pointer-events-none\"\n      >\n        <IconChevronDown\n          class=\"inline-block h-4 w-4 transition-transform duration-[var(--gr-duration-fast)]\"\n          :class=\"open ? 'rotate-180' : ''\"\n          aria-hidden=\"true\"\n        />\n      </span>\n\n      <div\n        v-if=\"hasSuffix\"\n        ref=\"suffixEl\"\n        data-gr-tree-select-suffix\n        class=\"absolute inset-y-px right-9 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n        :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n        :style=\"suffixStyle\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n\n      <div\n        v-if=\"$slots.value\"\n        class=\"absolute inset-y-0 left-3 right-9 flex items-center pointer-events-none\"\n        :style=\"valueOverlayStyle\"\n      >\n        <slot\n          name=\"value\"\n          :value=\"modelValue\"\n          :labels=\"selectedLabels\"\n          :display-value=\"displayValue\"\n          :path-labels=\"selectedPathLabels\"\n        />\n      </div>\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        :enter-active-class=\"panelPopTransition.enter\"\n        :enter-from-class=\"panelPopTransition.enterFrom\"\n        :enter-to-class=\"panelPopTransition.enterTo\"\n        :leave-active-class=\"panelPopTransition.leave\"\n        :leave-from-class=\"panelPopTransition.leaveFrom\"\n        :leave-to-class=\"panelPopTransition.leaveTo\"\n      >\n        <div\n          v-show=\"open\"\n          ref=\"panelEl\"\n          data-testid=\"gr-tree-select-panel\"\n          v-bind=\"themeAttrs\"\n          data-gr-tree-select-panel\n          data-gr-overlay-root\n          :style=\"floatingStyle\"\n          @keydown=\"onPanelKeydown\"\n        >\n          <div :class=\"panelClasses\">\n          <div v-if=\"filterable\" class=\"p-2 border-b border-[var(--gr-brd)]\">\n            <GrInput\n              ref=\"filterInputRef\"\n              v-model=\"filterValue\"\n              data-testid=\"gr-tree-select-filter\"\n              data-gr-tree-select-filter\n              type=\"search\"\n              :inputmode=\"filterInputmode\"\n              :placeholder=\"resolvedFilterPlaceholder\"\n              size=\"sm\"\n              @keydown=\"onFilterKeydown\"\n            />\n          </div>\n\n          <!--\n            Скроллер один. При виртуализации его берёт на себя дерево: своя\n            высота нужна ему, чтобы посчитать окно, а вложенный скроллер поверх\n            дал бы вторую полосу прокрутки на том же списке.\n          -->\n          <div\n            class=\"p-1\"\n            :class=\"virtual ? '' : 'overflow-auto'\"\n            :style=\"virtual ? undefined : { maxHeight: `${dropdownMaxHeight}px` }\"\n          >\n            <div\n              v-if=\"loading\"\n              data-gr-tree-select-loading\n              role=\"status\"\n              :class=\"grTreeSelectStateClass\"\n            >\n              <slot name=\"loading\">\n                <IconLoaderCircle class=\"block h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n                <span>{{ t('gr.treeSelect.loading', 'Loading…') }}</span>\n              </slot>\n            </div>\n\n            <div v-else-if=\"(data?.length ?? 0) === 0\" :class=\"grTreeSelectStateClass\">\n              <slot name=\"empty\">\n                {{ t('gr.treeSelect.empty', 'No data') }}\n              </slot>\n            </div>\n\n            <GrTree\n              v-else\n              :id=\"treeId\"\n              ref=\"treeRef\"\n              :size=\"resolvedSize\"\n              :data=\"data\"\n              :props=\"props.props\"\n              :node-key=\"nodeKey as any\"\n              :default-expanded-keys=\"defaultExpandedKeys\"\n              :filter-node-method=\"filterNodeMethod\"\n              :highlight-current=\"!multiple\"\n              :virtual=\"virtual\"\n              :max-height=\"dropdownMaxHeight\"\n              :show-checkbox=\"checkboxMode\"\n              :check-strictly=\"checkStrictly\"\n              :checked-keys=\"selectedKeys\"\n              @node-click=\"onNodeClick\"\n              @update:checked-keys=\"onCheckedKeys\"\n            >\n              <template #default=\"{ node, data }\">\n                <slot\n                  name=\"node\"\n                  :node=\"node\"\n                  :data=\"data\"\n                  :selected=\"selectedKeySet.has(node.key)\"\n                >\n                  <div class=\"flex items-center gap-2 min-w-0\">\n                    <!-- Чекбокс дерева уже показывает отметку: вторая галочка\n                         рядом читалась бы как ошибка. -->\n                    <span\n                      v-if=\"!checkboxMode\"\n                      data-gr-tree-select-check\n                      class=\"inline-block h-4 w-4 shrink-0\"\n                      aria-hidden=\"true\"\n                    >\n                      <IconCheck v-if=\"selectedKeySet.has(node.key)\" class=\"block h-4 w-4 text-[var(--gr-primary-text)]\" />\n                    </span>\n                    <span class=\"truncate\">{{ node.label }}</span>\n                  </div>\n                </slot>\n              </template>\n            </GrTree>\n          </div>\n        </div>\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends Record<string, any> = any\">\nimport { computed, nextTick, ref, useId, useSlots, watch } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport { useFloating } from '../../composables/useFloating'\nimport { useOverlayLayer } from '../../composables/useOverlayLayer'\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useGrComponentSize, useGrThemeAttrs } from '../GrConfigProvider/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree, {\n  type GrTreeInstance,\n  type GrTreeKey,\n  type GrTreeNode,\n} from '../GrTree'\nimport type { GrInputSize } from '../GrInput/GrInput.vue'\nimport { panelPopTransition } from '../shared/overlayTransition'\nimport type { GrTreeSelectModelValue, GrTreeSelectProps } from './grTreeSelectTypes'\nimport { grTreeSelectClass, grTreeSelectPanelClass, grTreeSelectStateClass, paddingX, trailingZoneWidth } from './grTreeSelectStyles'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconChevronDown from '~icons/lucide/chevron-down'\nimport IconLoaderCircle from '~icons/lucide/loader-circle'\nimport IconX from '~icons/lucide/x'\n\nexport interface GrTreeSelectEmits<T extends Record<string, any> = any> {\n  (e: 'update:modelValue', value: GrTreeSelectModelValue): void\n  (e: 'change', value: GrTreeSelectModelValue): void\n  /** Панель открылась/закрылась (`v-model:open`). */\n  (e: 'update:open', value: boolean): void\n  (e: 'clear'): void\n  (e: 'nodeClick', data: T, node: GrTreeNode<T>): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrTreeSelectProps<T>>(),\n  {\n    props: () => ({\n      children: 'children',\n      label: 'label',\n    }),\n    nodeKey: 'id' as any,\n    defaultExpandedKeys: () => [],\n    disabled: false,\n    placeholder: undefined,\n    size: undefined,\n    loading: false,\n    invalid: false,\n    readonly: false,\n    required: false,\n    ariaLabel: undefined,\n    state: 'default',\n    multiple: false,\n    showCheckbox: false,\n    checkStrictly: false,\n    clearable: false,\n    open: undefined,\n    name: undefined,\n    valueDisplay: 'label',\n    filterable: false,\n    filterPlaceholder: undefined,\n    filterInputmode: undefined,\n    filterNodeMethod: undefined,\n    closeOnSelect: undefined,\n    dropdownMaxHeight: 320,\n    virtual: false,\n    prefixMinWidth: undefined,\n    prefixMaxWidth: undefined,\n    suffixMinWidth: undefined,\n    suffixMaxWidth: undefined,\n    prefixFixed: false,\n    suffixFixed: false,\n  },\n)\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrTreeSelectEmits<T>>()\n\ndefineSlots<{\n  /** Рендер значения внутри триггера (вместо дефолтного текста). */\n  value?: (props: { value: GrTreeSelectModelValue, labels: string[], displayValue: string, pathLabels?: string[] }) => any\n  /** Рендер строки дерева. */\n  node?: (props: { node: GrTreeNode<T>, data: T, selected: boolean }) => any\n  /** Содержимое пустого состояния (когда нет данных). */\n  empty?: () => any\n  /** Содержимое панели, пока данные едут. */\n  loading?: () => any\n  /** Аддон слева от значения: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от значения, перед крестиком и шевроном. */\n  suffix?: () => any\n}>()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLInputElement | null>(null)\nconst treeId = `gr-tree-select-tree-${useId()}`\n\n// Контекст `GrFormField` + общий контракт форм-контрола.\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\nconst filterInputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst treeRef = ref<GrTreeInstance | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\n\n// Панель телепортирована в `body`, то есть лежит вне корня, но для пользователя\n// она часть контрола: без неё уход фокуса в панель читался бы как `blur`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n  containers: () => [panelEl.value],\n})\n\nconst clickOutsideExclude = [() => panelEl.value]\n\nlet hadPointerDownOnTrigger = false\n\n// Имя `open` сохранено: читатели работают с computed-Ref.\nconst { open, setOpen: setOpenState } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\nconst filterValue = ref('')\n\nconst { floatingStyle } = useFloating(rootEl, panelEl, open, {\n  placement: 'bottom-start',\n  matchWidth: true,\n  zIndexVar: '--gr-z-dropdown',\n})\n\nconst closeOnSelectResolved = computed(() => {\n  return props.closeOnSelect ?? !props.multiple\n})\n\nfunction getChildrenKey() {\n  return props.props.children ?? 'children'\n}\n\nfunction getLabelKey() {\n  return props.props.label ?? 'label'\n}\n\nfunction nodeLabel(data: T): string {\n  const key = getLabelKey() as keyof T\n  const v = data[key]\n  return v == null ? '' : String(v)\n}\n\nfunction nodeChildren(data: T): T[] {\n  const key = getChildrenKey() as keyof T\n  const v = data[key]\n  return Array.isArray(v) ? (v as any) : []\n}\n\nfunction nodeKeyOf(data: T, index: number, parentKey: GrTreeKey | undefined): GrTreeKey {\n  const keyName = props.nodeKey as keyof T\n  const v = data[keyName]\n  if (v != null)\n    return v as GrTreeKey\n\n  return parentKey == null ? index : `${String(parentKey)}:${index}`\n}\n\nconst labelByKey = computed(() => {\n  const map = new Map<GrTreeKey, string>()\n\n  const walk = (items: T[], parentKey: GrTreeKey | undefined) => {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i]\n      const key = nodeKeyOf(item, i, parentKey)\n      map.set(key, nodeLabel(item))\n      walk(nodeChildren(item), key)\n    }\n  }\n\n  walk(props.data ?? [], undefined)\n  return map\n})\n\nconst pathLabelsByKey = computed(() => {\n  const map = new Map<GrTreeKey, string[]>()\n\n  const walk = (items: T[], parentKey: GrTreeKey | undefined, parentPath: string[]) => {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i]\n      const key = nodeKeyOf(item, i, parentKey)\n      const label = nodeLabel(item)\n      const path = [...parentPath, label]\n      map.set(key, path)\n      walk(nodeChildren(item), key, path)\n    }\n  }\n\n  walk(props.data ?? [], undefined, [])\n  return map\n})\n\nconst selectedKeys = computed<GrTreeKey[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  const v = props.modelValue\n  if (v == null || Array.isArray(v))\n    return []\n  return [v]\n})\n\nconst selectedKeySet = computed(() => new Set(selectedKeys.value))\n\nconst selectedLabels = computed(() => {\n  const map = labelByKey.value\n  return selectedKeys.value.map(k => map.get(k) ?? String(k))\n})\n\nconst selectedPathLabels = computed<string[] | undefined>(() => {\n  if (props.multiple)\n    return undefined\n\n  const key = selectedKeys.value[0]\n  if (key == null)\n    return undefined\n\n  const path = pathLabelsByKey.value.get(key)\n  if (path?.length)\n    return path\n\n  const labels = selectedLabels.value\n  return labels.length ? [labels[0]] : undefined\n})\n\nconst displayValue = computed(() => {\n  const labels = selectedLabels.value\n  if (labels.length === 0)\n    return ''\n\n  if (!props.multiple) {\n    if (props.valueDisplay === 'path') {\n      const path = selectedPathLabels.value\n      if (path?.length)\n        return path.join(' / ')\n    }\n    return labels[0]\n  }\n\n  if (labels.length === 1)\n    return labels[0]\n  return `${labels[0]} +${labels.length - 1}`\n})\n\nconst hasSelection = computed(() => selectedKeys.value.length > 0)\n\n/** Дерево рендерится только когда есть что показать — ссылаться иначе не на что. */\nconst hasTree = computed(() => !props.loading && (props.data?.length ?? 0) > 0)\n\nconst resolvedFilterPlaceholder = computed(() => {\n  return props.filterPlaceholder ?? t('gr.treeSelect.filterPlaceholder', 'Search…')\n})\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTreeSelect' })\n\nconst className = computed(() => {\n  return grTreeSelectClass({\n    size: resolvedSize.value,\n    state: props.state,\n    invalid: isInvalid.value,\n    disabled: isDisabled.value,\n  })\n})\n\nconst panelClasses = computed(() => {\n  return grTreeSelectPanelClass\n})\n\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputSize, string> = {\n  xs: '2rem',\n  sm: '2.25rem',\n  md: '2.5rem',\n  lg: '3rem',\n}\n\nconst slots = useSlots()\n\nconst {\n  hasPrefix,\n  hasSuffix,\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: triggerStyle,\n} = useControlAddons(() => props, {\n  defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],\n  paddingX: () => paddingX[resolvedSize.value],\n  // Место под крестик и шеврон уже отдано классом `pr-9`, но инлайн-паддинг\n  // перекрывает класс целиком — с суффиксом эту зону приходится вернуть числом.\n  trailingReserve: () => (slots.suffix ? trailingZoneWidth : '0px'),\n})\n\n// Слот `value` рисуется поверх поля и обязан жить в тех же границах, что и\n// текст под ним. Без аддонов границы задаёт класс — стиль остаётся пустым.\nconst valueOverlayStyle = computed(() => ({\n  left: hasPrefix.value ? triggerStyle.value.paddingLeft : undefined,\n  right: hasSuffix.value ? triggerStyle.value.paddingRight : undefined,\n}))\n\nfunction setOpen(next: boolean) {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  setOpenState(next)\n}\n\nfunction onClickOutside(): void {\n  setOpen(false)\n}\n\nfunction openDropdown(): void {\n  setOpen(true)\n}\n\n/**\n * Стек слоёв возвращает фокус на триггер сразу после закрытия, а у триггера\n * открытие висит на `focus`. Без флага `Escape` из дерева закрывал бы панель и\n * тем же движением открывал её заново.\n */\nlet suppressFocusOpen = false\n\nfunction closeDropdown(): void {\n  suppressFocusOpen = true\n  setOpen(false)\n  setTimeout(() => {\n    suppressFocusOpen = false\n  }, 0)\n}\n\nfunction toggleDropdown(): void {\n  setOpen(!open.value)\n}\n\n// Клик по триггеру сам переключает панель через `@click`; флаг гасит открытие\n// по приходящему следом `focus`, иначе один клик открыл бы и тут же закрыл.\nfunction onTriggerPointerDown(): void {\n  hadPointerDownOnTrigger = true\n  setTimeout(() => {\n    hadPointerDownOnTrigger = false\n  }, 0)\n}\n\nfunction onTriggerFocus(): void {\n  if (hadPointerDownOnTrigger || suppressFocusOpen)\n    return\n  openDropdown()\n}\n\n// Возврат фокуса на триггер — из контракта слоя, а не руками через `nextTick`.\nuseOverlayLayer(open, closeDropdown, { root: panelEl })\n\nwatch(\n  open,\n  async (isOpen) => {\n    if (!isOpen) {\n      if (filterValue.value.trim().length > 0)\n        filterValue.value = ''\n      return\n    }\n\n    // Подсветка дерева идёт за значением: панель могли открыть после того, как\n    // значение сменили снаружи.\n    if (!props.multiple) {\n      const v = props.modelValue\n      if (v != null && !Array.isArray(v))\n        treeRef.value?.setCurrentKey(v)\n    }\n\n    if (props.filterable) {\n      await nextTick()\n      filterInputRef.value?.focus()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    if (props.multiple)\n      return\n    if (v == null || Array.isArray(v)) {\n      treeRef.value?.setCurrentKey(undefined)\n      return\n    }\n    treeRef.value?.setCurrentKey(v)\n  },\n)\n\nwatch(\n  filterValue,\n  (v) => {\n    treeRef.value?.filter(v)\n  },\n)\n\nfunction emitModel(next: GrTreeSelectModelValue) {\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nfunction clear(): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  const next: GrTreeSelectModelValue = props.multiple ? [] : null\n  emitModel(next)\n  emit('clear')\n  if (!props.multiple)\n    treeRef.value?.setCurrentKey(undefined)\n}\n\n/**\n * Отдаёт клавиатуру дереву. Панель под `v-show`, поэтому дерево уже в DOM, но\n * скрытый элемент сфокусировать нельзя — сначала открытие, потом кадр, потом\n * фокус. Дальше работают клавиши `GrTree`, а `Escape` возвращает фокус на\n * триггер силами общего стека слоёв.\n */\nasync function focusTree(): Promise<boolean> {\n  if (!open.value)\n    return false\n\n  await nextTick()\n  return treeRef.value?.focus() ?? false\n}\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (isDisabled.value)\n    return\n\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    closeDropdown()\n    return\n  }\n\n  if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault()\n    openDropdown()\n\n    // При `filterable` фокус уходит в поле поиска (см. watch на `open`), и\n    // дальше в дерево ведёт стрелка уже оттуда.\n    if (!props.filterable)\n      void focusTree()\n  }\n}\n\n/** Стрелка из поля поиска — единственный путь из фильтра в дерево. */\nfunction onFilterKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')\n    return\n\n  e.preventDefault()\n  void focusTree()\n}\n\n/** `Tab` уводит из панели — оставлять её открытой за спиной незачем. */\nfunction onPanelKeydown(e: KeyboardEvent): void {\n  if (e.key === 'Tab')\n    closeDropdown()\n}\n\n// Чекбоксы осмысленны только в множественном выборе: одиночный уже подсвечен\n// текущим узлом.\nconst checkboxMode = computed(() => props.multiple && props.showCheckbox)\n\n// В режиме чекбоксов каскад по родителям и детям считает `GrTree`, а не копия\n// его логики здесь: значение приходит обратно одним `update:checkedKeys`.\nfunction onCheckedKeys(keys: GrTreeKey[]): void {\n  if (isDisabled.value || isReadonly.value)\n    return\n\n  emitModel([...keys])\n}\n\nfunction onNodeClick(data: T, node: GrTreeNode<T>): void {\n  emit('nodeClick', data, node)\n\n  if (isDisabled.value)\n    return\n\n  if (checkboxMode.value) {\n    // Клик по строке — тот же переключатель отметки, что и сам чекбокс;\n    // значение придёт через `update:checkedKeys`, поэтому здесь не эмитим.\n    treeRef.value?.setChecked(node.key, !selectedKeySet.value.has(node.key))\n    return\n  }\n\n  if (props.multiple) {\n    const next = new Set(selectedKeySet.value)\n    if (next.has(node.key))\n      next.delete(node.key)\n    else\n      next.add(node.key)\n    emitModel([...next])\n\n    if (closeOnSelectResolved.value) {\n      closeDropdown()\n    }\n    return\n  }\n\n  emitModel(node.key)\n  if (closeOnSelectResolved.value) {\n    closeDropdown()\n  }\n}\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    v-click-outside=\"{ handler: onClickOutside, enabled: open, exclude: clickOutsideExclude }\"\n    data-gr-tree-select\n    class=\"relative\"\n     @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <!-- Нативная форма: hidden на каждый выбранный ключ. -->\n    <template v-if=\"name\">\n      <input\n        v-for=\"key in selectedKeys\"\n        :key=\"`hidden-${String(key)}`\"\n        type=\"hidden\"\n        :name=\"name\"\n        :value=\"String(key)\"\n      >\n    </template>\n    <div class=\"relative\">\n      <div\n        v-if=\"hasPrefix\"\n        ref=\"prefixEl\"\n        data-gr-tree-select-prefix\n        class=\"absolute inset-y-px left-px flex items-center justify-center rounded-l-[var(--gr-radius-control)] border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n        :style=\"prefixStyle\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"prefix\" />\n      </div>\n\n      <input\n        :id=\"fieldId\"\n        ref=\"triggerEl\"\n        data-testid=\"gr-tree-select-trigger\"\n        data-gr-tree-select-trigger\n        type=\"text\"\n        :value=\"displayValue\"\n        :placeholder=\"placeholder\"\n        :disabled=\"isDisabled\"\n        readonly\n        role=\"combobox\"\n        aria-readonly=\"true\"\n        aria-haspopup=\"tree\"\n        :aria-expanded=\"open ? 'true' : 'false'\"\n        :aria-controls=\"open && hasTree ? treeId : undefined\"\n        :aria-invalid=\"isInvalid ? 'true' : undefined\"\n        :aria-required=\"isRequired ? 'true' : undefined\"\n        :aria-describedby=\"describedBy\"\n        :aria-label=\"ariaLabel\"\n        class=\"w-full rounded-[var(--gr-radius-control)] border placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n        :class=\"[className, $slots.value ? 'text-transparent placeholder:text-transparent' : '']\"\n        :style=\"triggerStyle\"\n        @pointerdown=\"onTriggerPointerDown\"\n        @click=\"toggleDropdown\"\n        @focus=\"onTriggerFocus\"\n        @keydown=\"onTriggerKeydown\"\n      >\n\n      <button\n        v-if=\"clearable && hasSelection && !disabled && !isReadonly\"\n        data-testid=\"gr-tree-select-clear\"\n        data-gr-tree-select-clear\n        type=\"button\"\n        class=\"absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-[var(--gr-radius-control)] text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-muted)_25%,transparent)]\"\n        :aria-label=\"t('gr.common.clear', 'Clear')\"\n        @click.stop=\"clear\"\n      >\n        <IconX class=\"inline-block h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n\n      <span\n        v-else\n        data-testid=\"gr-tree-select-chevron\"\n        data-gr-tree-select-chevron\n        class=\"absolute top-1/2 -translate-y-1/2 right-3 text-[var(--gr-muted-fg)] pointer-events-none\"\n      >\n        <IconChevronDown\n          class=\"inline-block h-4 w-4 transition-transform duration-[var(--gr-duration-fast)]\"\n          :class=\"open ? 'rotate-180' : ''\"\n          aria-hidden=\"true\"\n        />\n      </span>\n\n      <div\n        v-if=\"hasSuffix\"\n        ref=\"suffixEl\"\n        data-gr-tree-select-suffix\n        class=\"absolute inset-y-px right-9 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n        :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n        :style=\"suffixStyle\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n\n      <div\n        v-if=\"$slots.value\"\n        class=\"absolute inset-y-0 left-3 right-9 flex items-center pointer-events-none\"\n        :style=\"valueOverlayStyle\"\n      >\n        <slot\n          name=\"value\"\n          :value=\"modelValue\"\n          :labels=\"selectedLabels\"\n          :display-value=\"displayValue\"\n          :path-labels=\"selectedPathLabels\"\n        />\n      </div>\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        :enter-active-class=\"panelPopTransition.enter\"\n        :enter-from-class=\"panelPopTransition.enterFrom\"\n        :enter-to-class=\"panelPopTransition.enterTo\"\n        :leave-active-class=\"panelPopTransition.leave\"\n        :leave-from-class=\"panelPopTransition.leaveFrom\"\n        :leave-to-class=\"panelPopTransition.leaveTo\"\n      >\n        <div\n          v-show=\"open\"\n          ref=\"panelEl\"\n          data-testid=\"gr-tree-select-panel\"\n          v-bind=\"themeAttrs\"\n          data-gr-tree-select-panel\n          data-gr-overlay-root\n          :style=\"floatingStyle\"\n          @keydown=\"onPanelKeydown\"\n        >\n          <div :class=\"panelClasses\">\n          <div v-if=\"filterable\" class=\"p-2 border-b border-[var(--gr-brd)]\">\n            <GrInput\n              ref=\"filterInputRef\"\n              v-model=\"filterValue\"\n              data-testid=\"gr-tree-select-filter\"\n              data-gr-tree-select-filter\n              type=\"search\"\n              :inputmode=\"filterInputmode\"\n              :placeholder=\"resolvedFilterPlaceholder\"\n              size=\"sm\"\n              @keydown=\"onFilterKeydown\"\n            />\n          </div>\n\n          <!--\n            Скроллер один. При виртуализации его берёт на себя дерево: своя\n            высота нужна ему, чтобы посчитать окно, а вложенный скроллер поверх\n            дал бы вторую полосу прокрутки на том же списке.\n          -->\n          <div\n            class=\"p-1\"\n            :class=\"virtual ? '' : 'overflow-auto'\"\n            :style=\"virtual ? undefined : { maxHeight: `${dropdownMaxHeight}px` }\"\n          >\n            <div\n              v-if=\"loading\"\n              data-gr-tree-select-loading\n              role=\"status\"\n              :class=\"grTreeSelectStateClass\"\n            >\n              <slot name=\"loading\">\n                <IconLoaderCircle class=\"block h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n                <span>{{ t('gr.treeSelect.loading', 'Loading…') }}</span>\n              </slot>\n            </div>\n\n            <div v-else-if=\"(data?.length ?? 0) === 0\" :class=\"grTreeSelectStateClass\">\n              <slot name=\"empty\">\n                {{ t('gr.treeSelect.empty', 'No data') }}\n              </slot>\n            </div>\n\n            <GrTree\n              v-else\n              :id=\"treeId\"\n              ref=\"treeRef\"\n              :size=\"resolvedSize\"\n              :data=\"data\"\n              :props=\"props.props\"\n              :node-key=\"nodeKey as any\"\n              :default-expanded-keys=\"defaultExpandedKeys\"\n              :filter-node-method=\"filterNodeMethod\"\n              :highlight-current=\"!multiple\"\n              :virtual=\"virtual\"\n              :max-height=\"dropdownMaxHeight\"\n              :show-checkbox=\"checkboxMode\"\n              :check-strictly=\"checkStrictly\"\n              :checked-keys=\"selectedKeys\"\n              @node-click=\"onNodeClick\"\n              @update:checked-keys=\"onCheckedKeys\"\n            >\n              <template #default=\"{ node, data }\">\n                <slot\n                  name=\"node\"\n                  :node=\"node\"\n                  :data=\"data\"\n                  :selected=\"selectedKeySet.has(node.key)\"\n                >\n                  <div class=\"flex items-center gap-2 min-w-0\">\n                    <!-- Чекбокс дерева уже показывает отметку: вторая галочка\n                         рядом читалась бы как ошибка. -->\n                    <span\n                      v-if=\"!checkboxMode\"\n                      data-gr-tree-select-check\n                      class=\"inline-block h-4 w-4 shrink-0\"\n                      aria-hidden=\"true\"\n                    >\n                      <IconCheck v-if=\"selectedKeySet.has(node.key)\" class=\"block h-4 w-4 text-[var(--gr-primary-text)]\" />\n                    </span>\n                    <span class=\"truncate\">{{ node.label }}</span>\n                  </div>\n                </slot>\n              </template>\n            </GrTree>\n          </div>\n        </div>\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrTreeSelect/index.js

@@ -1,3 +1,3 @@
 import { n as grTreeSelectSafelist, t as grTreeSelectConfig } from "../../chunks/config-BGCyyXiD.js";
-import { t as GrTreeSelect_default } from "./chunks/GrTreeSelect-DJa2lYGe.js";
+import { t as GrTreeSelect_default } from "./chunks/GrTreeSelect-DUsv3_mF.js";
 export { GrTreeSelect_default as GrTreeSelect, GrTreeSelect_default as default, grTreeSelectConfig, grTreeSelectSafelist };

package/dist/composables/useDragSort.js

@@ -1,2 +1,180 @@
-import { t as useDragSort } from "../chunks/useDragSort-0l47h4yb.js";
+import { useDragGesture } from "./useDragGesture.js";
+import { n as hitTest, t as autoScrollDelta } from "../chunks/dragSortGeometry-CY-llfrQ.js";
+import { computed, onScopeDispose, shallowRef } from "vue";
+//#region src/composables/useDragSort.ts
+function useDragSort(options) {
+	const source = shallowRef(null);
+	const target = shallowRef(null);
+	const mode = shallowRef(null);
+	const isActive = computed(() => mode.value !== null);
+	let pendingKey = null;
+	let originX = 0;
+	let originY = 0;
+	let lastPoint = null;
+	let scrollFrame = null;
+	const gesture = useDragGesture({
+		disabled: () => options.disabled?.() ?? false,
+		onStart: (event) => {
+			if (pendingKey === null) return false;
+			if (options.canDrag?.(pendingKey) === false) return false;
+			originX = event.clientX;
+			originY = event.clientY;
+			return true;
+		},
+		onMove: (event) => {
+			if (mode.value === null) {
+				if (Math.hypot(event.clientX - originX, event.clientY - originY) < (options.threshold?.() ?? 4)) return;
+				source.value = pendingKey;
+				mode.value = "pointer";
+				window.addEventListener("keydown", onWindowKeydown, true);
+				startScrolling();
+				notify();
+			}
+			event.preventDefault();
+			lastPoint = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			updateTarget(lastPoint);
+		},
+		onEnd: () => {
+			if (mode.value === "pointer") commit();
+			else reset();
+		},
+		onCancel: reset
+	});
+	function isVertical() {
+		return (options.orientation?.() ?? "vertical") === "vertical";
+	}
+	function spanOf(rect) {
+		return isVertical() ? {
+			start: rect.top,
+			end: rect.bottom
+		} : {
+			start: rect.left,
+			end: rect.right
+		};
+	}
+	function notify() {
+		options.onUpdate?.(source.value, target.value, mode.value);
+	}
+	function updateTarget(point) {
+		const current = source.value;
+		if (current === null) return;
+		const rendered = [];
+		options.items().forEach((key, index) => {
+			const el = options.elementFor(key);
+			if (el) rendered.push({
+				key,
+				index,
+				span: spanOf(el.getBoundingClientRect())
+			});
+		});
+		const hit = hitTest(rendered.map((entry) => entry.span), isVertical() ? point.y : point.x);
+		const entry = hit === null ? null : rendered[hit.index];
+		const next = entry === null || hit === null ? null : options.resolveTarget({
+			key: entry.key,
+			index: entry.index,
+			fraction: hit.fraction
+		}, current, target.value);
+		if (next === target.value) return;
+		target.value = next;
+		notify();
+	}
+	/**
+	* Автопрокрутка живёт в своём кадре, а не в обработчике движения: у края
+	* указатель обычно стоит неподвижно, событий больше нет — а список должен
+	* продолжать ехать.
+	*/
+	function tickScroll() {
+		scrollFrame = null;
+		const scroller = options.scroller?.();
+		const point = lastPoint;
+		if (!scroller || !point || mode.value !== "pointer") return;
+		const delta = autoScrollDelta(spanOf(scroller.getBoundingClientRect()), isVertical() ? point.y : point.x);
+		if (delta !== 0) {
+			if (isVertical()) scroller.scrollTop += delta;
+			else scroller.scrollLeft += delta;
+			updateTarget(point);
+		}
+		scrollFrame = requestAnimationFrame(tickScroll);
+	}
+	function startScrolling() {
+		if (scrollFrame !== null || !options.scroller?.()) return;
+		scrollFrame = requestAnimationFrame(tickScroll);
+	}
+	function stopScrolling() {
+		if (scrollFrame === null) return;
+		cancelAnimationFrame(scrollFrame);
+		scrollFrame = null;
+	}
+	function onWindowKeydown(event) {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		gesture.stop(false);
+	}
+	function reset() {
+		stopScrolling();
+		window.removeEventListener("keydown", onWindowKeydown, true);
+		pendingKey = null;
+		lastPoint = null;
+		source.value = null;
+		target.value = null;
+		mode.value = null;
+		notify();
+	}
+	function commit() {
+		const from = source.value;
+		const to = target.value;
+		if (from !== null && to !== null) options.onDrop(from, to);
+		reset();
+	}
+	function startFrom(key) {
+		return (event) => {
+			if (mode.value === "keyboard") return;
+			pendingKey = key;
+			gesture.start(event);
+		};
+	}
+	function grab(key) {
+		if (options.disabled?.() || options.canDrag?.(key) === false) return;
+		if (mode.value !== null) return;
+		source.value = key;
+		target.value = null;
+		mode.value = "keyboard";
+		notify();
+	}
+	function setTarget(next) {
+		if (mode.value !== "keyboard") return;
+		target.value = next;
+		notify();
+	}
+	function drop() {
+		if (mode.value !== "keyboard") return;
+		commit();
+	}
+	function cancel() {
+		if (mode.value === "pointer") {
+			gesture.stop(false);
+			return;
+		}
+		if (mode.value === "keyboard") reset();
+	}
+	onScopeDispose(() => {
+		stopScrolling();
+		window.removeEventListener("keydown", onWindowKeydown, true);
+	});
+	return {
+		source,
+		target,
+		mode,
+		isActive,
+		startFrom,
+		grab,
+		setTarget,
+		drop,
+		cancel
+	};
+}
+//#endregion
 export { useDragSort };

package/dist/composables/useDragSort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragSort.js","names":[],"sources":["../../src/composables/useDragSort.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { computed, onScopeDispose, shallowRef } from 'vue'\n\nimport type { DragSortSpan } from './internal/dragSortGeometry'\nimport { autoScrollDelta, hitTest } from './internal/dragSortGeometry'\nimport { useDragGesture } from './useDragGesture'\n\n/**\n * Модель перестановки: перенос элемента указателем и с клавиатуры.\n *\n * Композабл владеет **механикой** — сессией жеста поверх `useDragGesture`,\n * порогом начала, попаданием в элемент, автопрокруткой у краёв и состоянием\n * переноса. **Смысл** остаётся у компонента: что считать целью (индекс вставки\n * у списка, «до / внутрь / после» у дерева), какими клавишами это делается и\n * что сказать в живой регион.\n *\n * Граница проведена так не из вкуса: у списка цель переноса — число, у дерева —\n * пара «узел и зона», а `Space` в дереве уже занят чекбоксом. Общая у них\n * механика, а не семантика; обобщать семантику значило бы завести опцию на\n * каждое расхождение.\n *\n * Данные композабл не меняет: он сообщает «источник и цель», перестановку\n * делает потребитель (`moveItem` из `internal/dragSortGeometry` — если она\n * обычная).\n *\n * ```ts\n * const sort = useDragSort<string, number>({\n *   items: () => keys.value,\n *   elementFor: key => rowEls.get(key),\n *   scroller: () => scrollerEl.value,\n *   resolveTarget: (hit, source) => insertionIndex(hit, indexOf(source), keys.value.length),\n *   onDrop: (source, to) => emit('move', indexOf(source), to),\n * })\n * ```\n */\n\nexport type DragSortOrientation = 'vertical' | 'horizontal'\n\n/** Чем ведётся перенос: указателем или с клавиатуры. */\nexport type DragSortMode = 'pointer' | 'keyboard'\n\nexport interface DragSortHit<TKey> {\n  key: TKey\n  index: number\n  /** Доля вдоль элемента: 0 — начало, 1 — конец. Зоны нарезает компонент. */\n  fraction: number\n}\n\nexport interface UseDragSortOptions<TKey, TTarget> {\n  items: () => readonly TKey[]\n  elementFor: (key: TKey) => HTMLElement | null | undefined\n  /** По умолчанию `vertical`. */\n  orientation?: () => DragSortOrientation\n  /** Скроллер для автопрокрутки у краёв. Не задан — автопрокрутки нет. */\n  scroller?: () => HTMLElement | null | undefined\n  disabled?: () => boolean\n  canDrag?: (key: TKey) => boolean\n  /** Сдвиг, после которого нажатие становится переносом. По умолчанию 4px. */\n  threshold?: () => number\n  /**\n   * Попадание указателя → цель переноса. `null` — сюда положить нельзя.\n   *\n   * Третьим аргументом приходит прежняя цель: цели сравниваются по ссылке, и\n   * объектной цели (как «узел плюс зона» у дерева) стоит вернуть **ту же**\n   * ссылку, пока смысл не изменился, — иначе подсветка и объявления будут\n   * дёргаться на каждом движении указателя.\n   */\n  resolveTarget: (hit: DragSortHit<TKey>, source: TKey, previous: TTarget | null) => TTarget | null\n  /** Перенос состоялся. */\n  onDrop: (source: TKey, target: TTarget) => void\n  /** Состояние изменилось: подсветка строк и объявления — на этом. */\n  onUpdate?: (source: TKey | null, target: TTarget | null, mode: DragSortMode | null) => void\n}\n\nexport interface UseDragSortReturn<TKey, TTarget> {\n  source: Ref<TKey | null>\n  target: Ref<TTarget | null>\n  mode: Ref<DragSortMode | null>\n  isActive: Ref<boolean>\n  /** Вешается на `@pointerdown` ручки или строки. */\n  startFrom: (key: TKey) => (event: PointerEvent) => void\n  /** Клавиатурный перенос: взять элемент. */\n  grab: (key: TKey) => void\n  /** Клавиатурный перенос: назначить цель (двигать ведёт компонент). */\n  setTarget: (target: TTarget | null) => void\n  /** Положить: если цель есть — состоится `onDrop`. */\n  drop: () => void\n  /** Отменить: ничего не переносится. */\n  cancel: () => void\n}\n\nexport function useDragSort<TKey, TTarget>(\n  options: UseDragSortOptions<TKey, TTarget>,\n): UseDragSortReturn<TKey, TTarget> {\n  const source = shallowRef<TKey | null>(null)\n  const target = shallowRef<TTarget | null>(null)\n  const mode = shallowRef<DragSortMode | null>(null)\n  const isActive = computed(() => mode.value !== null)\n\n  // Нажатая, но ещё не потянутая строка: между `pointerdown` и порогом это\n  // остаётся обычным кликом, и объявлять перенос рано.\n  let pendingKey: TKey | null = null\n  let originX = 0\n  let originY = 0\n  let lastPoint: { x: number, y: number } | null = null\n  let scrollFrame: number | null = null\n\n  const gesture = useDragGesture({\n    disabled: () => options.disabled?.() ?? false,\n    onStart: (event) => {\n      if (pendingKey === null)\n        return false\n      if (options.canDrag?.(pendingKey) === false)\n        return false\n\n      originX = event.clientX\n      originY = event.clientY\n\n      return true\n    },\n    onMove: (event) => {\n      if (mode.value === null) {\n        const moved = Math.hypot(event.clientX - originX, event.clientY - originY)\n        if (moved < (options.threshold?.() ?? 4))\n          return\n\n        source.value = pendingKey\n        mode.value = 'pointer'\n        // Esc отменяет перенос, но `pointercancel` браузер при этом не шлёт —\n        // клавишу приходится слушать самим, в capture, до слоёв приложения.\n        window.addEventListener('keydown', onWindowKeydown, true)\n        startScrolling()\n        notify()\n      }\n\n      // Против выделения текста под курсором во время переноса.\n      event.preventDefault()\n\n      lastPoint = { x: event.clientX, y: event.clientY }\n      updateTarget(lastPoint)\n    },\n    onEnd: () => {\n      if (mode.value === 'pointer')\n        commit()\n      else reset()\n    },\n    onCancel: reset,\n  })\n\n  function isVertical(): boolean {\n    return (options.orientation?.() ?? 'vertical') === 'vertical'\n  }\n\n  function spanOf(rect: DOMRect): DragSortSpan {\n    return isVertical() ? { start: rect.top, end: rect.bottom } : { start: rect.left, end: rect.right }\n  }\n\n  function notify(): void {\n    options.onUpdate?.(source.value, target.value, mode.value)\n  }\n\n  function updateTarget(point: { x: number, y: number }): void {\n    const current = source.value\n    if (current === null)\n      return\n\n    // Отрисованы не все: список может быть под окном отсечения, ветка дерева —\n    // свёрнута. Попадание считается по тому, что на экране есть.\n    const rendered: { key: TKey, index: number, span: DragSortSpan }[] = []\n\n    options.items().forEach((key, index) => {\n      const el = options.elementFor(key)\n      if (el)\n        rendered.push({ key, index, span: spanOf(el.getBoundingClientRect()) })\n    })\n\n    const hit = hitTest(rendered.map(entry => entry.span), isVertical() ? point.y : point.x)\n    const entry = hit === null ? null : rendered[hit.index]\n    const next = entry === null || hit === null\n      ? null\n      : options.resolveTarget({ key: entry.key, index: entry.index, fraction: hit.fraction }, current, target.value)\n\n    if (next === target.value)\n      return\n\n    target.value = next\n    notify()\n  }\n\n  /**\n   * Автопрокрутка живёт в своём кадре, а не в обработчике движения: у края\n   * указатель обычно стоит неподвижно, событий больше нет — а список должен\n   * продолжать ехать.\n   */\n  function tickScroll(): void {\n    scrollFrame = null\n\n    const scroller = options.scroller?.()\n    const point = lastPoint\n    if (!scroller || !point || mode.value !== 'pointer')\n      return\n\n    const delta = autoScrollDelta(spanOf(scroller.getBoundingClientRect()), isVertical() ? point.y : point.x)\n\n    if (delta !== 0) {\n      if (isVertical())\n        scroller.scrollTop += delta\n      else scroller.scrollLeft += delta\n\n      updateTarget(point)\n    }\n\n    scrollFrame = requestAnimationFrame(tickScroll)\n  }\n\n  function startScrolling(): void {\n    if (scrollFrame !== null || !options.scroller?.())\n      return\n\n    scrollFrame = requestAnimationFrame(tickScroll)\n  }\n\n  function stopScrolling(): void {\n    if (scrollFrame === null)\n      return\n\n    cancelAnimationFrame(scrollFrame)\n    scrollFrame = null\n  }\n\n  function onWindowKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape')\n      return\n\n    event.preventDefault()\n    gesture.stop(false)\n  }\n\n  function reset(): void {\n    stopScrolling()\n    window.removeEventListener('keydown', onWindowKeydown, true)\n\n    pendingKey = null\n    lastPoint = null\n    source.value = null\n    target.value = null\n    mode.value = null\n    notify()\n  }\n\n  function commit(): void {\n    const from = source.value\n    const to = target.value\n\n    if (from !== null && to !== null)\n      options.onDrop(from, to)\n\n    reset()\n  }\n\n  function startFrom(key: TKey) {\n    return (event: PointerEvent): void => {\n      // Клавиатурный перенос идёт своим чередом: указатель его не перебивает.\n      if (mode.value === 'keyboard')\n        return\n\n      pendingKey = key\n      gesture.start(event)\n    }\n  }\n\n  function grab(key: TKey): void {\n    if (options.disabled?.() || options.canDrag?.(key) === false)\n      return\n    if (mode.value !== null)\n      return\n\n    source.value = key\n    target.value = null\n    mode.value = 'keyboard'\n    notify()\n  }\n\n  function setTarget(next: TTarget | null): void {\n    if (mode.value !== 'keyboard')\n      return\n\n    target.value = next\n    notify()\n  }\n\n  function drop(): void {\n    if (mode.value !== 'keyboard')\n      return\n\n    commit()\n  }\n\n  function cancel(): void {\n    if (mode.value === 'pointer') {\n      gesture.stop(false)\n      return\n    }\n\n    if (mode.value === 'keyboard')\n      reset()\n  }\n\n  onScopeDispose(() => {\n    stopScrolling()\n    window.removeEventListener('keydown', onWindowKeydown, true)\n  })\n\n  return { source, target, mode, isActive, startFrom, grab, setTarget, drop, cancel }\n}\n"],"mappings":"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"}

package/dist/granular-provider-node.js

@@ -1,2 +1,2 @@
-import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-BshNi2la.js";
+import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-BohXQcNt.js";
 export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };

package/dist/granular-provider.js

@@ -1,2 +1,2 @@
-import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-BshNi2la.js";
+import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-BohXQcNt.js";
 export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };

package/dist/i18n/all.js

@@ -1,4 +1,4 @@
-import { n as ru, r as en, t as es } from "../chunks/es-CsmvfESn.js";
+import { n as ru, r as en, t as es } from "../chunks/es-B4t_3Wnh.js";
 //#region src/i18n/all.ts
 var all = [
 	en,

package/dist/i18n/index.js

@@ -1,3 +1,3 @@
 import { t as GRANULARITY_I18N_KEY } from "../chunks/adapter-CAOxmn2G.js";
-import { i as GRANULARITY_I18N_BLOCK, n as ru, r as en, t as es } from "../chunks/es-CsmvfESn.js";
+import { i as GRANULARITY_I18N_BLOCK, n as ru, r as en, t as es } from "../chunks/es-B4t_3Wnh.js";
 export { GRANULARITY_I18N_BLOCK, GRANULARITY_I18N_KEY, en, es, ru };