@qoretechnologies/reqraft 0.8.2 → 0.8.3

package/src/components/form/fields/array/ArrayAutoField.tsx

@@ -3,12 +3,13 @@ import {
   ReqoreControlGroup,
   ReqorePanel,
   ReqoreTag,
+  ReqoreTagGroup,
   ReqoreVerticalSpacer,
   useReqoreProperty,
 } from '@qoretechnologies/reqore';
 import { IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
 import { map, size } from 'lodash';
-import { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useDebounce } from 'react-use';
 import { validateFieldWithResult } from '../../../../helpers/validations';
 
@@ -48,6 +49,11 @@ const defaultValueByType: Record<string, unknown> = {
   list: [],
 };
 
+const formatTagLabel = (val: unknown): string => {
+  if (val === undefined || val === null) return '';
+  return String(val);
+};
+
 export const ArrayAutoField = memo(
   ({
     name,
@@ -65,6 +71,10 @@ export const ArrayAutoField = memo(
   }: IArrayAutoFieldProps) => {
     const confirmAction = useReqoreProperty('confirmAction');
     const [localValue, setLocalValue] = useState(value);
+    // Compact mode state: staging value for the input field and optional editing index
+    const [inputValue, setInputValue] = useState<unknown>(undefined);
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+    const inputKeyRef = useRef(0);
 
     useEffect(() => {
       setLocalValue(value);
@@ -82,12 +92,9 @@ export const ArrayAutoField = memo(
       setLocalValue((prev) => [...(prev || []), defaultValueByType[type] ?? undefined]);
     }, [type]);
 
-    const removeItem = useCallback(
-      (idx: number) => {
-        setLocalValue((prev) => (prev || []).filter((_, i) => i !== idx));
-      },
-      []
-    );
+    const removeItem = useCallback((idx: number) => {
+      setLocalValue((prev) => (prev || []).filter((_, i) => i !== idx));
+    }, []);
 
     const handleItemChange = useCallback((idx: number, itemValue: unknown) => {
       setLocalValue((prev) => {
@@ -117,6 +124,159 @@ export const ArrayAutoField = memo(
       return null;
     };
 
+    // ── Compact mode handlers ──────────────────────────────────────────────
+
+    const resetInput = useCallback(() => {
+      setInputValue(undefined);
+      setEditingIndex(null);
+      inputKeyRef.current += 1;
+    }, []);
+
+    const confirmInput = useCallback(() => {
+      if (inputValue === undefined || inputValue === '') return;
+
+      if (editingIndex !== null) {
+        // Update existing item
+        setLocalValue((prev) => {
+          const next = [...(prev || [])];
+          next[editingIndex] = inputValue;
+          return next;
+        });
+      } else {
+        // Add new item
+        setLocalValue((prev) => [...(prev || []), inputValue]);
+      }
+
+      resetInput();
+    }, [inputValue, editingIndex, resetInput]);
+
+    const handleEditTag = useCallback(
+      (idx: number) => {
+        setInputValue(localValue[idx]);
+        setEditingIndex(idx);
+        inputKeyRef.current += 1;
+      },
+      [localValue]
+    );
+
+    const handleRemoveTag = useCallback(
+      (idx: number) => {
+        // If we're editing this item, cancel the edit
+        if (editingIndex === idx) {
+          resetInput();
+        } else if (editingIndex !== null && idx < editingIndex) {
+          // Adjust editing index if removing an item before it
+          setEditingIndex((prev) => (prev !== null ? prev - 1 : null));
+        }
+        removeItem(idx);
+      },
+      [editingIndex, removeItem, resetInput]
+    );
+
+    const handleInputKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          confirmInput();
+        } else if (e.key === 'Escape' && editingIndex !== null) {
+          e.preventDefault();
+          resetInput();
+        }
+      },
+      [confirmInput, editingIndex, resetInput]
+    );
+
+    // ── Compact mode: non-hash, non-list element types ─────────────────────
+
+    if (type !== 'hash' && type !== 'list' && type !== 'rgbcolor') {
+      const isEditing = editingIndex !== null;
+      const hasInput = inputValue !== undefined && inputValue !== '';
+
+      return (
+        <ReqoreControlGroup
+          vertical
+          fluid
+          className='array-auto-compact'
+          onKeyDown={handleInputKeyDown as any}
+        >
+          {size(localValue) > 0 && (
+            <ReqoreTagGroup>
+              {map(localValue, (val, idx) => (
+                <ReqoreTag
+                  key={`${idx}-${formatTagLabel(val)}`}
+                  label={formatTagLabel(val)}
+                  className='array-auto-compact-tag'
+                  size={fieldSize as any}
+                  intent={editingIndex === idx ? 'info' : undefined}
+                  actions={
+                    disabled || readOnly ? undefined : (
+                      [
+                        {
+                          icon: 'EditLine',
+                          tooltip: 'Edit',
+                          className: 'array-auto-compact-edit',
+                          onClick: () => handleEditTag(idx),
+                        },
+                        {
+                          icon: 'DeleteBinLine',
+                          intent: 'danger',
+                          tooltip: 'Remove',
+                          className: 'array-auto-compact-remove',
+                          onClick: () => handleRemoveTag(idx),
+                        },
+                      ]
+                    )
+                  }
+                />
+              ))}
+            </ReqoreTagGroup>
+          )}
+
+          <ReqoreControlGroup fluid>
+            <div style={{ flex: 1 }}>
+              {renderItem({
+                value: inputValue,
+                onChange: (v) => setInputValue(v),
+                index: -1,
+                type,
+                arg_schema,
+                allowed_values,
+                allowed_values_creatable,
+                disabled,
+                readOnly,
+                size: fieldSize,
+                key: inputKeyRef.current,
+              } as any)}
+            </div>
+            {!disabled && !readOnly && (
+              <>
+                <ReqoreButton
+                  icon={isEditing ? 'CheckLine' : 'AddLine'}
+                  intent={isEditing ? 'info' : undefined}
+                  className='array-auto-compact-confirm'
+                  tooltip={isEditing ? 'Save changes' : 'Add item'}
+                  disabled={!hasInput}
+                  onClick={confirmInput}
+                  fixed
+                />
+                {isEditing && (
+                  <ReqoreButton
+                    icon='CloseLine'
+                    className='array-auto-compact-cancel'
+                    tooltip='Cancel editing'
+                    onClick={resetInput}
+                    fixed
+                  />
+                )}
+              </>
+            )}
+          </ReqoreControlGroup>
+        </ReqoreControlGroup>
+      );
+    }
+
+    // ── Complex mode: hash/list element types ──────────────────────────────
+
     return (
       <ReqoreControlGroup vertical fluid>
         {map(localValue, (val, idx) => (

package/src/components/form/fields/multi-select/MultiSelectFormField.tsx

@@ -8,6 +8,7 @@ export interface IMultiSelectFormFieldProps {
   value?: unknown[];
   /** The fixed list of allowed items */
   items: IQorusAllowedValue[];
+  canCreateItems?: boolean;
   onChange: (value: unknown[]) => void;
   disabled?: boolean;
   size?: string;
@@ -18,7 +19,7 @@ export interface IMultiSelectFormFieldProps {
  * Used by FormField for `list` fields that have `element_allowed_values`.
  */
 export const MultiSelectFormField = memo(
-  ({ value = [], items, onChange, disabled, size }: IMultiSelectFormFieldProps) => {
+  ({ value = [], items, onChange, disabled, size, canCreateItems }: IMultiSelectFormFieldProps) => {
     const reqoreItems = useMemo<TReqoreMultiSelectItem[]>(
       () =>
         items.map((item) => ({
@@ -39,9 +40,12 @@ export const MultiSelectFormField = memo(
       <ReqoreMultiSelect
         items={reqoreItems}
         value={selectedValues}
-        onValueChange={(selected) => onChange(selected as unknown[])}
+        onValueChange={(selected) => onChange?.(selected as unknown[])}
         disabled={disabled}
         size={size as any}
+        canCreateItems={canCreateItems}
+        enterKeySelects
+        canRemoveItems
       />
     );
   }

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

@@ -1,6 +1,5 @@
 import {
   ReqoreButton,
-  ReqoreControlGroup,
   ReqoreDropdown,
   ReqoreMenu,
   ReqoreMenuItem,
@@ -12,10 +11,7 @@ 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 {
-  ISelectFieldCollectionItem,
-  SelectFieldCollection,
-} from './SelectCollection';
+import { ISelectFieldCollectionItem, SelectFieldCollection } from './SelectCollection';
 
 export type ISelectFormFieldItem = ISelectFieldCollectionItem;
 
@@ -215,14 +211,17 @@ export const SelectFormField = memo(
 
     const itemCount: TReqoreBadge = useMemo(
       () =>
-        hideItemCount
-          ? undefined
-          : {
-              label: size(items),
-              align: 'right' as const,
-              flat: false,
-              intent: hasError(items) ? 'danger' : hasWarning(items) ? 'warning' : undefined,
-            },
+        hideItemCount ? undefined : (
+          {
+            label: size(items),
+            align: 'right' as const,
+            flat: false,
+            intent:
+              hasError(items) ? 'danger'
+              : hasWarning(items) ? 'warning'
+              : undefined,
+          }
+        ),
       [size(items), hideItemCount]
     );
 
@@ -244,16 +243,19 @@ export const SelectFormField = memo(
           fixed
           minimal
           {...getIcon(filteredItems, filteredItems[0].value)}
-          intent={itemHasError ? 'danger' : itemHasWarning ? 'warning' : 'info'}
+          intent={
+            itemHasError ? 'danger'
+            : itemHasWarning ?
+              'warning'
+            : 'info'
+          }
           disabled={false}
         />
       );
     }
 
     if (!filteredItems || filteredItems.length === 0) {
-      return (
-        <ReqoreTag intent='muted' label='No data available' icon='ForbidLine' fixed />
-      );
+      return <ReqoreTag intent='muted' label='No data available' icon='ForbidLine' fixed />;
     }
 
     return (
@@ -268,7 +270,7 @@ export const SelectFormField = memo(
             onClose={() => setCollectionOpen(false)}
           />
         )}
-        {asMenu ? (
+        {asMenu ?
           <ReqoreMenu>
             {filteredItems.map((item) => (
               <ReqoreMenuItem
@@ -280,43 +282,39 @@ export const SelectFormField = memo(
               />
             ))}
           </ReqoreMenu>
-        ) : hasItemsWithDesc(items) && !forceDropdown ? (
-          <ReqoreControlGroup stack fluid={fluid}>
-            <ReqoreButton
-              transparent={!value}
-              minimal
-              intent={
-                hasError(items, value)
-                  ? 'danger'
-                  : hasWarning(items, value)
-                    ? 'warning'
-                    : value
-                      ? 'info'
-                      : rest.intent as TReqoreIntent
-              }
-              fluid={fluid}
-              compact
-              key={valueToShow(value) as string}
-              badge={itemCount}
-              {...getIcon(items, value)}
-              rightIcon={showRightIcon ? 'ExpandUpDownLine' : undefined}
-              onClick={(e) => {
-                e.stopPropagation();
-                setCollectionOpen(true);
-              }}
-              description={getItemShortDescription(value as string) as string}
-              tooltip={rest.tooltip as IReqoreButtonProps['tooltip']}
-              disabled={disabled}
-            >
-              {value
-                ? getLabel(items, value as string)
-                : showPlaceholder
-                  ? placeholder || 'Please select'
-                  : undefined}
-            </ReqoreButton>
-          </ReqoreControlGroup>
-        ) : (
-          <ReqoreDropdown
+        : hasItemsWithDesc(items) && !forceDropdown ?
+          <ReqoreButton
+            transparent={!value}
+            minimal
+            intent={
+              hasError(items, value) ? 'danger'
+              : hasWarning(items, value) ?
+                'warning'
+              : value ?
+                'info'
+              : (rest.intent as TReqoreIntent)
+            }
+            fluid={fluid}
+            compact
+            key={valueToShow(value) as string}
+            badge={itemCount}
+            {...getIcon(items, value)}
+            rightIcon={showRightIcon ? 'ExpandUpDownLine' : undefined}
+            onClick={(e) => {
+              e.stopPropagation();
+              setCollectionOpen(true);
+            }}
+            description={getItemShortDescription(value as string) as string}
+            tooltip={rest.tooltip as IReqoreButtonProps['tooltip']}
+            disabled={disabled}
+          >
+            {value ?
+              getLabel(items, value as string)
+            : showPlaceholder ?
+              placeholder || 'Please select'
+            : undefined}
+          </ReqoreButton>
+        : <ReqoreDropdown
             items={reqoreItems}
             listCustomTheme={{
               main: '#010811',
@@ -336,15 +334,20 @@ export const SelectFormField = memo(
             }}
             description={getItemShortDescription(value as string) as string}
             minimal
-            intent={hasError(items, value) ? 'danger' : value ? 'info' : rest.intent as TReqoreIntent}
+            intent={
+              hasError(items, value) ? 'danger'
+              : value ?
+                'info'
+              : (rest.intent as TReqoreIntent)
+            }
           >
-            {value
-              ? getLabel(items, value as string)
-              : showPlaceholder
-                ? placeholder || 'Please select'
-                : undefined}
+            {value ?
+              getLabel(items, value as string)
+            : showPlaceholder ?
+              placeholder || 'Please select'
+            : undefined}
           </ReqoreDropdown>
-        )}
+        }
       </>
     );
   }

package/src/components/form/fields/template/TemplateField.tsx

@@ -52,18 +52,18 @@ export const mapQorusTypeToFormFieldType = (type: string): TFormFieldType => {
       return 'richtext';
     case 'bool':
     case 'boolean':
-      return 'boolean';
+      return 'bool';
     case 'int':
     case 'integer':
     case 'float':
     case 'number':
-      return 'number';
+      return 'int';
     case 'date':
       return 'date';
     case 'file':
       return 'file';
     case 'rgbcolor':
-      return 'color';
+      return 'rgbcolor';
     case 'hash':
     case 'free-hash':
       return 'hash';

package/src/types/Form.ts

@@ -1,50 +1,18 @@
+import { TQorusType } from '@qoretechnologies/ts-toolkit';
 import { IColorFormFieldProps } from '../components/form/fields/color/Color';
 
-export type TFormFieldType =
-  | 'string'
-  | 'number'
-  | 'boolean'
-  | 'date'
-  | 'time'
-  | 'datetime'
-  | 'select'
-  | 'multiSelect'
-  | 'radio'
-  | 'checkbox'
-  | 'file'
-  | 'image'
-  | 'color'
-  | 'password'
-  | 'email'
-  | 'phone'
-  | 'url'
-  | 'markdown'
-  | 'long-string'
-  | 'cron'
-  | 'richtext'
-  | 'hash'
-  | 'list';
+export type TFormFieldType = TQorusType;
 
 export type TFormFieldValueType<T> =
-  T extends 'string' ? string
-  : T extends 'number' ? number
-  : T extends 'boolean' ? boolean
+  T extends 'string' | 'long-string' | 'binary' | 'email' | 'url' | 'enum' | 'select-string' | 'file-as-string' ? string
+  : T extends 'int' | 'integer' | 'float' | 'number' ? number
+  : T extends 'bool' | 'boolean' ? boolean
   : T extends 'date' ? Date | string
-  : T extends 'time' ? Date | string
-  : T extends 'datetime' ? Date | string
-  : T extends 'select' ? string
-  : T extends 'multiSelect' ? string[]
-  : T extends 'radio' ? string
-  : T extends 'checkbox' ? boolean
+  : T extends 'hash' | 'free-hash' | 'data' ? Record<string, any>
+  : T extends 'list' | 'free-list' | 'range' ? unknown[]
+  : T extends 'rgbcolor' ? IColorFormFieldProps['value']
   : T extends 'file' ? File
-  : T extends 'image' ? string
-  : T extends 'color' ? IColorFormFieldProps['value']
-  : T extends 'password' ? string
-  : T extends 'email' ? string
-  : T extends 'phone' ? string
-  : T extends 'url' ? string
-  : T extends 'markdown' ? string
-  : T extends 'long-string' ? string
-  : T extends 'cron' ? string
   : T extends 'richtext' ? string
+  : T extends 'auto' | 'any' ? any
+  : T extends 'null' | 'nothing' ? null
   : any;