@qoretechnologies/reqraft 0.10.59 → 0.10.60-pr.131.g07a26ef

package/src/components/form/expressions/builder/ExpressionBuilder.stories.tsx

@@ -1033,6 +1033,178 @@ export const AddValueSlotOnPhone: Story = {
   },
 };
 
+/**
+ * The expression panels, nested or not, that reach past the box of the one they are nested in: none
+ * should. A nested expression is indented; at its full width the indent pushed its right edge - and the
+ * actions that float above it on hover - past its parent, and past a narrow screen's edge.
+ */
+const panelsPastTheirParent = () =>
+  [...document.querySelectorAll<HTMLElement>('.expression, .reqore-panel')]
+    .filter((panel) => panel.getBoundingClientRect().width > 0)
+    .map((panel) => {
+      const parent = panel.parentElement!.getBoundingClientRect();
+      const box = panel.getBoundingClientRect();
+      return { panel: panel.className.split(' ').pop(), over: Math.round(box.right - parent.right) };
+    })
+    .filter(({ over }) => over > 0);
+
+/** The controls of an expression's title (its operation, its actions) that reach past its panel: none should. */
+const titlesPastTheirPanel = () =>
+  [...document.querySelectorAll<HTMLElement>('.expression')].flatMap((panel) => {
+    const box = panel.getBoundingClientRect();
+    return [...panel.querySelectorAll<HTMLElement>('.expression-operator-selector, .reqore-panel-title button')]
+      .filter((control) => control.closest('.expression') === panel && control.getBoundingClientRect().width > 0)
+      .map((control) => Math.round(control.getBoundingClientRect().right - box.right))
+      .filter((over) => over > 0);
+  });
+
+/** The column a 320px screen leaves the condition, and narrower ones a form's indents leave it. */
+const NARROW_COLUMNS = [320, 280, 240, 200, 186];
+
+/**
+ * The order's fields, for the narrow-column stories: the operands refer to them, and a field picker
+ * whose value is not among its templates has nothing to offer - it is drawn disabled, and the operand
+ * reads as read-only.
+ */
+const orderTemplates = {
+  label: 'Order',
+  items: [
+    {
+      label: 'Order',
+      badge: 'Order',
+      items: [
+        { label: 'Quantity', badge: 'int', value: '$local:quantity' },
+        { label: 'Price', badge: 'int', value: '$local:price' },
+      ],
+    },
+  ],
+} as any;
+
+/** A comparison with the longest operation name nested in an "AND" group, in a column it can narrow. */
+export const NestedFitsNarrowColumn: Story = {
+  args: {
+    localTemplates: orderTemplates,
+    value: {
+      is_expression: true,
+      value: {
+        exp: '&&',
+        args: [
+          {
+            is_expression: true,
+            value: {
+              exp: '>=',
+              args: [
+                { type: 'int', value: '$local:quantity' },
+                { type: 'int', value: 100 },
+              ],
+            },
+          },
+          {
+            is_expression: true,
+            value: {
+              exp: '>=',
+              args: [
+                { type: 'int', value: '$local:price' },
+                { type: 'int', value: 5 },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className='narrow-column' style={{ width: NARROW_COLUMNS[0], maxWidth: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    qlip: { viewport: { width: 320, height: 800 } },
+    docs: {
+      description: {
+        story:
+          'Renders two "Logical Greater Than Or Equal" comparisons nested in an "AND" group, in a column narrowed from 320px to 186px - what a 320px screen leaves a condition in a form - and shown at 186px: each nested expression is indented and stays inside the group, its operation name shortened to fit, so the actions that float above it on hover stay on the screen.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(expressionCount()).toBe(2), { timeout: 10000 });
+    // editable: every control of the operands can be used (a field picker with nothing to offer is disabled)
+    expect(
+      [...canvasElement.querySelectorAll<HTMLButtonElement>('.expression-arg button')].filter((b) => b.disabled).map((b) => b.textContent)
+    ).toEqual([]);
+    const column = canvasElement.querySelector('.narrow-column') as HTMLElement;
+    // as narrow as a 320px screen leaves the condition, and narrower
+    for (const width of NARROW_COLUMNS) {
+      column.style.width = `${width}px`;
+      await waitFor(
+        () =>
+          expect({ width, past: panelsPastTheirParent(), titles: titlesPastTheirPanel() }).toEqual({
+            width,
+            past: [],
+            titles: [],
+          }),
+        { timeout: 10000 }
+      );
+      // the operation stays readable: named in full in a 320px column, and shortened, not crushed, below
+      const selector = canvasElement.querySelector('.expression .expression-operator-selector') as HTMLElement;
+      const name = selector.querySelector('.reqore-button-text-content') as HTMLElement;
+      const shown = { width, selector: Math.round(selector.getBoundingClientRect().width) >= 60, full: name.scrollWidth <= name.clientWidth + 1 };
+      expect(shown).toEqual({ width, selector: true, full: width === NARROW_COLUMNS[0] ? true : shown.full });
+    }
+  },
+};
+
+/**
+ * The controls of the operands (a value or a field, its clear button, its `⋮` menu) that reach past their
+ * operand's row, or a row past its expression: none should, or a control is cut off or hangs outside.
+ */
+const operandControlsPastTheirRow = () =>
+  [...document.querySelectorAll<HTMLElement>('.expression-arg')].flatMap((row) => {
+    const box = row.getBoundingClientRect();
+    const panel = (row.closest('.expression') as HTMLElement).getBoundingClientRect();
+    const right = Math.min(box.right, panel.right);
+    return [...row.querySelectorAll<HTMLElement>('button, input, .reqore-tag')]
+      .filter((control) => control.closest('.expression-arg') === row && control.getBoundingClientRect().width > 0)
+      .map((control) => ({
+        control: control.className.split(' ').filter((c) => !/^sc-/.test(c)).pop() ?? control.tagName,
+        over: Math.round(control.getBoundingClientRect().right - right),
+      }))
+      .filter(({ over }) => over > 0);
+  });
+
+/** The same condition's operands - a field and a number each - in a column narrowed to 186px. */
+export const OperandsFitNarrowColumn: Story = {
+  args: NestedFitsNarrowColumn.args,
+  decorators: NestedFitsNarrowColumn.decorators,
+  parameters: {
+    qlip: { viewport: { width: 320, height: 800 } },
+    docs: {
+      description: {
+        story:
+          'Renders the nested "AND" condition in a column narrowed from 320px to 186px - what a 320px screen leaves a condition in a form - and shown at 186px: each operand\'s value or field, its clear button and its ⋮ menu stay inside the operand\'s row, the field shortened to fit.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(expressionCount()).toBe(2), { timeout: 10000 });
+    // editable: the operands' controls are all usable, so their narrow layout is the editing one
+    expect(
+      [...canvasElement.querySelectorAll<HTMLButtonElement>('.expression-arg button')].filter((b) => b.disabled).map((b) => b.textContent)
+    ).toEqual([]);
+    const column = canvasElement.querySelector('.narrow-column') as HTMLElement;
+    for (const width of NARROW_COLUMNS) {
+      column.style.width = `${width}px`;
+      await waitFor(
+        () => expect({ width, past: operandControlsPastTheirRow() }).toEqual({ width, past: [] }),
+        { timeout: 10000 }
+      );
+    }
+  },
+};
+
 /**
  * On a phone the remove action leaves the operand row for its ⋮ menu. The play
  * runs at the runner's desktop viewport, where the inline buttons are the

package/src/components/form/expressions/builder/argumentWrapper.tsx

@@ -6,6 +6,7 @@ import {
   useReqoreTheme,
 } from '@qoretechnologies/reqore';
 import { memo } from 'react';
+import styled from 'styled-components';
 import { ordinal } from '../../../../helpers/common';
 import {
   IExpression,
@@ -15,6 +16,27 @@ import {
 } from '../types';
 import { ExpressionBuilderArgumentLabel } from './argumentLabel';
 
+/**
+ * An operand's field row: the field (a value or a field reference, its clear button, its ⋮ menu) shrinks
+ * with a narrow row. A control group that is not fluid does not shrink, and a field is several of them
+ * nested, so in a narrow column - not only on a phone, where operands are fluid - the field kept its
+ * natural width and its ⋮ was cut off at the expression's edge or hung past it. The value gives way, down
+ * to its own least width, and the controls beside it stay in the row.
+ *
+ * The row's own control group, styled - not a wrapper inside it: a control group hands its size to its
+ * children, and a wrapper between them drew the field at the normal size instead of the row's small one.
+ */
+const StyledOperandFieldRow = styled(ReqoreControlGroup)`
+  min-width: 0;
+  max-width: 100%;
+
+  .reqore-control-group {
+    flex-shrink: 1;
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
 export interface IExpressionBuilderArgumentWrapperProps {
   children: React.ReactNode;
   schema?: IExpressionSchemaArg;
@@ -184,7 +206,8 @@ export const ExpressionBuilderArgumentWrapper = memo(
         size='small'
         className='expression-arg'
         {...dragProps}
-        style={{ flexShrink: 1, ...dragProps.style }}
+        // at most the width of the expression it is in: a narrow column shrinks its field instead
+        style={{ flexShrink: 1, minWidth: 0, maxWidth: '100%', ...dragProps.style }}
       >
         <ExpressionBuilderArgumentLabel
           arg={arg}
@@ -195,7 +218,7 @@ export const ExpressionBuilderArgumentWrapper = memo(
         {/* A fluid operand is a phone row: grip, field and `⋮` share it, and
             the field takes what is left; wrapping would put the grip on a
             line of its own above a full-width field. */}
-        <ReqoreControlGroup verticalAlign='flex-start' wrap={!fluid} fluid>
+        <StyledOperandFieldRow verticalAlign='flex-start' wrap={!fluid} fluid className='expression-arg-field'>
           {reorder && renderReorderControls()}
           {children}
           {hasMultipleArgs && (
@@ -213,7 +236,7 @@ export const ExpressionBuilderArgumentWrapper = memo(
               disabled={readOnly}
             />
           )}
-        </ReqoreControlGroup>
+        </StyledOperandFieldRow>
       </ReqoreControlGroup>
     );
   }

package/src/components/form/expressions/builder/index.tsx

@@ -878,7 +878,9 @@ export const Expression = ({
           icon='Functions'
           placeholder='Select operation'
           fluid={false}
-          fixed={true}
+          // shrinks with a narrow panel, its name shortened, rather than holding the panel open
+          fixed={false}
+          style={{ minWidth: 0, maxWidth: '100%' }}
           flat
           // The operation catalogue is long and every entry carries a description,
           // so it belongs in the searchable collection modal rather than an inline
@@ -895,6 +897,10 @@ export const Expression = ({
       }
       style={{
         marginLeft: isChild ? 10 : undefined,
+        // indented, it is as wide as what is left of the group's width: at its full width the indent
+        // pushed it - and the actions floating above it on hover - past the group and a narrow screen
+        maxWidth: isChild ? 'calc(100% - 10px)' : undefined,
+        minWidth: 0,
         borderStyle: 'dashed',
         flexShrink: 1,
       }}
@@ -1208,7 +1214,6 @@ export const Expression = ({
                       componentOverrides={componentOverrides}
                       // SEAM (reqraft): same as the first operand above.
                       extraActions={extraActions}
-                      noSoft
                       level={level + 1}
                       allowFunctions={!arg?.allowed_values && !arg?.element_allowed_values}
                       isFunction={rest[index]?.is_expression}
@@ -1339,6 +1344,11 @@ export const ExpressionBuilder = ({
   reorder,
 }: IExpressionBuilderProps) => {
   const templates = useTemplates(!isChild, localTemplates);
+  /* A builder nested in a group does not resolve templates again: its parent hands it the resolved ones.
+     `useTemplates` gives a nested builder none, and they were what it handed on, so every comparison in
+     an AND/OR group had no templates - its field pickers had nothing to offer and were drawn disabled,
+     and the operands read as read-only. */
+  const resolvedTemplates = isChild ? localTemplates : templates.value;
   const theme = useReqoreTheme();
   const [showSummary, setShowSummary] = useState(false);
   const _expressions = useExpressions({
@@ -1429,6 +1439,9 @@ export const ExpressionBuilder = ({
           label={isChild ? (value.value.exp === '||' ? 'OR group' : 'AND group') : 'IF group'}
           style={{
             marginLeft: isChild ? 10 : 0,
+            // a nested group too: its indent is taken out of its width, not added past it
+            maxWidth: isChild ? 'calc(100% - 10px)' : undefined,
+            minWidth: 0,
           }}
           actions={[
             {
@@ -1472,7 +1485,7 @@ export const ExpressionBuilder = ({
               <React.Fragment key={index}>
                 <ExpressionBuilder
                   value={arg}
-                  localTemplates={templates.value}
+                  localTemplates={resolvedTemplates}
                   isChild
                   path={`${path ? `${path}.` : ''}value.args.${index}`}
                   level={level + 1}
@@ -1508,7 +1521,7 @@ export const ExpressionBuilder = ({
   return (
     <ReqoreErrorBoundary>
       <Expression
-        localTemplates={templates.value}
+        localTemplates={resolvedTemplates}
         value={value}
         isChild={isChild}
         type={type}

package/src/components/form/fields/auto/AutoFormField.stories.tsx

@@ -52,6 +52,62 @@ const waitForText = async (text: string | RegExp) => {
   await waitFor(() => expect(body.queryAllByText(text)[0]).toBeTruthy(), { timeout: 10000 });
 };
 
+/** The readable names of the types an untyped field's picker offers. */
+const IMMEDIATE_TYPE_NAMES = [
+  'True/False',
+  'Date',
+  'Text',
+  'Binary',
+  'Decimal',
+  'List',
+  'Key/Value {}',
+  'Integer',
+  'RGB Color',
+];
+
+/**
+ * Opens the type picker and returns the open list. Asserts the closed trigger
+ * reads `label` (the chosen type's readable name) when one is given, and that
+ * it carries no item count: a count on a fixed list of types is noise.
+ */
+const openTypePicker = async (canvasElement: HTMLElement, label?: string) => {
+  const trigger = await waitFor(
+    () => {
+      const button = canvasElement.querySelector(
+        '.auto-field-group [aria-haspopup]'
+      ) as HTMLElement | null;
+      expect(button).toBeTruthy();
+      return button!;
+    },
+    { timeout: 10000 }
+  );
+  if (label) {
+    await waitFor(() => expect(trigger.textContent).toContain(label), { timeout: 10000 });
+  }
+  await expect(trigger.querySelector('.reqore-button-badge')).toBeNull();
+  await userEvent.click(trigger);
+  return waitFor(
+    () => {
+      const el = document.querySelector('.reqore-popover-content') as HTMLElement | null;
+      expect(el).toBeTruthy();
+      return el!;
+    },
+    { timeout: 10000 }
+  );
+};
+
+const expectOffered = async (popover: HTMLElement, labels: string[]) => {
+  await waitFor(
+    () => {
+      for (const label of labels) {
+        expect(within(popover).getAllByText(label, { exact: true }).length).toBeGreaterThan(0);
+      }
+    },
+    { timeout: 10000 }
+  );
+  await expect(within(popover).queryByText(/^soft/)).not.toBeInTheDocument();
+};
+
 // --- reqraft behavioral stories (kept from the field-migration batch) -------
 
 /** Untyped, no value — the field opens on an editor to type into, never on a type question. */
@@ -193,21 +249,21 @@ export const AllowedTypesSubset: Story = {
     docs: {
       description: {
         story:
-          'Renders AutoFormField with allowedTypes restricted to Integer and Text. The type picker offers those 2 types (its badge reads 2), and the field can be typed into meanwhile without being asked for a data type.',
+          'Renders AutoFormField with allowedTypes restricted to Integer and Text. The type picker offers exactly those 2 types, with no item count, and the field can be typed into meanwhile without being asked for a data type.',
       },
     },
   },
   async play({ canvasElement }) {
-    // The picker badge reflects the restricted list — 2 instead of 14.
-    await waitForText('2');
     await expect(within(canvasElement).queryByText('Please select data type')).not.toBeInTheDocument();
+    const popover = await openTypePicker(canvasElement);
+    await expectOffered(popover, ['Integer', 'Text']);
+    await expect(within(popover).queryByText('Decimal')).not.toBeInTheDocument();
   },
 };
 
-/** `noSoft` hides the `soft*` variants from the picker (9 instead of 14). */
+/** The picker offers no `soft*` type: a typed-in literal has nothing to convert. */
 export const NoSoftTypes: Story = {
   args: {
-    noSoft: true,
     /* The picker belongs to a value with a type: an untyped field that is
        empty is typed into, and one holding text has resolved to `string`. */
     defaultType: 'auto',
@@ -217,13 +273,14 @@ export const NoSoftTypes: Story = {
     docs: {
       description: {
         story:
-          'Renders an untyped AutoFormField holding a text value with noSoft enabled. The picker for the type the value resolved to leaves out the soft* variants, so its badge reads 9 instead of 14.',
+          'Renders an untyped AutoFormField holding a text value. The type picker, chosen as Text, offers the 9 base types by readable name (True/False, Date, Text, Binary, Decimal, List, Key/Value {}, Integer, RGB Color) and no soft type, and shows no item count.',
       },
     },
   },
   async play({ canvasElement }) {
-    await waitForText('9');
     await expect(within(canvasElement).queryByText('Please select data type')).not.toBeInTheDocument();
+    const popover = await openTypePicker(canvasElement, 'Text');
+    await expectOffered(popover, IMMEDIATE_TYPE_NAMES);
   },
 };
 
@@ -501,13 +558,57 @@ export const AutoDoesNotChangeTypeBackToAuto: Story = {
     docs: {
       description: {
         story:
-          'Renders AutoFormField in auto mode with a string value — the inferred type ("string") is shown and the picker still exposes all 14 types so the operator can switch away from auto without the field snapping back.',
+          'Renders AutoFormField in auto mode with a string value — the inferred type is shown as Text and the picker still offers every base type so the operator can switch away from auto without the field snapping back.',
       },
     },
   },
-  play: async () => {
-    await waitForText('string');
-    await waitForText('14');
+  async play({ canvasElement }) {
+    const popover = await openTypePicker(canvasElement, 'Text');
+    await expectOffered(popover, IMMEDIATE_TYPE_NAMES);
+  },
+};
+
+/** A soft type in a caller's allowed types is offered once, as its base type. */
+export const AllowedSoftTypesOfferedAsTheirBase: Story = {
+  args: {
+    allowedTypes: [{ name: 'softint' }, { name: 'int' }, { name: 'softstring' }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField whose allowedTypes are softint, int and softstring. The type picker offers Integer once and Text, with no soft type and no item count.',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const popover = await openTypePicker(canvasElement);
+    await expectOffered(popover, ['Integer', 'Text']);
+    await expect(within(popover).getAllByText('Integer', { exact: true })).toHaveLength(1);
+  },
+};
+
+/** A value saved with a soft type is edited with its base type's editor. */
+export const SavedSoftTypeEditsAsItsBase: Story = {
+  args: {
+    defaultType: 'auto',
+    defaultInternalType: 'softint',
+    value: 5,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders an untyped AutoFormField holding 5, saved with the soft type softint. It is edited with the integer editor and the type picker reads Integer, instead of drawing "Unknown type!".',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByDisplayValue('5')).toBeInTheDocument();
+    await expect(canvas.queryByText('Unknown type!')).not.toBeInTheDocument();
+    const popover = await openTypePicker(canvasElement, 'Integer');
+    await expectOffered(popover, IMMEDIATE_TYPE_NAMES);
   },
 };
 

package/src/components/form/fields/auto/AutoFormField.tsx

@@ -12,7 +12,7 @@ import {
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { IWithReqoreSize } from '@qoretechnologies/reqore/dist/types/global';
 import { TQorusFormFieldSchema, TQorusType } from '@qoretechnologies/ts-toolkit';
-import { isEqual, size } from 'lodash';
+import { isEqual, size, uniqBy } from 'lodash';
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import useMount from 'react-use/lib/useMount';
@@ -97,6 +97,10 @@ export interface IAutoFieldProps
   level?: number;
   defaultType?: IQorusType;
   defaultInternalType?: IQorusType;
+  /**
+   * @deprecated Inert: the type picker never offers a soft type (see
+   * `getImmediateValueTypes`). Kept so existing callers still compile.
+   */
   noSoft?: boolean;
 
   /** SEAM: inert in reqraft — saved-values storage is IDE-only. */
@@ -134,7 +138,17 @@ export interface IAutoFieldProps
   [key: string]: any;
 }
 
-export const DefaultNoSoftTypes = [
+/**
+ * The types the picker offers for a value typed into this field.
+ *
+ * No Qore soft type (`softint`, `softstring`, `softlist`, …) is among them. A
+ * soft type is a DECLARATION: it says that whatever a variable or parameter is
+ * given is converted to the base type. A value typed in here is already a
+ * literal of the type its editor makes, so there is nothing to convert and no
+ * editor of its own to draw — the picker used to offer them anyway, and each
+ * one drew "Unknown type!".
+ */
+export const getImmediateValueTypes = (): { name: IQorusType; display_name: string }[] => [
   { name: 'bool', display_name: 'True/False' },
   { name: 'date', display_name: 'Date' },
   { name: 'string', display_name: 'Text' },
@@ -146,6 +160,21 @@ export const DefaultNoSoftTypes = [
   { name: 'rgbcolor', display_name: 'RGB Color' },
 ];
 
+/** @deprecated Use `getImmediateValueTypes()`; every picker now offers this list. */
+export const DefaultNoSoftTypes = getImmediateValueTypes();
+
+/**
+ * The type a value is EDITED as: a soft type is edited as its base type.
+ *
+ * A soft type still reaches this field from data saved before the picker
+ * stopped offering them, and from a declared type the server sends (an option
+ * or a config item declared `softint`). It is shown and edited as the base
+ * type it converts to, so that value keeps its editor; the declared type
+ * itself is left as it is and is what the field reports back.
+ */
+export const editorTypeOf = <T extends string | undefined | null>(type: T): T =>
+  (typeof type === 'string' && /^soft[a-z]/.test(type) ? type.slice(4) : type) as T;
+
 function AutoField<T = any>({
   name,
   onChange,
@@ -155,7 +184,8 @@ function AutoField<T = any>({
   defaultInternalType,
   requestFieldData,
   type,
-  noSoft,
+  // Inert (deprecated); destructured so it does not land in `...rest`.
+  noSoft, // eslint-disable-line @typescript-eslint/no-unused-vars
   path,
   arg_schema,
   compact,
@@ -185,9 +215,11 @@ function AutoField<T = any>({
   ...rest
 }: IAutoFieldProps & T) {
   const [currentType, setType] = useState<IQorusType>(defaultInternalType || null);
-  const [currentInternalType, setInternalType] = useState<IQorusType>(
+  const [storedInternalType, setInternalType] = useState<IQorusType>(
     defaultInternalType || 'any'
   );
+  // What the value is edited as; see `editorTypeOf`.
+  const currentInternalType = editorTypeOf(storedInternalType);
   const [isSetToNull, setIsSetToNull] = useState<boolean>(false);
   const [finalArgSchema, setFinalArgSchema] = useState<IOptionsSchema>(
     typeof arg_schema === 'string' ? undefined : arg_schema
@@ -203,7 +235,6 @@ function AutoField<T = any>({
     defaultInternalType,
     requestFieldData,
     type,
-    noSoft,
     path,
     arg_schema,
     column,
@@ -288,7 +319,7 @@ function AutoField<T = any>({
   });
 
   useUpdateEffect(() => {
-    if (defaultType && currentInternalType !== defaultType) {
+    if (defaultType && storedInternalType !== defaultType) {
       setType(defaultType);
       setInternalType(defaultType);
     }
@@ -1055,26 +1086,23 @@ function AutoField<T = any>({
         currentType === 'auto' ||
         currentType === 'any'));
 
-  const types =
-    allowedTypes ||
-    (!noSoft
-      ? [
-          { value: 'bool' },
-          { value: 'softbool' },
-          { value: 'date' },
-          { value: 'string' },
-          { value: 'softstring' },
-          { value: 'binary' },
-          { value: 'float' },
-          { value: 'softfloat' },
-          { value: 'list' },
-          { value: 'softlist' },
-          { value: 'hash' },
-          { value: 'int' },
-          { value: 'softint' },
-          { value: 'rgbcolor' },
-        ]
-      : DefaultNoSoftTypes);
+  // A caller's own list is offered as the editors it names, so a soft type in
+  // it is offered once, as its base type.
+  const types = allowedTypes
+    ? uniqBy(
+        allowedTypes.map((allowed) => {
+          const name = editorTypeOf(allowed.name);
+          return {
+            ...allowed,
+            name,
+            display_name:
+              allowed.display_name ||
+              getImmediateValueTypes().find((type) => type.name === name)?.display_name,
+          };
+        }),
+        'name'
+      )
+    : getImmediateValueTypes();
 
   if (error) {
     return <ReqoreMessage intent='danger'>{error}</ReqoreMessage>;
@@ -1102,6 +1130,9 @@ function AutoField<T = any>({
             minimal={rest.minimal}
             size={rest.size}
             items={types as ISelectFormFieldItem[]}
+            /* A count on a fixed list of types says nothing the open list
+               does not; the IDE's picker shows none either. */
+            hideItemCount
             value={currentInternalType}
             onChange={(value) => {
               handleTypeChange(name, value as IQorusType);