@jirawatpyk/aura-react 5.10.1 → 5.12.0

package/dist/esm/Checkbox.js

@@ -50,7 +50,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
         checked: on,
         tabIndex: props.tabIndex,
         disabled: props.disabled,
-        "aria-describedby": descId,
+        "aria-describedby": cx(props["aria-describedby"], descId) || void 0,
         "aria-label": labelled ? void 0 : props.label,
         onChange: function(e) {
           st[1](e.target.checked);

package/dist/esm/DataTable.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { useStrings, useLinkComponent } from "./locale.js";
-import { cx, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import { cx, devWarnOnce, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Checkbox } from "./Checkbox.js";
@@ -416,6 +416,12 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     return rowHref ? /* @__PURE__ */ React.createElement(Link, { href: rowHref(r), className: "aura-table__row-link" }, content) : content;
   }
   const height = props.height || 0;
+  const autoRows = props.rowHeight === "auto" && !height;
+  if (props.rowHeight === "auto" && height)
+    devWarnOnce(
+      "table-row-height-auto",
+      'DataTable `rowHeight="auto"` is ignored with `height`: virtualized rows are one fixed height. Drop `height` (and paginate) to let rows grow.'
+    );
   const virtual = !!height && !loading && pageRows.length > 0 && !stacked;
   const stickyTotal = !!(props.footer && props.stickyFooter && rows.length && !loading);
   const bodyH = Math.max(ROW_H, height - ROW_H - (stickyTotal ? ROW_H : 0));
@@ -940,6 +946,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   }
   function rowCells(r, i, k, isSel) {
     const ri = i + 1;
+    const selLabel = selectable && canSelect(r) ? props.rowSelectLabel && props.rowSelectLabel(r) || t.selectRow(k) : void 0;
     const cells = [/* @__PURE__ */ React.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
     if (selectable)
       cells.push(
@@ -952,7 +959,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             className: cx("aura-table__sel", nPinned && "is-pinned"),
             tabIndex: tabFor(ri, 0),
             "data-rc": ri + ":0",
-            "aria-label": canSelect(r) ? t.selectRow(k) : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
+            "aria-label": canSelect(r) ? selLabel : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
             onFocus: function(e) {
               if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
             }
@@ -963,7 +970,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               hideLabel: true,
               checked: isSel,
               tabIndex: -1,
-              label: t.selectRow(k),
+              label: selLabel,
               onChange: function(on) {
                 toggle(k, on);
               }
@@ -984,6 +991,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             "data-rc": ri + ":" + ci,
             className: cx(
               "aura-table__td",
+              autoRows && "aura-table__td--auto",
               c.mono && "aura-table__mono",
               c.align === "end" && "is-end",
               pin && "is-pinned",
@@ -995,7 +1003,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
             }
           },
-          j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
+          autoRows ? /* @__PURE__ */ React.createElement("span", { className: "aura-table__cell" }, j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)) : j === 0 ? rowLinkWrap(r, cellContent(c, r)) : cellContent(c, r)
         )
       );
     });
@@ -1074,6 +1082,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               "aria-selected": selectable && canSelect(r) ? isSel : void 0,
               className: cx(
                 "aura-table__row",
+                autoRows && "aura-table__row--auto",
                 isSel && "is-selected",
                 (props.onRowActivate || rowHref) && "is-actionable"
               ),

package/dist/esm/FilterBar.js

@@ -55,7 +55,7 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
       ref,
       role: "region",
       "aria-label": props.label || t.filters,
-      className: cx("aura-filterbar", props.className)
+      className: cx("aura-filterbar", props.searchGrow && "aura-filterbar--grow", props.className)
     },
     /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconSearch, null), className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
       "input",

package/dist/esm/FilterSelect.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from "react";
+import { Select, FILTER_KEY } from "./Select.js";
+import { omit } from "./internal.js";
+const FilterSelect = React.forwardRef(function FilterSelect2(props, ref) {
+  const onChange = props.onChange;
+  const pass = Object.assign(omit(props, ["label", "allLabel", "onChange"]), {
+    [FILTER_KEY]: { name: props.label, allLabel: props.allLabel },
+    onChange: onChange ? function(e) {
+      onChange(e.target.value);
+    } : void 0
+  });
+  return /* @__PURE__ */ React.createElement(Select, { ...pass, ref });
+});
+export {
+  FilterSelect
+};

package/dist/esm/Select.js

@@ -7,6 +7,7 @@ import { useDensity } from "./locale.js";
 import { cx, devWarnOnce, omit, uid, useIsoLayoutEffect, useMergedRef, useMounted } from "./internal.js";
 import { IconCheck, IconChevronDown } from "./icons.js";
 const h = React.createElement;
+const FILTER_KEY = "__auraFilter";
 const FORM_KEYS = ["name", "form", "value", "defaultValue", "disabled", "autoComplete", "onInput", "onInvalid"];
 const HANDLED_KEYS = FORM_KEYS.concat([
   "onChange",
@@ -40,20 +41,49 @@ function readItems(el) {
     };
   });
 }
-function initialLabel(props) {
+function textOf(n) {
+  if (n == null || typeof n === "boolean") return "";
+  if (typeof n === "string" || typeof n === "number") return String(n);
+  if (Array.isArray(n)) return n.map(textOf).join("");
+  return React.isValidElement(n) ? textOf(n.props.children) : "";
+}
+function childOptions(children, off) {
+  const out = [];
+  React.Children.forEach(children, function(c) {
+    if (!React.isValidElement(c)) return;
+    const p = c.props;
+    if (c.type === "optgroup" || c.type === React.Fragment)
+      out.push.apply(out, childOptions(p.children, off || c.type === "optgroup" && !!p.disabled));
+    else if (c.type === "option") {
+      const label = textOf(p.children);
+      out.push({ value: p.value != null ? String(p.value) : label, label, disabled: off || !!p.disabled });
+    }
+  });
+  return out;
+}
+function initialLabel(props, filter) {
   const opts = (props.options || []).map(function(o) {
     return typeof o === "object" ? o : { value: o, label: o };
-  });
-  const v = props.value !== void 0 && props.value !== null ? String(props.value) : props.defaultValue !== void 0 && props.defaultValue !== null ? String(props.defaultValue) : props.placeholder ? "" : opts[0] ? opts[0].value : "";
+  }).concat(childOptions(props.children));
+  const first = opts.filter(function(o) {
+    return !o.disabled;
+  })[0];
+  const v = props.value !== void 0 && props.value !== null ? String(props.value) : props.defaultValue !== void 0 && props.defaultValue !== null ? String(props.defaultValue) : props.placeholder ? "" : first ? first.value : "";
   const hit = opts.filter(function(o) {
     return o.value === v;
   })[0];
-  if (hit) return { label: hit.label, empty: false };
-  return { label: props.placeholder || "", empty: true };
+  if (hit)
+    return {
+      label: filter && filter.allLabel && opts[0] && hit.value === opts[0].value ? filter.allLabel : hit.label,
+      full: hit.label,
+      empty: false
+    };
+  return { label: props.placeholder || "", full: props.placeholder || "", empty: true };
 }
 const Select = React.forwardRef(function Select2(props, ref) {
   const auto = uid(), id = props.id || auto;
-  const rest = omit(props, FIELD_KEYS.concat(["children"]));
+  const filter = props[FILTER_KEY];
+  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY]));
   const opts = (props.options || []).map(function(o) {
     const v = typeof o === "object" ? o : { value: o, label: o };
     return /* @__PURE__ */ React.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
@@ -68,7 +98,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
   const live = !native && mounted;
   const density = useDensity();
   React.useEffect(function() {
-    if (props.label || props["aria-label"] || props["aria-labelledby"] || props.title) return;
+    if (filter || props.label || props["aria-label"] || props["aria-labelledby"] || props.title) return;
     if (document.querySelector('label[for="' + id.replace(/["\\]/g, "\\$&") + '"]')) return;
     devWarnOnce(
       "select-name",
@@ -77,20 +107,24 @@ const Select = React.forwardRef(function Select2(props, ref) {
   }, []);
   const selRef = React.useRef(null), trigRef = React.useRef(null), listRef = React.useRef(null);
   const shown = React.useState(function() {
-    return initialLabel(props);
+    return initialLabel(props, filter);
   });
   const openState = React.useState(false), open = openState[0];
   const activeState = React.useState(-1), active = activeState[0];
   const items = React.useState([]);
   const pos = React.useState(null);
   const typed = React.useRef({ text: "", at: 0 });
+  const allLabel = React.useRef(void 0);
+  allLabel.current = filter ? filter.allLabel : void 0;
   const sync = React.useCallback(function() {
     const el = selRef.current;
     if (!el) return;
     const o = el.selectedIndex >= 0 ? el.options[el.selectedIndex] : null;
-    const next = o ? { label: o.textContent || "", empty: o.value === "" } : { label: "", empty: true };
+    const text = o ? o.textContent || "" : "";
+    const short = allLabel.current && el.selectedIndex === 0 ? allLabel.current : text;
+    const next = o ? { label: short, full: text, empty: o.value === "" } : { label: "", full: "", empty: true };
     shown[1](function(cur) {
-      return cur.label === next.label && cur.empty === next.empty ? cur : next;
+      return cur.label === next.label && cur.full === next.full && cur.empty === next.empty ? cur : next;
     });
   }, []);
   const hook = React.useCallback(
@@ -281,12 +315,16 @@ const Select = React.forwardRef(function Select2(props, ref) {
         const t = trigRef.current && trigRef.current.parentElement;
         if (!t) return;
         const r = t.getBoundingClientRect(), below = window.innerHeight - r.bottom - 8, above = r.top - 8, want = listRef.current ? listRef.current.scrollHeight : 320, up = below < Math.min(want, 200) && above > below;
+        const lw = listRef.current ? Math.max(r.width, listRef.current.offsetWidth) : r.width;
+        const rtl = getComputedStyle(t).direction === "rtl";
+        const left = lw <= r.width ? r.left : Math.max(8, Math.min(rtl ? r.right - lw : r.left, window.innerWidth - lw - 8));
         pos[1]({
-          left: r.left,
+          left,
           width: r.width,
           top: up ? void 0 : r.bottom + 4,
           bottom: up ? window.innerHeight - r.top + 4 : void 0,
-          maxHeight: Math.min(320, (up ? above : below) - 4)
+          maxHeight: Math.min(320, (up ? above : below) - 4),
+          rtl
         });
       }
       place();
@@ -319,7 +357,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
     [open, active, pos[0] != null]
   );
   const described = [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-  const field = (child) => /* @__PURE__ */ React.createElement(
+  const field = (child) => filter ? child : /* @__PURE__ */ React.createElement(
     Field,
     {
       id,
@@ -334,6 +372,21 @@ const Select = React.forwardRef(function Select2(props, ref) {
     },
     child
   );
+  const nameId = id + "-name";
+  const face = filter ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { id: nameId, className: "aura-filterselect__name", "aria-hidden": true }, filter.name), /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__value", "aria-hidden": shown[0].label !== shown[0].full || void 0 }, shown[0].label || " "), shown[0].label !== shown[0].full ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, shown[0].full) : null, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-filterselect__chevron" })) : null;
+  if (!live && filter)
+    return /* @__PURE__ */ React.createElement("div", { className: cx("aura-filterselect", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__face", "aria-hidden": true, style: props.style }, face), h(
+      "select",
+      Object.assign(extra, omit(rest, ["style"]), {
+        ref: selMerged,
+        id,
+        className: "aura-filterselect__native",
+        "aria-label": rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : filter.name),
+        "aria-describedby": described
+      }),
+      opts,
+      props.children
+    ));
   if (!live)
     return field(
       /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
@@ -354,7 +407,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
   const optId = function(i) {
     return id + "-opt-" + i;
   };
-  const labelledBy = rest["aria-labelledby"] || (props.label ? labelId : void 0);
+  const labelledBy = rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : props.label ? labelId : void 0);
   const selIndex = selRef.current ? selRef.current.selectedIndex : -1;
   const option = function(it) {
     const sel = selIndex === it.index;
@@ -400,6 +453,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
       {
         ref: listRef,
         "data-density": density,
+        dir: pos[0] ? pos[0].rtl ? "rtl" : "ltr" : void 0,
         className: "aura-combo__popover aura-select__popover",
         style: pos[0] ? {
           left: pos[0].left,
@@ -432,10 +486,17 @@ const Select = React.forwardRef(function Select2(props, ref) {
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: cx("aura-input aura-select aura-select--custom", props.icon && "has-icon", open && "is-open"),
+        className: cx(
+          filter ? "aura-filterselect" : "aura-input",
+          "aura-select aura-select--custom",
+          props.icon && "has-icon",
+          open && "is-open",
+          filter && props.disabled && "is-disabled",
+          filter && props.className
+        ),
         "data-invalid": props.error ? "" : void 0
       },
-      props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null,
+      props.icon && !filter ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null,
       h(
         "select",
         Object.assign(extra, pick(rest, FORM_KEYS), {
@@ -469,7 +530,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           type: "button",
           role: "combobox",
           form: id + "-no-form",
-          className: "aura-input__control aura-select__trigger",
+          className: filter ? "aura-select__trigger aura-filterselect__face" : "aura-input__control aura-select__trigger",
           disabled: props.disabled,
           tabIndex: rest.tabIndex,
           "aria-haspopup": "listbox",
@@ -478,7 +539,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           "aria-activedescendant": open && active >= 0 ? optId(active) : void 0,
           id,
           "aria-label": rest["aria-label"],
-          "aria-labelledby": rest["aria-labelledby"],
+          "aria-labelledby": rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : void 0),
           "aria-required": props.required || void 0,
           "aria-invalid": props.error ? true : void 0,
           "aria-describedby": described,
@@ -501,13 +562,14 @@ const Select = React.forwardRef(function Select2(props, ref) {
             if (selRef.current) selRef.current.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
           }
         },
-        /* @__PURE__ */ React.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
+        face || /* @__PURE__ */ React.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
       ),
-      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
+      filter ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
       popup
     )
   );
 });
 export {
+  FILTER_KEY,
   Select
 };

package/dist/esm/index.js

@@ -10,6 +10,7 @@ import { Field } from "./Field.js";
 import { TextField } from "./TextField.js";
 import { Textarea } from "./Textarea.js";
 import { Select } from "./Select.js";
+import { FilterSelect } from "./FilterSelect.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
@@ -87,6 +88,7 @@ export {
   Field,
   FileUpload,
   FilterBar,
+  FilterSelect,
   FormErrorSummary,
   Grid,
   ICONS,

package/dist/index.d.cts

@@ -129,6 +129,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	isRowSelectable?: RowCallback<boolean, Row> | undefined;
 	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
 	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
+	/** Accessible name for a row's checkbox (and its cell), e.g. `(r) => 'Select ' + r.company` (5.11). Default: the
+	 * `selectRow` string with the row key ("Select M-102"), also used when this returns an empty string. */
+	rowSelectLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -175,6 +178,10 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
+	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
+	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
+	rowHeight?: "auto" | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
 	columnControls?: boolean | undefined;
 	/** Set false to keep column controls but turn off reordering. */
@@ -256,7 +263,7 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	hideLabel?: boolean | undefined;
 	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
-	/** Second line under the visible label (needs an id to be linked). */
+	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). */
 	description?: React$1.ReactNode | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
@@ -394,6 +401,9 @@ export interface FilterBarProps {
 	actions?: React$1.ReactNode | undefined;
 	/** Accessible name of the region. Default "Filters". */
 	label?: string | undefined;
+	/** The search takes all the room the controls leave in its row, instead of stopping at 360px with the count and
+	 * actions pushed to the end (5.12). */
+	searchGrow?: boolean | undefined;
 	className?: string | undefined;
 }
 /** One command in the palette. */
@@ -460,6 +470,20 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
 }
+/** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
+export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
+	/** The filter's name: shown first on the face ("Status") and its accessible name. */
+	label: string;
+	/** The choices; the first is the "all" choice. Or pass `<option>` children. */
+	options?: SelectOption[] | undefined;
+	children?: React$1.ReactNode | undefined;
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((value: string) => void) | undefined;
+	/** A shorter word the face shows while the first option is chosen ("All" for "All statuses"). The list and screen
+	 * readers keep the option's own text. */
+	allLabel?: string | undefined;
+}
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
@@ -1331,6 +1355,9 @@ export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps
 export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 /** A select field: a button that opens an AURA list (5.3), over a real <select> that keeps forms, refs and events. */
 export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+/** A compact filter for FilterBar (5.12): a small button reading "Status All ▾" that opens Select's list. The name
+ * is the accessible name, the chosen option its value; forms, refs and the keyboard work as in Select. */
+export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */

package/dist/index.d.ts

@@ -129,6 +129,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	isRowSelectable?: RowCallback<boolean, Row> | undefined;
 	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
 	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
+	/** Accessible name for a row's checkbox (and its cell), e.g. `(r) => 'Select ' + r.company` (5.11). Default: the
+	 * `selectRow` string with the row key ("Select M-102"), also used when this returns an empty string. */
+	rowSelectLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -175,6 +178,10 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
+	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
+	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
+	rowHeight?: "auto" | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
 	columnControls?: boolean | undefined;
 	/** Set false to keep column controls but turn off reordering. */
@@ -256,7 +263,7 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	hideLabel?: boolean | undefined;
 	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
-	/** Second line under the visible label (needs an id to be linked). */
+	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). */
 	description?: React$1.ReactNode | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
@@ -394,6 +401,9 @@ export interface FilterBarProps {
 	actions?: React$1.ReactNode | undefined;
 	/** Accessible name of the region. Default "Filters". */
 	label?: string | undefined;
+	/** The search takes all the room the controls leave in its row, instead of stopping at 360px with the count and
+	 * actions pushed to the end (5.12). */
+	searchGrow?: boolean | undefined;
 	className?: string | undefined;
 }
 /** One command in the palette. */
@@ -460,6 +470,20 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
 }
+/** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
+export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
+	/** The filter's name: shown first on the face ("Status") and its accessible name. */
+	label: string;
+	/** The choices; the first is the "all" choice. Or pass `<option>` children. */
+	options?: SelectOption[] | undefined;
+	children?: React$1.ReactNode | undefined;
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((value: string) => void) | undefined;
+	/** A shorter word the face shows while the first option is chosen ("All" for "All statuses"). The list and screen
+	 * readers keep the option's own text. */
+	allLabel?: string | undefined;
+}
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
@@ -1331,6 +1355,9 @@ export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps
 export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 /** A select field: a button that opens an AURA list (5.3), over a real <select> that keeps forms, refs and events. */
 export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+/** A compact filter for FilterBar (5.12): a small button reading "Status All ▾" that opens Select's list. The name
+ * is the accessible name, the chosen option its value; forms, refs and the keyboard work as in Select. */
+export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */

package/dist/styles.css

@@ -130,7 +130,21 @@ a.aura-btn { text-decoration: none; }
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
-.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
+/* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
+ * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
+ * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */
+.aura-table__row--auto { height: auto; min-height: var(--aura-table-row-height); }
+.aura-table__td--auto {
+  --aura-cell-pad-y: clamp(0px, calc((var(--aura-table-row-height) - 1px - var(--aura-button-height-sm)) / 2), var(--aura-space-2));
+  display: flex; align-items: center; height: auto; line-height: 20px; white-space: normal;
+  padding-top: var(--aura-cell-pad-y); padding-bottom: var(--aura-cell-pad-y);
+}
+.aura-table__cell { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
+/* Badges and pills side by side keep apart when they wrap onto a second line. */
+.aura-table__cell > .aura-badge, .aura-table__cell > .aura-pill { vertical-align: middle; margin-top: 2px; margin-bottom: 2px; }
+.aura-table__cell > .aura-badge:not(:last-child), .aura-table__cell > .aura-pill:not(:last-child) { margin-inline-end: var(--aura-space-1); }
+.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn,
+.aura-table__cell > .aura-icon-btn, .aura-table__cell > .aura-btn { vertical-align: middle; }
 .aura-table__th { position: relative; box-sizing: border-box; display: flex; align-items: center; padding-right: var(--aura-space-2); }
 /* Column sizes come from custom properties set per cell (4.20), so the card layout can override them. */
 .aura-table__th, .aura-table__td { flex: var(--aura-cell-flex, none); width: var(--aura-cell-w, auto); min-width: var(--aura-cell-min, 0); }
@@ -153,6 +167,10 @@ a.aura-btn { text-decoration: none; }
 
 /* Selection column */
 .aura-table__sel { width: var(--aura-table-select-width); flex: none; display: flex; align-items: center; background: inherit; }
+/* 5.11: the selection box's invisible input reaches 24×24 (WCAG 2.5.8) around the 16px box it draws. Its left edge
+ * overlaps the sticky 24px gutter, so it sits one layer up — unless the column has scrolled under that gutter. */
+.aura-table__sel .aura-check__input { inset: calc((var(--aura-icon-sm) - 24px) / 2); z-index: 2; }
+.aura-table.is-scrolled-x .aura-table__sel:not(.is-pinned) .aura-check__input { z-index: auto; }
 .aura-table__sel.is-pinned { position: sticky; left: var(--aura-space-6); z-index: 2; }
 
 /* Pinned columns */
@@ -1345,6 +1363,37 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-filterbar__search { flex-basis: 100%; max-width: none; }
   .aura-filterbar__spacer { display: none; }
 }
+/* 5.12 searchGrow: the search fills what the controls leave. */
+.aura-filterbar--grow .aura-filterbar__search { max-width: none; }
+.aura-filterbar--grow .aura-filterbar__search ~ .aura-filterbar__spacer { display: none; }
+/* Compact filters sit closer together than full fields. */
+.aura-filterbar__controls:has(> .aura-filterselect) { gap: var(--aura-space-2); }
+
+/* 5.12 FilterSelect: a compact face — "Status All ▾" — as wide as its words, over Select's machinery and list. */
+.aura-filterselect { position: relative; display: inline-flex; width: fit-content; max-width: 100%; vertical-align: middle; font-family: var(--font-sans); }
+.aura-filterselect__face {
+  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--aura-space-1); width: auto; max-width: 100%;
+  min-height: var(--aura-input-height); padding-block: 0; padding-inline: var(--aura-space-2) var(--aura-space-1);
+  background: var(--aura-bg-input); color: var(--aura-fg-primary);
+  border: 1px solid var(--aura-border-control); border-radius: var(--aura-radius-md);
+  font: inherit; font-size: 13px; line-height: 18px; text-align: start; cursor: pointer;
+  transition: border-color var(--aura-duration-fast) var(--aura-ease);
+}
+.aura-filterselect__face:hover { border-color: var(--aura-fg-secondary); }
+.aura-filterselect__name { flex: none; white-space: nowrap; color: var(--aura-fg-secondary); }
+.aura-filterselect__value { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+.aura-filterselect__chevron { flex: none; width: 14px; height: 14px; color: var(--aura-fg-secondary); }
+.aura-filterselect.is-open .aura-filterselect__chevron { transform: rotate(180deg); }
+.aura-filterselect__face:focus-visible, .aura-filterselect:has(.aura-filterselect__native:focus-visible) .aura-filterselect__face {
+  outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong);
+}
+.aura-filterselect__face:focus { outline-style: none; }
+.aura-filterselect__face:focus-visible { outline-style: solid; }
+/* Before hydration: the real <select>, invisible, over the face (16px so iOS doesn't zoom when it opens). */
+.aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; }
+.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
+.aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
+@media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
 
 /* Command palette: a search field over a grouped list, above everything else (it can open from a Dialog) */
 .aura-dialog-layer.aura-command-layer { z-index: var(--aura-z-menu); align-items: flex-start; padding: 12vh var(--aura-space-4) var(--aura-space-4); }
@@ -1580,6 +1629,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.11: rowHeight="auto" leaves cards as they are. */
+  .aura-table__td--auto { display: block; white-space: nowrap; }
+  .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }
   .aura-table__spacer { display: none; }
   .aura-table__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';