@apliteni/apliteni-ui 0.124.2 → 0.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.124.2",
+  "version": "0.125.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -545,6 +545,17 @@ class and invalid styling as appropriate:
 The frame supplies a stable ID, required state, and linked hint/error messages.
 An optional `id` lets the caller choose the control ID; it must be unique.
 
+A `Dropdown` is a control too. Spread the attributes onto it and its trigger takes
+`aria-describedby` and `aria-invalid`, so the error and hint are read when it gets focus.
+Its accessible name is the label and then the chosen value. Outside a `Field`,
+`Dropdown` takes `aria-describedby` and `aria-invalid` as props and forwards them to the trigger.
+
+```tsx
+<Field label="Owner" error="That option is no longer available.">
+  {control => <Dropdown {...control} variant="select" items={owners} />}
+</Field>
+```
+
 ### Search
 
 `SearchField` is the toolbar's search box: a search glyph, a native

package/react/dist/index.d.ts

@@ -501,6 +501,10 @@ type DropdownProps = {
     /** A field above the rows that filters them as the reader types. */
     search?: boolean | DropdownSearch;
     ariaLabel?: string;
+    /** Names the elements that describe the trigger, e.g. a field's error and hint. */
+    'aria-describedby'?: string;
+    /** Marks the trigger invalid. `Field` supplies it while its error shows. */
+    'aria-invalid'?: boolean | 'true' | 'false';
     id?: string;
     panelClass?: string;
     /** Controlled: the host owns the open state and answers `onOpenChange`. */
@@ -512,7 +516,7 @@ type DropdownProps = {
     /** Draw the row yourself. `props` is everything the row needs; spread it. */
     row?: (item: DropdownItem, props: DropdownRowProps) => ReactNode;
 };
-declare function Dropdown({ label, value, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, disabled, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;
+declare function Dropdown({ label, value, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, disabled, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, 'aria-describedby': describedBy, 'aria-invalid': invalid, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;
 
 type BackLinkOwnProps = {
     /** The address. No address, or a `javascript:` one, and nothing is rendered. */

package/react/dist/index.js

@@ -2072,6 +2072,7 @@ function DatePicker({
 import {
   Fragment as Fragment5,
   useCallback as useCallback4,
+  useContext as useContext2,
   useEffect as useEffect7,
   useId as useId8,
   useRef as useRef11,
@@ -2087,6 +2088,12 @@ import {
   dropdownHeightFit,
   filterPanelRow
 } from "@apliteni/apliteni-ui";
+
+// src/fieldContext.ts
+import { createContext as createContext2 } from "react";
+var FieldContext = createContext2(null);
+
+// src/Dropdown.tsx
 import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var EXIT_SLACK_MS2 = 50;
 var SETTLE_MS = 450;
@@ -2140,6 +2147,8 @@ function Dropdown({
   ariaLabel,
   id,
   panelClass = "",
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
   open: openProp,
   defaultOpen = false,
   onOpenChange,
@@ -2159,6 +2168,8 @@ function Dropdown({
   const at = useRef11("");
   const auto = useId8().replace(/:/g, "");
   const uid = id ?? auto;
+  const inField = useContext2(FieldContext);
+  const fieldName = inField && id === inField.id && !(ariaLabel && triggerContent != null) ? { id: `${uid}-trigger`, labelId: inField.labelId, labelledBy: `${inField.labelId} ${uid}-trigger` } : null;
   const setOpen = useCallback4((next) => {
     if (openProp === void 0) setSelfOpen(next);
     onOpenChange?.(next);
@@ -2559,7 +2570,11 @@ function Dropdown({
         disabled: disabled || void 0,
         "aria-haspopup": sx ? "dialog" : listRole,
         "aria-expanded": open,
+        id: fieldName?.id,
         "aria-label": ariaLabel && triggerContent != null ? ariaLabel : void 0,
+        "aria-labelledby": fieldName?.labelledBy,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid,
         ref: trigger,
         onClick: (e) => {
           e.stopPropagation();
@@ -2588,6 +2603,7 @@ function Dropdown({
         "data-dropdown-panel": "",
         role: sx ? "dialog" : listRole,
         "aria-label": sx ? name : ariaLabel,
+        "aria-labelledby": !sx && !ariaLabel ? fieldName?.labelId : void 0,
         style: sx ? void 0 : cap,
         ref: panel,
         onClick: (e) => e.stopPropagation(),
@@ -3084,9 +3100,9 @@ import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function messages(id, hint, error) {
   return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
 }
-function Frame({ id, label, hint, error, required, children }) {
+function Frame({ id, labelId, label, hint, error, required, children }) {
   return /* @__PURE__ */ jsxs24("div", { className: "ui-field", children: [
-    /* @__PURE__ */ jsxs24("label", { className: "ui-field__label", htmlFor: id, children: [
+    /* @__PURE__ */ jsxs24("label", { className: "ui-field__label", id: labelId, htmlFor: id, children: [
       label,
       required && /* @__PURE__ */ jsx29("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
@@ -3109,7 +3125,8 @@ function wiring(id, hint, error) {
 function Field({ id: suppliedId, label, hint, error, required, children }) {
   const generatedId = useId10();
   const id = suppliedId ?? generatedId;
-  return /* @__PURE__ */ jsx29(Frame, { ...{ id, label, hint, error, required }, children: children({ ...wiring(id, hint, error), required }) });
+  const labelId = `${id}-label`;
+  return /* @__PURE__ */ jsx29(Frame, { ...{ id, labelId, label, hint, error, required }, children: /* @__PURE__ */ jsx29(FieldContext.Provider, { value: { id, labelId }, children: children({ ...wiring(id, hint, error), required }) }) });
 }
 var TextField = forwardRef6(function TextField2({ label, hint, error, required, type = "text", unit, icon: glyph, className = "", ...props }, ref) {
   const id = useId10();
@@ -3397,13 +3414,13 @@ var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...p
 });
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback5, useContext as useContext2, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useEffect as useEffect12, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState12 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
-var Context = createContext2(null);
+var Context = createContext3(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
-  const push = useContext2(Context);
+  const push = useContext3(Context);
   if (!push) throw new Error("useToast requires a Toast provider");
   return push;
 }

package/src/components/index.js

@@ -132,10 +132,10 @@ function withControlId(html) {
 // aria-describedby, aria-invalid, required. Anything the control already spells
 // out for itself wins — a caller who passed `invalid` to input() keeps their own
 // aria-invalid. `true` renders a bare boolean attribute.
-function withControlAttrs(html, attrs) {
+function withAttrsOn(html, openTag, attrs) {
   const pairs = Object.entries(attrs).filter(([, v]) => v != null && v !== false);
   if (!pairs.length) return html;
-  return html.replace(/<(input|textarea|select)\b([^>]*?)(\s*\/?)>/, (m, tag, rest, tail) => {
+  return html.replace(openTag, (m, tag, rest, tail) => {
     const add = pairs
       .filter(([k]) => !new RegExp(`\\s${k}(?=[\\s=>/]|$)`).test(rest))
       .map(([k, v]) => (v === true ? ` ${k}` : ` ${k}="${esc(v)}"`))
@@ -143,6 +143,38 @@ function withControlAttrs(html, attrs) {
     return `<${tag}${rest}${add}${tail}>`;
   });
 }
+const withControlAttrs = (html, attrs) => withAttrsOn(html, /<(input|textarea|select)\b([^>]*?)(\s*\/?)>/, attrs);
+
+// A dropdown() is not a form element: its id sits on the outer div, which a
+// <label for> cannot name, and its one input (the search field) is inside the
+// panel. So field() wires the trigger button instead: the label and the value
+// name it, and the hint or error describes it. why: docs/components.md#forms
+const DD_ROOT = /<(div)\b((?=[^>]*\bdata-dropdown(?=[\s>]))[^>]*?)(\s*\/?)>/;
+const DD_TRIGGER = /<(button)\b((?=[^>]*\bdata-dropdown-trigger\b)[^>]*?)(\s*\/?)>/;
+const DD_PANEL = /<(div)\b((?=[^>]*\bdata-dropdown-panel\b)[^>]*?)(\s*\/?)>/;
+const attrId = (tag) => tag?.match(/\sid="([^"]+)"/)?.[1] || null;
+function withDropdownId(html, id) {
+  const root = html.match(DD_ROOT)[0];
+  const existing = attrId(root);
+  if (existing) return { html, id: existing };
+  const own = id || nextId('field');
+  return { html: html.replace(DD_ROOT, (m) => m.replace('<div', `<div id="${esc(own)}"`)), id: own };
+}
+function withDropdownAttrs(html, { rootId, labelId, describedby, invalid }) {
+  const trigger = html.match(DD_TRIGGER)?.[0] || '';
+  const triggerId = attrId(trigger) || `${rootId}-trigger`;
+  // A trigger that carries its own aria-label keeps it: the caller named it.
+  const named = labelId && !/\saria-label(?:ledby)?=/.test(trigger);
+  let out = withAttrsOn(html, DD_TRIGGER, {
+    id: named ? triggerId : null,
+    'aria-labelledby': named ? `${labelId} ${triggerId}` : null,
+    'aria-describedby': describedby,
+    'aria-invalid': invalid,
+  });
+  const panel = html.match(DD_PANEL)?.[0] || '';
+  if (labelId && !/\saria-label(?:ledby)?=/.test(panel)) out = withAttrsOn(out, DD_PANEL, { 'aria-labelledby': labelId });
+  return out;
+}
 
 // A labelled control with, optionally, a hint or an error under it.
 //
@@ -156,21 +188,28 @@ function withControlAttrs(html, attrs) {
 export function field({ label, hint, error, control = '', id, required = false } = {}) {
   let ctl = control;
   let forId = id;
+  const dd = DD_ROOT.test(control);
+  let ddId = null;
   if (label && control) {
-    const r = withControlId(control);
+    const r = dd ? withDropdownId(control, id) : withControlId(control);
     ctl = r.html;
     forId = id || r.id;
+    if (dd) ddId = r.id;
   }
   // Error wins over hint — only one message shows, so only one id is minted.
   const msg = error || hint;
   const msgId = msg && control ? nextId(error ? 'field-err' : 'field-hint') : null;
-  ctl = withControlAttrs(ctl, {
-    'aria-describedby': msgId,
-    'aria-invalid': error ? 'true' : null,
-    required: required || null,
-  });
+  ctl = dd
+    ? withDropdownAttrs(ctl, {
+      rootId: ddId, labelId: ddId && `${ddId}-label`, describedby: msgId, invalid: error ? 'true' : null,
+    })
+    : withControlAttrs(ctl, {
+      'aria-describedby': msgId,
+      'aria-invalid': error ? 'true' : null,
+      required: required || null,
+    });
   const lab = label
-    ? `<label class="ui-field__label"${forId ? ` for="${id ? esc(id) : forId}"` : ''}>${esc(label)}`
+    ? `<label class="ui-field__label"${ddId ? ` id="${esc(ddId)}-label"` : ''}${forId ? ` for="${id ? esc(id) : forId}"` : ''}>${esc(label)}`
       + `${required ? '<span class="ui-field__req" aria-hidden="true">*</span>' : ''}</label>`
     : '';
   const foot = error