pixelize-design-library 2.4.2-beta.60 → 2.4.2-beta.61

package/CHANGELOG.md

@@ -24,24 +24,44 @@ next major.
     with actions and remote groups, optional suite-apps section below `md`), with `PinToggle`,
     `NewTabLink`, `searchLauncher`, `searchLauncherSections` (sectioned search: modules, then their
     screens, keyword-only hits get a `· keyword` hint) and `flattenScreens`. The pin control is a
-    star, shown with the ↗ link on row hover/focus only (always on touch); pinned rail items are tiles. It binds no global chord. `LauncherTrigger`
+    star, shown with the ↗ link on row hover/focus only (always on touch); pinned rail items are tiles. It never opens itself or binds a global chord (Cmd/Ctrl+K and `/` only refocus its field while it is open). `LauncherTrigger`
     is the chip (10px radius, 36px, accent ink, one ⌘K hint) that opens an app-owned launcher (`aria-haspopup="dialog"`, `aria-expanded`,
     `aria-keyshortcuts`); `display="icon"` is a 36px icon-only variant for a nav bar's `moreIcon`
     (label is the accessible name, tooltip "Menu (⌘K)"). Types: `NavLauncherProps`, `LauncherScreen`, `LauncherModule`,
     `LauncherSection`, `LauncherSearchItem`, `LauncherLabels` and friends, `LauncherTriggerProps`.
-    `NavLauncher` follows canvas `Launcher.dc.html`: stacked sections with "(n)" counts and a 1/2/3-column
-    grid, a "Quick access" rail of `clamp(20rem, 30%, 26rem)` in a panel whose `maxWidth` defaults to
-    1080px (Pinned tiles, Frequently visited, Recent), "Pins follow your account" footer. The footer's
-    key hints are key caps (ENTER, ⌘ ENTER / CTRL ENTER, ESC, four arrows) and are hidden on touch devices. New optional props `frequentLimit`, `suggestions` (no-results chips), `searchHint`,
+    `NavLauncher` follows canvas `Launcher.dc.html`: from `lg` up, stacked sections with "(n)" counts and a
+    1/2/3-column grid beside a "Quick access" rail of `clamp(20rem, 30%, 26rem)` in a panel whose `maxWidth`
+    defaults to 1080px (Pinned tiles, Frequently visited, Recent). Below `lg` (phone and tablet) the body is a
+    Menu / Quick access / Apps tab bar (labels `tabsLabel`, `tabMenu`, `tabQuickAccess`, `tabApps`; Apps follows
+    `appsVisibility`) above one scrolling panel with only the selected panel mounted, rows are 44px, and search
+    keeps the stacked results plus rail with no tab bar. The header is the search field (fills the row; 44px at
+    `md`+, 40px below, 16px type), a muted live result count (`labels.resultsCount`, with a separate polite
+    announcement), optional `headerActions` (an app's own icon button) and close; there is no "Menu" pill and
+    `labels.title` names the dialog and the results list. "Pins follow your account" footer; its key hints
+    are key caps (arrows, ENTER, ⌘ ENTER / CTRL ENTER, ⌘ + click, P, ESC) and are hidden on touch devices
+    (`labels.hintClickNewTab`; the ↗ link's tooltip is `labels.newTabTip`, `NewTabLink` takes `tip`). New optional props `frequentLimit`, `suggestions` (no-results chips), `searchHint`,
     `LauncherModule.isNew`, and labels `quickAccess`, `newBadge`, `screens`, `pinShort`, `footerNote`,
     `suggestionsHint`, `found`, `pinTip`, `unpinTip`. The rail landmark is named "Quick access".
-    Keyboard: ←/→ and ↑/↓ are grid-aware (row-major, ↑/↓ cross sections), and `P` pins or unpins the
-    focused item (never while typing); ArrowUp from the first item returns to the search field and
-    pinned tiles are a 2-column grid. The keyboard-active row highlights as a whole (soft fill plus
+    Keyboard: in the field, the first result is active as soon as there is a query, ↑/↓ follow the
+    visual rows of the result grid, → at the end of the text enters the grid and ←/→/Home/End then move
+    through results until the query changes, and PageUp/PageDown page; Esc clears the query first and
+    closes only when it is empty; Cmd/Ctrl+K and `/` focus the field. In lists ←/→ and ↑/↓ are grid-aware
+    (row-major, ↑/↓ cross sections), Home/End/PageUp/PageDown work, `P` pins or unpins the focused item
+    (never while typing) and typing anywhere else in the launcher refocuses the field; ArrowUp from the
+    first item returns to the search field (or the selected tab) and pinned tiles are a 2-column grid
+    (3 in the tablet Quick access tab). The keyboard-active row highlights as a whole (soft fill plus
     one 1px inset ring, at least 3:1), the whole row is the link target (Cmd/middle-click opens a new
     tab), and truncated titles, rail rows, pinned tiles, app names and search rows show a tooltip with
-    the full text. New optional `openShortcutHint` (e.g. "⌘K or /", app-owned),
-    labels `hintOpenMenu` and `hintPin`; hint label defaults are lowercase and follow the canvas order.
+    the full text. New label `hintPin`; hint label defaults are lowercase and follow the canvas order.
+    `LauncherLabels` gained required keys (`hintClickNewTab`, `newTabTip`, `resultsCount`, `tabsLabel`,
+    `tabMenu`, `tabQuickAccess`, `tabApps`): a consumer that types a full `LauncherLabels` object needs
+    them, while the `labels` prop (`Partial<LauncherLabels>`) is unaffected. Consumer tests: below `lg`
+    the Quick access and Apps sections are behind their tabs, and the dialog's accessible name now comes
+    from a visually hidden "Menu" heading.
+  - `OrgSwitcher` `display` (`"full"` default | `"avatar"` | `"auto"`) — `"avatar"` is a 36px avatar plus
+    chevron trigger whose accessible name is `Switch organization, <name>` with the name in a tooltip;
+    `"auto"` is avatar below `md` and full from `md` up. Types `OrgSwitcherProps`, `OrgSwitcherSize` and
+    `OrgSwitcherDisplay` are now exported from the package root.
   - `Kbd` / `KbdShortcut` — a key cap and a chord (`mod+k` renders ⌘ K or Ctrl K), in the
     `AppSwitcher` notation. `Search` and `AppSwitcher` render their shortcut hints with `Kbd`.
   - `NavigationBar` `leading` — a slot between the sidebar toggle/back button and the title, outside
@@ -250,6 +270,12 @@ next major.
 
 ### Fixed
 
+- **`NavigationBar` right cluster no longer overflows onto the avatar at phone widths.** The title
+  truncates first (overflow-only tooltip when it is a string); the `moreIcon` cluster can shrink, while
+  the sidebar toggle, back button and avatar menu never do. (HRMS, beta.60 launcher trigger overflow)
+- **`OrgSwitcher` trigger shrinks and its menu fits the screen.** The full trigger truncates its label
+  (avatar and chevron are kept) when its container is short, and the menu panel is capped at
+  `100vw - 32px`, so a long org name no longer causes horizontal page scroll on phones.
 - **`NavLauncher` keyboard and link fixes.** Arrow keys, typing and Backspace were dead on rail and
   apps rows while a search was active; Enter could throw when results shrank; Enter during IME
   composition opened a result; removing the focused row (e.g. an app dropped from `apps`) dropped
@@ -491,6 +517,8 @@ next major.
 
 Nothing is removed yet — each of these still ships its full implementation.
 
+- `NavLauncher` `openShortcutHint` and `LauncherLabels.hintOpenMenu` — no longer rendered (the launcher
+  is already open when its footer shows); bind the open chord in the app only.
 - `SelectV2` — use `Select` with `native={false}`; it is already a thin wrapper over it.
 - `SearchSelect`, `SelectSearch` are **no longer `@deprecated`.** Both now say "prefer `Select`
   for new work" instead: `@deprecated` claimed a migration that loses real capabilities

package/COMPONENT-GOTCHAS.md

@@ -1061,6 +1061,18 @@ reach it.
 **Apply:** don't depend on `onChange` firing for a repeat pick. There's no supported way to attach
 test hooks or a ref to the trigger.
 
+### `OrgSwitcher display="full"` still squeezes the navbar title on phones — use `display="auto"`
+
+Inside a `NavigationBar` `moreIcon` cluster, a full trigger needs about 88px (avatar + chevron) even
+when its label truncates to nothing, and the title is the first thing to give way. With a long org name
+the title is invisible on 320-375px bars, and a smaller `maxWidth` does not change that.
+
+**Apply:** `display="auto"` (avatar + chevron below `md`, full from `md`) or `"avatar"`. In avatar mode
+the accessible name is `${ariaLabel}, ${org name}` and the name appears in a tooltip that wraps a
+`span` around the trigger, so don't pass the trigger a ref. `auto` falls back to `"full"` where
+`matchMedia` is missing (SSR, jsdom). `NavigationBar`'s `moreIcon` root is `min-width: 0`: give your
+own icon buttons `flexShrink={0}` and let any label truncate.
+
 ### `UpgradeButton`'s gold icon accent silently falls back to the label color on low contrast
 
 The gold accent is only used when it clears AA contrast against both gradient stops; a custom
@@ -1270,7 +1282,8 @@ Each mounted `Search` registers its own `window` Ctrl+K listener, so two on one
 keypress. **Apply:** pass `shortcut={false}` on all but one. `showShortcutHint={false}` only hides
 the hint; the listener stays.
 
-The same applies to a launcher: `NavLauncher` and `LauncherTrigger` bind no chord, and the library
+The same applies to a launcher: `NavLauncher` and `LauncherTrigger` bind no chord to *open* (once open,
+the launcher uses Cmd/Ctrl+K and `/` only to refocus its own field), and the library
 reserves `mod+k` for the app's own palette. The app must pass `shortcut={false}` on every page
 `Search`, or claim the chord in capture phase (`keydown` on `window` with `capture: true`) before
 the `Search` listeners see it — otherwise the first mounted `Search` takes Ctrl+K.
@@ -1288,12 +1301,36 @@ the `Search` listeners see it — otherwise the first mounted `Search` takes Ctr
   anchor is an `aria-hidden`, `tabIndex={-1}` overlay (so copy-link and mod-click work) and pin / ↗
   are `aria-hidden` siblings. Screen readers use Enter / mod+Enter. Do not nest links inside the
   option — axe `nested-interactive` fails.
-- **The apps section decides "compact" with `matchMedia("(min-width: 48em)")`** and falls back to
-  desktop (hidden) where `matchMedia` is missing (SSR, jsdom). Tests must stub it to see the section.
-- **`P` on a focused NavLauncher row pins it** instead of starting type-ahead; in the search field it types the letter. Rows without a star (Recent, key screens, apps) keep type-ahead.
+- **The apps section decides "compact" with `matchMedia("(min-width: 48em)")`, the layout with
+  `(min-width: 62em)`** (`lg`). Both fall back to desktop (apps hidden, two panes) where `matchMedia`
+  is missing (SSR, jsdom), so tests must stub both to see the apps section or the tab bar.
+- **Below `lg` only the selected tab's panel is mounted.** Pinned / Frequently visited / Recent
+  (Quick access tab) and the apps list (Apps tab) are not in the DOM until their tab is clicked; the
+  Quick access tab is omitted when it would be empty, and a single remaining tab hides the bar. The
+  search view is different: no tab bar, stacked results plus the Quick access rail. A phone or tablet
+  consumer test that looks for an app or a pin must click the tab first.
+- **`P` on a focused NavLauncher row pins it.** Any other printable key pressed on a row, tab or
+  button (not Space, no modifier) is appended to the query and focuses the field; in the field `P`
+  types the letter.
+- **Esc is handled by the launcher, not the Drawer** (`closeOnEsc` is off): it clears a non-empty
+  query and keeps focus in the field, and closes only when the query is empty. The keydown is stopped inside
+  the launcher, so a consumer `Escape` listener on `document` never sees it.
+- **`headerActions` text joins the dialog's accessible name** (header content becomes part of it,
+  as the search value already does: "Menu leave"). Use icon-only buttons with an `aria-label`.
+- **The result count is `aria-hidden`; the announcement is a separate visually hidden `aria-live="polite"`
+  node, deliberately not `role="status"`**, so `getByRole("status")` still matches only the no-results
+  message and the loading skeleton.
+- **Left/Right/Home/End in the search field edit the caret** until a result has been navigated by
+  arrow/Page keys (→ at the end of the text enters the grid); any change to the query hands them back
+  to the caret. Do not "fix" this by binding them to results.
 - **`NavLauncher` `suggestions` empty falls back to `noResultsHint`** instead of showing chips.
 - **`PinToggle` / `NewTabLink` are opacity 0 until row hover or focus-within**, so a consumer's own row must carry `data-group` (or `role="group"`) to reveal them.
 - **`LauncherLabels.screensGroup` is unused** by search now (sections replaced the flat group); kept so label objects still type-check.
+- **`LauncherLabels` gained required keys** (`hintClickNewTab`, `newTabTip`, `resultsCount`, `tabsLabel`,
+  `tabMenu`, `tabQuickAccess`, `tabApps`). The `labels` prop is `Partial<LauncherLabels>` and is fine;
+  a consumer that annotates a *full* `LauncherLabels` object fails to compile.
+- **`openShortcutHint` and `labels.hintOpenMenu` are deprecated no-ops:** the open chord is no longer
+  shown in the footer. Drop them; the footer's hints are arrows, ENTER, ⌘ ENTER, ⌘ + click, P, ESC.
 - **`apps` is data-driven.** Gate by plan by changing the array or setting `locked` / `lockedReason`;
   keep `id`s stable (hues and `key` derive from them), and pass `color` on an app whose mark must not
   shift when siblings are added or removed. Locked rows are not links, not focusable, `aria-disabled`,

package/DESIGN-GUIDE.md

@@ -180,12 +180,20 @@ scrim `Box`. `Loading` is the older API and stays on the heavier house scrim by
   unknown, `linkAs` for the router link, and `extraResults` + `isSearching` for remote (entity) results.
 - Open the launcher with `<NavigationBar leading={<LauncherTrigger onClick isOpen />} />` — never inside
   `navigationBarText.text`. Neither component binds the chord: the app owns the `mod+k` listener
-  (capture phase) and passes `shortcut={false}` to any page `Search`.
+  (capture phase) and passes `shortcut={false}` to any page `Search`. Bind it to *open* the launcher only:
+  once open, the launcher refocuses its own field on Cmd/Ctrl+K and `/`, and shows no open-chord hint
+  (`openShortcutHint` is deprecated).
 - Pins live in the app (server or local). Pass them to `NavLauncher` (`pinnedIds`, `onTogglePin`) *and*
   to `SideBar pinnedItems` + `onUnpin` so the rail shows what the launcher pinned. Persist collapse with
   `useSidebarPrefs`, and pass `autoCollapse={false}` if the app, not the rail, decides.
 - Replacing a 9-dot app switcher in a nav bar: `<LauncherTrigger display="icon" />` (36px) in `moreIcon`;
   keep the chip variant (`leading`) where there is room.
+- In a phone-width app bar use `<OrgSwitcher display="auto" />` (avatar below `md`) next to the bell,
+  `LauncherTrigger display="icon"` and the avatar menu; keep every icon control 36px or less and
+  `flexShrink={0}`. The title truncates first.
+- Below `lg` the launcher is a Menu / Quick access / Apps tab bar over one panel (search stays a single
+  stacked list), so design for phone and tablet with that structure, not a long scroll. Pass
+  `headerActions` for the app's own icon button (help, customise) with an `aria-label`.
 - Show the suite's apps with `appsVisibility="always"` and drive plan gating by editing `apps` /
   `locked`.
 - Show shortcut hints with `KbdShortcut`, never a hand-styled `<kbd>`.

package/dist/Components/NavLauncher/LauncherTabs.d.ts

@@ -0,0 +1,18 @@
+export type LauncherTabId = "menu" | "quick" | "apps";
+export type LauncherTabItem = {
+    id: LauncherTabId;
+    label: string;
+};
+type LauncherTabsProps = {
+    tabs: readonly LauncherTabItem[];
+    selected: LauncherTabId;
+    onSelect: (id: LauncherTabId) => void;
+    idBase: string;
+    label: string;
+    onLeaveUp: () => void;
+    onLeaveDown: () => void;
+};
+export declare const tabId: (base: string, id: LauncherTabId) => string;
+export declare const panelId: (base: string) => string;
+export declare function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLeaveDown, }: LauncherTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NavLauncher/LauncherTabs.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelId = exports.tabId = void 0;
+exports.LauncherTabs = LauncherTabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tabId = (base, id) => `${base}-tab-${id}`;
+exports.tabId = tabId;
+const panelId = (base) => `${base}-panel`;
+exports.panelId = panelId;
+function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLeaveDown, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const refs = (0, react_2.useRef)(new Map());
+    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const choose = (index) => {
+        var _a;
+        const next = tabs[(index + tabs.length) % tabs.length];
+        onSelect(next.id);
+        (_a = refs.current.get(next.id)) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const current = tabs.findIndex((tab) => tab.id === selected);
+        const handlers = {
+            ArrowRight: () => choose(current + 1),
+            ArrowLeft: () => choose(current - 1),
+            Home: () => choose(0),
+            End: () => choose(tabs.length - 1),
+            ArrowUp: onLeaveUp,
+            ArrowDown: onLeaveDown,
+        };
+        const handle = handlers[event.key];
+        if (!handle)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        handle();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
+            const isSelected = tab.id === selected;
+            return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", role: "tab", id: (0, exports.tabId)(idBase, tab.id), ref: (node) => {
+                    if (node)
+                        refs.current.set(tab.id, node);
+                    else
+                        refs.current.delete(tab.id);
+                }, "aria-selected": isSelected, "aria-controls": isSelected ? (0, exports.panelId)(idBase) : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onSelect(tab.id), position: "relative", flex: { base: 1, md: "none" }, minW: { md: "112px" }, h: "46px", px: { base: "6px", md: "14px" }, whiteSpace: "nowrap", fontSize: "14px", fontWeight: isSelected ? 600 : 500, color: isSelected ? colors.accentText : colors.textMuted, transition: (0, motion_1.transitionFor)(["color"]), _hover: {
+                    color: isSelected ? colors.accentText : colors.text[900],
+                }, _after: {
+                    content: '""',
+                    position: "absolute",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "-1px",
+                    h: "2px",
+                    borderRadius: "2px 2px 0 0",
+                    bg: isSelected ? colors.primary[500] : "transparent",
+                }, sx: { ...ring, borderRadius: "8px" }, children: tab.label }, tab.id));
+        }) }));
+}

package/dist/Components/NavLauncher/NavLauncher.d.ts

@@ -1,3 +1,3 @@
 import type { NavLauncherProps } from "./NavLauncherProps";
 /** Left-drawer navigation launcher: browse every module, pins, Frequent, Recent, search and (compact) the suite's apps. */
-export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs, actions, extraResults, query: controlledQuery, onQueryChange, isSearching, isLoading, keyScreenLimit, frequentLimit, suggestions, searchHint, openShortcutHint, modKeyLabel, maxWidth, labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility, "data-testid": testId, }: NavLauncherProps): import("react/jsx-runtime").JSX.Element;
+export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs, actions, extraResults, query: controlledQuery, onQueryChange, isSearching, isLoading, keyScreenLimit, frequentLimit, suggestions, searchHint, modKeyLabel, headerActions, maxWidth, labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility, "data-testid": testId, }: NavLauncherProps): import("react/jsx-runtime").JSX.Element;