@jirawatpyk/aura-react 5.2.0 → 5.4.0

package/dist/index.d.ts

@@ -46,6 +46,11 @@ export interface DataTableState {
 	sort: DataTableSort | null;
 	page: number;
 }
+/** A callback that gets one row. Written with your own row type (`(r: Order) => …`) it still fits (5.4):
+ * the row is checked the way method parameters are, so no cast from `Record<string, any>` is needed. */
+export type RowCallback<R> = {
+	bivarianceHack(row: Record<string, any>): R;
+}["bivarianceHack"];
 export interface DataTableColumn {
 	/** Key into each row object. */
 	key: string;
@@ -62,9 +67,9 @@ export interface DataTableColumn {
 	/** Header becomes a button cycling asc → desc → unsorted. */
 	sortable?: boolean | undefined;
 	/** Value to sort by, when not the cell value (dates, amounts). */
-	sortValue?: ((row: Record<string, any>) => string | number | null) | undefined;
+	sortValue?: RowCallback<string | number | null> | undefined;
 	/** Custom cell content. */
-	render?: ((row: Record<string, any>) => React$1.ReactNode) | undefined;
+	render?: RowCallback<React$1.ReactNode> | undefined;
 	/** Set false to keep a sized column fixed when the table is `resizable`. */
 	resizable?: boolean | undefined;
 	/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
@@ -98,7 +103,9 @@ export interface DataTableEmpty {
 export interface DataTableProps {
 	/** Defaults to ID · NAME · STATUS · OWNER (96 / 160 / 112 / auto px). */
 	columns?: DataTableColumn[] | undefined;
-	rows: Array<Record<string, React$1.ReactNode>>;
+	/** Row objects. Any typed interface works (5.4: before, `interface Order {…}` rows needed a cast); cells show
+	 * the value at each column's key unless the column has `render`. */
+	rows: ReadonlyArray<Record<string, any>>;
 	/** Column key giving each row a unique React key. Default: the first column's key. */
 	rowKey?: string | undefined;
 	/** Accessible name for the table. */
@@ -145,7 +152,7 @@ export interface DataTableProps {
 	totalRows?: number | undefined;
 	/** Makes each row a link: the first column's content renders as the provider's linkComponent (or `<a>`), and a click
 	 * or Enter anywhere on the row follows it. Ctrl/⌘-click opens a new tab as usual. */
-	getRowHref?: ((row: Record<string, any>) => string) | undefined;
+	getRowHref?: RowCallback<string> | undefined;
 	/** Pager arrows become links to these URLs (search-param paging). Without onPageChange the link navigates. */
 	getPageHref?: ((page: number) => string) | undefined;
 	/** Router link for getRowHref / getPageHref. Default: AuraProvider's linkComponent, else `<a>`. */
@@ -153,7 +160,7 @@ export interface DataTableProps {
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number | undefined;
 	/** Called on row click or Enter. */
-	onRowActivate?: ((row: Record<string, any>) => void) | undefined;
+	onRowActivate?: RowCallback<void> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
@@ -321,11 +328,14 @@ export interface FormErrorItem {
 	message: React$1.ReactNode;
 }
 /** The list of problems at the top of a form after a failed submit; each links to its field (GOV.UK pattern). */
+/** react-hook-form's `formState.errors` (FieldErrors) or any object shaped like it: a `message` at any depth. */
+export type FormErrorTree = {
+	readonly [field: string]: object | undefined;
+};
 export interface FormErrorSummaryProps {
-	/** A list, or react-hook-form's `formState.errors` as is (`{ name: { message } }`). Empty → renders nothing. */
-	errors: FormErrorItem[] | Record<string, {
-		message?: React$1.ReactNode | undefined;
-	} | undefined>;
+	/** A list, or react-hook-form's `formState.errors` as is: `{ name: { message } }`, nested for `address.street`
+	 * and field arrays (`items.0.name`). Empty → renders nothing. */
+	errors: FormErrorItem[] | FormErrorTree;
 	/** Default "Fix N fields to continue" in the provider's language. */
 	title?: React$1.ReactNode | undefined;
 	/** Called with the field when a link is followed, e.g. react-hook-form's `setFocus`. Default: focus the element whose id (or name) is the field. */
@@ -417,9 +427,15 @@ export type SelectOption = string | {
 	label: string;
 	disabled?: boolean | undefined;
 };
-export interface SelectProps extends FieldProps, Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "required"> {
-	options: SelectOption[];
-	/** A disabled first option shown in fg-tertiary until something is chosen. */
+/** 5.3: opens AURA's own list (light and dark alike) over a real `<select>`, which keeps `name`, `required`, the ref,
+ * `onChange`, react-hook-form `register` and form posts. `multiple` or `size > 1` keeps the native list box. */
+export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "required"> {
+	/** Visible label; also the accessible name. Omit only with `aria-label` or `aria-labelledby` (a toolbar, a table
+	 * cell); development builds warn when the field has no name at all. */
+	label?: string | undefined;
+	/** The choices; or pass `<option>` / `<optgroup>` children instead (5.3: optional). */
+	options?: SelectOption[] | undefined;
+	/** Shown in fg-tertiary on the closed field until something is chosen; not listed as a choice. */
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
 }
@@ -1217,6 +1233,7 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 export declare const Field: React$1.ForwardRefExoticComponent<FieldComponentProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 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>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;

package/dist/styles.css

@@ -424,7 +424,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select .aura-input__control { padding-right: calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); cursor: pointer; }
 .aura-select__chevron { position: absolute; right: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
 .aura-select select:invalid, .aura-select select:has(option[value=""]:checked) { color: var(--aura-fg-tertiary); }
+/* 5.3: the field is a button over an invisible <select> (forms, refs, events); the list is AURA's, like Combobox. */
 .aura-select option { color: var(--aura-fg-primary); background: var(--aura-bg-input); }
+.aura-select--custom { position: relative; }
+.aura-select__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none; }
+.aura-select__trigger { display: flex; align-items: center; text-align: start; background: none; border: 0; color: inherit; font: inherit; width: 100%; min-width: 0; }
+.aura-select__trigger:disabled { cursor: not-allowed; }
+.aura-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-select__value.is-placeholder { color: var(--aura-fg-tertiary); }
+.aura-select__group { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-tertiary); }
+.aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
 .aura-radio-group__list { display: flex; flex-direction: column; gap: var(--aura-space-3); }

package/dist/styles.layer.css

@@ -426,7 +426,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select .aura-input__control { padding-right: calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); cursor: pointer; }
 .aura-select__chevron { position: absolute; right: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
 .aura-select select:invalid, .aura-select select:has(option[value=""]:checked) { color: var(--aura-fg-tertiary); }
+/* 5.3: the field is a button over an invisible <select> (forms, refs, events); the list is AURA's, like Combobox. */
 .aura-select option { color: var(--aura-fg-primary); background: var(--aura-bg-input); }
+.aura-select--custom { position: relative; }
+.aura-select__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none; }
+.aura-select__trigger { display: flex; align-items: center; text-align: start; background: none; border: 0; color: inherit; font: inherit; width: 100%; min-width: 0; }
+.aura-select__trigger:disabled { cursor: not-allowed; }
+.aura-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-select__value.is-placeholder { color: var(--aura-fg-tertiary); }
+.aura-select__group { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-tertiary); }
+.aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
 .aura-radio-group__list { display: flex; flex-direction: column; gap: var(--aura-space-3); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",
@@ -44,20 +44,20 @@
     "./dist/aura.bundle.js"
   ],
   "scripts": {
-    "build": "node scripts/build.mjs && node scripts/sync-bundle.mjs",
-    "test:ssr": "node scripts/ssr-test.mjs && node --conditions=react-server scripts/server-entry-test.mjs",
-    "typecheck": "tsc -p tsconfig.src.json && tsc -p tsconfig.json && tsc -p tsconfig.exact.json",
-    "examples": "node examples/build.mjs",
-    "themes": "node scripts/test-themes.mjs",
-    "test:pilots": "npm run examples && npm run themes && python3 tests/pilot_test.py && python3 tests/pilots_test.py",
+    "build": "node scripts/build.ts && node scripts/sync-bundle.ts",
+    "test:ssr": "node scripts/ssr-test.ts && node --conditions=react-server scripts/server-entry-test.ts",
+    "typecheck": "tsc -p tsconfig.src.json && tsc -p tsconfig.json && tsc -p tsconfig.exact.json && tsc -p examples/tsconfig.json",
+    "examples": "node examples/build.ts",
+    "themes": "node scripts/test-themes.ts",
+    "test:pilots": "npm run examples && npm run themes && playwright test -c tests/playwright.config.ts",
     "theme": "node scripts/aura-theme.mjs",
     "prepack": "npm run build",
-    "pretest:ssr": "node scripts/build.mjs",
-    "prethemes": "node scripts/build.mjs",
-    "test:hydrate": "node scripts/hydrate-test.mjs",
-    "size": "node scripts/size-check.mjs",
-    "preexamples": "node scripts/build.mjs",
-    "test:layout": "node scripts/layout-test.mjs"
+    "pretest:ssr": "node scripts/build.ts",
+    "prethemes": "node scripts/build.ts",
+    "test:hydrate": "node scripts/hydrate-test.ts",
+    "size": "node scripts/size-check.ts",
+    "preexamples": "node scripts/build.ts",
+    "test:layout": "node scripts/layout-test.ts"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -72,7 +72,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
-    "typescript": "^5.6.0",
+    "typescript": "^5.8.0",
     "@playwright/test": "^1.45.0"
   },
   "bin": {

package/scripts/aura-theme.mjs

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+// @ts-check
 /* aura-theme — write a project theme CSS file from a brand colour.
  *   npx aura-theme --brand "#0ea5e9" [--signal "#facc15"] [--primary brand] [--name acme] [--selector .tenant-acme] [--out src/aura-theme.css]
  * Prints every contrast check; exits 1 if any fails. */
@@ -7,39 +8,50 @@ import { createTheme } from '../dist/esm/theme.js';
 
 const USAGE = 'Usage: aura-theme --brand "#0ea5e9" [--signal "#facc15"] [--primary ink|brand] [--name acme] [--selector .tenant] [--out theme.css]';
 const KNOWN = ['brand', 'signal', 'primary', 'name', 'selector', 'out', 'help'];
+/**
+ * @param {string} msg
+ * @returns {never}
+ */
 function fail(msg) {
   console.error('aura-theme: ' + msg + '\n' + USAGE);
   process.exit(2);
 }
 /* --key value and --key=value (5.2); a value-taking option with no value is an error, not `true`. */
+/** @type {Record<string, string>} */
 const args = {};
+let help = false;
 for (let i = 2; i < process.argv.length; i++) {
-  const a = process.argv[i];
+  const a = process.argv[i] || '';
   if (!a.startsWith('--')) fail('unexpected "' + a + '"');
   const eq = a.indexOf('=');
   const k = eq > 0 ? a.slice(2, eq) : a.slice(2);
   if (KNOWN.indexOf(k) < 0) fail('unknown option --' + k);
-  if (k === 'help') { args.help = true; continue; }
-  const v = eq > 0 ? a.slice(eq + 1) : process.argv[i + 1] !== undefined && !process.argv[i + 1].startsWith('--') ? process.argv[++i] : undefined;
+  if (k === 'help') { help = true; continue; }
+  const next = process.argv[i + 1];
+  const v = eq > 0 ? a.slice(eq + 1) : next !== undefined && !next.startsWith('--') ? process.argv[++i] : undefined;
   if (v === undefined || v === '') fail('--' + k + ' needs a value');
   args[k] = v;
 }
-if (args.help) {
+if (help) {
   console.log(USAGE);
   process.exit(0);
 }
 if (!args.brand) fail('--brand is required');
 for (const k of ['brand', 'signal']) {
-  if (args[k] !== undefined && /^(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(args[k])) args[k] = '#' + args[k]; /* a shell ate the # */
-  if (args[k] !== undefined && !/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(args[k])) fail('--' + k + ' must be a #rgb or #rrggbb colour (got "' + args[k] + '"; quote it in the shell: --' + k + ' "#0ea5e9")');
+  const c = args[k];
+  if (c !== undefined && /^(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(c)) args[k] = '#' + c; /* a shell ate the # */
+  const hex = args[k];
+  if (hex !== undefined && !/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) fail('--' + k + ' must be a #rgb or #rrggbb colour (got "' + args[k] + '"; quote it in the shell: --' + k + ' "#0ea5e9")');
 }
 if (args.primary !== undefined && args.primary !== 'ink' && args.primary !== 'brand') fail('--primary is ink or brand');
-let t, css;
+/** @type {ReturnType<typeof createTheme>} */
+let t;
+let css = '';
 try {
   t = createTheme({ brand: args.brand, signal: args.signal, primary: args.primary, name: args.name });
   css = t.css(args.selector);
 } catch (e) {
-  fail(e.message);
+  fail(e instanceof Error ? e.message : String(e));
 }
 if (args.out) fs.writeFileSync(args.out, css); else process.stdout.write(css);
 const log = args.out ? console.log : console.error;