@qoretechnologies/reqraft 0.10.60-pr.133.gc8250dd → 0.10.60

package/src/components/dpqlEditor/useDpqlSession.ts

@@ -8,7 +8,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ILspDiagnostic } from '../../utils/lspClient.types';
 import { useLspSession, IUseLspSessionResult } from '../smartEditor/useLspSession';
-import { IDpqlParseResult, TDpqlFsmContext } from './types';
+import { IDpqlParseResult, TDpqlFields, TDpqlFsmContext } from './types';
 
 export interface IDpqlFieldMeta {
   display_name?: string;
@@ -26,6 +26,8 @@ export interface IUseDpqlSessionOptions {
   options?: Record<string, any>;
   /** FSM action code (DPAT_FIND / DPAT_UPDATE / DPAT_DELETE / …). */
   actionCode?: number;
+  /** The record's fields, for a record no provider has (see `IDpqlEditorProps.fields`). */
+  fields?: TDpqlFields;
   /** Initial DPQL text sent on `didOpen`. */
   initialText?: string;
   /**
@@ -72,6 +74,7 @@ export function useDpqlSession(
     recordType,
     options: ctxOptions,
     actionCode,
+    fields,
     initialText = '',
     alertPayloadContext = false,
     fsmContext,
@@ -81,8 +84,11 @@ export function useDpqlSession(
   // server-side mutually exclusive — only one binds the URI at a time.
   // When `alertPayloadContext` is `true`, suppress the provider effect
   // so they don't race.
+  // An explicit field list binds the document on its own: the provider is optional with it.
+  const hasFields = !!fields && Object.keys(fields).length > 0;
+  const fieldsKey = hasFields ? JSON.stringify(fields) : undefined;
   const needsProviderBinding =
-    Boolean(provider && recordType) && !alertPayloadContext;
+    (Boolean(provider && recordType) || hasFields) && !alertPayloadContext;
 
   const initialMetadata = (() => {
     const m: Record<string, any> = {};
@@ -98,6 +104,7 @@ export function useDpqlSession(
       if (recordType) m.recordType = recordType;
       if (ctxOptions) m.options = ctxOptions;
       if (actionCode !== undefined) m.action_code = actionCode;
+      if (hasFields) m.fields = fields;
     }
     return Object.keys(m).length > 0 ? m : undefined;
   })();
@@ -156,6 +163,7 @@ export function useDpqlSession(
         recordType,
         options: ctxOptions,
         action_code: actionCode,
+        ...(hasFields ? { fields } : {}),
       })
       .then((result) => {
         if (cancelled) return;
@@ -196,6 +204,7 @@ export function useDpqlSession(
     recordType,
     ctxOptions,
     actionCode,
+    fieldsKey,
   ]);
 
   // Alert-payload binding. On first mount it lands via

package/src/components/form/engine/FormEngine.stories.tsx

@@ -610,10 +610,25 @@ export const OptionDependsOnOptionInRequiredGroup: Story = {
     await _testsWaitForText(
       'This field is disabled because some dependencies are not fulfilled: "Required Option 2"'
     );
-    await _testsChangeRichText('I have value', 2);
+    // typed into Required Option 2 once it has the focus, and every character kept: waiting on the field's
+    // own state, not on time, so the picture is of the settled form (a capture taken mid-update lost
+    // characters - "I he value")
+    const editor = document.querySelectorAll<HTMLElement>('div.system-option [contenteditable="true"]')[1];
+    await userEvent.click(editor);
+    await waitFor(() => expect(editor.contains(document.activeElement)).toBe(true));
+    await userEvent.keyboard('I have value');
+    await waitFor(() => expect(editor.textContent).toBe('I have value'));
     await _testsWaitForTextToNotExist(
       'This field is disabled because some dependencies are not fulfilled: "Required Option 2"'
     );
+    // Required Option 6, unlocked, is empty: it says it is required
+    await waitFor(() =>
+      expect(
+        [...document.querySelectorAll('.system-option')].some(
+          (row) => row.textContent?.includes('Required Option 6') && row.textContent?.includes('This field is required')
+        )
+      ).toBe(true)
+    );
     // Option 2 settles the first group; the second (4 or 5) is still empty, and 6 is required: 4, 5 and 6
     // need attention, and 4 names only what would settle its empty group
     await _testsWaitForText('3 fields are not valid and require attention. Click here to only show invalid fields.');

package/src/components/form/engine/FormEngine.tsx

@@ -43,6 +43,7 @@ import { offersTypeChoices } from './typeChoices';
 import { optionRowActions, resolveOptionActions, TOptionActions } from './optionActions';
 import { createRendererOnlyUiTypeCheck, isRendererOnlyUiType } from './rendererTypes';
 import { revealRow } from './revealRow';
+import { useEmittedValues } from '../fields/emittedValues';
 import { cloneDeep, findKey, flatten, forEach, isEqual, isPlainObject, last, uniq } from 'lodash';
 import map from 'lodash/map';
 import reduce from 'lodash/reduce';
@@ -1608,6 +1609,16 @@ const FormEngineImpl = ({
    * whole reason the sync-down runs `fixOptions` at all.
    */
   const mirroredValue = useRef<TQorusForm | TQorusFlatForm | undefined>(undefined);
+  /**
+   * Every emit the parent has yet to feed back, not only the last one. A parent that takes the value back
+   * late (a store, a debounced owner, a slow render) echoes an older emit after this form has emitted a newer
+   * one. Compared with `lastEmittedValue` alone, that echo read as the parent's own change, and the sync-down
+   * reset the form to it: the field under the cursor went back a step and the keys typed since were lost
+   * ("I have value" came out as "I he value" in a story under load).
+   */
+  const inFlight = useEmittedValues<TQorusForm | TQorusFlatForm | undefined>((a, b) =>
+    isEqual(normalizeEmptyFieldValues(a), normalizeEmptyFieldValues(b))
+  );
 
   if (originalValue.current === undefined && size(value)) {
     originalValue.current = localValue.fields;
@@ -1630,6 +1641,7 @@ const FormEngineImpl = ({
 
     const toEmit = size(localValue.fields) ? (localValue.fields as TQorusForm) : undefined;
     lastEmittedValue.current = toEmit;
+    inFlight.record(toEmit);
     const meta = size(localValue.meta) ? localValue.meta : undefined;
     // Batched mode still emits every staged change (consumers may want to
     // live-validate), but flags it as a draft — persistence waits for Save.
@@ -1790,8 +1802,10 @@ const FormEngineImpl = ({
     /* What this rebuild lets us agree with the parent on — `undefined` when it
        contributed something the parent has yet to learn. */
     const agreed = agreementFromRebuild(fixedValue, value);
+    // the echo of an emit still in flight - the last or an older one - is not the parent's change
+    const echo = inFlight.isEcho(value);
     if (
-      isEqual(normalizedValue, normalizeEmptyFieldValues(lastEmittedValue.current)) &&
+      (echo || isEqual(normalizedValue, normalizeEmptyFieldValues(lastEmittedValue.current))) &&
       agreed !== undefined
     ) {
       return;
@@ -3108,7 +3122,6 @@ const FormEngineImpl = ({
             }
             key={optionName}
             arg_schema={options?.[optionName]?.arg_schema}
-            noSoft={!!rest?.options}
             value={expressionAwareValue}
             isFunction={optionHoldsExpression(other)}
             isDefaultFunction={options?.[optionName]?.default_view === 'expression'}

package/src/components/form/expressions/ExpressionField.tsx

@@ -16,6 +16,7 @@ import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/T
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DpqlEditor, IDpqlEditorRef } from '../../dpqlEditor';
 import { dpqlDisplayedText } from '../../dpqlEditor/dpqlHelpers';
+import { TDpqlFields } from '../../dpqlEditor/types';
 import { ExpressionBuilder, IExpressionBuilderProps } from './builder';
 import { DpqlRendering } from './DpqlRendering';
 import { IExpression, IExpressionSchema, IExpressionValue, TExpressionReorder } from './types';
@@ -72,6 +73,11 @@ export interface IExpressionFieldProps {
   /** Optional data-provider context for DPQL `@field` completions in Text mode. */
   provider?: string;
   recordType?: string;
+  /**
+   * The record's fields for the Text view, for a record no provider has: every field the expression may
+   * use is offered there, as in the Visual view (see `IDpqlEditorProps.fields`).
+   */
+  fields?: TDpqlFields;
   /** Initial editor mode (default `visual`). */
   defaultMode?: TExpressionMode;
   /**
@@ -98,6 +104,7 @@ export const ExpressionField = memo(
     serverHandled,
     extraActions,
     provider,
+    fields,
     recordType,
     defaultMode = 'visual',
     size,
@@ -416,6 +423,7 @@ export const ExpressionField = memo(
               onChange={handleDpqlChange}
               provider={provider}
               recordType={recordType}
+              fields={fields}
               readOnly={readOnly}
               height='48px'
             />

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 }> = [];