@qoretechnologies/reqraft 0.10.60-pr.134.g36530dc → 0.10.60

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/expressions/dpqlMockLanguage.ts

@@ -109,7 +109,8 @@ export function mockTokenizeDpql(text: string): number[] {
       `("(?:\\\\.|[^"\\\\])*")`, // 1: double-quoted string
       `('(?:\\\\.|[^'\\\\])*')`, // 2: single-quoted string
       `(/(?:\\\\.|[^/\\\\])*/[gimsux]*)`, // 3: regex literal /…/flags
-      `(@"(?:\\\\.|[^"\\\\])*"|@[A-Za-z_][\\w.]*)`, // 4: @field
+      // a field name is bare in any script, as the server reads it: @menge_bestätigt, @名前
+      `(@"(?:\\\\.|[^"\\\\])*"|@[\\p{L}_][\\p{L}\\p{M}\\p{N}_.]*)`, // 4: @field
       `(\\$[A-Za-z_-][\\w-]*:(?:\\{[^}]*\\}|[\\w.{}]+))`, // 5: $context:value
       `(\\b\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?\\b)`, // 6: number
       `(==|!=|<=|>=|&&|\\|\\||=~|!~|[+\\-*/%<>!=])`, // 7: operator
@@ -117,7 +118,7 @@ export function mockTokenizeDpql(text: string): number[] {
       `(\\.\\.|[,(){}\\[\\].])`,
       `(\\b[A-Za-z_][\\w]*\\b)`, // 9: identifier (keyword check)
     ].join('|'),
-    'g'
+    'gu'
   );
 
   const tokens: Array<{ line: number; char: number; length: number; type: number }> = [];

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

@@ -52,6 +52,94 @@ 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 }
+  );
+};
+
+/**
+ * Closes the open type picker the way an author does — a click outside the
+ * list (reqore's popover closes on an outside click; Escape could discard an
+ * edit) — and waits until the list is gone.
+ */
+const closeTypePicker = async (popover: HTMLElement) => {
+  await userEvent.click(document.body);
+  await waitFor(
+    () => {
+      expect(popover.isConnected).toBe(false);
+      expect(document.querySelector('.reqore-popover-content')).toBeNull();
+    },
+    { timeout: 10000 }
+  );
+};
+
+/**
+ * Nothing (an open list) covers the control: it is on top at its centre and
+ * across its width — a full-width editor's centre is clear of a narrow list
+ * anchored at its left, so the centre alone would not show it.
+ */
+const expectUncovered = async (control: HTMLElement) => {
+  const box = control.getBoundingClientRect();
+  for (const fraction of [0.1, 0.3, 0.5, 0.7, 0.9]) {
+    const hit = document.elementFromPoint(
+      box.left + box.width * fraction,
+      box.top + box.height / 2
+    );
+    await expect(hit !== null && (hit === control || control.contains(hit))).toBe(true);
+  }
+};
+
+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 +281,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 +305,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);
   },
 };
 
@@ -486,7 +575,7 @@ export const Timeout: Story = {
 
     const input = await canvas.findByDisplayValue('45');
     await expect(input).toBeInTheDocument();
-    await expect(input).toHaveAttribute('type', 'number');
+    await expect(input).toHaveAttribute('inputmode', 'numeric');
     await expect(canvas.getByText('seconds')).toBeInTheDocument();
     await expect(canvas.queryByText('Unknown type!')).not.toBeInTheDocument();
   },
@@ -501,13 +590,66 @@ 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);
+    // End on what the story is about: the text value, still in its editor.
+    await closeTypePicker(popover);
+    const editor = await within(canvasElement).findByDisplayValue('test');
+    await expectUncovered(editor);
+  },
+};
+
+/** 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);
+    // End on what the story is about: the integer editor, holding 5.
+    await closeTypePicker(popover);
+    const input = await canvas.findByDisplayValue('5');
+    await expect(input.tagName).toBe('INPUT');
+    await expectUncovered(input);
   },
 };