@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.
@@ -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
- ## Aim
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. Aim watches where the pointer is heading: while it moves toward the open flyout, a neighboring
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 cheat sheet.
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 bar slot
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 bar and user preferences.
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 bar — usually `TableToolbar`. |
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 result set.** The kit describes the shape of 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 bar: a title, a counter, actions, a filters slot and a
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`.