@boobooking/dashboard-ui-components 0.13.0 → 0.15.0

package/README.md

@@ -65,42 +65,22 @@ Vue не ниже 3.5, ESM, сборщик, умеющий импорт CSS из
 Tailwind, `@tailwindcss/forms`, Inertia и какие-либо токены в CSS приложения
 пакету не нужны.
 
-Меню `DropdownButtonWithAction` стоит на Popover API браузера: Safari 17+,
-Chrome 114+, Firefox 125+. В браузерах старше меню видно в потоке всегда.
+Меню `DropdownButtonWithAction` и `HamburgerMenu`, список `SelectSingle` и
+календари `SelectDateInterval` стоят на Popover API браузера: Safari 17+,
+Chrome 114+, Firefox 125+. В браузерах старше меню, список и календари
+видны в потоке всегда.
 
 ## Компоненты
 
-Пакет экспортирует семнадцать компонентов: `Popup`, `Dot`, `PickDay`,
-`RussianMobileFilter`, `Search`, `SelectDateInterval`, `SelectSingle`,
-`SmallBadge`, `ErrorMessages`, `Closer`, `DownloadLink`,
-`ConfirmationModal`, `DropdownButtonWithAction`, `DataTable`,
+Пакет экспортирует пятнадцать компонентов: `Dot`, `RussianMobileFilter`,
+`Search`, `SelectDateInterval`, `SelectSingle`, `SmallBadge`,
+`ErrorMessages`, `DownloadLink`, `ConfirmationModal`,
+`DropdownButtonWithAction`, `HamburgerMenu`, `DataTable`,
 `NavigationMenuElement`, `PageCard`, `NotificationMessage` и плагин
 `dashboardUi`. В архив пакета (`files: ["dist"]`) исходники не попадают,
 поэтому контракт каждого компонента — здесь и в playground, а не в исходном
 коде.
 
-### Popup
-
-Всплывающее меню с оверлеем, закрывающим по клику вне, и переходом на
-открытие/закрытие. Другие компоненты пакета используют его как обёртку над
-своим содержимым — некоторые напрямую, некоторые через внутренние
-компоненты.
-
-    <popup v-model="isOpen" align="right">
-        …содержимое меню…
-    </popup>
-
-| Проп | Тип | По умолчанию | Описание |
-| --- | --- | --- | --- |
-| `modelValue` | `Boolean` | `false` | Открыто ли меню |
-| `align` | `String` | `"left"` | `"left"` или `"right"` — с какой стороны прижать меню |
-
-Событие: `update:modelValue` — при каждом открытии и закрытии, включая клик по
-оверлею.
-
-У `Popup` нет события `changed`, и это не пропуск — см. раздел
-«Почему у Popup и Dot нет события changed».
-
 ### Dot
 
 Индикатор-точка: красная или зелёная, с пульсацией или без.
@@ -113,26 +93,7 @@ Chrome 114+, Firefox 125+. В браузерах старше меню видн
 | `withPulse` | `Boolean` | `false` | Добавляет анимацию пульсации |
 
 Событий нет. Значения у `Dot` тоже нет — см. раздел
-«Почему у Popup и Dot нет события changed».
-
-### PickDay
-
-Поле выбора одной даты на Pikaday, с ластиком очистки. Pikaday загружается
-в браузере при монтировании компонента, а не при загрузке пакета, поэтому
-календарь появляется, когда загрузка закончится.
-
-    <pick-day v-model="date" placeholder-text="от" />
-
-| Проп | Тип | По умолчанию | Описание |
-| --- | --- | --- | --- |
-| `modelValue` | `String` | `""` | Текущая дата |
-| `withEraser` | `Boolean` | `true` | Показывать ли ластик очистки |
-| `placeholderText` | `String` | `""` | Текст подсказки в пустом поле |
-| `lang` | `String` | язык плагина | `"ru"` или `"en"`; календарь берёт язык при монтировании |
-
-События: `update:modelValue` — при выборе даты в календаре и при очистке
-(пустой строкой); `changed` — в тех же двух случаях, для использования наравне
-с остальными фильтрами.
+«Почему у Dot нет события changed».
 
 ### RussianMobileFilter
 
@@ -179,7 +140,10 @@ Chrome 114+, Firefox 125+. В браузерах старше меню видн
 
 ### SelectDateInterval
 
-Пара `PickDay` под одним заголовком — интервал дат «от» и «до».
+Два поля даты под одним заголовком — интервал дат «от» и «до». Дата
+выбирается в календаре Pikaday, у каждого поля — ластик очистки. Pikaday
+загружается в браузере при монтировании компонента, а не при загрузке
+пакета, поэтому календари появляются, когда загрузка закончится.
 
     <select-date-interval
         header="Период"
@@ -199,9 +163,20 @@ Chrome 114+, Firefox 125+. В браузерах старше меню видн
 | `isLoading` | `Boolean` | `false` | Индикатор загрузки в заголовке |
 | `lang` | `String` | язык плагина | `"ru"` или `"en"`; действует и на подсказки полей, и на оба календаря |
 
-События: `update:dateFrom`, `update:dateTo` — на каждый выбор в
-соответствующем `PickDay`; `changed` — когда новое значение отличается от
-переданного пропса (отдельно для каждой из двух дат).
+События: `update:dateFrom`, `update:dateTo` — на каждый выбор даты
+в соответствующем поле и на его очистку ластиком (пустой строкой);
+`changed` — когда новое значение отличается от переданного пропса
+(отдельно для каждой из двух дат).
+
+Клик по любому месту поля открывает его календарь. Календарь открывается
+в верхнем слое браузера (Popover API): его не обрезает обёртка
+с прокруткой. Он открывается под полем, левым краем по левому краю поля.
+Не поместившись снизу, он открывается вверх, если сверху места больше;
+не поместившись справа — правым краем по правому краю поля, если слева
+места больше. Выбор даты, клик вне календаря, Escape, прокрутка страницы
+и изменение размера окна закрывают календарь. Клик вне доходит до элемента
+под курсором, поэтому календарь «до» открывается тем же кликом, что
+закрывает «от».
 
 ### SelectSingle
 
@@ -226,6 +201,29 @@ Chrome 114+, Firefox 125+. В браузерах старше меню видн
 События: `update:modelValue` и `changed` — при выборе элемента (повторный
 клик по уже выбранному снимает выбор) и при очистке через ластик.
 
+С клавиатуры: пока список открыт, стрелки вверх и вниз переводят фокус по
+пунктам и страницу не прокручивают. Отсчёт идёт от выбранного пункта: вниз —
+следующий за ним, вверх — предыдущий; без выбранного вниз — первый пункт,
+вверх — последний; с краёв — по кругу. Enter или пробел выбирают пункт под
+фокусом так же, как клик, Escape закрывает список. После закрытия фокус
+возвращается на кнопку фильтра. У закрытого списка стрелки прокручивают
+страницу.
+
+Подсветка пункта — это фокус, и мышь ведёт тот же фокус: движение по пункту
+ставит фокус на него, стрелки продолжают от пункта под курсором. Подсвечен
+всегда один пункт — тот, на который последними указали клавиатура или мышь.
+
+Список открывается в верхнем слое браузера (Popover API): его не обрезает
+обёртка с прокруткой. Он открывается под полем, левым краем по левому
+краю поля. Не поместившись снизу, он открывается вверх, если сверху места
+больше; не поместившись справа — правым краем по правому краю поля, если
+слева места больше. Длинный список ограничен высотой до края окна
+и прокручивается внутри. Клик вне списка закрывает его и доходит до
+элемента под курсором: соседний фильтр открывается тем же кликом.
+Прокрутка страницы и изменение размера окна закрывают список, прокрутка
+внутри списка — нет. Открытие другого списка, календаря или меню
+закрывает предыдущее.
+
 ### SmallBadge
 
 Бейдж-пилюля с коротким текстом. Текст не переносится.
@@ -253,16 +251,6 @@ Chrome 114+, Firefox 125+. В браузерах старше меню видн
 
 Событий нет.
 
-### Closer
-
-Кнопка-крестик закрытия. Размер и положение задаёт приложение классами на
-корне: без классов размера крестик получает размер SVG по умолчанию
-(300×300).
-
-    <closer class="absolute top-0 right-0 w-8 h-8" @clicked="close" />
-
-Пропов нет. Событие: `clicked` — по клику.
-
 ### DownloadLink
 
 Ссылка на файл в виде бейджа с иконкой скачивания. Кликабелен весь бейдж.
@@ -315,32 +303,127 @@ ConfirmationModal нет v-model».
 
 ### DropdownButtonWithAction
 
-Кнопка с меню дополнительных действий: основная часть — слот `button`, стрелка
-справа открывает меню из слота `actions`. Без слота `actions` стрелки нет, и
-кнопка скругляется с обеих сторон.
-
-    <dropdown-button-with-action v-model="menuIsOpen">
-        <template #button>…основное действие…</template>
-        <template #actions>…пункты меню…</template>
-    </dropdown-button-with-action>
+Кнопка из списка действий `actions`. Первое действие — основная кнопка,
+остальные — меню за стрелкой справа. Одно действие — кнопка без стрелки;
+без действий компонент ничего не рисует.
+
+    <dropdown-button-with-action
+        v-model="menuIsOpen"
+        :actions="[
+            { label: 'Редактировать', href: route('user.edit', { user: row.getId() }) },
+            { label: 'Поменять пароль', href: route('user.password.edit', { user: row.getId() }) },
+            { label: 'Удалить', color: 'red', onSelect: () => prepareUserDelete(row) },
+        ]"
+    />
 
 | Проп | Тип | По умолчанию | Описание |
 | --- | --- | --- | --- |
+| `actions` | `Array` | `[]` | Действия, см. ниже |
 | `modelValue` | `Boolean` | `false` | Открыто ли меню |
 | `lang` | `String` | язык плагина | `"ru"` или `"en"` |
 
+Действие — объект одной из двух форм: переход (`href` без `onSelect`) или
+действие (`onSelect` без `href`). Поле со значением `undefined` считается
+отсутствующим.
+
+| Поле | Тип | Описание |
+| --- | --- | --- |
+| `label` | `String`, обязательно | Текст кнопки или пункта меню |
+| `href` | `String` | Переход: обычный клик уходит в `navigate` плагина `dashboardUi`, клик с Cmd/Ctrl/Shift и средней кнопкой — браузеру; без `navigate` — обычная ссылка |
+| `onSelect` | `Function` | Действие: вызывается без аргументов |
+| `color` | `"yellow"` или `"red"` | Цвет; без поля — обычный |
+
+Основная кнопка работает как пункт меню: переход — ссылка, действие —
+кнопка, и `onSelect` вызывает сам компонент — по клику, Enter и пробелу.
+Своего события клика у кнопки нет: странице не нужно ловить клик и
+разбираться в разметке компонента.
+
+Цвет первого действия красит основную кнопку вместе со стрелкой, цвет
+пункта меню — только этот пункт. Обычная кнопка — белая с серой рамкой,
+жёлтая и красная — светлый фон, рамка и текст своего цвета. Обычный пункт
+меню — серый текст, при подсветке серый фон; жёлтый и красный — текст
+своего цвета, при подсветке светлый фон того же цвета.
+
+Неверный список Vue отмечает предупреждением о пропе в режиме разработки,
+а компонент не падает: элементы-необъекты пропускает, кнопка без функции
+`onSelect` по клику ничего не вызывает, пункт без неё только закрывает
+меню. `null` — пустой список.
+
+Вид кнопки и пунктов задаёт компонент: страница передаёт данные, а не
+разметку, и классов не даёт. Слота `button` и поля `danger` нет с версии
+0.15.0 — см. «Обновление с 0.14»; слота `actions` — с 0.14.0, см.
+«Обновление с 0.13».
+
 Событие: `update:modelValue` — только когда меню открыл или закрыл сам
 компонент или браузер: клик по стрелке, клик вне меню, Escape, клик
-по пункту меню, прокрутка, изменение размера окна. Значение, пришедшее
+по пункту меню, прокрутка, изменение размера окна, а ещё пропажа открытого
+меню, когда действий осталось меньше двух. Значение, пришедшее
 от родителя, компонент принимает молча: ответное событие вернуло бы
 родителю его же решение. Без `v-model` меню работает само по себе.
 
 Меню открывается в верхнем слое браузера (Popover API): его не обрезает
 таблица с горизонтальной прокруткой, и оно стоит поверх страницы. Правый
-край меню — по правому краю стрелки; меню открывается вниз или вверх —
-где больше места, сужается у левого края окна и закрывается кликом
-по любому пункту, прокруткой страницы или таблицы и изменением размера
-окна. Открытие другого меню закрывает предыдущее.
+край меню — по правому краю стрелки; меню открывается под стрелкой,
+а если там не помещается — туда, где больше места, сужается у левого края
+окна и закрывается кликом по любому пункту, прокруткой страницы или
+таблицы и изменением размера окна. Открытие другого меню закрывает
+предыдущее.
+
+Пока меню открыто, стрелки вверх и вниз переводят фокус по пунктам и
+страницу не прокручивают: вниз — на первый пункт, вверх — на последний,
+дальше — по соседним, с краёв — по кругу. Enter на пункте под фокусом
+выбирает его. Подсветка пункта — это фокус, и мышь ведёт тот же фокус:
+движение по пункту ставит фокус на него, стрелки продолжают от пункта под
+курсором. Подсвечен всегда один пункт — тот, на который последними указали
+клавиатура или мышь.
+
+### HamburgerMenu
+
+Кнопка ☰ с меню из пунктов пропа `actions` — меню профиля в шапке
+дашборда. Кнопку, панель и пункты рисует компонент, страница передаёт
+только пункты. Без пунктов кнопки нет.
+
+    <hamburger-menu :actions="menuActions" />
+
+    import { router } from '@inertiajs/vue3';
+
+    computed: {
+        menuActions() {
+            return [
+                { label: 'Администраторы', href: this.route('users') },
+                { label: 'Поменять пароль', href: this.route('my.password.edit') },
+                { label: 'Выйти', onSelect: () => router.delete(this.route('logout')) },
+            ];
+        },
+    },
+
+| Проп | Тип | По умолчанию | Описание |
+| --- | --- | --- | --- |
+| `actions` | `Array` | `[]` | Пункты меню — в том же формате, что у `DropdownButtonWithAction` |
+| `lang` | `String` | язык плагина | `"ru"` или `"en"` |
+
+Пункты, их проверка и вид — как у `DropdownButtonWithAction`: переход —
+`{ label, href }`, действие — `{ label, onSelect }`, цвет —
+`color: 'yellow'` или `color: 'red'`. Выход запросом DELETE — действие:
+Inertia пакет не импортирует, `router.delete` вызывает страница.
+
+Событий и `v-model` нет: меню открывают и закрывают кнопка, клик вне меню,
+Escape, клик по пункту, прокрутка и изменение размера окна. Меню
+открывается в верхнем слое браузера (Popover API), правым краем по правому
+краю кнопки, под ней, а если там не помещается — туда, где больше места.
+Открытие другого меню закрывает предыдущее.
+
+Это исключение из правила «состояние, которое компонент меняет сам, — через
+`v-model`»: шапке не нужно ни открывать меню извне, ни знать, открыто ли
+оно. Меню строк таблицы на `DropdownButtonWithAction` страница держит под
+`v-model`, чтобы знать, какая строка выбрана; у меню профиля такой нужды нет.
+`v-model`, переданный на `<hamburger-menu>`, в контракт не входит. Атрибуты
+с `<hamburger-menu>` — `class`, `style`, `data-*` — ложатся на обёртку
+кнопки.
+
+Клавиатура и мышь — как в меню `DropdownButtonWithAction`: пока меню
+открыто, стрелки вверх и вниз переводят фокус по пунктам, Enter выбирает
+пункт под фокусом; подсветка пункта — это фокус, и мышь ведёт тот же фокус.
 
 ### DataTable
 
@@ -621,15 +704,16 @@ sm:rounded-lg`, `box-sizing: border-box`. Отступов у неё нет: ф
 | `ConfirmationModal` — кнопка отмены | Отмена | Cancel |
 | `DownloadLink` — подпись | Скачать | Download |
 | `DropdownButtonWithAction` — подпись стрелки для скринридера | Открыть меню | Open menu |
-| `PickDay` — месяцы, дни недели, кнопки календаря | по-русски | in English |
+| `HamburgerMenu` — подпись кнопки для скринридера | Открыть меню | Open menu |
+| `SelectDateInterval` — месяцы, дни недели, кнопки календарей | по-русски | in English |
 | `SelectDateInterval` — подсказки полей | от / до | from / to |
 | `DataTable` — пагинация | Предыдущая / Следующая / Показаны результаты X - Y из Z | Previous / Next / Showing X - Y of Z results |
 | `PageCard` — доступное имя крестика | Назад | Back |
 | `NotificationMessage` — подпись крестика для скринридера | Закрыть | Close |
 
 Формат даты — `дд.мм.гггг` в обоих языках: это формат значения, а не текст.
-Неделя начинается с понедельника. Календарь `PickDay` берёт язык при
-монтировании: смена языка после монтирования в нём не отражается.
+Неделя начинается с понедельника. Календари `SelectDateInterval` берут язык
+при монтировании: смена языка после монтирования в них не отражается.
 
 ## SSR
 
@@ -640,8 +724,8 @@ Inertia SSR), а серверная разметка гидратируется
 - `PageCard` на сервере рисует крестик, только если задан `fallback-url`:
   адрес возврата известен только в браузере, и крестик, ведущий на него,
   появляется после монтирования;
-- `PickDay` загружает Pikaday в браузере при монтировании: календарь
-  появляется, когда загрузка закончится;
+- `SelectDateInterval` загружает Pikaday в браузере при монтировании:
+  календари появляются, когда загрузка закончится;
 - остальные компоненты рендерятся на сервере так же, как в браузере.
 
 ## Правила API пакета
@@ -660,9 +744,9 @@ Inertia SSR), а серверная разметка гидратируется
   для него это и есть обычный `v-model`.
 - Булев проп называется `is*`, если описывает состояние компонента
   (`isRequired`, `isLoading`), и `with*`, если описывает необязательную
-  возможность (`withEraser` у `PickDay`, `withPulse` у `Dot`).
+  возможность (`withPulse` у `Dot`).
 - Проп-перечисление — ограниченный набор строковых значений, как `color` у
-  `Dot` или `align` у `Popup`, — обязательно имеет `validator`,
+  `Dot` или `variant` у `DataTable`, — обязательно имеет `validator`,
   отклоняющий значения вне списка.
 - Компонент не падает ни на каком значении пропа. `null` и `undefined` там,
   где ждут строку, объект или массив, он считает пустыми: пустой строкой,
@@ -681,8 +765,11 @@ Inertia SSR), а серверная разметка гидратируется
   `followLink($event, href)` миксина `withNavigation`, который отдаёт его
   `navigate` плагина. Ни Inertia, ни роутер пакет не импортирует. Исключение —
   `DownloadLink`: это обычная ссылка браузера, скачивающая файл, и через
-  `navigate` она не идёт. Через `navigate` ходят `DataTable` (его пагинация) и
-  `NavigationMenuElement`.
+  `navigate` она не идёт. Через `navigate` ходят `DataTable` (его пагинация),
+  `NavigationMenuElement`, основная кнопка-переход и пункты-переходы
+  `DropdownButtonWithAction` и пункты-переходы `HamburgerMenu`. Крестик
+  `PageCard` — кнопка, а не ссылка: адрес возврата он тоже отдаёт
+  `navigate`.
 - Компонент обращается к `window`, `document` и другим API браузера только
   в `mounted()`, `beforeUnmount()` и обработчиках событий; загрузка модуля,
   `data()`, `computed` и рендер работают без браузера. Так пакет
@@ -690,31 +777,25 @@ Inertia SSR), а серверная разметка гидратируется
   `tests/ssr.test.js` и `tests/hydration.test.js`: каждый экспортируемый
   компонент обязан иметь фикстуру в `tests/ssrFixtures.js`.
 
-## Почему у Popup и Dot нет события changed
+## Почему у Dot нет события changed
 
 `changed` означает не «значение изменилось», а «пользователь закончил
 выбор, можно обновлять выдачу» — фильтры дашборда эмитят его как сигнал к
 перезапросу данных.
 
-У `Popup` такого момента нет: он не хранит значение фильтра, а лишь
-управляет видимостью меню, и открытие меню — не повод перезагружать
-данные. Момент, когда выбор действительно завершён, отслеживает
-компонент, который использует `Popup` — сам или через внутренние
-компоненты пакета, — `changed` эмитит он.
-
-У `Dot` события нет по другой причине: у него нет значения вообще, поэтому
-эмитить не о чем.
+У `Dot` такого момента нет: у него нет значения вообще, поэтому эмитить
+не о чем.
 
-Отсутствие `changed` у `Popup` и `Dot` — сознательное решение, а не
-пропуск.
+Отсутствие `changed` у `Dot` — сознательное решение, а не пропуск.
 
 ## Почему у ConfirmationModal нет v-model
 
 Правило пакета — значение через `v-model` — относится к состоянию, которое
-компонент меняет сам: `Popup` закрывается по клику вне, `SelectSingle` меняет
-выбор. `ConfirmationModal` свою видимость не меняет никогда. Обе кнопки только
-сообщают родителю решение пользователя, а закрыть модалку, оставить её открытой
-на время запроса или открыть следующую — решает родитель.
+компонент меняет сам: меню `DropdownButtonWithAction` закрывается по клику
+вне, `SelectSingle` меняет выбор. `ConfirmationModal` свою видимость не меняет
+никогда. Обе кнопки только сообщают родителю решение пользователя, а закрыть
+модалку, оставить её открытой на время запроса или открыть следующую — решает
+родитель.
 
 `v-model` обещал бы двустороннюю связь, которой нет, поэтому видимость
 передаётся пропом `isOpen`.
@@ -723,7 +804,7 @@ Inertia SSR), а серверная разметка гидратируется
 
     npm run playground
 
-Поднимает демо-страницы со всеми семнадцатью компонентами в двух окружениях:
+Поднимает демо-страницы со всеми пятнадцатью компонентами в двух окружениях:
 голом (без Tailwind и стилей приложения) и в окружении приложения (с
 Tailwind, `@tailwindcss/forms` и типографикой, как у потребителя). Это
 основной способ посмотреть, как компоненты выглядят и ведут себя, а не
@@ -739,6 +820,182 @@ Tailwind, `@tailwindcss/forms` и типографикой, как у потре
 Правила номера телефона в `RussianMobileFilter` — российские; язык текстов
 задаётся, см. «Языки».
 
+## Обновление с 0.14
+
+- Меню профиля в шапке переходит с `Popup` на `HamburgerMenu`: кнопку ☰,
+  панель и пункты рисует компонент, страница передаёт только пункты. Было:
+
+      <div class="relative">
+          <div>
+              <button
+                  @click="menuDropdownOpen = !menuDropdownOpen"
+                  :class="{ 'z-20': menuDropdownOpen }"
+                  class="relative inline-flex items-center justify-center p-2 rounded-md text-gray-400 …"
+                  aria-label="Main menu"
+                  aria-expanded="false"
+              >
+                  <svg class="h-6 w-6" …>…</svg>
+              </button>
+          </div>
+          <popup class="origin-top-right right-0" v-model="menuDropdownOpen" align="right">
+              <div class="mt-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-black/5" role="menu" …>
+                  <Link :href="route('users')" as="button" class="…" role="menuitem">Администраторы</Link>
+                  <Link :href="route('logout')" method="delete" as="button" class="…" role="menuitem">Выйти</Link>
+              </div>
+          </popup>
+      </div>
+
+  Стало:
+
+      <hamburger-menu :actions="menuActions" />
+
+      import { router } from '@inertiajs/vue3';
+
+      computed: {
+          menuActions() {
+              return [
+                  { label: 'Администраторы', href: this.route('users') },
+                  { label: 'Выйти', onSelect: () => router.delete(this.route('logout')) },
+              ];
+          },
+      },
+
+  Пункты собираются в `computed`: в шаблоне импорт `router` недоступен.
+  Выход запросом DELETE — действие с `router.delete`, тот же вызов, что
+  делал `<Link method="delete">`. `menuDropdownOpen` и импорт `Popup`
+  больше не нужны.
+- Пункты-переходы `HamburgerMenu` — ссылки `<a href>`, а не `<Link>`:
+  обычный клик уходит в `navigate` плагина `dashboardUi` (для Inertia —
+  `router.visit`), Cmd-клик и средняя кнопка открывают новую вкладку. Без
+  `navigate` переход идёт полной загрузкой страницы — подключите его
+  к плагину (см. «Подключение к приложению»).
+- `Popup`, `PickDay` и `Closer` больше не экспортируются: это внутренние
+  части `SelectSingle`, `SelectDateInterval` и `PageCard`. Импорт любого
+  из них ломает сборку: «… is not exported by …».
+- Список `SelectSingle` и календари `SelectDateInterval` открываются
+  в верхнем слое браузера, как меню. Клик вне закрывает их и доходит до
+  элемента под курсором, прокрутка страницы закрывает, длинный список
+  прокручивается внутри. Без Popover API (Safari до 17, Chrome до 114,
+  Firefox до 125) они видны всегда.
+- Меню `DropdownButtonWithAction` и `HamburgerMenu` открывается под
+  кнопкой, а вверх — только если снизу не помещается и сверху места
+  больше. В 0.14 меню в нижней половине окна открывалось вверх всегда.
+- `DropdownButtonWithAction` строится из списка действий: первое действие —
+  основная кнопка, остальные — меню. Слота `button` нет: переданный слот
+  не рисуется, а в режиме разработки в консоль уходит предупреждение.
+  Отступы и шрифт основной кнопки задаёт компонент (`px-4 py-2 text-sm
+  font-medium`). Было:
+
+      <dropdown-button-with-action
+          :actions="[
+              { label: 'Поменять пароль', href: route('user.password.edit', { user: row.getId() }) },
+              { label: 'Удалить', danger: true, onSelect: () => prepareUserDelete(row) },
+          ]"
+      >
+          <template v-slot:button>
+              <Link class="block px-4 py-2 text-sm font-medium text-gray-700" :href="route('user.edit', { user: row.getId() })">
+                  Редактировать
+              </Link>
+          </template>
+      </dropdown-button-with-action>
+
+  Стало:
+
+      <dropdown-button-with-action
+          :actions="[
+              { label: 'Редактировать', href: route('user.edit', { user: row.getId() }) },
+              { label: 'Поменять пароль', href: route('user.password.edit', { user: row.getId() }) },
+              { label: 'Удалить', color: 'red', onSelect: () => prepareUserDelete(row) },
+          ]"
+      />
+
+- Кнопка без меню — одно действие. Было:
+
+      <dropdown-button-with-action>
+          <template v-slot:button>
+              <Link class="block px-4 py-2 text-sm font-medium text-gray-700" :href="showGroupLink(row)">
+                  Посмотреть
+              </Link>
+          </template>
+      </dropdown-button-with-action>
+
+  Стало:
+
+      <dropdown-button-with-action :actions="[{ label: 'Посмотреть', href: showGroupLink(row) }]" />
+
+- Основное действие-функция больше не ловится на корне компонента:
+  `onSelect` первого действия вызывает сам компонент — по клику, Enter и
+  пробелу. Было:
+
+      <dropdown-button-with-action
+          :actions="[{ label: 'Зафиксировать как неотправленное', onSelect: () => askUnsent(row) }]"
+          v-on:click="retryFromDropdown($event, row)"
+      >
+          <template v-slot:button>
+              <span class="block px-2 py-1 text-sm text-gray-700">Отправить заново</span>
+          </template>
+      </dropdown-button-with-action>
+
+      retryFromDropdown(event, sms) {
+          if (event.currentTarget.firstElementChild.contains(event.target)) {
+              this.askRetry(sms);
+          }
+      },
+
+  Стало:
+
+      <dropdown-button-with-action
+          :actions="[
+              { label: 'Отправить заново', onSelect: () => askRetry(row) },
+              { label: 'Зафиксировать как неотправленное', onSelect: () => askUnsent(row) },
+          ]"
+      />
+
+  `retryFromDropdown` удаляется: он полагался на разметку пакета.
+- Поле `danger` заменено цветом: `danger: true` → `color: 'red'`. Пункт
+  с `danger` рисуется обычным, а в режиме разработки в консоль уходит
+  предупреждение с заменой. Новый цвет — `color: 'yellow'`. Цвета есть
+  и у пунктов `HamburgerMenu`.
+- Красный пункт меню — мягкий: красный текст, при подсветке светлый
+  красный фон, а не заливка `red-400` с белым текстом.
+- `0.15.0` не подтянется по `^0.14.0`: для версий `0.x` знак `^` пропускает
+  только патчи. Обновление — `npm install @boobooking/dashboard-ui-components@^0.15.0`.
+
+## Обновление с 0.13
+
+- `DropdownButtonWithAction`: пункты меню передаются пропом `actions`,
+  слот `actions` убран, и страница больше не оформляет пункты — вид задаёт
+  компонент. Было:
+
+      <template v-slot:actions>
+          <Link
+              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              :href="route('user.password.edit', {'user': row.getId()})"
+          >
+              Поменять пароль
+          </Link>
+          <a
+              href="#"
+              @click.prevent="prepareUserDelete(row)"
+              class="block px-4 py-2 text-sm bg-red-400 hover:bg-red-500 text-white"
+              role="menuitem"
+          >
+              Удалить
+          </a>
+      </template>
+
+  Стало — проп на самом `dropdown-button-with-action`:
+
+      :actions="[
+          { label: 'Поменять пароль', href: route('user.password.edit', { user: row.getId() }) },
+          { label: 'Удалить', danger: true, onSelect: () => prepareUserDelete(row) },
+      ]"
+
+  Меню со старым слотом остаётся без пунктов и без стрелки; в режиме
+  разработки компонент пишет об этом в консоль.
+- `0.14.0` не подтянется по `^0.13.0`: для версий `0.x` знак `^` пропускает
+  только патчи. Обновление — `npm install @boobooking/dashboard-ui-components@^0.14.0`.
+
 ## Обновление с 0.12
 
 - Крестик `PageCard` больше не ходит по истории: подключите `currentUrl`
@@ -787,7 +1044,7 @@ Tailwind, `@tailwindcss/forms` и типографикой, как у потре
 `ConfirmationModal`.
 
 Ресет пакета распространяется и на содержимое слотов — разметку приложения
-внутри `Popup` и `DropdownButtonWithAction`. Ресет лежит в слое
+внутри `DropdownButtonWithAction`. Ресет лежит в слое
 `components`, поэтому внутри слота он сильнее всего, что приложение объявило
 в слое `base`: preflight, `@tailwindcss/forms` и собственных умолчаний
 приложения. В слоте он задаёт:
@@ -811,10 +1068,6 @@ Tailwind, `@tailwindcss/forms` и типографикой, как у потре
 checked:bg-current checked:border-transparent focus:ring-2
 focus:ring-offset-2`.
 
-У `Closer` нет доступного имени, и он выключен из порядка табуляции
-(`tabindex="-1"`): скринридер его не назовёт, а с клавиатуры до него не
-добраться.
-
 `ConfirmationModal` не переносит фокус внутрь при открытии, не удерживает его
 внутри, не возвращает на прежнее место после закрытия и не закрывается по
 Escape.