@crisp-ui-kit/crisp 0.13.0 → 0.14.0

package/dist/cjs/components/contextmenu/contextmenu.js

@@ -42,17 +42,37 @@ const contextmenu_recipe_1 = require("./contextmenu.recipe");
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-function ContextMenu({ children, items, className }) {
+function ContextMenu({ children, items, menuLabel = "Context menu", className, }) {
     const rootRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const returnFocusTo = React.useRef(null);
     const [pos, setPos] = React.useState(null);
     const open = (e) => {
         e.preventDefault();
+        // where focus goes back to on close. The menu takes focus to be operable
+        // at all, so something has to remember what had it.
+        returnFocusTo.current = document.activeElement;
         // flip so the menu stays on-screen near the right/bottom edges
         const x = Math.min(e.clientX, window.innerWidth - 220);
         const y = Math.min(e.clientY, window.innerHeight - 12 - items.length * 34);
         setPos({ x: Math.max(8, x), y: Math.max(8, y) });
     };
-    const close = React.useCallback(() => setPos(null), []);
+    const close = React.useCallback((restoreFocus = false) => {
+        setPos(null);
+        if (restoreFocus)
+            returnFocusTo.current?.focus?.();
+        returnFocusTo.current = null;
+    }, []);
+    /** The items a roving focus may land on: not separators, not disabled. */
+    const enabled = React.useCallback(() => Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []), []);
+    // `role="menu"` puts a screen reader in application mode, where the arrow
+    // keys are the only navigation there is — so opening has to put focus on an
+    // item, or the role is a promise the component does not keep (#188).
+    React.useEffect(() => {
+        if (!pos)
+            return;
+        enabled()[0]?.focus();
+    }, [pos, enabled]);
     React.useEffect(() => {
         if (!pos)
             return;
@@ -60,7 +80,7 @@ function ContextMenu({ children, items, className }) {
             if (!rootRef.current?.contains(e.target))
                 close();
         };
-        const onKey = (e) => e.key === "Escape" && close();
+        const onKey = (e) => e.key === "Escape" && close(true);
         document.addEventListener("pointerdown", onDown);
         document.addEventListener("keydown", onKey);
         return () => {
@@ -68,11 +88,34 @@ function ContextMenu({ children, items, className }) {
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)("div", { className: "contextmenu-content", role: "menu", style: { left: pos.x, top: pos.y }, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    const onMenuKeyDown = (e) => {
+        // a menu is not a focus trap: Tab leaves, and leaving means closing
+        if (e.key === "Tab") {
+            close(true);
+            return;
+        }
+        const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
+        const items = enabled();
+        if (!items.length)
+            return;
+        const at = items.indexOf(document.activeElement);
+        let next = null;
+        if (step)
+            next = (at + step + items.length) % items.length;
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = items.length - 1;
+        if (next === null)
+            return;
+        e.preventDefault();
+        items[next]?.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                         ? "contextmenu-item contextmenu-item--danger"
-                        : "contextmenu-item", onClick: () => {
+                        : "contextmenu-item", tabIndex: -1, onClick: () => {
                         item.onSelect?.();
-                        close();
+                        close(true);
                     }, children: [item.icon, item.label, item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
 }
 ContextMenu.displayName = "ContextMenu";

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -62,6 +62,13 @@ const asText = (v) => {
         return "";
     if (Array.isArray(v))
         return v.join(", ");
+    // Before the generic object branch, which would look for `.name`, find none
+    // and return "" — turning every Date into the empty string (#185). The ISO
+    // date is stable and locale-independent, so `contains "2026-06"` works; it
+    // will not match "16/06/2026", and a date-aware operator set is Attio's
+    // date-picker UI, which has to be measured before it can be built.
+    if (v instanceof Date)
+        return Number.isNaN(v.getTime()) ? "" : v.toISOString().slice(0, 10);
     if (typeof v === "object") {
         const name = v.name;
         return typeof name === "string" ? name : "";
@@ -104,7 +111,12 @@ function applySorts(rows, sorts, get = (row, key) => row[key]) {
             const av = get(a, s.key);
             const bv = get(b, s.key);
             let d = 0;
-            if (typeof av === "number" && typeof bv === "number")
+            // Dates compare by instant, the way two numbers do. Falling through to
+            // text here is what made a date column sort identically ascending and
+            // descending — every comparison was "" against "" (#185).
+            if (av instanceof Date && bv instanceof Date)
+                d = av.getTime() - bv.getTime();
+            else if (typeof av === "number" && typeof bv === "number")
                 d = av - bv;
             else
                 d = asText(av).localeCompare(asText(bv));

package/dist/esm/components/contextmenu/contextmenu.js

@@ -6,17 +6,37 @@ import { contextmenuRecipe } from "./contextmenu.recipe.js";
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export function ContextMenu({ children, items, className }) {
+export function ContextMenu({ children, items, menuLabel = "Context menu", className, }) {
     const rootRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const returnFocusTo = React.useRef(null);
     const [pos, setPos] = React.useState(null);
     const open = (e) => {
         e.preventDefault();
+        // where focus goes back to on close. The menu takes focus to be operable
+        // at all, so something has to remember what had it.
+        returnFocusTo.current = document.activeElement;
         // flip so the menu stays on-screen near the right/bottom edges
         const x = Math.min(e.clientX, window.innerWidth - 220);
         const y = Math.min(e.clientY, window.innerHeight - 12 - items.length * 34);
         setPos({ x: Math.max(8, x), y: Math.max(8, y) });
     };
-    const close = React.useCallback(() => setPos(null), []);
+    const close = React.useCallback((restoreFocus = false) => {
+        setPos(null);
+        if (restoreFocus)
+            returnFocusTo.current?.focus?.();
+        returnFocusTo.current = null;
+    }, []);
+    /** The items a roving focus may land on: not separators, not disabled. */
+    const enabled = React.useCallback(() => Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []), []);
+    // `role="menu"` puts a screen reader in application mode, where the arrow
+    // keys are the only navigation there is — so opening has to put focus on an
+    // item, or the role is a promise the component does not keep (#188).
+    React.useEffect(() => {
+        if (!pos)
+            return;
+        enabled()[0]?.focus();
+    }, [pos, enabled]);
     React.useEffect(() => {
         if (!pos)
             return;
@@ -24,7 +44,7 @@ export function ContextMenu({ children, items, className }) {
             if (!rootRef.current?.contains(e.target))
                 close();
         };
-        const onKey = (e) => e.key === "Escape" && close();
+        const onKey = (e) => e.key === "Escape" && close(true);
         document.addEventListener("pointerdown", onDown);
         document.addEventListener("keydown", onKey);
         return () => {
@@ -32,11 +52,34 @@ export function ContextMenu({ children, items, className }) {
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx("div", { className: "contextmenu-content", role: "menu", style: { left: pos.x, top: pos.y }, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    const onMenuKeyDown = (e) => {
+        // a menu is not a focus trap: Tab leaves, and leaving means closing
+        if (e.key === "Tab") {
+            close(true);
+            return;
+        }
+        const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
+        const items = enabled();
+        if (!items.length)
+            return;
+        const at = items.indexOf(document.activeElement);
+        let next = null;
+        if (step)
+            next = (at + step + items.length) % items.length;
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = items.length - 1;
+        if (next === null)
+            return;
+        e.preventDefault();
+        items[next]?.focus();
+    };
+    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx("div", { ref: menuRef, className: "contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                         ? "contextmenu-item contextmenu-item--danger"
-                        : "contextmenu-item", onClick: () => {
+                        : "contextmenu-item", tabIndex: -1, onClick: () => {
                         item.onSelect?.();
-                        close();
+                        close(true);
                     }, children: [item.icon, item.label, item.shortcut && (_jsx("span", { className: "contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
 }
 ContextMenu.displayName = "ContextMenu";

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -24,6 +24,13 @@ const asText = (v) => {
         return "";
     if (Array.isArray(v))
         return v.join(", ");
+    // Before the generic object branch, which would look for `.name`, find none
+    // and return "" — turning every Date into the empty string (#185). The ISO
+    // date is stable and locale-independent, so `contains "2026-06"` works; it
+    // will not match "16/06/2026", and a date-aware operator set is Attio's
+    // date-picker UI, which has to be measured before it can be built.
+    if (v instanceof Date)
+        return Number.isNaN(v.getTime()) ? "" : v.toISOString().slice(0, 10);
     if (typeof v === "object") {
         const name = v.name;
         return typeof name === "string" ? name : "";
@@ -66,7 +73,12 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
             const av = get(a, s.key);
             const bv = get(b, s.key);
             let d = 0;
-            if (typeof av === "number" && typeof bv === "number")
+            // Dates compare by instant, the way two numbers do. Falling through to
+            // text here is what made a date column sort identically ascending and
+            // descending — every comparison was "" against "" (#185).
+            if (av instanceof Date && bv instanceof Date)
+                d = av.getTime() - bv.getTime();
+            else if (typeof av === "number" && typeof bv === "number")
                 d = av - bv;
             else
                 d = asText(av).localeCompare(asText(bv));

package/dist/types/components/contextmenu/contextmenu.d.ts

@@ -14,6 +14,8 @@ export type ContextMenuProps = {
     /** The area that opens the menu on right-click. */
     children: React.ReactNode;
     items: ContextMenuOption[];
+    /** Accessible name for the menu surface. */
+    menuLabel?: string;
     className?: string;
 };
 /**
@@ -21,7 +23,7 @@ export type ContextMenuProps = {
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export declare function ContextMenu({ children, items, className }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, items, menuLabel, className, }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",