@qoretechnologies/reqraft 0.10.55-pr.124.g43fa138 → 0.10.55

package/src/components/form/fields/select/Select.stories.tsx

@@ -1,8 +1,14 @@
+import { ReqoreButton, ReqoreP } from '@qoretechnologies/reqore';
 import { StoryObj } from '@storybook/react-vite';
 import { expect, fireEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
 import { StoryMeta } from '../../../../types';
 import { SelectFormField } from './Select';
+import {
+  SELECT_DIALOG_MIN_HEIGHT,
+  SELECT_DIALOG_MIN_WIDTH,
+  UNAVAILABLE_ITEM_CLASS,
+} from './SelectCollection';
 
 const meta = {
   component: SelectFormField,
@@ -478,3 +484,389 @@ export const CreatableOffersToCreate: Story = {
     );
   },
 };
+
+// ── per-item row affordances ──────────────────────────────────────────────
+
+/**
+ * A caller's row control, as a component the item NAMES rather than one it
+ * renders. Items travel through `JSON.stringify(items)` memo keys, and a React
+ * element is circular through its fibre — `{ as, props }` is what survives.
+ */
+const ExplainThisItem = ({ explanation }: { explanation?: string }) => (
+  <ReqoreButton
+    size='tiny'
+    minimal
+    flat
+    compact
+    fixed
+    icon='QuestionLine'
+    className='select-item-explanation'
+    aria-label='What this is'
+    tooltip={{ handler: 'click', content: explanation, maxWidth: '360px' }}
+    // Reading is not choosing: the whole row is one click target.
+    onClick={(event) => event.stopPropagation()}
+  />
+);
+
+/** Whatever a caller wants inside the row's own hover. */
+const ItemProse = ({ text }: { text?: string }) => <ReqoreP>{text}</ReqoreP>;
+
+const EXPLAINED_ITEMS = [
+  'Coverage: process',
+  'Coverage: runtime',
+  'Event: posted',
+  'Value: equals',
+  'Value: partial match',
+  'String: matches regex',
+].map((display_name) => ({
+  display_name,
+  value: display_name,
+  short_desc: `What ${display_name} checks, in one line.`,
+  desc: `What ${display_name} checks, in one line.`,
+  title_actions: [{ as: ExplainThisItem, props: { explanation: `All of what ${display_name} is for.` } }],
+  tooltip: {
+    handler: 'hover' as const,
+    delay: 0,
+    placement: 'bottom-start' as const,
+    maxWidth: '360px',
+    content: { as: ItemProse, props: { text: `All of what ${display_name} is for.` } },
+  },
+}));
+
+const openTheCollection = async (canvasElement: HTMLElement) => {
+  await fireEvent.click(within(canvasElement).getByRole('button'));
+  await waitFor(
+    () => expect(document.querySelector('.reqraft-select-dialog .reqore-collection-item')).toBeTruthy(),
+    { timeout: 5000 }
+  );
+};
+
+const firstRow = () =>
+  document.querySelector('.reqraft-select-dialog .reqore-collection-item') as HTMLElement;
+
+export const ItemActionsInTheTitleBar: Story = {
+  args: {
+    forceDropdown: false,
+    items: EXPLAINED_ITEMS,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Each offered item carries a control through `title_actions`, which renders it in the row's title bar, inline with the name. An item's `actions` render in the row BODY under the description and cost every entry a line of its own — measured at 31px of a 73px row on a list of twenty-nine. Both seams exist; this is the one for a single icon on a long list.",
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    await openTheCollection(canvasElement);
+    const row = firstRow();
+    /* `:scope >`: `Element.querySelector` matches against the whole document
+       and then keeps what is inside the element, so a bare
+       `.reqore-panel-content x` finds a control in the row's own TITLE — the
+       modal around the collection is a panel too. */
+    await expect(
+      row.querySelector(':scope > .reqore-panel-title .select-item-explanation')
+    ).toBeTruthy();
+    await expect(
+      row.querySelector(':scope > .reqore-panel-content .select-item-explanation')
+    ).toBeNull();
+  },
+};
+
+export const ItemTooltipOnTheRow: Story = {
+  args: {
+    forceDropdown: false,
+    items: EXPLAINED_ITEMS,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The per-item `tooltip` puts content on the ROW's own hover: the whole entry is the target, and the list pays nothing in height for something that is not on screen until a pointer rests. The content is a `{ as, props }` descriptor rather than a node, so an item still survives the `JSON.stringify(items)` memo key it travels under.",
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    await openTheCollection(canvasElement);
+    await fireEvent.mouseEnter(firstRow());
+    await waitFor(
+      () =>
+        expect(
+          document.querySelector('[data-popper-placement]')?.textContent
+        ).toContain('All of what Coverage: process is for.'),
+      { timeout: 5000 }
+    );
+  },
+};
+
+const REFUSED_ITEMS = [
+  {
+    display_name: 'Coverage: process',
+    value: 'process_coverage',
+    short_desc: 'Passes when the process you name ran code.',
+    desc: 'Passes when the process you name ran code.',
+  },
+  {
+    display_name: 'Step: result',
+    value: 'step_result',
+    short_desc: 'Passes when the named step reported this result.',
+    desc: 'Passes when the named step reported this result.',
+    disabled: true,
+    unavailable: {
+      intent: 'warning' as const,
+      content:
+        'Unavailable because some dependencies are not fulfilled: "Interface Kind" must be "workflow"',
+    },
+  },
+  {
+    display_name: 'File: written',
+    value: 'file_written',
+    short_desc: 'Passes when the target wrote the file.',
+    desc: 'Passes when the target wrote the file.',
+    disabled: true,
+    messages: [
+      { intent: 'danger' as const, content: 'This sandbox denies the FILESYSTEM domain.' },
+    ],
+  },
+  {
+    display_name: 'Value: equals',
+    value: 'value_equals',
+    short_desc: 'Passes when the value is exactly equal.',
+    desc: 'Passes when the value is exactly equal.',
+  },
+];
+
+export const UnavailableItemsSayWhy: Story = {
+  args: {
+    forceDropdown: false,
+    items: REFUSED_ITEMS,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A value that cannot be picked is disabled and says why, never hidden — a choice that vanishes takes its own explanation with it. Two things refuse one and they render identically: the value's own `depends_on`, judged against the form it stands in (row 2), and a refusal the server had already decided as `disabled` with a message (row 3), for what only the server can know. The reason reads FIRST, above the description a `messages` entry would have landed under; the name is dimmed and the cursor says `not-allowed`; and the row keeps every pointer event, because reqore's `disabled` is `pointer-events: none` and would take the row's tooltip with it. What makes the row inert is having no click handler at all.",
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    await openTheCollection(canvasElement);
+    const rows = () =>
+      [...document.querySelectorAll<HTMLElement>('.reqraft-select-dialog .reqore-collection-item')];
+    await waitFor(() => expect(rows().length).toBe(4), { timeout: 5000 });
+    /* By name, not by index: the collection sorts its rows, so a positional
+       lookup asserts about whichever row the sort happened to put there. */
+    const rowNamed = (label: string) =>
+      rows().find((row) =>
+        row.querySelector(':scope > .reqore-panel-title')?.textContent?.includes(label)
+      ) as HTMLElement;
+
+    await expect(rows().filter((row) => row.className.includes(UNAVAILABLE_ITEM_CLASS)).length).toBe(
+      2
+    );
+
+    // The one thing this must never do: `DisabledElement` would make it `none`
+    // and take the row's tooltip with it.
+    const gated = rowNamed('Step: result');
+    await expect(getComputedStyle(gated).pointerEvents).toBe('auto');
+    await expect(getComputedStyle(gated).cursor).toBe('not-allowed');
+    await expect(getComputedStyle(rowNamed('Value: equals')).cursor).toBe('pointer');
+
+    // A served refusal is promoted out of `messages` and printed once, above
+    // the description rather than under it.
+    const text =
+      (rowNamed('File: written').querySelector(':scope > .reqore-panel-content') as HTMLElement)
+        .textContent || '';
+    await expect(text.indexOf('FILESYSTEM')).toBeGreaterThan(-1);
+    await expect(text.indexOf('FILESYSTEM')).toBeLessThan(text.indexOf('wrote the file'));
+  },
+};
+
+/** The dialog box itself — the element `re-resizable` sizes and drags. */
+const selectDialog = () => document.querySelector('.reqraft-select-dialog') as HTMLElement;
+
+const dialogSize = () => {
+  const rect = selectDialog().getBoundingClientRect();
+  return { width: Math.round(rect.width), height: Math.round(rect.height) };
+};
+
+/** Whether a part of the picker is whole inside the dialog, not cut off by it. */
+const isWholeInsideTheDialog = (selector: string) => {
+  const box = selectDialog().getBoundingClientRect();
+  const part = selectDialog().querySelector(selector)?.getBoundingClientRect();
+
+  if (!part) {
+    return false;
+  }
+
+  return (
+    part.width > 0 &&
+    part.height > 0 &&
+    part.left >= box.left - 0.5 &&
+    part.right <= box.right + 0.5 &&
+    part.top >= box.top - 0.5 &&
+    part.bottom <= box.bottom + 0.5
+  );
+};
+
+/**
+ * Drag one of the dialog's resize handles, found by the cursor it sets.
+ *
+ * The first `col-resize` is the right edge and the first `row-resize` the top
+ * one, so a negative dx and a positive dy both shrink. The pointer is kept
+ * inside the box because the reqore we pin still clips the drawer, which
+ * amputates the outer half of every handle.
+ */
+const dragTheDialogBy = async (cursor: string, dx: number, dy: number) => {
+  const box = selectDialog();
+  const handle = [...box.querySelectorAll<HTMLElement>('div')].find((el) =>
+    (el.getAttribute('style') || '').includes(`cursor: ${cursor}`)
+  );
+  await expect(handle).toBeTruthy();
+
+  const rect = handle!.getBoundingClientRect();
+  const boxRect = box.getBoundingClientRect();
+  const x = Math.min(Math.max(rect.left + rect.width / 2, boxRect.left + 2), boxRect.right - 2);
+  const y = Math.min(Math.max(rect.top + rect.height / 2, boxRect.top + 2), boxRect.bottom - 2);
+
+  fireEvent.mouseDown(handle!, { clientX: x, clientY: y, button: 0 });
+  fireEvent.mouseMove(document, { clientX: x + dx, clientY: y + dy });
+  fireEvent.mouseUp(document, { clientX: x + dx, clientY: y + dy });
+};
+
+export const CannotBeDraggedBelowItsContent: Story = {
+  args: {
+    forceDropdown: false,
+    items: EXPLAINED_ITEMS,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Drags the picker far past its minimum on both axes and shows that it stops at the size its own content needs — a row that fits, the search field, and the close control — rather than at the smaller floor the dialog chrome asks for.',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    await openTheCollection(canvasElement);
+    await waitFor(() => expect(dialogSize().width).toBe(700));
+
+    // Far past any floor, on both axes, the way it was reported: the picker
+    // was dragged to roughly 45px wide and still held a search box, a list and
+    // a close button stacked in a column nobody could read.
+    await dragTheDialogBy('col-resize', -3000, 0);
+    await dragTheDialogBy('row-resize', 0, 3000);
+
+    // The width at which a 300px collection row stops overhanging the dialog,
+    // and the height at which the header, the search field and one whole row
+    // all fit - the row taken at its tallest, the described row this same
+    // picker is also used with.
+    await waitFor(() =>
+      expect(dialogSize()).toEqual({
+        width: SELECT_DIALOG_MIN_WIDTH,
+        height: SELECT_DIALOG_MIN_HEIGHT,
+      })
+    );
+
+    // And what the floor was measured FOR is what has to be whole at it.
+    await expect(isWholeInsideTheDialog('.reqore-collection-item')).toBe(true);
+    await expect(isWholeInsideTheDialog('input')).toBe(true);
+    await expect(isWholeInsideTheDialog('.reqore-drawer-close-button')).toBe(true);
+  },
+};
+
+/**
+ * Narrow the story's own viewport for the duration of `body`, then put it back.
+ *
+ * `page.viewport` is the same call qlip makes to capture a story at phone size,
+ * and it is reached through a DYNAMIC import: `vitest/browser` throws on import
+ * outside Browser Mode, so a static one would take the Storybook dev server
+ * down with it. Where the call is unavailable — the dev server, a docs render —
+ * the body simply runs at whatever width it already had, and the assertion
+ * below is written against the live viewport so it stays true there.
+ */
+const withViewport = async (
+  width: number,
+  height: number,
+  /** `narrowed` is false where the call was unavailable — see above. */
+  body: (narrowed: boolean) => Promise<void>
+) => {
+  let resize: ((w: number, h: number) => Promise<void>) | undefined;
+  try {
+    ({
+      page: { viewport: resize },
+    } = (await import('vitest/browser')) as never);
+  } catch {
+    resize = undefined;
+  }
+
+  const was = { width: window.innerWidth, height: window.innerHeight };
+  await resize?.(width, height);
+  try {
+    await body(!!resize && window.innerWidth === width);
+  } finally {
+    // Unconditional: a viewport left narrowed is a 320px browser for every
+    // story that runs after this one in the same file.
+    await resize?.(was.width, was.height);
+  }
+};
+
+/**
+ * On a phone the floor is the SCREEN, not the content.
+ *
+ * `min(320px, 90vw)` / `min(180px, 90vh)` — the cap is the other half of the
+ * floor, and it only engages below about a 356px viewport, which is why the
+ * story above cannot see it: at the width the test browser runs at, `320px` is
+ * simply the smaller of the two. A floor wider than the screen would be a
+ * dialog whose edges cannot both be reached, which is worse than a cramped one;
+ * 90vw is reqore's own maximum for a centred modal, so the floor stops exactly
+ * where the ceiling is.
+ */
+export const ItsFloorIsCappedAtTheScreen: Story = {
+  args: {
+    forceDropdown: false,
+    items: EXPLAINED_ITEMS,
+  },
+  parameters: {
+    // Captured at the width the assertion below runs at, so the picture is the
+    // capped dialog rather than a phone-sized story of a desktop-sized one.
+    qlip: { viewport: { width: 320, height: 800 } },
+    docs: {
+      description: {
+        story:
+          'Drags the picker past its floor on a 320px-wide screen — the floor gives way to the viewport (90vw / 90vh) instead of holding a 320x180 box the screen cannot show, which is the cap the desktop story never reaches.',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    await withViewport(320, 800, async (narrowed) => {
+      await openTheCollection(canvasElement);
+      await dragTheDialogBy('col-resize', -3000, 0);
+      await dragTheDialogBy('row-resize', 0, 3000);
+
+      /* The floor AS DECLARED, resolved against the viewport this is actually
+         running in — 288x180 at 320x800, and the plain 320x180 anywhere wide
+         enough that the cap does not bite. One assertion, true in both, and it
+         is the formula itself rather than a number copied out of it. */
+      const capped = {
+        width: Math.min(SELECT_DIALOG_MIN_WIDTH, Math.round(window.innerWidth * 0.9)),
+        height: Math.min(SELECT_DIALOG_MIN_HEIGHT, Math.round(window.innerHeight * 0.9)),
+      };
+      await waitFor(() => expect(dialogSize()).toEqual(capped), { timeout: 5000 });
+
+      // And the claim the cap exists to make: the dialog is never wider or
+      // taller than the screen it has to be read on.
+      await expect(dialogSize().width).toBeLessThanOrEqual(window.innerWidth);
+      await expect(dialogSize().height).toBeLessThanOrEqual(window.innerHeight);
+
+      if (!narrowed) {
+        return;
+      }
+      /* Where the viewport really was narrowed — the test browser, which is
+         the run that gates — the cap is the branch that answered, and saying
+         so is what stops this story passing as a second copy of the desktop
+         one. */
+      await expect(dialogSize().width).toBeLessThan(SELECT_DIALOG_MIN_WIDTH);
+    });
+  },
+};

package/src/components/form/fields/select/Select.tsx

@@ -12,11 +12,14 @@ import { TReqoreSelectItem } from '@qoretechnologies/reqore/dist/components/Sele
 import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
 import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import { isEqual, size } from 'lodash';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { RowOpenPickerContext } from '../../engine/rowOpenPicker';
 import {
   getSelectItemShortDescription,
+  getSelectItemUnavailability,
   ISelectFieldCollectionItem,
   SelectFieldCollection,
+  UNAVAILABLE_ITEM_CLASS,
 } from './SelectCollection';
 
 export type ISelectFormFieldItem = ISelectFieldCollectionItem;
@@ -99,6 +102,27 @@ export const SelectFormField = memo(
   }: ISelectFormFieldProps) => {
     const [items, setItems] = useState<ISelectFormFieldItem[]>(fixItems(rawItems));
     const [collectionOpen, setCollectionOpen] = useState(false);
+    // Reqore owns the anchored list's open state; this mirrors it so the
+    // trigger can say `aria-expanded` truthfully.
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+
+    /* A compact row the author opened into THIS control asks it to show the
+       choices, instead of drawing a closed trigger that reprints the value the
+       collapsed row had just printed (see `RowOpenPickerContext`). A rising
+       edge, so closing the list again does not fight the instruction. */
+    // Composed rather than replaced: `rest` is spread onto the dropdown and a
+    // caller may already be watching it.
+    const callerToggle = (rest as { onToggleChange?: (open: boolean) => void }).onToggleChange;
+    const handleDropdownToggle = useCallback(
+      (open: boolean) => {
+        setDropdownOpen(open);
+        callerToggle?.(open);
+      },
+      [callerToggle]
+    );
+
+    const rowAsksForTheChoices = useContext(RowOpenPickerContext);
+
 
     useEffect(() => {
       setItems(fixItems(rawItems));
@@ -133,15 +157,37 @@ export const SelectFormField = memo(
     }, [predicate, items]);
 
     const reqoreItems: IReqoreDropdownItem[] = useMemo(() => {
-      return filteredItems.map((item) => ({
-        label: item.display_name || valueToShow(item.value),
-        description: getItemDescription(item.value) as string,
-        value: item.value,
-        selected: isEqual(item.value, value),
-        intent: item.intent,
-        disabled: item.disabled,
-        onClick: () => handleSelectClick(item),
-      }));
+      return filteredItems.map((item) => {
+        /* The dropdown used to drop `messages` on the floor, so a value refused
+           with a reason arrived here as a row that simply would not respond.
+           The reason leads the description — a reader who has just been refused
+           a choice is looking for why, not for what the value would have
+           done. */
+        const unavailable = getSelectItemUnavailability(item);
+        const description = getItemDescription(item.value) as string;
+
+        return {
+          label: item.display_name || valueToShow(item.value),
+          description:
+            unavailable ?
+              [unavailable.title, unavailable.content, description].filter(Boolean).join(' — ')
+            : description,
+          /* Read in full on hover, however narrow the list is. */
+          tooltip: unavailable ? unavailable.content : undefined,
+          icon: unavailable ? ('LockLine' as const) : undefined,
+          value: item.value,
+          selected: isEqual(item.value, value),
+          intent: item.intent,
+          className: unavailable ? UNAVAILABLE_ITEM_CLASS : undefined,
+          /* Dimmed through reqore's own effect, and never through `disabled`:
+             that applies `DisabledElement` (`pointer-events: none`), which
+             takes the tooltip with it — the only place the whole reason fits.
+             The row is made inert by having no handler, as in the collection. */
+          effect: unavailable ? { opacity: 0.55 } : undefined,
+          style: unavailable ? { cursor: 'not-allowed' } : undefined,
+          onClick: unavailable ? undefined : () => handleSelectClick(item),
+        };
+      });
     }, [JSON.stringify(filteredItems), value]) as IReqoreDropdownItem[];
 
     const getItemShortDescription = useCallback(
@@ -163,6 +209,22 @@ export const SelectFormField = memo(
     const hasItemsWithDesc = useCallback((data: ISelectFormFieldItem[]) => {
       return data.some((item) => item.desc || item.short_desc);
     }, []);
+    /* Which picker this control actually draws, on the SAME condition the
+       trigger below is chosen by. The collection modal is rendered beside that
+       trigger rather than as one of its branches, so it is not mutually
+       exclusive with the anchored list — and `forceDropdown` DEFAULTS TO TRUE,
+       which makes the list the usual trigger. Opening the collection for every
+       row that asked for its choices therefore put a dialog on top of a
+       dropdown, both listing the same items, for a single click. Reported on
+       qlip build #212: "Should this really open both the dropdown and the
+       modal dialog?" */
+    const picksFromTheCollection = !asMenu && hasItemsWithDesc(items) && !forceDropdown;
+
+    useEffect(() => {
+      if (rowAsksForTheChoices && picksFromTheCollection) {
+        setCollectionOpen(true);
+      }
+    }, [rowAsksForTheChoices, picksFromTheCollection]);
 
     const hasItemsWithError = useCallback((data: ISelectFormFieldItem[]) => {
       return data.some(
@@ -264,14 +326,40 @@ export const SelectFormField = memo(
 
     const creatableItems = useMemo<TReqoreSelectItem[]>(
       () =>
-        filteredItems.map((item) => ({
-          value: valueToShow(item.value) as string,
-          label: item.display_name || (valueToShow(item.value) as string),
-          description: getItemDescription(item.value) as string,
-          disabled: item.disabled,
-          intent: item.intent,
-          wrap: true,
-        })),
+        filteredItems.map((item) => {
+          /* The same shape as `reqoreItems` above, for the same reason: this
+             branch passed the item's `disabled` straight to reqore, which
+             applies `DisabledElement` (`pointer-events: none`) and takes the
+             row's tooltip with it — so a value refused WITH a reason arrived
+             as a row that would not respond and would not explain.
+
+             What refuses it here is `handleCreatableChange`, because reqore
+             owns this list's selection and there is no per-row handler to
+             withhold. Against the 0.74.x we pin, `readOnly` marks the row and
+             does not yet refuse it; once the pin moves to a reqore whose list
+             declines a read-only row, the row refuses itself and the guard
+             below becomes a second lock on the same door. */
+          const unavailable = getSelectItemUnavailability(item);
+          const description = getItemDescription(item.value) as string;
+
+          return {
+            value: valueToShow(item.value) as string,
+            label: item.display_name || (valueToShow(item.value) as string),
+            description:
+              unavailable ?
+                [unavailable.title, unavailable.content, description].filter(Boolean).join(' — ')
+              : description,
+            /* Read in full on hover, which `disabled` would have made
+               unreachable. */
+            tooltip: unavailable ? unavailable.content : undefined,
+            icon: unavailable ? ('LockLine' as const) : undefined,
+            className: unavailable ? UNAVAILABLE_ITEM_CLASS : undefined,
+            effect: unavailable ? { opacity: 0.55 } : undefined,
+            readOnly: !!unavailable,
+            intent: item.intent,
+            wrap: true,
+          };
+        }),
       [filteredItems, getItemDescription]
     );
 
@@ -285,6 +373,17 @@ export const SelectFormField = memo(
         // the value the caller gave us — its own shape intact. Only a value
         // the author created is a string of their own making.
         const offered = filteredItems.find((item) => valueToShow(item.value) === next);
+
+        /* Where the refusal actually lands for this branch — see
+           `creatableItems`. A value the form will not accept is not accepted
+           however it was reached: by clicking its row, by pressing Enter on
+           it, or by typing its text into a creatable field, which is the same
+           value by another route. Clearing is never the answer: `next ===
+           undefined` above is the author clearing it themselves. */
+        if (offered && getSelectItemUnavailability(offered)) {
+          return;
+        }
+
         onChange?.(offered ? offered.value : next);
       },
       [filteredItems, onChange]
@@ -399,15 +498,36 @@ export const SelectFormField = memo(
         )}
         {asMenu ?
           <ReqoreMenu>
-            {filteredItems.map((item) => (
-              <ReqoreMenuItem
-                key={valueToShow(item.value)}
-                label={item.display_name || valueToShow(item.value)}
-                disabled={item.disabled}
-                intent={item.intent}
-                onClick={() => handleSelectClick(item)}
-              />
-            ))}
+            {filteredItems.map((item) => {
+              /* This branch owns its handler, so it gets the full shape: no
+                 `disabled` (that is `DisabledElement`, which would take the
+                 row's tooltip with it), no handler, the reason printed under
+                 the name and readable on hover, and `readOnly` for the cursor.
+                 Dropping the handler is what makes the row inert. */
+              const unavailable = getSelectItemUnavailability(item);
+              const description = getSelectItemShortDescription(item);
+
+              return (
+                <ReqoreMenuItem
+                  key={valueToShow(item.value)}
+                  label={item.display_name || valueToShow(item.value)}
+                  description={
+                    unavailable ?
+                      [unavailable.title, unavailable.content, description]
+                        .filter(Boolean)
+                        .join(' — ')
+                    : description
+                  }
+                  tooltip={unavailable ? unavailable.content : undefined}
+                  icon={unavailable ? 'LockLine' : undefined}
+                  className={unavailable ? UNAVAILABLE_ITEM_CLASS : undefined}
+                  effect={unavailable ? { opacity: 0.55 } : undefined}
+                  readOnly={!!unavailable}
+                  intent={item.intent}
+                  onClick={unavailable ? undefined : () => handleSelectClick(item)}
+                />
+              );
+            })}
           </ReqoreMenu>
         : hasItemsWithDesc(items) && !forceDropdown ?
           <ReqoreButton
@@ -430,6 +550,14 @@ export const SelectFormField = memo(
             badge={itemCount}
             {...getIcon(items, value)}
             rightIcon={showRightIcon ? 'ExpandUpDownLine' : undefined}
+            /* What this control IS: a trigger that opens the picker dialog, not
+               a place the value can be typed. Assistive technology has always
+               needed this, and a compact row's opening reads it too — a row the
+               author opened lands them in the list rather than on a closed
+               trigger reprinting the value the read row already showed
+               (`isClosedPickerTrigger`). */
+            aria-haspopup='dialog'
+            aria-expanded={collectionOpen}
             onClick={(e) => {
               e.stopPropagation();
               setCollectionOpen(true);
@@ -446,6 +574,15 @@ export const SelectFormField = memo(
           </ReqoreButton>
         : <ReqoreDropdown
             {...(rest as any)}
+            /* Same declaration as the dialog trigger above, for the anchored
+               list this branch draws instead. `onToggleChange` keeps
+               `aria-expanded` honest — reqore owns the popover's open state. */
+            aria-haspopup='listbox'
+            aria-expanded={dropdownOpen}
+            onToggleChange={handleDropdownToggle}
+            // Reqore opens the anchored list when this turns true, on mount or
+            // later — so the same instruction serves both pickers.
+            isDefaultOpen={rowAsksForTheChoices}
             items={reqoreItems}
             listCustomTheme={{
               main: '#010811',