@rt-tools/ui-kit-v2 0.29.1 → 0.31.0

package/src/lib/components/tree/CONTEXT.md

@@ -28,7 +28,7 @@
 ## Главное, что нужно знать
 
 **Дерево считает тот же модуль, что дерево вариантов у `rt-select` и `rt-multiselect`.** Строки,
-листья, отметки ветвей, отбор по слову и боковые стрелки — функции `rt-select-tree.ts`. Свою копию
+листья, отметки ветвей, отбор по слову и боковые стрелки — функции `rt-option-tree.ts` в ядре кита. Свою копию
 логики дерево не держит: две копии разошлись бы на первой правке.
 
 **Узлы не меняются никогда.** Выбор живёт в `value`, каждый клик даёт новый массив. В каскаде

package/src/rich-editor/lib/components/ai-chat/CONTEXT.md

@@ -56,7 +56,7 @@
 - `--rt-ai-chat-content-max-width` (по умолчанию `100%`) становится боковым отступом `feed`,
   `composer` и `disclaimer`: колонка стоит по центру беседы, полоса прокрутки ленты остаётся у её
   края. `max-inline-size` на самой ленте увёл бы полосу прокрутки внутрь колонки.
-- Подсветка совпадений поиска по беседам — `splitSideMenuTitle`.
+- Подсветка совпадений поиска по беседам — `rtMatchParts` из ядра кита.
 - Строки-превью пустого списка бесед — `emptyPreviewIcons`, по умолчанию `sparkle`, `bot`, `sparkle`:
   беседы идут с ассистентом, а не с людьми. Вход уходит в `rt-thread-list` как есть.
 - Ответ рисует внутренний `rt-ai-chat-answer` (папка `answer/`): без него шаблон организма

package/src/styles/_breakpoints.scss

@@ -6,16 +6,30 @@ $rt-bp-md: 768px !default;
 $rt-bp-lg: 1080px !default;
 $rt-bp-xl: 1380px !default;
 
-// Место страницы — контейнер с именем `rt-place`. Его объявляют корень документа и
-// `rt-container`: компонент внутри контейнера считает порог от его ширины, вне его — от корня,
-// то есть от окна. Имя записано буквами: линтер стилей не читает имя из переменной.
+// Место страницы — контейнер с именем `rt-place`, его объявляет `rt-container`. Компонент внутри
+// каркаса считает порог от его ширины. На странице без каркаса порог считается от окна: запасной
+// `@media` стоит под предком `html:not(:has(.rt-container))`. Условие стоит предком, а не на самом
+// узле, чтобы вложенные `&__элемент` в `@content` строились как раньше. Корень документа местом не
+// объявляется: контейнер на корне или на `body` не даёт фону `body` растечься на всё окно. Имя
+// записано буквами: линтер стилей не читает имя из переменной.
+
+// Страница без каркаса: `:where` не добавляет условию специфичности.
+$-no-place: ':where(html:not(:has(.rt-container)))';
 
 // Порог по ширине места: `@include bp.place-max(bp.$rt-bp-md) { … }`. Окна и панели поверх
-// экрана сюда не идут: они лежат вне места страницы и остаются на `@media`.
+// экрана сюда не идут: они лежат вне места страницы и остаются на `@media`. Внутри порога `&`
+// встречается в селекторе один раз: каждое `&` несёт запасное условие, и второе повторяет его
+// внутри первого узла, где оно не совпадает никогда.
 @mixin place-max($width) {
     @container rt-place (width <= #{$width}) {
         @content;
     }
+
+    @media (width <= #{$width}) {
+        @include -on-page-without-place {
+            @content;
+        }
+    }
 }
 
 // Шире порога по месту — пара к `place-max`.
@@ -23,4 +37,23 @@ $rt-bp-xl: 1380px !default;
     @container rt-place (width > #{$width}) {
         @content;
     }
+
+    @media (width > #{$width}) {
+        @include -on-page-without-place {
+            @content;
+        }
+    }
+}
+
+// Внутри селектора условие встаёт предком родителя, в слое без селектора — предком содержимого.
+@mixin -on-page-without-place {
+    @if & {
+        #{$-no-place} & {
+            @content;
+        }
+    } @else {
+        #{$-no-place} {
+            @content;
+        }
+    }
 }

package/src/styles/_index.scss

@@ -43,10 +43,6 @@
 // раскладку у себя, ради чего словарь и переехал в кит.
 @forward './form';
 
-// Запасное место страницы на корне документа: без него порог по месту у компонента вне
-// `rt-container` не нашёл бы контейнера и не сработал.
-@forward './place';
-
 // Стили директивы кнопки: своего представления у директивы нет, поэтому её `.scss` не
 // подключён ни одним `styleUrl`. Без этой строки потребитель, взявший `tokens.css` по
 // инструкции README, получает `rtButton`, нарисованный браузерной кнопкой.

package/styles/tokens.css

@@ -6799,14 +6799,6 @@ html.rt-theme-dark.rt-preset-material {
     }
   }
 }
-/* Корень документа — запасное место страницы. Компонент кита считает пороги от ближайшего
-   места по имени: внутри `rt-container` от его ширины, вне его от корня, а ширина корня равна
-   окну. Так потребитель без контейнера видит пороги окна, как раньше. Объявление стоит вне
-   слоя, как и свойства на корне: потребитель перебивает его порядком. */
-:root {
-  container: rt-place/inline-size;
-}
-
 @layer rt-kit.components {
   .rt-button {
     /* Высота приходит общей шкалой контролов, а не своим числом: кнопка, поле и

package/types/rt-tools-ui-kit-v2-autocomplete.d.ts

@@ -1,7 +1,7 @@
 import { BooleanInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
 import { ElementRef, InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal, TemplateRef, WritableSignal } from "@angular/core";
-import { IRtIcon, TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
+import { IRtIcon, RtOptionList, TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
 import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
 import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
@@ -39,8 +39,10 @@ export declare class RtAutocompleteComponent<TItem> extends RtFormControlBase<TI
   protected readonly popover: Signal<RtPopoverDirective>;
   protected readonly fieldEl: Signal<ElementRef<HTMLInputElement> | undefined>;
   protected readonly inputText: WritableSignal<string>;
-  protected readonly activeIndex: WritableSignal<number>;
   protected readonly isOpen: Signal<boolean>;
+  /** Клавиатура списка: подсветка, клавиши открытия, id для `aria-activedescendant`, прокрутка к опции. */
+  protected readonly optionList: RtOptionList;
+  protected readonly activeIndex: WritableSignal<number>;
   /** Идентификатор подсвеченной опции — тот же, что уходит в `aria-activedescendant`. */
   protected readonly activeOptionId: Signal<string | null>;
   protected readonly hasValue: Signal<boolean>;
@@ -57,7 +59,6 @@ export declare class RtAutocompleteComponent<TItem> extends RtFormControlBase<TI
   }> | null>;
   readonly complete: OutputEmitterRef<IRtAutocomplete.CompleteEvent>;
   readonly itemSelect: OutputEmitterRef<TItem>;
-  constructor();
   writeValue(value: TItem | null): void;
   setDisabledState(disabled: boolean): void;
   protected getEmptyValue(): TItem | null;

package/types/rt-tools-ui-kit-v2-core.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { EnvironmentProviders, InjectionToken, InputSignal, InputSignalWithTransform, OnDestroy, OutputEmitterRef, PipeTransform, Signal } from "@angular/core";
+import { EnvironmentProviders, InjectionToken, InputSignal, InputSignalWithTransform, OnDestroy, OutputEmitterRef, PipeTransform, Signal, WritableSignal } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { IFilterModel, ISortModel, TFilterOperatorType } from "@rt-tools/utils";
 import { MonoTypeOperatorFunction, Observable } from "rxjs";
@@ -864,6 +864,160 @@ export declare class RtKitLabelPipe implements PipeTransform {
   static ɵfac: i0.ɵɵFactoryDeclaration<RtKitLabelPipe, never>;
   static ɵpipe: i0.ɵɵPipeDeclaration<RtKitLabelPipe, "rtKitLabel", true>;
 }
+/**
+ * Держит подсвеченную клавишами опцию в видимой части панели.
+ *
+ * Панель списка ограничена по высоте, и длинный список прокручивается внутри неё. Клавиши двигают
+ * подсветку, но фокус остаётся на поле: браузер сам панель не прокручивает, и подсветка уходила
+ * за нижний край — человек выбирал Enter'ом то, чего не видел. После каждой отрисовки, в которой
+ * сменилась подсвеченная опция, она прокручивается ровно настолько, чтобы встать в панель.
+ *
+ * Панель рисуется в наложении, вне поддерева семьи, поэтому опция ищется в документе по своему
+ * идентификатору — тому же, что стоит в `aria-activedescendant`. На сервере отрисовки нет, и
+ * эффект не выполняется; среда без `scrollIntoView` пропускается.
+ *
+ * Зовётся в контексте внедрения — полем или конструктором семьи.
+ *
+ * @param activeOptionId идентификатор подсвеченной опции; `null` — подсветки нет или панель закрыта
+ */
+export declare function rtScrollActiveOptionIntoView(activeOptionId: () => string | null): void;
+/** Кусок подписи: текст и то, совпал ли он с запросом. */
+export interface IRtMatchPart {
+  text: string;
+  matched: boolean;
+}
+/**
+ * Подпись, разрезанная по словам запроса тем же правилом, что и отбор: совпавшие куски отмечены.
+ *
+ * Отмечаются все вхождения каждого слова, а пересёкшиеся совпадения сливаются в один кусок. Куски
+ * режутся из оригинала — регистр остаётся тем, каким его написал потребитель. Подпись, длина
+ * которой меняется от смены регистра, остаётся одним куском без отметки: места совпадений в ней не
+ * совпали бы с местами в оригинале.
+ */
+export declare function rtMatchParts(name: string, query: string): IRtMatchPart[];
+/** Что делать по клавише в открытом списке. `none` — клавиша не списка, её не трогают. */
+export type TRtOptionListAction = 'next' | 'previous' | 'first' | 'last' | 'choose' | 'close' | 'side' | 'none';
+/** Чем поле отличается от соседних: число опций, отключённые, клавиши выбора, боковые стрелки. */
+export interface IRtOptionListConfig {
+  /** Идентификатор панели: из него собирается id опции для `aria-activedescendant`. */
+  readonly panelId: () => string;
+  readonly isOpen: () => boolean;
+  readonly count: () => number;
+  /** Отключённую опцию стрелки проходят. Без функции отключённых нет. */
+  readonly isDisabled?: (index: number) => boolean;
+  /** Клавиши выбора подсвеченной опции. Пробел выбирает там, где он не печатает. */
+  readonly chooseKeys: ReadonlySet<string>;
+  /** Работают ли боковые стрелки: у дерева вариантов да. */
+  readonly sideKeys: boolean;
+  /** Ведут ли Home и End к краям списка. В текстовом поле они остаются у курсора. */
+  readonly edgeKeys: boolean;
+}
+/**
+ * Клавиатура списка вариантов — общая для выбора из списка, множественного выбора и
+ * автодополнения. Фокус остаётся на поле, клавиши двигают подсветку, а читалка экрана узнаёт её
+ * по `aria-activedescendant`.
+ *
+ * Создаётся в контексте внедрения — полем семьи: прокрутка к подсвеченной опции живёт эффектом
+ * отрисовки. Что делать по выбору, закрытию и боковой стрелке, решает семья.
+ */
+export declare class RtOptionList {
+  #private;
+  /** Подсвеченная опция; `-1` — подсветки нет. */
+  readonly activeIndex: WritableSignal<number>;
+  /** Идентификатор подсвеченной опции — тот же, что уходит в `aria-activedescendant`. */
+  readonly activeOptionId: Signal<string | null>;
+  constructor(config: IRtOptionListConfig);
+  /** Открывает ли клавиша закрытый список. */
+  opensBy(key: string): boolean;
+  /** Что делать по клавише в открытом списке. */
+  actionOf(key: string): TRtOptionListAction;
+  /** Ведёт подсветку на шаг вперёд или назад по кругу, мимо отключённых опций. */
+  move(delta: number): void;
+  /** Ведёт подсветку на первую опцию, мимо отключённых. */
+  first(): void;
+  /** Ведёт подсветку на последнюю опцию, мимо отключённых. */
+  last(): void;
+  /** Снимает подсветку: список закрыт или набор опций сменился. */
+  reset(): void;
+}
+/**
+ * Дерево вариантов выбора: общий вид опции и видимой строки для всех семей, что раскладывают
+ * варианты деревом. Generic-параметр `TValue` повторяет тип значения, который сидит в опциях.
+ */
+export declare namespace IRtOptionTree {
+  /** Одна опция. */
+  interface Option<TValue> {
+    label: string;
+    value: TValue;
+    disabled?: boolean;
+    /** Дети опции того же вида. Хотя бы одна опция с детьми делает список деревом. */
+    children?: ReadonlyArray<Option<TValue>>;
+  }
+  /** Видимая строка дерева: опция, её уровень и то, ветка ли она и раскрыта ли. */
+  interface Row<TValue> {
+    readonly option: Option<TValue>;
+    readonly level: number;
+    readonly branch: boolean;
+    readonly open: boolean;
+    readonly parent: TValue | null;
+  }
+  /** Сколько включённых листьев ветки выбрано: все, часть или ни одного. */
+  type TBranchState = 'all' | 'some' | 'none';
+  /** Что делать по боковой стрелке: какую ветку переключить и куда увести подсветку. */
+  interface SideKeyAnswer<TValue> {
+    readonly toggle: TValue | null;
+    readonly index: number;
+  }
+}
+/**
+ * Дерево вариантов — общее для выбора из списка, множественного выбора и деревьев кита.
+ *
+ * Все они раскладывают, ищут и считают дерево одинаково, поэтому это чистые функции в одном
+ * месте: копии разошлись бы на первой правке. Состояние — какие ветки раскрыты — живёт в семье,
+ * здесь только расчёт по нему.
+ */
+type TOption<TValue> = IRtOptionTree.Option<TValue>;
+type TRow<TValue> = IRtOptionTree.Row<TValue>;
+/** Список — дерево, если хоть у одной опции есть дети. Плоский список рисуется как прежде. */
+export declare function rtTreeIsTree<TValue>(options: ReadonlyArray<TOption<TValue>>): boolean;
+/** Опция по значению на любой глубине. */
+export declare function rtTreeFind<TValue>(options: ReadonlyArray<TOption<TValue>>, value: TValue): TOption<TValue> | undefined;
+/**
+ * Включённые листья под опцией; у самого листа — он сам. Отключённая ветка не отдаёт никого: её
+ * листья выбрать нельзя, как и её саму.
+ */
+export declare function rtTreeLeaves<TValue>(option: TOption<TValue>): ReadonlyArray<TValue>;
+/** Сколько включённых листьев ветки выбрано. Флажок ветки выводится из этого, а не хранится. */
+export declare function rtTreeBranchState<TValue>(option: TOption<TValue>, chosen: ReadonlyArray<TValue>): IRtOptionTree.TBranchState;
+/** Ветки, под которыми лежит выбранное значение: они раскрыты, когда список открывается. */
+export declare function rtTreeOpenFor<TValue>(options: ReadonlyArray<TOption<TValue>>, chosen: ReadonlyArray<TValue>): ReadonlySet<TValue>;
+/**
+ * Видимые строки по уровням. Без поискового слова раскрыты ветки из `open`. Со словом строка
+ * остаётся, если совпала она сама или кто-то под ней, и путь к совпадению показан раскрытым.
+ * Ветка, совпавшая сама, держит детей такими, какими они были.
+ */
+export declare function rtTreeRows<TValue>(options: ReadonlyArray<TOption<TValue>>, open: ReadonlySet<TValue>, rawTerm?: string): ReadonlyArray<TRow<TValue>>;
+/**
+ * Ответ на боковую стрелку. Вправо: свёрнутая ветка раскрывается, раскрытая уводит подсветку на
+ * первого ребёнка. Влево: раскрытая ветка сворачивается, иначе подсветка уходит на родителя.
+ */
+export declare function rtTreeSideKey<TValue>(rows: ReadonlyArray<TRow<TValue>>, index: number, key: string): IRtOptionTree.SideKeyAnswer<TValue>;
+/** Набор раскрытых веток с переключённой одной. */
+export declare function rtTreeToggle<TValue>(open: ReadonlySet<TValue>, value: TValue): ReadonlySet<TValue>;
+/**
+ * Правило совпадения поиска — одно на весь кит: каждое слово запроса должно найтись в тексте, в любом
+ * порядке, без учёта регистра, а «ё» равна «е». По нему отбирают строки боковое меню, обход дерева,
+ * динамический выбор и выбор из дерева, и по нему же подсветка режет подпись.
+ */
+/**
+ * Текст в том виде, в каком его сравнивает поиск: нижний регистр и «е» на месте «ё». Замена буквы
+ * длину не меняет, поэтому места совпадений в приведённом тексте — те же места в исходном.
+ */
+export declare function rtSearchFold(text: string): string;
+/** Слова запроса в приведённом виде, без пустых. Запрос из одних пробелов слов не даёт. */
+export declare function rtSearchWords(query: string): string[];
+/** Совпадает ли текст с запросом: каждое слово запроса стоит в тексте. Пустой запрос совпадает со всем. */
+export declare function rtSearchMatches(text: string, query: string): boolean;
 /** Порог узкого вида — тот же, что у `$rt-bp-lg` в стилях кита. */
 export declare const RT_NARROW_WIDTH: number;
 /**