@mediaradar/design-components 0.18.0 → 0.18.2

package/dist/index.d.cts

@@ -398,6 +398,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
 
 /**
  * @pattern DateRangeFilter
+ * @status stable
  * @description Date-range control -- the two-line chip (caption + value) with
  * a chevron that opens a two-pane picker: preset shortcuts on the left, a
  * dual-month calendar with range highlighting on the right, Start/End fields,
@@ -675,6 +676,7 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
 
 /**
  * @pattern Card
+ * @status stable
  * @description Layout primitive for grouping content in a bordered, elevated
  * surface. Width is controlled by the parent container, not the Card itself,
  * so it works unchanged as a fixed-width rail item or a grid cell. Applies an
@@ -851,6 +853,7 @@ interface SummaryGroup {
 }
 /**
  * @pattern WorkspaceSelectedCard
+ * @status stable
  * @description Sticky recap card listing what each section's picker has
  * added, as collapsible groups with per-item remove and "Remove all" --
  * generic over the `SummaryGroup` shape, no domain coupling. Reconciled from
@@ -912,6 +915,7 @@ declare function WorkspaceSelectedCard({ groups, testIdPrefix }: WorkspaceSelect
 
 /**
  * @pattern BarChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a ranked-bar chart --
  * descending bar profile under a blank-labelled axis frame (dashed
  * gridlines, blank y/x-tick boxes), so an unsatisfiable filter still reads
@@ -941,6 +945,7 @@ declare function BarChartPlaceholder({ height }: BarChartPlaceholderProps): reac
 
 /**
  * @pattern LineChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a multi-series trend chart --
  * four grey paths over the shared axis frame, each with a solid-then-dashed
  * handoff for the live chart's forecast tail, and a point at every sample.
@@ -971,6 +976,7 @@ declare function LineChartPlaceholder({ height }: LineChartPlaceholderProps): re
 
 /**
  * @pattern PieChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a pie chart -- a grey disc
  * seamed where slices would fall, beside a blank legend. No axis, matching
  * the live pie it stands in for. Same no-results use as
@@ -1172,6 +1178,7 @@ declare function AdvertiserNoResults({ query, hint, }: AdvertiserNoResultsProps)
 
 /**
  * @pattern SelectAllVisible
+ * @status stable
  * @description "Select all visible" row for a search-first picker's result
  * list -- only render it once the caller decides the visible result set is
  * long enough to warrant it (`insights-studio-prototype`'s three advertiser-
@@ -1205,6 +1212,7 @@ declare function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }
 
 /**
  * @pattern SelectedSection
+ * @status stable
  * @description Collapsible "Selected (n)" container for a search-first
  * picker. Selections can pile up and crowd out the live search results, so
  * the user can fold them away to refocus on the search. Controlled so the
@@ -1349,6 +1357,7 @@ interface SelectionPickerProps<T extends PickerRow> {
 }
 /**
  * @pattern SelectionPicker
+ * @status stable
  * @description Generic search-and-filter picker for building a selection out
  * of a larger catalog -- a search box plus filter dropdowns above a checkbox
  * table, with an optional "Search / Account lists" source toggle for pulling
@@ -1376,10 +1385,12 @@ interface SelectionPickerProps<T extends PickerRow> {
  * with both an `onChange` and the row's own `onClick` -- `CheckBox` stops
  * click propagation before firing `onChange`, which is exactly what lets it
  * sit inside a row that toggles on its own click without double-firing.
- * @a11y Search is an <input>; result rows and the account-list menu
- * (role="menu") are buttons. Escape closes the menu. Loading, empty and
- * error states announce through role="status", so a consumer should NOT
- * wrap this in its own live region -- that would double-announce.
+ * @a11y Search is an <input>; result rows are buttons. Each filter dropdown
+ * is a disclosure (aria-expanded) opening a labelled group of checkboxes,
+ * not a menu: it holds a search box and checkboxes, which a menu may not.
+ * Escape closes it. Loading, empty and error states announce through
+ * role="status", so a consumer should NOT wrap this in its own live region
+ * -- that would double-announce.
  * @usage
  * ```tsx
  * <SelectionPicker

package/dist/index.d.ts

@@ -398,6 +398,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
 
 /**
  * @pattern DateRangeFilter
+ * @status stable
  * @description Date-range control -- the two-line chip (caption + value) with
  * a chevron that opens a two-pane picker: preset shortcuts on the left, a
  * dual-month calendar with range highlighting on the right, Start/End fields,
@@ -675,6 +676,7 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
 
 /**
  * @pattern Card
+ * @status stable
  * @description Layout primitive for grouping content in a bordered, elevated
  * surface. Width is controlled by the parent container, not the Card itself,
  * so it works unchanged as a fixed-width rail item or a grid cell. Applies an
@@ -851,6 +853,7 @@ interface SummaryGroup {
 }
 /**
  * @pattern WorkspaceSelectedCard
+ * @status stable
  * @description Sticky recap card listing what each section's picker has
  * added, as collapsible groups with per-item remove and "Remove all" --
  * generic over the `SummaryGroup` shape, no domain coupling. Reconciled from
@@ -912,6 +915,7 @@ declare function WorkspaceSelectedCard({ groups, testIdPrefix }: WorkspaceSelect
 
 /**
  * @pattern BarChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a ranked-bar chart --
  * descending bar profile under a blank-labelled axis frame (dashed
  * gridlines, blank y/x-tick boxes), so an unsatisfiable filter still reads
@@ -941,6 +945,7 @@ declare function BarChartPlaceholder({ height }: BarChartPlaceholderProps): reac
 
 /**
  * @pattern LineChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a multi-series trend chart --
  * four grey paths over the shared axis frame, each with a solid-then-dashed
  * handoff for the live chart's forecast tail, and a point at every sample.
@@ -971,6 +976,7 @@ declare function LineChartPlaceholder({ height }: LineChartPlaceholderProps): re
 
 /**
  * @pattern PieChartPlaceholder
+ * @status stable
  * @description Neutral, dataless stand-in for a pie chart -- a grey disc
  * seamed where slices would fall, beside a blank legend. No axis, matching
  * the live pie it stands in for. Same no-results use as
@@ -1172,6 +1178,7 @@ declare function AdvertiserNoResults({ query, hint, }: AdvertiserNoResultsProps)
 
 /**
  * @pattern SelectAllVisible
+ * @status stable
  * @description "Select all visible" row for a search-first picker's result
  * list -- only render it once the caller decides the visible result set is
  * long enough to warrant it (`insights-studio-prototype`'s three advertiser-
@@ -1205,6 +1212,7 @@ declare function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }
 
 /**
  * @pattern SelectedSection
+ * @status stable
  * @description Collapsible "Selected (n)" container for a search-first
  * picker. Selections can pile up and crowd out the live search results, so
  * the user can fold them away to refocus on the search. Controlled so the
@@ -1349,6 +1357,7 @@ interface SelectionPickerProps<T extends PickerRow> {
 }
 /**
  * @pattern SelectionPicker
+ * @status stable
  * @description Generic search-and-filter picker for building a selection out
  * of a larger catalog -- a search box plus filter dropdowns above a checkbox
  * table, with an optional "Search / Account lists" source toggle for pulling
@@ -1376,10 +1385,12 @@ interface SelectionPickerProps<T extends PickerRow> {
  * with both an `onChange` and the row's own `onClick` -- `CheckBox` stops
  * click propagation before firing `onChange`, which is exactly what lets it
  * sit inside a row that toggles on its own click without double-firing.
- * @a11y Search is an <input>; result rows and the account-list menu
- * (role="menu") are buttons. Escape closes the menu. Loading, empty and
- * error states announce through role="status", so a consumer should NOT
- * wrap this in its own live region -- that would double-announce.
+ * @a11y Search is an <input>; result rows are buttons. Each filter dropdown
+ * is a disclosure (aria-expanded) opening a labelled group of checkboxes,
+ * not a menu: it holds a search box and checkboxes, which a menu may not.
+ * Escape closes it. Loading, empty and error states announce through
+ * role="status", so a consumer should NOT wrap this in its own live region
+ * -- that would double-announce.
  * @usage
  * ```tsx
  * <SelectionPicker

package/dist/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // src/InfoTip.tsx
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -2344,7 +2346,8 @@ function SelectionPicker({
                   "grid items-center gap-2 px-3 py-2.5",
                   rowGridCols,
                   isLocked ? "cursor-default opacity-50" : "cursor-pointer hover:bg-subtle",
-                  !isLocked && isSel && "opacity-60"
+                  // 70%, not lower: selected rows' text must keep 4.5:1 contrast.
+                  !isLocked && isSel && "opacity-70"
                 ),
                 children: [
                   isLocked ? /* @__PURE__ */ jsx24("span", { "aria-hidden": "true" }) : /* @__PURE__ */ jsx24(
@@ -2579,7 +2582,6 @@ function FilterDropdown({
         ref: btnRef,
         type: "button",
         onClick: () => setOpen((v) => !v),
-        "aria-haspopup": "menu",
         "aria-expanded": open,
         "data-testid": testIdPrefix && `${testIdPrefix}-filter-${filterSlug}`,
         className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
@@ -2594,7 +2596,7 @@ function FilterDropdown({
         "div",
         {
           ref: menuRef,
-          role: "menu",
+          role: "group",
           "aria-label": filter.label,
           style: { top: pos.top, left: pos.left },
           className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",