@epam/ai-dial-ui-kit 0.16.0-dev.44 → 0.16.0-dev.46

package/README.md

@@ -86,7 +86,7 @@ function App() {
 
 ### Optional: Markdown Components CSS
 
-If you're using markdown-related components (`DialMarkdownEditor` or `DialMarkdownEditorContainer`), you need to import the required CSS files globally in your application (e.g., in your root layout or main entry point):
+If you're using the `MarkdownEditor` (loaded through `LazyMarkdownEditor`), you need to import the required CSS files globally in your application (e.g., in your root layout or main entry point):
 
 ```tsx
 import '@uiw/react-markdown-preview/markdown.css';
@@ -309,8 +309,6 @@ breaking change and goes through the migration-guide process.
 | `dropdownSearch`    | `dial-kit-dropdown-search`        | The search row above the item list of a `searchable` `Dropdown`                                  |
 | `menuItem`          | `dial-kit-menuitem`               | One overlay row: a dropdown item, a `Select` option, a submenu trigger or child                   |
 | `menuItemCheck`     | `dial-kit-menuitem-check`         | The trailing check of a chosen `MenuItemMark.Check` row                                          |
-| `dropdownIcon`      | `dial-kit-dropdown-icon`          | The primary icon of a `DialDropdownIcon` trigger                                                 |
-| `dropdownIconCaret` | `dial-kit-dropdown-icon-caret`    | Its caret badge. Absent when `showCaret` is `false`                                              |
 | `tooltip`           | `dial-kit-tooltip`                | The bubble of a `Tooltip`                                                                        |
 | `interactiveTooltip` | `dial-kit-interactive-tooltip`   | The panel of an `InteractiveTooltip`                                                             |
 | `ellipsisTooltip`   | `dial-kit-ellipsis-tooltip`       | The text element of an `EllipsisTooltip`, which is also its trigger                              |
@@ -385,9 +383,8 @@ they render: `ThemeScope` (a `display: contents` wrapper), `MultiSelectTags`
 (`Tag`s), and `TooltipContainer` / `TooltipTrigger`.
 
 Two neighbouring elements are reached through props instead, and keep being: a
-`Dropdown`'s floating panel takes `listClassName`, a `Popup`'s backdrop takes
-`overlayClassName`, and the `DialDropdownIcon` trigger button takes
-`buttonClassName`.
+`Dropdown`'s floating panel takes `listClassName`, and a `Popup`'s backdrop
+takes `overlayClassName`.
 
 ## ♿ Accessibility
 
@@ -500,12 +497,12 @@ npm install @epam/ai-dial-ui-kit
 npm install react react-dom
 ```
 
-Add the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`
-subpath. They are optional peers, so `npm install` stays quiet without them, and
-the kit only reaches for them when a `Lazy*` editor actually mounts:
+Add the editor package only if you use the Markdown editor
+(`LazyMarkdownEditor`). It is an optional peer, so `npm install` stays quiet
+without it, and the kit only reaches for it when the editor actually mounts:
 
 ``` bash
-npm install monaco-editor @monaco-editor/react @uiw/react-md-editor
+npm install @uiw/react-md-editor
 ```
 
 2. Import style in the root layout of the project:

package/dist/CHANGELOG.md

@@ -17,15 +17,18 @@ Versions match the git tags on the `development` branch.
 - **`styles.css` — Tailwind v4 preflight and browser baseline** — the stylesheet's preflight reaches every element on the host page, and v4's differs: `input`, `select` and `textarea` get a transparent background and no corner radius, `margin` and `padding` reset on every element, and the `hidden` attribute wins over a display utility. The v3 placeholder colour, the pointer cursor on buttons and the centred `<dialog>` are kept. The stylesheet now targets Safari 16.4+, Chrome 111+ and Firefox 128+. Tailwind v3's output already used native CSS nesting, so for most hosts this changes nothing.
   See [migration guide](migration-guides/0.16.0/tailwind-v4-stylesheet.md).
 
-- **`DialFileManager` — removed from the kit, use `@epam/ai-dial-react-file-manager`** — the legacy file manager, its `DialFoldersTree`, `DialDestinationFolderPopup`, `FileManagerProvider`, `useFileManagerContext`, `useDialFileManagerTabs`, the `DialFileManagerTabs` / `DialFileManagerActions` / `FileManagerColumnKey` enums, the `NAME_COLUMN` / `SIZE_COLUMN` / `UPDATED_AT_COLUMN` constants, its types, and the `./file-manager` subpath are gone. The file manager is developed in its own package, which exports every one of these names. Keeping a second, older copy in the kit meant two `DialFileManager`s that drifted apart. `DialFileName`, `DialFolderName`, `DialFileIcon`, `DialSharedEntityIndicator` and the file models stay.
+- **`DialFileManager` — removed from the kit, use `@epam/ai-dial-react-file-manager`** — the legacy file manager, its `DialFoldersTree`, `DialDestinationFolderPopup`, `FileManagerProvider`, `useFileManagerContext`, `useDialFileManagerTabs`, the `DialFileManagerTabs` / `DialFileManagerActions` / `FileManagerColumnKey` enums, the `NAME_COLUMN` / `SIZE_COLUMN` / `UPDATED_AT_COLUMN` constants, its types, and the `./file-manager` subpath are gone. The file manager is developed in its own package, which exports every one of these names. Keeping a second, older copy in the kit meant two `DialFileManager`s that drifted apart. The file models stay.
   See [migration guide](migration-guides/0.16.0/legacy-file-manager-removal.md).
 
+- **34 unused 1.0 components and `DialSchemaRenderer` — removed, use their 2.0 counterparts** — `DialAutocompleteInputValue`, `DialButtonDropdown`, `DialCheckbox`, `DialCollapsibleSidebar`, `DialConfirmationPopup`, `DialDraggableItem`, `DialDropdownIcon`, `DialFileIcon`, `DialFileName`, `DialFolderName`, `DialFormItem`, `DialFormPopup`, `DialGrid` (and its date renderer and helpers, also from `./grid`), `DialInputPopup`, `LazyDialJsonEditor`, `LazyDialMarkdownEditor` and `LazyDialMarkdownEditorContainer` (also from `./editors`), `DialNotification`, `DialNumberInput`, `DialPagination`, `DialPasswordInput`, `DialPopup`, `DialRadioButton`, `DialRadioGroup`, `DialRadioGroupPopupField`, `DialResizableContainer`, `DialSearch`, `DialSegmentedControl`, `DialSelect`, `DialSelectField`, `DialSharedEntityIndicator`, `DialSlider`, `DialSwitch`, `DialTagInput`, `DialTextarea` and `DialSchemaRenderer` are gone, with the types and enums only they used (`FormItemOrientation`, `SelectSize`, `SelectVariant`, `SegmentedControlOption`), the `DIAL_KIT_CLASS.dropdownIcon` / `dropdownIconCaret` entries and their `styles.css` rules. Neither DIAL Chat nor the DIAL Admin frontend uses them, and keeping them meant two components for one control. The schema types (`JsonSchema`, `SchemaRendererVariant` …) keep their names. `monaco-editor` and `@monaco-editor/react` are no longer optional peers: only the JSON editor used them.
+  See [migration guide](migration-guides/0.16.0/unused-legacy-components-removal.md).
+
 - **`CaptionText`, `ErrorText` (2.0) — no `role="alert"`** — every caption, including a plain field description, was an assertive live region, so a screen reader interrupted the user with helper text and every validation error, and a host that wrapped `ErrorText` in its own alert region announced the message twice. They are now plain text that a control points at: `Input`, `Textarea`, `Select` and the `SchemaRenderer` fields link their own `error` / `caption` through `aria-describedby` and set `aria-invalid` on an error, as `Slider`, `RadioGroup`, `RadioGroupPopupField` and `FileDropzone` already did. A host that renders `ErrorText` next to its own control links it the same way; a message that must interrupt, such as a failed submit, goes in a `role="alert"` region of the host's. Tests that found these messages with `getByRole('alert')` need another query. The legacy `DialCaptionText` / `DialErrorText` are unchanged. Reported from `ai-dial-chat`.
   See [migration guide](migration-guides/0.16.0/caption-text-no-alert-role.md).
 
 ### Added
 
-- **`Grid` (2.0) — `appearance` (`GridAppearance.Default` / `Chat`)** — `GridAppearance.Chat` draws the design's "Chat table": a borderless card with a 12px corner and the MD shadow, a full-width 1px line under the header, dividers between data rows that stop at the cell padding on both sides and sit on the 0.5px `stroke-tertiary` stroke, and hover and selected rows with a 12px corner and no divider. It ignores `wrapperBorder`. The root carries `dial-kit-grid-chat`. ai-dial-chat's usage and catalog tables wrapped the grid in their own card and could not inset the dividers or round the rows without restyling ag-Grid's markup. Additive.
+- **`Grid` (2.0) — `appearance` (`GridAppearance.Default` / `Chat`)** — `GridAppearance.Chat` draws the design's "Chat table": a borderless card with a 12px corner and the MD shadow, 12px of padding on both sides of every header and row cell, a full-width 1px line under the header, dividers between data rows that stop at the cell padding on both sides and sit on the 0.5px `stroke-tertiary` stroke, and hover and selected rows with a 12px corner and no divider. It ignores `wrapperBorder`. The root carries `dial-kit-grid-chat`. ai-dial-chat's usage and catalog tables wrapped the grid in their own card and could not inset the dividers or round the rows without restyling ag-Grid's markup. Additive.
 
 - **`FormSection` (2.0)** — a titled section of a form or a builder column: a heading with an optional action at its inline end, an optional description and the content, in a `section` named by its heading. `variant` (`FormSectionVariant.Row` / `Caption` / `Setting`) sets the type scale; `headingLevel` (2–6, default 3) picks the heading element so the section fits the host's outline. Quick Apps' builder `SectionRow` and the DIAL Loop editor's copy of it were two copies of it. The root carries `dial-kit-form-section` (`DIAL_KIT_CLASS.formSection`). Additive.
 
@@ -53,6 +56,10 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
+- **`shadow-xs` and `shadow-lg` match the design's shadow scale** — `shadow-xs` was `0 1px 4px` blue alpha-20 over a `0 1px 2px` grey layer; it is now a single `0 0 8px 1px` blue alpha-20 halo, so a pressed button glows evenly instead of dropping down. `shadow-lg` was `0 8px 44px 0`; it is now `1px 10px 25px 12px`, same blue alpha-8. `shadow-sm` and `shadow-md` already matched. `--shadow-xs-2` no longer reaches `shadow-xs` and only colours the resting shadow of solid controls (`dial-kit-control-shadow`). Visual only; no token renamed.
+
+- **`Popup` (2.0) — the title is set in Heading 2** — the header title moves from `dial-h3-text` to `dial-h2-text`, the size the popup design gives it. It also reaches `ConfirmationPopup` and every popup built on `Popup`. Visual only.
+
 - **`Grid` (2.0) — hovered and selected rows lose their top and bottom outline** — 0.15.0 outlined them with an inset `--shadow-xs-1` shadow, which the table-cell design does not draw: a row's state is its fill alone, `--bg-control-accent-alpha-hover-subtle` on hover and `--bg-control-accent-alpha-active-subtle` when selected, both unchanged. Visual only; no prop changes.
 
 - **`NoDataContent` (2.0) — the Patterns 2.0 empty state, with an optional `action`** — the default icon was a 32px document mark over two lines of tiny secondary text, so every host drew its own illustration and sized its own text to match the design. The default is now the empty-state illustration, a 121×97 card holding three placeholder list rows, drawn with the `layer-0`/`layer-1`/`layer-2` fills and the `tertiary` stroke, so it follows the theme. The title is `dial-small-semi-text` in `text-primary`, 24px below the illustration; the description is `dial-small-text` in `text-secondary`, 8px under the title; the text is centred and wraps inside a 16px inline padding. The new `action` prop renders a host-supplied control 16px under the text. A caller's `icon`, `titleClassName` and `descriptionClassName` still apply; a caller that relied on the old `gap-2` spacing or the `text-tertiary` container colour now gets the margins above. `Select` (2.0) now renders its no-options state through `NoDataContent`, so it shows the same illustration and text styles instead of the 1.0 `DialNoDataContent` with a 24px document mark; `emptyStateIcon` still replaces the illustration. The document-mark asset is removed. `Grid`'s no-rows overlay keeps its own icon. Requested in [ai-dial-chat#9476](https://github.com/epam/ai-dial-chat/issues/9476).