@olddevs/ui 4.6.0 → 4.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/docs/api/editor-extension.en.md +15 -15
- package/docs/api/migration-notes.en.md +8 -8
- package/docs/api/utilities.en.md +6 -6
- package/docs/components/actions/split-button.en.md +9 -9
- package/docs/components/content/data-display.en.md +1 -1
- package/docs/components/content/layout-primitives.en.md +3 -3
- package/docs/components/content/rich-text-toc.en.md +1 -1
- package/docs/components/content/rich-text-view.en.md +12 -12
- package/docs/components/content/virtual-grid.en.md +2 -2
- package/docs/components/date-time/date-picker.en.md +1 -1
- package/docs/components/inputs/rich-text-editor.en.md +159 -159
- package/docs/components/navigation/mega-menu.en.md +10 -10
- package/docs/components/overlays/menu.en.md +2 -2
- package/docs/components/overlays/shortcuts-help.en.md +1 -1
- package/docs/components/table/data-table.en.md +3 -3
- package/docs/components/table/filter-bar.en.md +1 -1
- package/docs/components/table/toolbar.en.md +1 -1
- package/docs/glossary.en.md +184 -152
- package/docs/glossary.md +182 -151
- package/docs/icons.en.md +9 -9
- package/docs/palette.en.md +3 -3
- package/docs/theming.en.md +6 -6
- package/package.json +1 -1
|
@@ -95,7 +95,7 @@ marked `@deprecated`: the kit calls the current navigation item `active`.
|
|
|
95
95
|
|
|
96
96
|
Hovering a category with the mouse opens its flyout at once, with no delay. Exactly one category is highlighted,
|
|
97
97
|
the one whose flyout is open: the highlight follows `aria-expanded`, not `:hover`. Hovering a category without a
|
|
98
|
-
flyout closes the open one, with the same caveat about aim as below.
|
|
98
|
+
flyout closes the open one, with the same caveat about menu aim as below.
|
|
99
99
|
|
|
100
100
|
The flyout closes 150 ms after the pointer has left both the category column and the flyout, so a brief
|
|
101
101
|
excursion past the edge does not reset the catalog. It also closes on a pointer press outside the catalog and when
|
|
@@ -115,12 +115,12 @@ points to where the flyout will appear.
|
|
|
115
115
|
|
|
116
116
|
## Touch and narrow screens
|
|
117
117
|
|
|
118
|
-
Touch has no hover, so the touch itself (`click`) opens a category, without aim. A pointer whose `pointerType` is
|
|
118
|
+
Touch has no hover, so the touch itself (`click`) opens a category, without menu aim. A pointer whose `pointerType` is
|
|
119
119
|
"touch" or "pen" neither opens a category on hover nor closes the flyout when it leaves: a pen behaves like a
|
|
120
120
|
finger. Touching an open category again neither closes it nor goes anywhere. The flyout closes on a touch outside
|
|
121
121
|
the catalog or on Escape.
|
|
122
122
|
|
|
123
|
-
The mouse behaves as before: hover, aim and closing after 150 ms all remain while the screen is wide.
|
|
123
|
+
The mouse behaves as before: hover, menu aim and closing after 150 ms all remain while the screen is wide.
|
|
124
124
|
|
|
125
125
|
On a narrow screen, under 640px (the same breakpoint as `Menu` submenus and Editor submenus), there is no room beside
|
|
126
126
|
the category column for the flyout: the edge of the window would cut it off on the right. So the catalog works as a
|
|
@@ -135,7 +135,7 @@ drill-down:
|
|
|
135
135
|
- When you drill down, focus moves to "Back": the category button is hidden along with the category column, and focus
|
|
136
136
|
left on it would be lost. In the flyout on a narrow screen, the arrow key toward the category column does
|
|
137
137
|
nothing, because the column is not beside it.
|
|
138
|
-
- There is no aim on a narrow screen: hovering with the mouse does not open a category, and moving the mouse away does
|
|
138
|
+
- There is no menu aim on a narrow screen: hovering with the mouse does not open a category, and moving the mouse away does
|
|
139
139
|
not cancel the drill-down. Replacing the column under the cursor would pull it out from under the person's hand.
|
|
140
140
|
- The markup stays on the disclosure pattern: the category button keeps `aria-expanded` and `aria-controls` pointing
|
|
141
141
|
to the region on screen (the button itself is hidden during the drill-down), and the region is named after the
|
|
@@ -150,11 +150,11 @@ screen (ADR-0018): the server does not know the width, and the markup it produce
|
|
|
150
150
|
after hydration, a flyout opened by `defaultValue` is re-rendered once as a drill-down. On a phone the `nav` takes
|
|
151
151
|
the full width through the `max-sm:w-full` class; a `w-*` class from `className` applies on a wide screen.
|
|
152
152
|
|
|
153
|
-
##
|
|
153
|
+
## Menu aim
|
|
154
154
|
|
|
155
155
|
On its way from a category to its flyout, the pointer cuts diagonally and brushes against the neighboring
|
|
156
156
|
categories. If hover opened them at once, the flyout would change under the person's hand, and the links would be
|
|
157
|
-
out of reach.
|
|
157
|
+
out of reach. Menu aim watches where the pointer is heading: while it moves toward the open flyout, a neighboring
|
|
158
158
|
category does not take over the hover.
|
|
159
159
|
|
|
160
160
|
- The direction of the pointer's last step is compared with the wedge from its previous position to the two corners
|
|
@@ -163,8 +163,8 @@ category does not take over the hover.
|
|
|
163
163
|
- One movement off course is forgiven; two in a row are not, and then the category under the pointer opens.
|
|
164
164
|
- If the pointer stops for 300 ms, the category under it opens even if it was aiming. The menu does not get stuck.
|
|
165
165
|
- When the pointer reaches the flyout, the deferred switch is canceled.
|
|
166
|
-
- Clicking a category opens it at once, bypassing aim. The keyboard knows nothing about aim.
|
|
167
|
-
- Mouse only, and only on a wide screen: touch and pen open a category at once, and a narrow screen has no aim at all.
|
|
166
|
+
- Clicking a category opens it at once, bypassing menu aim. The keyboard knows nothing about menu aim.
|
|
167
|
+
- Mouse only, and only on a wide screen: touch and pen open a category at once, and a narrow screen has no menu aim at all.
|
|
168
168
|
- The first hover, while there is no flyout yet, opens the category with no delay at all: there is nothing to aim at.
|
|
169
169
|
|
|
170
170
|
The model is the same as for react-aria submenus (`Menu` with `SubmenuTrigger`), so that the two menus of the kit
|
|
@@ -303,12 +303,12 @@ into one. `MegaMenuButton` accepts the kit's button look (`variant`, `tone`, `si
|
|
|
303
303
|
|
|
304
304
|
## Related sources and tests
|
|
305
305
|
|
|
306
|
-
- Implementation: `src/components/navigation/MegaMenu.tsx`; aim is in `src/components/navigation/useMenuAim.ts`.
|
|
306
|
+
- Implementation: `src/components/navigation/MegaMenu.tsx`; menu aim is in `src/components/navigation/useMenuAim.ts`.
|
|
307
307
|
- Tests: `tests/mega-menu.test.tsx` covers roles and `aria-controls`, hover and mounting only the open
|
|
308
308
|
flyout, closing with a delay, roving tabindex, Enter, Escape and the arrows, Tab past the last link,
|
|
309
309
|
a category that is a link, a disabled category, `active` and the `current` alias, `asChild` and `link` (on a
|
|
310
310
|
category and on a column), fragments in a column, the current section and the Tab stop, typeahead, categories
|
|
311
|
-
inside your own components, the controlled value, a press outside the catalog and server rendering; `tests/mega-menu-aim.test.tsx` covers aim on mocked geometry and fake
|
|
311
|
+
inside your own components, the controlled value, a press outside the catalog and server rendering; `tests/mega-menu-aim.test.tsx` covers menu aim on mocked geometry and fake
|
|
312
312
|
time, and the flip at the edge; `tests/mega-menu-touch.test.tsx` covers touch and pen, a mocked `matchMedia`,
|
|
313
313
|
the drill-down in place of the category column, "Back" and focus, Escape, labels from the message catalog, the
|
|
314
314
|
drill-down with categories inside your own components and server rendering; the browser test
|
|
@@ -17,7 +17,7 @@ use the dedicated `MenuButton`, not a regular `Button`: only it reads react-aria
|
|
|
17
17
|
`ButtonContext`. The menu suits heterogeneous commands, sections, selected modes
|
|
18
18
|
and submenus; it is not for choosing a field value. A nested `Menu` inside
|
|
19
19
|
`SubmenuTrigger` opens beside its item on its own, and below it on a narrow
|
|
20
|
-
screen: you do not need to set `placement`. The "aim" (protection that keeps a
|
|
20
|
+
screen: you do not need to set `placement`. The "menu aim" (protection that keeps a
|
|
21
21
|
submenu from closing while the pointer travels toward it) comes from react-aria;
|
|
22
22
|
do not write your own.
|
|
23
23
|
|
|
@@ -80,7 +80,7 @@ writing, use `end top` or `start top`. The root menu opens as before, at `bottom
|
|
|
80
80
|
submenus follow the same rule.
|
|
81
81
|
|
|
82
82
|
Moving the pointer diagonally toward a submenu neither closes it nor switches to a
|
|
83
|
-
neighboring item: this "aim" is handled by react-aria's `SubmenuTrigger`. The kit
|
|
83
|
+
neighboring item: this "menu aim" is handled by react-aria's `SubmenuTrigger`. The kit
|
|
84
84
|
does not replace it and adds none of its own, so do not write one on top of it.
|
|
85
85
|
|
|
86
86
|
react-aria sets the menu panel's height from the visible area. Items that do
|
|
@@ -159,7 +159,7 @@ not know the shortcuts and their names.
|
|
|
159
159
|
single key gets no separator.
|
|
160
160
|
- In `CommandPalette` an item's shortcut is entirely `aria-hidden` — it is a reminder
|
|
161
161
|
next to an item that can be chosen anyway. Here the shortcut is the dialog's
|
|
162
|
-
only content, and hiding it would hand a screen reader an empty
|
|
162
|
+
only content, and hiding it would hand a screen reader an empty keyboard shortcuts dialog.
|
|
163
163
|
- **Scrolling inside the dialog.** The list sits in a `ScrollArea` no taller than
|
|
164
164
|
70% of the screen height and no taller than 32rem: the header with the close
|
|
165
165
|
button stays in place. The area is a Tab stop with a separate name ("Shortcuts" /
|
|
@@ -13,14 +13,14 @@ sourceHash: a5e9fc1a0c10
|
|
|
13
13
|
## Summary for AI
|
|
14
14
|
|
|
15
15
|
An application-level table with ready-made behavior on top of the low-level `Table`:
|
|
16
|
-
column visibility and order, density, loading and error states, a table
|
|
16
|
+
column visibility and order, density, loading and error states, a table toolbar slot
|
|
17
17
|
(`toolbar`). It keeps no state of its own: it accepts `state` and reports changes as a
|
|
18
18
|
patch, usually to `useTableState`.
|
|
19
19
|
|
|
20
20
|
## When to use
|
|
21
21
|
|
|
22
22
|
- A list of entities in an admin panel: filters, column preferences, bulk actions.
|
|
23
|
-
- Anywhere a table needs a table
|
|
23
|
+
- Anywhere a table needs a table toolbar and user preferences.
|
|
24
24
|
|
|
25
25
|
## When not to use
|
|
26
26
|
|
|
@@ -57,7 +57,7 @@ const { state, set } = useTableState();
|
|
|
57
57
|
| `selectable` | `false` | The checkbox column. A separate prop — see below. |
|
|
58
58
|
| `loading` | `false` | Loading is in progress. The behavior depends on whether data exists. |
|
|
59
59
|
| `error` | — | **Always** replaces the body, even when there is data. |
|
|
60
|
-
| `toolbar` | — | The table
|
|
60
|
+
| `toolbar` | — | The table toolbar — usually `TableToolbar`. |
|
|
61
61
|
|
|
62
62
|
The other props go to `Table` — including `renderDetail`, `rowLabel` and
|
|
63
63
|
`onRowAction`.
|
|
@@ -106,7 +106,7 @@ The filter that gets built is an ordinary `TableFilter` with an optional `to`:
|
|
|
106
106
|
- **A field with an already applied range is not offered again.** Two ranges on
|
|
107
107
|
one field are an intersection, not an addition, and the tokens could not be
|
|
108
108
|
told apart. The token identifier is `<field>:range`.
|
|
109
|
-
- **The consumer computes the
|
|
109
|
+
- **The consumer computes the filtered rows.** The kit describes the shape of the
|
|
110
110
|
filter, it does not filter data
|
|
111
111
|
(ADR-0023):
|
|
112
112
|
how to treat the bounds (inclusive, in which time zone) is the application's
|
|
@@ -12,7 +12,7 @@ sourceHash: 957697357a68
|
|
|
12
12
|
|
|
13
13
|
## Summary for AI
|
|
14
14
|
|
|
15
|
-
`TableToolbar` is the table
|
|
15
|
+
`TableToolbar` is the table toolbar: a title, a counter, actions, a filters slot and a
|
|
16
16
|
preferences slot. `TablePreferences` is the content behind the gear button: column
|
|
17
17
|
visibility and order, density. Neither stores state: everything comes from above,
|
|
18
18
|
usually from `useTableState`.
|