@qoretechnologies/reqraft 0.10.61 → 0.10.62-pr.137.g86641aa

package/src/components/form/fields/number/Number.stories.tsx

@@ -142,18 +142,19 @@ export const TypedFreely: Story = {
     docs: {
       description: {
         story:
-          'Renders the Number field in integer mode after typing what is not a number: 12abc stays as typed (the form flags it, it is not cut to 12), and a template ($local:quantity) or an expression (@qty * 2) is passed on as typed for the field around it to take up.',
+          'Renders the bare Number editor in integer mode, given no templates, after typing what is not a number: 12abc stays as typed (the form flags it, it is not cut to 12), and a decimal point typed before its digits is kept. A number field that takes templates is TemplateField around this editor: see Components/Form/Template › Number Typed Freely.',
       },
     },
   },
   async play({ args, canvasElement }) {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('Number');
-    for (const text of ['12abc', '@qty * 2', '$local:quantity']) {
-      await userEvent.clear(input);
-      await userEvent.type(input, text);
-      await expect(input).toHaveValue(text);
-      await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(text), { timeout: 500 });
-    }
+    await userEvent.clear(input);
+    await userEvent.type(input, '12abc');
+    await expect(input).toHaveValue('12abc');
+    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith('12abc'), { timeout: 500 });
+    await userEvent.clear(input);
+    await userEvent.type(input, '10.');
+    await expect(input).toHaveValue('10.');
   },
 };

package/src/components/form/fields/rich-text/RichText.tsx

@@ -48,6 +48,13 @@ export interface IRichTextFormFieldProps extends Omit<
   onChange?: (value: string | IReqoreRichTextEditorProps['value']) => void;
   allowTemplates?: boolean;
   templates?: IReqoreFormTemplates;
+  /**
+   * The catalogue a chip is NAMED from, when it is wider than the `templates` offered: a typed field offers
+   * only the fields of its type, but a chip of any field in its value is named as the catalogue names it.
+   * Named from the offered list, a field not on it read as its reference's path ("record: pos").
+   * Defaults to `templates`.
+   */
+  namingTemplates?: IReqoreFormTemplates;
   /**
    * What the value is. `richtext` (the default) stores the editor's document.
    * `text` stores a plain string: each template reference in it is drawn as a
@@ -116,14 +123,17 @@ export const RichTextFormField = memo(({
   onChange,
   allowTemplates,
   templates,
+  namingTemplates,
   valueFormat = 'richtext',
   singleLine,
   templateToken,
   ...rest
 }: IRichTextFormFieldProps) => {
   const isText = valueFormat === 'text';
+  /** What chips are named from: the whole catalogue, not only what is offered (see the prop). */
+  const naming = namingTemplates ?? templates;
   const [localValue, setLocalValue] = useState<any>(() =>
-    isText ? templateTextToNodes(String(value ?? ''), templates, templateToken) : value
+    isText ? templateTextToNodes(String(value ?? ''), naming, templateToken) : value
   );
   /* In text mode, the string the editor's document stands for. The value that
      comes back from the parent is usually that same string, and rebuilding the
@@ -143,7 +153,7 @@ export const RichTextFormField = memo(({
       const text = String(value ?? '');
       if (text !== lastTextRef.current) {
         lastTextRef.current = text;
-        setLocalValue(templateTextToNodes(text, templates, templateToken));
+        setLocalValue(templateTextToNodes(text, naming, templateToken));
       }
       return;
     }
@@ -182,7 +192,7 @@ export const RichTextFormField = memo(({
       // stopped below. Flattened text is shown as the one line it now is.
       if (singleLine && hasLineBreak(text)) {
         lastTextRef.current = flattenToSingleLine(text);
-        setLocalValue(templateTextToNodes(lastTextRef.current, templates, templateToken));
+        setLocalValue(templateTextToNodes(lastTextRef.current, naming, templateToken));
         return;
       }
       lastTextRef.current = text;
@@ -200,9 +210,7 @@ export const RichTextFormField = memo(({
   // show the same strings, so they must be drawn the same way.
   const renderMarkdown = useMarkdownRenderer();
 
-  const descriptionByValue = useMemo(() => getChipTooltipDescriptions(templates), [
-    JSON.stringify(templates),
-  ]);
+  const descriptionByValue = useMemo(() => getChipTooltipDescriptions(naming), [JSON.stringify(naming)]);
 
   const handleGetTagProps = useCallback(
     (tag: any): IReqoreTagProps => {
@@ -217,13 +225,13 @@ export const RichTextFormField = memo(({
          description on hover. Read at render, so a catalogue that arrives
          after the value still names it. */
       if (isText && tagValue.startsWith('$')) {
-        const { item } = describeTemplateReference(templates, tagValue);
+        const { item } = describeTemplateReference(naming, tagValue);
         const metadata = item?.metadata as TTemplateMeta | undefined;
         return {
           icon: 'ExchangeDollarLine',
           leftIconProps: { image: metadata?.image },
-          label: templateChipLabel(templates, tagValue),
-          tooltip: templateTooltip(templates, tagValue),
+          label: templateChipLabel(naming, tagValue),
+          tooltip: templateTooltip(naming, tagValue),
           ...getTemplateTagStyle(metadata),
         };
       }
@@ -269,7 +277,7 @@ export const RichTextFormField = memo(({
 
       return {};
     },
-    [descriptionByValue, renderMarkdown, isText, templates]
+    [descriptionByValue, renderMarkdown, isText, naming]
   );
 
   const handleKeyDown = useCallback(