@apliteni/apliteni-ui 0.105.0 → 0.107.0

package/package.json

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

package/react/dist/index.d.ts

@@ -469,6 +469,8 @@ type DropdownProps = {
     /** Replaces the trigger's label/value pair. With `ariaLabel`, names the trigger. */
     triggerContent?: ReactNode;
     triggerClass?: string;
+    /** The trigger is off: no stop, no panel, the kit's unavailable paint. #580 */
+    disabled?: boolean;
     chevron?: boolean;
     /** The edge the panel hugs. */
     align?: 'start' | 'end';
@@ -490,7 +492,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, 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, 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

@@ -1939,6 +1939,7 @@ function Dropdown({
   footer,
   triggerContent,
   triggerClass = "",
+  disabled = false,
   chevron = true,
   align = "start",
   direction = "down",
@@ -2235,6 +2236,7 @@ function Dropdown({
     trigger.current?.focus();
   };
   const onKeyDown = (e) => {
+    if (disabled && !open) return;
     const onTrigger = e.target === trigger.current;
     const onField = e.target === field.current;
     if (onField && composing(e)) return;
@@ -2299,14 +2301,14 @@ function Dropdown({
     if (!isRow(entry)) {
       return /* @__PURE__ */ jsx20("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
     }
-    const disabled = !!entry.disabled;
+    const disabled2 = !!entry.disabled;
     const selected = selectedOf(entry);
-    const asLink = !!entry.href && !disabled && !asOption;
+    const asLink = !!entry.href && !disabled2 && !asOption;
     const props = {
       className: cx6(
         "ui-dropdown__item",
         selected && "is-selected",
-        disabled && "is-disabled",
+        disabled2 && "is-disabled",
         entry.danger && "is-danger",
         Boolean(sx) && open && entry === active && "is-active"
       ),
@@ -2315,7 +2317,7 @@ function Dropdown({
       tabIndex: -1,
       ...entry.value != null ? { "data-value": String(entry.value) } : null,
       ...asOption ? { "aria-selected": selected } : null,
-      ...disabled ? { "aria-disabled": true } : null,
+      ...disabled2 ? { "aria-disabled": true } : null,
       ...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
       ...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
       onClick: (e) => choose(entry, e),
@@ -2362,6 +2364,7 @@ function Dropdown({
         type: "button",
         className: cx6("ui-dropdown__trigger", triggerClass),
         "data-dropdown-trigger": "",
+        disabled: disabled || void 0,
         "aria-haspopup": sx ? "dialog" : listRole,
         "aria-expanded": open,
         "aria-label": ariaLabel && triggerContent != null ? ariaLabel : void 0,

package/src/components/dropdown.js

@@ -157,6 +157,8 @@ function ddSearchBody({ items, sections }, sx, name, scroll) {
  * @param {boolean} [o.portal]     mount the panel on <body>, for a clipping or sticky ancestor
  * @param {boolean|number} [o.scroll] true, or a maxHeight in px, to cap and scroll
  * @param {boolean} [o.open]       render already-open (handy for screenshots)
+ * @param {boolean} [o.disabled]   the trigger is off: no stop, no panel, the kit's
+ *   unavailable paint. #580
  * @param {string} [o.ariaLabel]   accessible name for the panel and trigger
  * @param {boolean|object} [o.search] true, or { placeholder, label, empty, hint, query } —
  *   a field above the rows that filters them; `empty` may carry {q}
@@ -166,7 +168,7 @@ export function dropdown({
   label, value, placeholder = 'Select…', variant, items, sections,
   foot = '', header = '', footer = '', triggerContent, triggerClass = '', chevron = true,
   align = 'start', direction = 'down', portal = false,
-  scroll = false, open = false, ariaLabel, id, panelClass = '', search = false,
+  scroll = false, open = false, disabled = false, ariaLabel, id, panelClass = '', search = false,
 } = {}) {
   const flat = sections ? sections.flatMap((s) => s.items || []) : (items || []);
   const isSelect = variant === 'select' || (variant == null && flat.some((it) => it && (it.selected || it.value != null)));
@@ -185,6 +187,9 @@ export function dropdown({
     'data-dropdown-trigger',
     `aria-haspopup="${sx ? 'dialog' : listRole}"`,
     `aria-expanded="${open ? 'true' : 'false'}"`,
+    // The attribute, not aria-disabled: a dropdown's trigger carries no message a
+    // reader has to stop on, so it leaves the tab order the way .ui-btn's does.
+    disabled ? 'disabled' : '',
     ariaLabel && triggerContent != null ? `aria-label="${esc(ariaLabel)}"` : '',
   ].filter(Boolean).join(' ');
 
@@ -269,6 +274,17 @@ const DD_GAP = 9;
 // below asks the container for its panel rather than querying inside it.
 const ddPanelOf = (dd) => dd.__ddPanel || dd.querySelector('[data-dropdown-panel]');
 
+// A trigger the sheet paints off. The kit paints both spellings unavailable, so
+// the wiring refuses both: the native attribute keeps the browser from
+// dispatching anything, but an aria-disabled trigger is still a keyboard stop,
+// and a click or an Enter on it reached openDropdown() until #580's round two.
+// ddItemsOf() above refuses an aria-disabled ROW the same way.
+// why: docs/foundations.md#colour-and-contrast
+const ddTriggerOff = (dd) => {
+  const trigger = dd.querySelector('[data-dropdown-trigger]');
+  return !!trigger && (trigger.disabled === true || trigger.getAttribute('aria-disabled') === 'true');
+};
+
 function ddGap(panel) {
   const declared = parseFloat(ddViewOf(panel).getComputedStyle(panel).getPropertyValue('--ui-dropdown-gap'));
   return Number.isFinite(declared) ? declared : DD_GAP;
@@ -836,6 +852,9 @@ function closeAllDropdowns(except) {
 }
 
 function openDropdown(dd, focusIdx) {
+  // Every way in goes through here — the trigger's click, the Enter the browser
+  // turns into one, and the arrows — so one refusal covers them all. #580
+  if (ddTriggerOff(dd)) return;
   closeAllDropdowns(dd);
   const panel = ddPanelOf(dd);
   const search = ddSearchOf(dd);

package/src/styles/dropdown.css

@@ -18,7 +18,11 @@
   font-weight: 500;
   color: var(--text);
   background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
-  border: 1px solid var(--border);
+  /* The kit's live control edge, the one .ui-btn takes on the same fill. --border
+     is what --disabled-border resolves to in LIGHT, so a live trigger used to draw
+     the exact line the kit paints an unavailable control with. #580
+     why: docs/foundations.md#colour-and-contrast */
+  border: 1px solid var(--control-edge);
   border-radius: var(--radius-pill);
   padding: 7px 11px 7px 13px;
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
@@ -29,6 +33,28 @@
    what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
 .ui-dropdown__trigger:hover:not(:focus-visible) { border-color: var(--accent); }
 .ui-dropdown__trigger:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+/* Off. The off hover-not-focus selectors are (0,4,0), above live hover's (0,3,0).
+   A pointer over a dead control changes nothing while an aria-disabled one keeps its stop and the ring.
+   No fill: --disabled-surface IS this control's --surface, in both themes. The
+   activation is refused in ddTriggerOff(), not with pointer-events, which would
+   take that stop away. #580 why: docs/foundations.md#colour-and-contrast */
+.ui-dropdown__trigger:disabled,
+.ui-dropdown__trigger:disabled:hover,
+.ui-dropdown__trigger:disabled:hover:not(:focus-visible),
+.ui-dropdown__trigger:disabled:focus-visible,
+.ui-dropdown__trigger[aria-disabled="true"]:hover,
+.ui-dropdown__trigger[aria-disabled="true"]:hover:not(:focus-visible),
+.ui-dropdown__trigger[aria-disabled="true"]:focus-visible,
+.ui-dropdown__trigger[aria-disabled="true"] {
+  border-color: var(--disabled-border);
+  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
+  cursor: not-allowed;
+}
+/* The prefix and the value carry inks of their own, so they take the state's. */
+.ui-dropdown__trigger:disabled .ui-dropdown__pre,
+.ui-dropdown__trigger:disabled .ui-dropdown__value,
+.ui-dropdown__trigger[aria-disabled="true"] .ui-dropdown__pre,
+.ui-dropdown__trigger[aria-disabled="true"] .ui-dropdown__value { color: inherit; }
 .ui-dropdown__pre { color: var(--text); }
 .ui-dropdown__value { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 

package/src/styles/topbar.css

@@ -206,10 +206,10 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:245 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:271 `.ui-dropdown__item:hover`.
    why: docs/foundations.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:1088
+/* The row is a keyboard stop: src/components/dropdown.js:1107
    `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */