@attrus-ds/core 1.0.20 → 1.2.0

package/dist/react/Combobox/Combobox.tsx

@@ -20,6 +20,9 @@ export interface ComboOption {
   disabled?: boolean;
   /** Text used by the search filter when label isn't a plain string. */
   searchText?: string;
+  /** Leading glyph in the list — and the WHOLE trigger when the combobox is
+      `iconOnly` (the icon is the value in use, e.g. a sort order). */
+  icon?: React.ReactNode;
 }
 
 export type ComboboxStatus = 'default' | 'error';
@@ -59,6 +62,12 @@ export interface ComboboxProps {
       'end' for a compact control near the right edge, where growing right would
       run off the viewport. */
   align?: 'start' | 'end';
+  /** sm = 32px trigger (--control-h-sm), for a table toolbar beside sm buttons. */
+  size?: 'sm' | 'md';
+  /** Trigger shows only the selected option's icon + chevron; the label stays in
+      the DOM as sr-only, so the trigger is still announced by value. The list
+      keeps icon + text. Give every option an `icon`. */
+  iconOnly?: boolean;
   className?: string;
   style?: React.CSSProperties;
   'aria-label'?: string;
@@ -89,6 +98,8 @@ export const Combobox: React.FC<ComboboxProps> = ({
   searchPlaceholder = 'Search…',
   icon,
   status = 'default',
+  size = 'md',
+  iconOnly = false,
   filters,
   meta,
   footMeta,
@@ -212,6 +223,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
           setQ('');
         }}
       >
+        {o.icon != null ? <span className="combobox-option-icon" aria-hidden="true">{o.icon}</span> : null}
         <span className="combobox-option-content">
           <span className="combobox-option-label">{o.label}</span>
           {o.meta != null ? <span className="combobox-option-meta">{o.meta}</span> : null}
@@ -258,7 +270,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
   const tree = (
     <div
       ref={wrapRef}
-      className={['combobox', open ? 'is-open' : '', status === 'error' ? 'is-invalid' : '', className || ''].filter(Boolean).join(' ')}
+      className={['combobox', open ? 'is-open' : '', status === 'error' ? 'is-invalid' : '', size === 'sm' ? 'combobox-sm' : '', iconOnly ? 'is-icon-only' : '', className || ''].filter(Boolean).join(' ')}
       style={style}
       onKeyDown={onWrapKeyDown}
     >
@@ -271,8 +283,10 @@ export const Combobox: React.FC<ComboboxProps> = ({
         onClick={() => { setOpen((o) => !o); setActive(value); }}
         {...rest}
       >
-        {icon != null ? <span className="combobox-trigger-icon">{icon}</span> : null}
-        <span className="combobox-value">
+        {iconOnly
+          ? <span className="combobox-trigger-icon">{(selected && selected.icon) != null ? selected!.icon : icon}</span>
+          : icon != null ? <span className="combobox-trigger-icon">{icon}</span> : null}
+        <span className={iconOnly ? 'combobox-value sr-only' : 'combobox-value'}>
           {selected ? selected.label : <span className="combobox-placeholder">{placeholder}</span>}
         </span>
         <Chevron />
@@ -292,7 +306,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
       {open && pos
         ? createPortal(
             <div
-              className={['combobox', 'is-open', status === 'error' ? 'is-invalid' : '', className || ''].filter(Boolean).join(' ')}
+              className={['combobox', 'is-open', status === 'error' ? 'is-invalid' : '', size === 'sm' ? 'combobox-sm' : '', className || ''].filter(Boolean).join(' ')}
               style={{
                 /* MIN-width, not width: matching the trigger is right for a form
                    field, but as a fixed width it traps the list — a 50px chip

package/dist/react/DTFilters/DTFilters.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+export interface DTFilterScope {
+  value: string;
+  label: string;
+  placeholder?: string;
+  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
+}
+export interface DTFilterValue { scope: string | null; query: string; from: string; to: string; }
+export interface DTFiltersLabels {
+  searchBy: string; period: string; apply: string; clear: string; search: string;
+  pendingHint: string; remove: string; undo: string;
+}
+export interface DTFiltersProps {
+  /** "apply" (default): a draft committed by Apply / Enter — large or server lists.
+      "live": applies as you go, text debounced — small local lists. */
+  mode?: 'apply' | 'live';
+  scopes: DTFilterScope[];
+  /** The applied filters. */
+  value: DTFilterValue;
+  onChange: (next: DTFilterValue) => void;
+  /** live mode only: show the applied filters as removable pills. */
+  showPills?: boolean;
+  debounce?: number;
+  labels?: Partial<DTFiltersLabels>;
+  locale?: string;
+  className?: string;
+}
+
+export declare const DTFilters: React.FC<DTFiltersProps>;
+export declare const EMPTY_FILTERS: DTFilterValue;
+/** Compare only the digits of both sides: "40095" finds "40,095.00". */
+export declare function matchesDigits(haystack: string | number, needle: string): boolean;
+export default DTFilters;

package/dist/react/DTFilters/DTFilters.tsx

@@ -0,0 +1,237 @@
+import * as React from 'react';
+import { DateRangePicker } from '../DateRangePicker/DateRangePicker';
+
+/**
+ * ATTRUS DTFilters — the search + period bar of a data table, for DTToolbar's
+ * filters zone. One component, two commit models:
+ *
+ *   mode="apply" (default) — the controls edit a DRAFT; nothing reaches the
+ *     table until "Apply filters" or Enter. A second row under a hairline opens
+ *     while anything is pending or applied: Apply (with a hint balloon while
+ *     dirty), Clear filters (once something is applied), a rule, then the
+ *     applied filters as pills. A ✕ on a pill clears the control and leaves the
+ *     pill dashed and struck through with an undo, until the next Apply.
+ *     Use for large or server-side lists, where each change costs a request.
+ *
+ *   mode="live" — no second row; the period and the scope apply at once and the
+ *     text after a short debounce. Pills are optional and their ✕ removes now.
+ *     Use for small local lists, where filtering is free.
+ *
+ * Status tabs are NOT part of this bar: they sit above the table and always
+ * apply immediately, in both modes.
+ */
+export interface DTFilterScope {
+  value: string;
+  label: string;
+  placeholder?: string;
+  /** "decimal" for an amount scope — see matchesDigits. */
+  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
+}
+
+export interface DTFilterValue { scope: string | null; query: string; from: string; to: string; }
+
+export interface DTFiltersLabels {
+  searchBy: string; period: string; apply: string; clear: string; search: string;
+  pendingHint: string; remove: string; undo: string;
+}
+
+export interface DTFiltersProps {
+  mode?: 'apply' | 'live';
+  scopes: DTFilterScope[];
+  /** The APPLIED filters. */
+  value: DTFilterValue;
+  /** apply: on Apply / Enter / Clear. live: on every change (text debounced). */
+  onChange: (next: DTFilterValue) => void;
+  /** live mode only — show the applied filters as removable pills. */
+  showPills?: boolean;
+  /** Debounce for the text in live mode, ms. */
+  debounce?: number;
+  labels?: Partial<DTFiltersLabels>;
+  locale?: string;
+  className?: string;
+}
+
+export const EMPTY_FILTERS: DTFilterValue = { scope: null, query: '', from: '', to: '' };
+
+const LABELS: DTFiltersLabels = {
+  searchBy: 'Search by', period: 'Period', apply: 'Apply filters', clear: 'Clear filters', search: 'Search',
+  pendingHint: 'You have changes that are not applied yet.', remove: 'Remove filter', undo: 'Undo removal',
+};
+
+/** Value search that ignores formatting: "40095", "40,095.00" and "40.095,00"
+    all find 40,095.00 — only the digits of both sides are compared. */
+export function matchesDigits(haystack: string | number, needle: string): boolean {
+  const n = String(needle).replace(/\D/g, '');
+  if (!n) return true;
+  return String(haystack).replace(/\D/g, '').indexOf(n) > -1;
+}
+
+function fmtDate(s: string, locale: string) {
+  if (!s) return '…';
+  const [y, m, d] = s.split('-').map(Number);
+  return new Date(y, m - 1, d).toLocaleDateString(locale, { month: 'short', day: 'numeric' });
+}
+
+const Ico = {
+  x: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>,
+  undo: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /></svg>,
+  filter: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" /></svg>,
+};
+
+/** Keeps a removed item mounted for its exit transition (180ms). */
+function usePresence<T extends { key: string }>(items: T[], ms = 180) {
+  const [shown, setShown] = React.useState<(T & { phase: 'in' | 'entering' | 'leaving' })[]>(
+    () => items.map((i) => Object.assign({}, i, { phase: 'in' as const })));
+  React.useEffect(() => {
+    const keys = new Set(items.map((i) => i.key));
+    setShown((prev) => {
+      const prevKeys = new Set(prev.map((p) => p.key));
+      const next = prev.map((p) => keys.has(p.key)
+        ? Object.assign({}, items.find((i) => i.key === p.key)!, { phase: p.phase === 'leaving' ? 'entering' as const : p.phase })
+        : Object.assign({}, p, { phase: 'leaving' as const }));
+      items.forEach((i) => { if (!prevKeys.has(i.key)) next.push(Object.assign({}, i, { phase: 'entering' as const })); });
+      return next;
+    });
+    const enter = setTimeout(() => setShown((p) => p.map((x) => x.phase === 'entering' ? Object.assign({}, x, { phase: 'in' as const }) : x)), 20);
+    const leave = setTimeout(() => setShown((p) => p.filter((x) => x.phase !== 'leaving')), ms);
+    return () => { clearTimeout(enter); clearTimeout(leave); };
+  }, [items.map((i) => i.key + (i as any).pending).join('|')]); // eslint-disable-line react-hooks/exhaustive-deps
+  return shown;
+}
+
+export const DTFilters: React.FC<DTFiltersProps> = ({
+  mode = 'apply', scopes, value, onChange, showPills = false, debounce = 250, labels, locale = 'en-US', className,
+}) => {
+  const L = Object.assign({}, LABELS, labels);
+  const live = mode === 'live';
+  const [draft, setDraft] = React.useState<DTFilterValue>(value);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // An outside change to the applied value (e.g. a Clear from elsewhere) resets the draft.
+  const appliedKey = JSON.stringify(value);
+  React.useEffect(() => { setDraft(value); }, [appliedKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const edit = (patch: Partial<DTFilterValue>, textOnly = false) => {
+    const next = Object.assign({}, draft, patch);
+    setDraft(next);
+    if (!live) return;
+    if (timer.current) clearTimeout(timer.current);
+    if (textOnly) timer.current = setTimeout(() => onChange(next), debounce);
+    else onChange(next);
+  };
+
+  const dirty = !live && JSON.stringify(draft) !== appliedKey;
+  const hasApplied = !!(value.query || value.from || value.to);
+  const apply = () => { if (dirty) onChange(draft); };
+
+  const pickScope = (s: string) => {
+    if (draft.scope === s) { edit({ scope: null, query: '' }); return; }   // picked again: close + clear
+    edit({ scope: s });
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  // Enter applies — from the search, the date trigger, or with nothing focused.
+  // Buttons and pills keep their own Enter.
+  React.useEffect(() => {
+    if (live) return undefined;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Enter' || !dirty) return;
+      const t = e.target as HTMLElement;
+      const inBar = rootRef.current?.contains(t);
+      const nothing = t === document.body;
+      const isField = t.matches('.dt-filters-field input, .date-trigger');
+      if (nothing || (inBar && isField)) { e.preventDefault(); e.stopPropagation(); apply(); }
+    };
+    document.addEventListener('keydown', onKey, true);
+    return () => document.removeEventListener('keydown', onKey, true);
+  });
+
+  const scope = scopes.find((s) => s.value === draft.scope) || null;
+  const appliedScope = scopes.find((s) => s.value === value.scope);
+
+  // Pills come from what is APPLIED (live: from the draft, which is the applied state).
+  const src = live ? draft : value;
+  const pillScope = scopes.find((s) => s.value === src.scope);
+  const pills: { key: string; label: string; pending: boolean }[] = [];
+  if (src.query) pills.push({ key: 'query', label: (pillScope ? pillScope.label : '') + ': "' + src.query + '"', pending: !live && (draft.query !== value.query || draft.scope !== value.scope) });
+  if (src.from || src.to) pills.push({ key: 'period', label: L.period + ': ' + fmtDate(src.from, locale) + ' – ' + fmtDate(src.to, locale), pending: !live && (draft.from !== value.from || draft.to !== value.to) });
+  const shownPills = usePresence(pills);
+
+  const clearPill = (k: string) => k === 'query' ? edit({ query: '', scope: null }) : edit({ from: '', to: '' });
+  const restorePill = (k: string) => k === 'query'
+    ? setDraft(Object.assign({}, draft, { query: value.query, scope: value.scope }))
+    : setDraft(Object.assign({}, draft, { from: value.from, to: value.to }));
+
+  const pillEls = shownPills.map((p) => (
+    <span key={p.key} className={['dt-filter-pill', 'dt-filters-item', p.pending ? 'is-pending' : '', p.phase !== 'in' ? 'is-' + p.phase : ''].filter(Boolean).join(' ')}>
+      <span className="dt-filter-pill-label">{p.label}</span>
+      {p.pending
+        ? <button type="button" className="dt-filter-pill-action" aria-label={L.undo + ': ' + p.label} onClick={() => restorePill(p.key)}>{Ico.undo}</button>
+        : <button type="button" className="dt-filter-pill-action" aria-label={L.remove + ': ' + p.label} onClick={() => clearPill(p.key)}>{Ico.x}</button>}
+    </span>
+  ));
+
+  return (
+    <div ref={rootRef} className={['dt-filters', live ? 'is-live' : 'is-apply', className || ''].filter(Boolean).join(' ')}>
+      <div className="dt-filters-row">
+        <div className="dt-filters-scope">
+          <span className="dt-filters-scope-label" id={'dtf-by-' + (scopes[0] && scopes[0].value)}>{L.searchBy}</span>
+          <div className="btn-group" role="group" aria-labelledby={'dtf-by-' + (scopes[0] && scopes[0].value)}>
+            {scopes.map((s) => (
+              <button key={s.value} type="button" className="btn btn-secondary btn-sm" aria-pressed={draft.scope === s.value} onClick={() => pickScope(s.value)}>{s.label}</button>
+            ))}
+          </div>
+          <div className={['dt-filters-field', scope ? 'is-open' : ''].filter(Boolean).join(' ')} aria-hidden={!scope}>
+            {live ? (
+              /* live: the text already applies after a debounce; the inset Search
+                 button (tertiary — a search is not the screen's CTA) commits it now,
+                 for a user who would rather not wait. */
+              <div className="group group-sm">
+                <input ref={inputRef} tabIndex={scope ? 0 : -1}
+                  inputMode={scope ? scope.inputMode : undefined}
+                  placeholder={scope ? scope.placeholder || scope.label : ''} aria-label={scope ? scope.placeholder || scope.label : undefined}
+                  value={draft.query} onChange={(e) => edit({ query: e.target.value }, true)} />
+                <button type="button" className="fix-btn r is-tertiary" tabIndex={scope ? 0 : -1}
+                  disabled={!draft.query.trim()}
+                  onClick={() => edit({ query: draft.query })}>{L.search}</button>
+              </div>
+            ) : (
+              <input ref={inputRef} className="input input-sm" tabIndex={scope ? 0 : -1}
+                inputMode={scope ? scope.inputMode : undefined}
+                placeholder={scope ? scope.placeholder || scope.label : ''} aria-label={scope ? scope.placeholder || scope.label : undefined}
+                value={draft.query} onChange={(e) => edit({ query: e.target.value }, true)} />
+            )}
+          </div>
+        </div>
+        <DateRangePicker size="sm" portal from={draft.from} to={draft.to} placeholder={L.period} locale={locale}
+          aria-label={L.period} onChange={(f, t) => edit({ from: f, to: t })} />
+      </div>
+
+      {!live ? (
+        <div className={['dt-filters-apply', dirty || hasApplied ? 'is-open' : ''].filter(Boolean).join(' ')} aria-hidden={!(dirty || hasApplied)}>
+          <div className="dt-filters-apply-inner">
+            <span className="dt-filters-applywrap">
+              <button type="button" className="btn btn-primary btn-sm" disabled={!dirty} onClick={apply}>{Ico.filter}<span>{L.apply}</span></button>
+              <span className={['dt-filters-hint', dirty ? 'is-visible' : ''].filter(Boolean).join(' ')} role="status">{dirty ? L.pendingHint : ''}</span>
+            </span>
+            {hasApplied ? (
+              <button type="button" className="btn btn-ghost btn-sm dt-filters-item" onClick={() => { setDraft(EMPTY_FILTERS); onChange(EMPTY_FILTERS); }}>{L.clear}</button>
+            ) : null}
+            {pillEls.length ? <span className="dt-filters-vsep" aria-hidden="true" /> : null}
+            {pillEls}
+          </div>
+        </div>
+      ) : live && showPills ? (
+        /* live: the same second row under the same hairline, holding only the
+           pills — there is nothing to apply, so no Apply / Clear / rule. */
+        <div className={['dt-filters-apply', 'is-live', pills.length ? 'is-open' : ''].filter(Boolean).join(' ')} aria-hidden={!pills.length}>
+          <div className="dt-filters-apply-inner">{pillEls}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default DTFilters;

package/dist/react/DataTable/DataTable.d.ts

@@ -126,9 +126,11 @@ export declare const DTSubrowLead: React.FC<{
 /** Disclosure control for a collapsible subrow group — goes in the parent's
     lead cell. `controls` must match the subrow's id. */
 export declare const DTSubrowToggle: React.FC<{
-  expanded: boolean;
-  onToggle: () => void;
-  controls: string;
+  expanded?: boolean;
+  onToggle?: () => void;
+  controls?: string;
+  /** Holds the chevron's 20px on a row without children, so names align. */
+  spacer?: boolean;
   count?: number;
   label?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-expanded'>>;
@@ -157,6 +159,10 @@ export interface DTParentRowProps extends React.HTMLAttributes<HTMLTableRowEleme
   open?: boolean;
   onToggle?: () => void;
   controls?: string;
+  /** "toggle" (default): the row is the disclosure. "open": the row opens
+      something and only the chevron collapses — use DTRowButton for the name. */
+  rowAction?: 'toggle' | 'open';
+  onOpen?: () => void;
 }
 export declare const DTId: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
 export declare const DTCheckCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>>;
@@ -167,6 +173,12 @@ export declare const DTScrollY: React.FC<React.HTMLAttributes<HTMLDivElement>>;
 
 export declare const DTParentRow: React.FC<DTParentRowProps>;
 
+/** Keyboard handle for a rowAction="open" row: the name as a <button>. */
+/** "Showing n of total" strip above DTToolbar; renders only while filtered. */
+export declare const DTFilteredBand: React.FC<{ filtered: boolean; children?: React.ReactNode; className?: string }>;
+
+export declare const DTRowButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+
 export declare const DTPagination: React.FC<DTPaginationProps>;
 
 export default DataTable;

package/dist/react/DataTable/DataTable.tsx

@@ -431,22 +431,27 @@ export const DTSubrowLead: React.FC<{
 /** Disclosure control for a collapsible subrow group — put it in the parent's
     lead cell. Wire `controls` to the subrow's id so `aria-controls` resolves. */
 export const DTSubrowToggle: React.FC<{
-  expanded: boolean;
-  onToggle: () => void;
-  controls: string;
+  expanded?: boolean;
+  onToggle?: () => void;
+  controls?: string;
+  /** Holds the chevron's 20px on a row WITHOUT children, so names in a column
+      line up whether or not the row expands. Renders nothing interactive. */
+  spacer?: boolean;
   /** Announced as "Show 2 items" / "Hide 2 items". */
   count?: number;
   label?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-expanded'>> = ({
-  expanded, onToggle, controls, count, label, className, ...rest
-}) => (
+  expanded = false, onToggle, controls, count, label, spacer, className, ...rest
+}) => spacer ? (
+  <span className={['dt-subrow-toggle', 'is-spacer', className || ''].filter(Boolean).join(' ')} aria-hidden="true" />
+) : (
   <button
     type="button"
     className={['dt-subrow-toggle', className || ''].filter(Boolean).join(' ')}
     aria-expanded={expanded}
     aria-controls={controls}
     aria-label={(expanded ? 'Hide' : 'Show') + ' ' + (count != null ? count + ' ' : '') + (label || 'linked items')}
-    onClick={(e) => { e.stopPropagation(); onToggle(); }}
+    onClick={(e) => { e.stopPropagation(); if (onToggle) onToggle(); }}
     {...rest}
   >
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -682,23 +687,74 @@ export interface DTParentRowProps extends React.HTMLAttributes<HTMLTableRowEleme
   /** The group's kind: subrows share the parent's columns, a detail panel does not. */
   kind?: 'subrows' | 'detail';
   open?: boolean;
-  /** Whole-row disclosure — adds role/tabindex and the pointer affordance. */
+  /** Whole-row disclosure (rowAction="toggle") — adds role/tabindex and the
+      pointer affordance. With rowAction="open" only the chevron toggles. */
   onToggle?: () => void;
   controls?: string;
+  /** What a click on the ROW does.
+      "toggle" (default) — the row is the disclosure; the chevron is decorative.
+      "open" — the row opens something (a detail drawer); only the chevron
+      (DTSubrowToggle) collapses the group. The row is not a button itself —
+      put the name in a DTRowButton so the action has a keyboard handle. */
+  rowAction?: 'toggle' | 'open';
+  /** Called when rowAction="open" and the row is clicked. */
+  onOpen?: () => void;
 }
-export const DTParentRow: React.FC<DTParentRowProps> = ({ children, kind = 'subrows', open, onToggle, controls, className, ...rest }) => (
-  <tr
-    className={[kind === 'detail' ? 'has-detail' : 'has-subrows', onToggle ? 'is-collapsible is-clickable' : '', open ? 'is-open' : '', className || ''].filter(Boolean).join(' ')}
-    role={onToggle ? 'button' : undefined}
-    tabIndex={onToggle ? 0 : undefined}
-    aria-expanded={onToggle ? !!open : undefined}
-    aria-controls={controls}
-    onClick={onToggle}
-    onKeyDown={onToggle ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle(); } } : undefined}
+export const DTParentRow: React.FC<DTParentRowProps> = ({ children, kind = 'subrows', open, onToggle, controls, rowAction = 'toggle', onOpen, className, ...rest }) => {
+  const opens = rowAction === 'open';
+  const toggles = !opens && !!onToggle;
+  return (
+    <tr
+      className={[
+        kind === 'detail' ? 'has-detail' : 'has-subrows',
+        onToggle ? 'is-collapsible' : '',
+        toggles ? 'is-clickable' : '',
+        opens ? 'is-actionable' : '',
+        open ? 'is-open' : '',
+        className || '',
+      ].filter(Boolean).join(' ')}
+      role={toggles ? 'button' : undefined}
+      tabIndex={toggles ? 0 : undefined}
+      aria-expanded={toggles ? !!open : undefined}
+      aria-controls={toggles ? controls : undefined}
+      onClick={toggles ? onToggle : opens ? onOpen : undefined}
+      onKeyDown={toggles ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle!(); } } : undefined}
+      {...rest}
+    >
+      {children}
+    </tr>
+  );
+};
+
+/** "Showing n of total" strip, first child of .dt-wrap above DTToolbar. Renders
+    only while `filtered` (any applied filter, incl. a status tab other than All);
+    takes no space otherwise. The live region announces the new count. */
+export const DTFilteredBand: React.FC<{
+  filtered: boolean;
+  /** e.g. "Showing 3 of 8" — or the long form "Showing 3 of 8 transfers · 2 fees". */
+  children?: React.ReactNode;
+  className?: string;
+}> = ({ filtered, children, className }) => (
+  <div className={['dt-filtered', filtered ? 'is-open' : '', className || ''].filter(Boolean).join(' ')} aria-hidden={!filtered}>
+    <div className="dt-filtered-inner" aria-live="polite">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" /></svg>
+      <span>{filtered ? children : null}</span>
+    </div>
+  </div>
+);
+
+/** The keyboard handle of a row whose click opens something (rowAction="open"):
+    the name rendered as a real <button> that looks like the text it replaces. It
+    stops propagation so the row's own onClick does not fire a second time. */
+export const DTRowButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = ({ children, className, onClick, ...rest }) => (
+  <button
+    type="button"
+    className={['dt-row-button', className || ''].filter(Boolean).join(' ')}
+    onClick={(e) => { e.stopPropagation(); if (onClick) onClick(e); }}
     {...rest}
   >
     {children}
-  </tr>
+  </button>
 );
 
 /* Slot markers, set after both declarations exist. DataTable reads these to tell

package/dist/react/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export interface DateRangePreset { label: string; from: string; to: string; }
+
+export interface DateRangePickerProps {
+  /** ISO date ("2026-03-10"); "" = open on that side. */
+  from: string;
+  to: string;
+  onChange: (from: string, to: string) => void;
+  placeholder?: string;
+  /** sm = 32px trigger, for a table toolbar. */
+  size?: 'sm' | 'md';
+  /** Render the panel in <body> (default true) — .dt-wrap clips overflow. */
+  portal?: boolean;
+  presets?: DateRangePreset[];
+  locale?: string;
+  className?: string;
+  'aria-label'?: string;
+}
+
+export declare const DateRangePicker: React.FC<DateRangePickerProps>;
+export declare function defaultDatePresets(today?: Date): DateRangePreset[];
+export declare function formatDateRange(from: string, to: string, locale?: string): string;
+export default DateRangePicker;