@mediaradar/design-components 0.18.2 → 0.18.4

package/dist/index.cjs

@@ -76,6 +76,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// <define:__FONT_SIZE_KEYS__>
+var define_FONT_SIZE_KEYS_default = ["micro", "xs", "card-title", "dense", "sm", "panel-title", "base", "md", "lg", "xl", "h1"];
+
 // src/InfoTip.tsx
 var import_react = require("react");
 var import_react_dom = require("react-dom");
@@ -85,6 +88,17 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
   const [open, setOpen] = (0, import_react.useState)(false);
   const [pos, setPos] = (0, import_react.useState)(null);
   const btnRef = (0, import_react.useRef)(null);
+  const closeTimer = (0, import_react.useRef)(null);
+  const textId = (0, import_react.useId)();
+  const cancelClose = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  };
+  const closeSoon = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 120);
+  };
+  (0, import_react.useEffect)(() => cancelClose, []);
   (0, import_react.useEffect)(() => {
     if (!open) return;
     const onDown = (e) => {
@@ -106,6 +120,7 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
     setPos({ top: r.bottom + 6, left, width });
   };
   const show = () => {
+    cancelClose();
     place();
     setOpen(true);
   };
@@ -116,7 +131,7 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
   };
   const hoverProps = trigger === "hover" ? {
     onMouseEnter: show,
-    onMouseLeave: () => setOpen(false),
+    onMouseLeave: closeSoon,
     onFocus: show,
     onBlur: () => setOpen(false)
   } : {};
@@ -129,16 +144,20 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
         onClick: toggle,
         "aria-label": label,
         "aria-expanded": open,
+        "aria-describedby": textId,
         ...hoverProps,
         className: "inline-flex cursor-pointer items-center text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Info, { size, "aria-hidden": "true" })
       }
     ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: textId, hidden: true, children: text }),
     open && pos && (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          role: "tooltip",
+          "aria-hidden": "true",
+          onMouseEnter: trigger === "hover" ? cancelClose : void 0,
+          onMouseLeave: trigger === "hover" ? closeSoon : void 0,
           style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
           className: "z-[90] rounded-control border border-border-default bg-surface px-3 py-2 text-[12px] font-normal not-italic normal-case leading-relaxed tracking-normal text-text-secondary shadow-overlay",
           children: text
@@ -472,7 +491,7 @@ var import_tailwind_merge = require("tailwind-merge");
 var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
   extend: {
     classGroups: {
-      "font-size": [{ text: ["micro", "dense"] }]
+      "font-size": [{ text: define_FONT_SIZE_KEYS_default }]
     }
   }
 });
@@ -587,7 +606,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function boxClass(on, disabled) {
   return cn(
     "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
-    on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input",
+    on ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input",
     disabled && "cursor-not-allowed opacity-50"
   );
 }
@@ -927,7 +946,7 @@ function DateRangeFilter({
                       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "span",
                         {
-                          className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-white" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
+                          className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-brand-onprimary" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
                           children: d.getDate()
                         }
                       )
@@ -938,7 +957,7 @@ function DateRangeFilter({
             }) }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-4 flex justify-end gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-cancel`, onClick: () => setOpen(false), className: "rounded-control border border-border-default bg-surface px-5 py-2 text-[13px] font-semibold text-text-primary transition-colors hover:bg-subtle", children: "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-white transition-[filter] hover:brightness-110", children: "Apply" })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-brand-onprimary transition-[filter] hover:brightness-110", children: "Apply" })
             ] })
           ] })
         ]
@@ -1218,6 +1237,7 @@ function RadioOption({
 }
 function RowInfoTip({ text }) {
   const [open, setOpen] = (0, import_react4.useState)(false);
+  const id = (0, import_react4.useId)();
   const ref = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
     if (!open) return;
@@ -1238,14 +1258,16 @@ function RowInfoTip({ text }) {
         },
         "aria-label": "More information",
         "aria-expanded": open,
-        className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
+        "aria-describedby": id,
+        className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.AlertCircle, { size: 13, "aria-hidden": "true" })
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       {
-        role: "tooltip",
+        id,
+        hidden: !open,
         className: "absolute left-0 top-[calc(100%+6px)] z-40 w-[220px] rounded-control border border-border-default bg-surface px-2.5 py-1.5 text-[11.5px] font-normal leading-snug text-text-secondary shadow-overlay",
         children: text
       }
@@ -1597,7 +1619,7 @@ var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other,
 function noResultsBody(workspaceName) {
   return workspaceName ? `Nothing in the \u201C${workspaceName}\u201D workspace matches. ${NO_RESULTS_BODY}` : NO_RESULTS_BODY;
 }
-var PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-white transition-colors hover:opacity-90";
+var PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-brand-onprimary transition-colors hover:opacity-90";
 var QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text-text-link transition-colors hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus";
 function NoResultsEmptyState({
   title = NO_RESULTS_TITLE,
@@ -1938,6 +1960,15 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
 function cx6(...parts) {
   return parts.filter(Boolean).join(" ");
 }
+function addDescribedBy(el, id) {
+  const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter(Boolean);
+  if (!ids.includes(id)) el.setAttribute("aria-describedby", [...ids, id].join(" "));
+}
+function removeDescribedBy(el, id) {
+  const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter((x) => x && x !== id);
+  if (ids.length) el.setAttribute("aria-describedby", ids.join(" "));
+  else el.removeAttribute("aria-describedby");
+}
 function exitDurationMs(el) {
   if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
   const cs = window.getComputedStyle(el);
@@ -1975,6 +2006,7 @@ function Tooltip({
   const openRef = (0, import_react10.useRef)(false);
   const mountedRef = (0, import_react10.useRef)(false);
   const id = (0, import_react10.useId)();
+  const describedRef = (0, import_react10.useRef)(null);
   const clearHideTimer = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -2011,7 +2043,8 @@ function Tooltip({
     if (!mountedRef.current) setBoxWidth(null);
     mountedRef.current = true;
     setAnchor({ top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom, right: r.right });
-    if (anchorRef) el.setAttribute("aria-describedby", id);
+    const target = anchorRef ? el : describedRef.current;
+    if (target) addDescribedBy(target, id);
   };
   const show = () => {
     clearHideTimer();
@@ -2028,7 +2061,9 @@ function Tooltip({
     mountedRef.current = false;
     setAnchor(null);
     setBoxWidth(null);
-    if (anchorRef?.current) anchorRef.current.removeAttribute("aria-describedby");
+    if (anchorRef?.current) removeDescribedBy(anchorRef.current, id);
+    if (describedRef.current) removeDescribedBy(describedRef.current, id);
+    describedRef.current = null;
   };
   const hideNow = () => {
     clearShowTimer();
@@ -2079,6 +2114,12 @@ function Tooltip({
       el.removeEventListener("blur", hide);
     };
   }, [anchorRef, placement, delay]);
+  (0, import_react10.useEffect)(() => {
+    if (!anchor) return;
+    const onKey = (e) => e.key === "Escape" && hideNow();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [anchor]);
   (0, import_react10.useLayoutEffect)(() => {
     if (!anchor) return;
     const el = boxRef.current;
@@ -2142,9 +2183,11 @@ function Tooltip({
       className,
       onMouseEnter: show,
       onMouseLeave: hide,
-      onFocus: show,
+      onFocus: (e) => {
+        describedRef.current = e.target;
+        show();
+      },
       onBlur: hide,
-      "aria-describedby": anchor ? id : void 0,
       children: [
         children,
         floating
@@ -2788,7 +2831,7 @@ function MetricCells({ spendN, yoy }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-[10px] font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-micro font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
       up ? "+" : "\u2212",
       Math.abs(yoy),
       "%"
@@ -2839,7 +2882,7 @@ var import_class_variance_authority = require("class-variance-authority");
 var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
   {
     variants: {
       variant: {
@@ -2955,11 +2998,38 @@ function NameListModal({
     () => Object.fromEntries((options ?? []).map((o) => [o.key, !!o.initial]))
   );
   const toggle = (key) => setChecked((c) => ({ ...c, [key]: !c[key] }));
+  const dialogRef = (0, import_react14.useRef)(null);
+  const titleId = (0, import_react14.useId)();
+  const fieldId = (0, import_react14.useId)();
   (0, import_react14.useEffect)(() => {
     const onKey = (e) => e.key === "Escape" && onCancel();
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onCancel]);
+  const [opener] = (0, import_react14.useState)(() => typeof document === "undefined" ? null : document.activeElement);
+  (0, import_react14.useEffect)(
+    () => () => {
+      const active = document.activeElement;
+      if (!active || active === document.body) opener?.focus?.();
+    },
+    [opener]
+  );
+  const trapTab = (e) => {
+    if (e.key !== "Tab" || !dialogRef.current) return;
+    const items = [
+      ...dialogRef.current.querySelectorAll("button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex='-1'])")
+    ];
+    if (items.length === 0) return;
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
   return (0, import_react_dom5.createPortal)(
     // bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
     // No in-data-[theme=dark] override needed any more -- the token redefines
@@ -2972,18 +3042,20 @@ function NameListModal({
         children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "div",
           {
+            ref: dialogRef,
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": title,
+            "aria-labelledby": titleId,
+            onKeyDown: trapTab,
             className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { id: titleId, className: "text-[16px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-4 flex flex-col gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { htmlFor: fieldId, className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "input",
                   {
-                    id: "account-list-name",
+                    id: fieldId,
                     autoFocus: true,
                     value: name,
                     onChange: (e) => setName(e.target.value),
@@ -3141,7 +3213,7 @@ function SortButton({
         // subtly tighter than the fixed headers next to them. A control
         // should carry exactly the properties that do not inherit, and
         // nothing more.
-        "group inline-flex items-center gap-1 uppercase transition-colors",
+        "group inline-flex items-center gap-1 uppercase transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
         ALIGN[align],
         !disabled && "hover:text-text-primary"
       ),