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

package/dist/esm/Components/NavLauncher/resultNavigation.js

@@ -0,0 +1,61 @@
+const locate = (sizes, index) => {
+    let start = 0;
+    for (let group = 0; group < sizes.length; group += 1) {
+        if (index < start + sizes[group])
+            return { group, pos: index - start, start };
+        start += sizes[group];
+    }
+    return {
+        group: sizes.length - 1,
+        pos: 0,
+        start: start - sizes[sizes.length - 1],
+    };
+};
+const startOf = (sizes, group) => sizes.slice(0, group).reduce((sum, size) => sum + size, 0);
+const stepVertical = (sizes, columns, index, down, wrap) => {
+    const { group, pos, start } = locate(sizes, index);
+    const size = sizes[group];
+    const column = pos % columns;
+    if (down) {
+        if (pos + columns < size)
+            return index + columns;
+        if (Math.floor(pos / columns) < Math.floor((size - 1) / columns))
+            return start + size - 1;
+        const next = group + 1 < sizes.length ? group + 1 : wrap ? 0 : -1;
+        if (next < 0)
+            return index;
+        return startOf(sizes, next) + Math.min(column, sizes[next] - 1);
+    }
+    if (pos - columns >= 0)
+        return index - columns;
+    const prev = group > 0 ? group - 1 : wrap ? sizes.length - 1 : -1;
+    if (prev < 0)
+        return index;
+    const lastRow = Math.floor((sizes[prev] - 1) / columns);
+    return (startOf(sizes, prev) + Math.min(sizes[prev] - 1, lastRow * columns + column));
+};
+/** Next flat result index for a key, following the visual grid: rows by `columns` inside a group, reading order across columns. */
+export const moveResult = (sizes, columns, index, key, pageRows = 1) => {
+    const total = sizes.reduce((sum, size) => sum + size, 0);
+    if (total === 0)
+        return 0;
+    switch (key) {
+        case "ArrowDown":
+        case "ArrowUp":
+            return stepVertical(sizes, columns, index, key === "ArrowDown", true);
+        case "ArrowRight":
+            return Math.min(total - 1, index + 1);
+        case "ArrowLeft":
+            return Math.max(0, index - 1);
+        case "Home":
+            return 0;
+        case "End":
+            return total - 1;
+        default: {
+            let next = index;
+            for (let i = 0; i < pageRows; i += 1)
+                next = stepVertical(sizes, columns, next, key === "PageDown", false);
+            return next;
+        }
+    }
+};

package/dist/esm/Components/NavLauncher/revealStyles.js

@@ -1,6 +1,6 @@
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
-/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch. */
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch, where it also grows to a 32px hit area. */
 export const revealStyles = (colors) => {
     const ring = focusVisibleStyles(colors);
     return {
@@ -9,7 +9,7 @@ export const revealStyles = (colors) => {
         _groupHover: { opacity: 1 },
         _groupFocusWithin: { opacity: 1 },
         "[data-reveal=true] &": { opacity: 1 },
-        "@media (hover: none)": { opacity: 1 },
+        "@media (hover: none)": { opacity: 1, minWidth: "32px", width: "32px", height: "32px" },
         ...reducedMotionSx(),
     };
 };

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -6,6 +6,7 @@ import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/ac
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import ToolTip from "../ToolTip/ToolTip.js";
 import PersonChip from "../PersonChip/PersonChip.js";
 import { CircleArrowLeft, LogOut, PanelLeftClose, PanelRightClose, } from "lucide-react";
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
@@ -46,7 +47,7 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
     };
-    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && (_jsxs(_Fragment, { children: [leading, _jsx(Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", bg: theme.colors.boxborder[200] })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(Text, { color: accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", flex: "1 1 0%", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, flexShrink: 0, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", flexShrink: 0, onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && (_jsxs(_Fragment, { children: [leading, _jsx(Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", flexShrink: 0, bg: theme.colors.boxborder[200] })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(ToolTip, { label: typeof navigationBarText.text === "string" ? navigationBarText.text : "", overflowOnly: true, placement: "bottom", children: _jsx(Text, { flex: "1 1 0%", w: 0, minW: 0, isTruncated: true, color: accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }) }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, sx: { "& > *": { minW: 0 } }, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         maxW: "18rem", bg: theme.colors.surfaceRaised, 
                                         // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -1,19 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Flex, Image, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Spinner, Text, useDisclosure, } from "@chakra-ui/react";
-import { Building2, Check, ChevronsUpDown, Search } from "lucide-react";
+import { Building2, Check, ChevronDown, ChevronsUpDown, Search } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
+import ToolTip from "../ToolTip/ToolTip.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
 const sizeMap = {
-    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
-    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
-    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+    sm: { h: "32px", avatarH: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatarH: "36px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatarH: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
+const MD_QUERY = "(min-width: 48em)";
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = useCustomTheme();
     if (org.logoUrl) {
@@ -22,9 +25,11 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
     const fill = avatarColor(org.name, chartMode(colors));
     return (_jsx(Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: onFilled(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700, children: orgInitial(org.name) }));
 };
-const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
-    var _a;
+const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, display = "full", }) => {
+    var _a, _b;
     const theme = useCustomTheme();
+    const isMd = useMatchMedia(MD_QUERY, true);
+    const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
     const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = useDisclosure();
@@ -85,10 +90,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         if (org.id !== value)
             onChange(org.id, org);
     };
+    const avatarNode = selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) }));
+    const labelGap = s.px === 2 ? 8 : 10;
+    const squeezedWidth = `calc(${s.px * 8 + labelGap * 2 + 16}px + ${s.avatar})`;
+    const trigger = (_jsxs(Flex, { as: "button", type: "button", "aria-label": avatarOnly && selected ? `${ariaLabel}, ${selected.name}` : ariaLabel, align: "center", justify: avatarOnly ? "center" : undefined, gap: avatarOnly ? "4px" : `${labelGap}px`, h: avatarOnly ? s.avatarH : s.h, px: avatarOnly ? "6px" : s.px, minW: avatarOnly ? undefined : squeezedWidth, flexShrink: avatarOnly ? 0 : 1, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [avatarNode, !avatarOnly && (_jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, minW: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : avatarOnly ? (_jsx(Box, { as: ChevronDown, size: 12, color: theme.colors.textMuted, flexShrink: 0, "aria-hidden": "true" })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }));
     return (_jsxs(Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) })), _jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), _jsx(PopoverContent, { minW: menuMinWidth, w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? (_jsx(ToolTip, { label: (_b = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _b !== void 0 ? _b : placeholder, placement: "bottom", isDisabled: isOpen, children: _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: _jsx(PopoverTrigger, { children: trigger }) }) })) : (_jsx(PopoverTrigger, { children: trigger })), _jsx(PopoverContent, { minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
                 // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
                 bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {

package/dist/index.d.ts

@@ -214,6 +214,7 @@ export { default as PageHeader } from "./Components/PageHeader/PageHeader";
 export type { PageHeaderProps, PageHeaderTitleSize, PageHeaderActionsLayout } from "./Components/PageHeader/PageHeaderProps";
 export { default as StatCard } from "./Components/StatCard/StatCard";
 export type { StatCardProps } from "./Components/StatCard/StatCardProps";
+export type { OrgSwitcherProps, OrgSwitcherSize, OrgSwitcherDisplay } from "./Components/OrgSwitcher/OrgSwitcherProps";
 export { default as StatusTag } from "./Components/StatusTag/StatusTag";
 export type { StatusTagProps, StatusAppearance } from "./Components/StatusTag/StatusTagProps";
 export { default as CircularProgress } from "./Components/CircularProgress/CircularProgress";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.60",
+  "version": "2.4.2-beta.61",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",