treege 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,8 +1,7 @@
 # [Versions](https://github.com/Tracktor/treege/releases)
 
-## v2.0.1
+## v2.1.0
 
-### 🧹 Chore
+### 🧹 Features
 
-- Migration to React 19 and Vite v7.
-- Updated dependencies and configuration for compatibility.
+- UX improvements and bug fixes.

package/dist/constants/fields.d.ts

@@ -83,6 +83,22 @@ declare const fields: readonly [{
     readonly isRepeatableDisabled: false;
     readonly isRequiredDisabled: false;
     readonly type: "timeRange";
+}, {
+    readonly initialQueryEnable: true;
+    readonly isBooleanField: false;
+    readonly isDecisionField: false;
+    readonly isPatternEnabled: false;
+    readonly isRepeatableDisabled: true;
+    readonly isRequiredDisabled: false;
+    readonly type: "autocomplete";
+}, {
+    readonly isBooleanField: false;
+    readonly isDecisionField: false;
+    readonly isMultiple: false;
+    readonly isPatternEnabled: false;
+    readonly isRepeatableDisabled: false;
+    readonly isRequiredDisabled: false;
+    readonly type: "dynamicSelect";
 }, {
     readonly isBooleanField: true;
     readonly isDecisionField: false;
@@ -125,22 +141,6 @@ declare const fields: readonly [{
     readonly isRepeatableDisabled: true;
     readonly isRequiredDisabled: false;
     readonly type: "select";
-}, {
-    readonly initialQueryEnable: true;
-    readonly isBooleanField: false;
-    readonly isDecisionField: false;
-    readonly isPatternEnabled: false;
-    readonly isRepeatableDisabled: true;
-    readonly isRequiredDisabled: false;
-    readonly type: "autocomplete";
-}, {
-    readonly isBooleanField: false;
-    readonly isDecisionField: false;
-    readonly isMultiple: false;
-    readonly isPatternEnabled: false;
-    readonly isRepeatableDisabled: false;
-    readonly isRequiredDisabled: false;
-    readonly type: "dynamicSelect";
 }, {
     readonly isBooleanField: false;
     readonly isDecisionField: false;

package/dist/features/Treege/components/Forms/AssignValueToChildren/AssignValueToChildren.d.ts

@@ -2,9 +2,7 @@ import { DefaultValueFromAncestor } from '@tracktor/types-treege';
 interface AssignValueToChildrenProps {
     value?: DefaultValueFromAncestor | null;
     onChange?: (sourceValue?: string) => void;
-    ancestorName: string;
-    displayTopDivider?: boolean;
     currentType?: string;
 }
-declare const AssignValueToChildren: ({ onChange, value, ancestorName, displayTopDivider, currentType }: AssignValueToChildrenProps) => import("react/jsx-runtime").JSX.Element;
+declare const AssignValueToChildren: ({ onChange, value, currentType }: AssignValueToChildrenProps) => import("react/jsx-runtime").JSX.Element;
 export default AssignValueToChildren;

package/dist/features/Treege/components/Forms/FormTreeCardMutation/Fields/ApiFieldsConfigAccordion.d.ts

@@ -0,0 +1,32 @@
+import { Params } from '@tracktor/types-treege';
+import { ChangeEvent, MouseEvent, SyntheticEvent } from 'react';
+import { default as fields } from '../../../../../../src/constants/fields';
+interface RouteMapping {
+    object: string;
+    label: string;
+    value: string;
+    image: string;
+}
+interface ApiFieldsConfigAccordionProps {
+    isAutocomplete?: boolean;
+    url?: string;
+    searchKey?: string;
+    sliceUrlParams?: string[];
+    apiParams?: Params[];
+    ancestors: {
+        uuid: string;
+        name?: string;
+    }[];
+    apiMapping?: RouteMapping;
+    initialQuery?: boolean;
+    onChangeUrlSelect?: ({ target }: ChangeEvent<HTMLInputElement>) => void;
+    onChangeSearchKey?: ({ target }: ChangeEvent<HTMLInputElement>) => void;
+    onAddParams?: () => void;
+    onChangeParams?: <K extends keyof Params>(index: number, property: K, value: Params[K]) => void;
+    onDeleteParams?: (e: MouseEvent<HTMLButtonElement> | string) => void;
+    onChangeApiMapping?: (property: string, event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChangeType?: (_: SyntheticEvent, value: (typeof fields)[number]) => void;
+    onChangeInitialQuery?: ({ target }: ChangeEvent<HTMLInputElement>) => void;
+}
+declare const ApiFieldsConfigAccordion: ({ isAutocomplete, url, searchKey, sliceUrlParams, apiParams, ancestors, apiMapping, initialQuery, onChangeSearchKey, onChangeUrlSelect, onAddParams, onChangeParams, onDeleteParams, onChangeApiMapping, onChangeType, onChangeInitialQuery, }: ApiFieldsConfigAccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default ApiFieldsConfigAccordion;

package/dist/features/Treege/components/Forms/FormTreeCardMutation/Fields/FillerFieldAccordion.d.ts

@@ -0,0 +1,14 @@
+import { DefaultValueFromAncestor, FieldType } from '@tracktor/types-treege';
+interface FillerFieldAccordionProps {
+    selectAncestorName?: string;
+    type: FieldType;
+    ancestors: {
+        uuid: string;
+        name?: string;
+    }[];
+    defaultValueFromAncestor?: DefaultValueFromAncestor;
+    onChangeValueFromAncestor?: (sourceValue?: string) => void;
+    onChangeAncestorRef?: (ancestorUuid?: string, ancestorName?: string) => void;
+}
+declare const FillerFieldAccordion: ({ selectAncestorName, type, ancestors, defaultValueFromAncestor, onChangeValueFromAncestor, onChangeAncestorRef, }: FillerFieldAccordionProps) => import("react/jsx-runtime").JSX.Element | null;
+export default FillerFieldAccordion;

package/dist/features/Treege/components/Forms/FormTreeCardMutation/FormTreeCardMutation.d.ts

@@ -1,7 +1,6 @@
 interface FormTreeCardMutationProps {
     onClose(): void;
     title?: string;
-    setIsLarge?(largeModal: boolean): void;
 }
-declare const FormTreeCardMutation: ({ onClose, title, setIsLarge }: FormTreeCardMutationProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormTreeCardMutation: ({ onClose, title }: FormTreeCardMutationProps) => import("react/jsx-runtime").JSX.Element;
 export default FormTreeCardMutation;

package/dist/features/Treege/components/Forms/FormTreeCardMutation/useFormTreeCardMutation.d.ts

@@ -8,15 +8,11 @@ interface Values {
     value: string;
     message?: string;
 }
-interface UseFormTreeCardMutationParams {
-    setIsLarge?(largeModal: boolean): void;
-}
-declare const useFormTreeCardMutation: ({ setIsLarge }: UseFormTreeCardMutationParams) => {
+declare const useFormTreeCardMutation: () => {
     ancestors: {
         uuid: string;
         name?: string;
     }[];
-    collapseOptions: boolean;
     currentTree: TreeNode | null;
     defaultValueFromAncestor: DefaultValueFromAncestor | undefined;
     getDisabledValueField: (index: number) => boolean;
@@ -49,12 +45,13 @@ declare const useFormTreeCardMutation: ({ setIsLarge }: UseFormTreeCardMutationP
     handleChangeTreeSelect: ({ target }: SelectChangeEvent) => void;
     handleChangeType: (_: SyntheticEvent, value: (typeof fields)[number]) => void;
     handleChangeUrlSelect: ({ target }: ChangeEvent<HTMLInputElement>) => void;
-    handleDeleteParam: (e: MouseEvent<HTMLButtonElement>) => void;
+    handleDeleteParam: (arg: MouseEvent<HTMLButtonElement> | string) => void;
     handleDeleteValue: ({ currentTarget }: MouseEvent<HTMLButtonElement>) => void;
     handlePresetValues: (predicate: "value" | "label" | "message") => (event: ChangeEvent<HTMLInputElement>) => void;
     handleSubmit: (e: FormEvent) => Promise<void>;
     handleValueFromAncestor: (sourceValue?: string) => void;
     hasAncestors: boolean;
+    hasApiConfig: boolean;
     helperText: string;
     hiddenValue: string;
     initialQuery: boolean;
@@ -64,9 +61,7 @@ declare const useFormTreeCardMutation: ({ setIsLarge }: UseFormTreeCardMutationP
     isDecision: boolean;
     isDecisionField: boolean;
     isDisabledPast: boolean;
-    isDynamicSelect: boolean;
     isHiddenField: boolean;
-    isLargeView: boolean;
     isMultiple: boolean;
     isMultiplePossible: boolean;
     isPatternEnabled: boolean;
@@ -105,11 +100,11 @@ declare const useFormTreeCardMutation: ({ setIsLarge }: UseFormTreeCardMutationP
     required: boolean;
     route: Route | undefined;
     selectAncestorName: string | undefined;
-    setCollapseOptions: import('react').Dispatch<import('react').SetStateAction<boolean>>;
     tag: string | null;
     treeSelected: string;
     type: import('@tracktor/types-treege').FieldType;
     uuid: string;
+    validDynamicUrlParams: string[];
     values: Values[];
 };
 export default useFormTreeCardMutation;

package/dist/features/Treege/components/Inputs/AutocompleteSelectType/useAutocompleteSelectType.d.ts

@@ -84,6 +84,22 @@ declare const useAutocompleteSelectType: (value: any) => {
         readonly isRepeatableDisabled: false;
         readonly isRequiredDisabled: false;
         readonly type: "timeRange";
+    } | {
+        readonly initialQueryEnable: true;
+        readonly isBooleanField: false;
+        readonly isDecisionField: false;
+        readonly isPatternEnabled: false;
+        readonly isRepeatableDisabled: true;
+        readonly isRequiredDisabled: false;
+        readonly type: "autocomplete";
+    } | {
+        readonly isBooleanField: false;
+        readonly isDecisionField: false;
+        readonly isMultiple: false;
+        readonly isPatternEnabled: false;
+        readonly isRepeatableDisabled: false;
+        readonly isRequiredDisabled: false;
+        readonly type: "dynamicSelect";
     } | {
         readonly isBooleanField: true;
         readonly isDecisionField: false;
@@ -126,22 +142,6 @@ declare const useAutocompleteSelectType: (value: any) => {
         readonly isRepeatableDisabled: true;
         readonly isRequiredDisabled: false;
         readonly type: "select";
-    } | {
-        readonly initialQueryEnable: true;
-        readonly isBooleanField: false;
-        readonly isDecisionField: false;
-        readonly isPatternEnabled: false;
-        readonly isRepeatableDisabled: true;
-        readonly isRequiredDisabled: false;
-        readonly type: "autocomplete";
-    } | {
-        readonly isBooleanField: false;
-        readonly isDecisionField: false;
-        readonly isMultiple: false;
-        readonly isPatternEnabled: false;
-        readonly isRepeatableDisabled: false;
-        readonly isRequiredDisabled: false;
-        readonly type: "dynamicSelect";
     } | {
         readonly isBooleanField: false;
         readonly isDecisionField: false;
@@ -235,6 +235,22 @@ declare const useAutocompleteSelectType: (value: any) => {
         readonly isRepeatableDisabled: false;
         readonly isRequiredDisabled: false;
         readonly type: "timeRange";
+    } | {
+        readonly initialQueryEnable: true;
+        readonly isBooleanField: false;
+        readonly isDecisionField: false;
+        readonly isPatternEnabled: false;
+        readonly isRepeatableDisabled: true;
+        readonly isRequiredDisabled: false;
+        readonly type: "autocomplete";
+    } | {
+        readonly isBooleanField: false;
+        readonly isDecisionField: false;
+        readonly isMultiple: false;
+        readonly isPatternEnabled: false;
+        readonly isRepeatableDisabled: false;
+        readonly isRequiredDisabled: false;
+        readonly type: "dynamicSelect";
     } | {
         readonly isBooleanField: true;
         readonly isDecisionField: false;
@@ -277,22 +293,6 @@ declare const useAutocompleteSelectType: (value: any) => {
         readonly isRepeatableDisabled: true;
         readonly isRequiredDisabled: false;
         readonly type: "select";
-    } | {
-        readonly initialQueryEnable: true;
-        readonly isBooleanField: false;
-        readonly isDecisionField: false;
-        readonly isPatternEnabled: false;
-        readonly isRepeatableDisabled: true;
-        readonly isRequiredDisabled: false;
-        readonly type: "autocomplete";
-    } | {
-        readonly isBooleanField: false;
-        readonly isDecisionField: false;
-        readonly isMultiple: false;
-        readonly isPatternEnabled: false;
-        readonly isRepeatableDisabled: false;
-        readonly isRequiredDisabled: false;
-        readonly type: "dynamicSelect";
     } | {
         readonly isBooleanField: false;
         readonly isDecisionField: false;

package/dist/features/Treege/components/TreeGrid/useTreeGrid.d.ts

@@ -4,8 +4,6 @@ declare const useTreeGrid: () => {
     getTitleModalMutation: () => "Add a field" | "Add a field to « {{name}} »" | "Edit field « {{name}} »";
     handleChangeTree: (tree: string) => false | undefined;
     isDeleteModal: boolean;
-    isLargeView: boolean;
     isModalMutationOpen: boolean;
-    setIsLargeView: import('react').Dispatch<import('react').SetStateAction<boolean>>;
 };
 export default useTreeGrid;

package/dist/locales/en/form-en.d.ts

@@ -1,11 +1,13 @@
 declare const FORM_EN: {
-    readonly additionalParams: "Api parameters";
+    readonly addParentsBeforeIntegrateUrlVariable: "Add fields parents before integrate URL variable";
     readonly addressStructureHint: "An address type must be:";
+    readonly addUrlVariable: "Add URL variable";
     readonly ancestor: "Ancestor";
     readonly ancestorValue: "Get value from: {{ancestorName}}";
+    readonly apiConfigDescription: "When the search finds only one possible option, it is automatically displayed in the field.";
     readonly apiRoute: "Api route";
+    readonly baseUrl: "Base URL";
     readonly cardNumber: "Card number";
-    readonly dataMapping: "Option mapping";
     readonly decisionField: "Decision field";
     readonly disabledPast: "Disabled Past";
     readonly dynamicSelectStructureHint: "Make sure the field accepts the ancestor value.";
@@ -16,11 +18,10 @@ declare const FORM_EN: {
     readonly key: "Key";
     readonly keyPath: "Key path (string | number)";
     readonly keyPathApiDescription: "(Option) To insert a value in a URL, use the syntax {paramName}. For example: http://api.com/userId={userId}, add {userId} in params.";
-    readonly keyPathAssignment: "Key path to value: {{keyPath}}";
     readonly keyPathObject: "Key path to value";
     readonly label: "Label";
     readonly letter: "Letter";
-    readonly mapObject: "Map object";
+    readonly mapObjectToRender: "Map the value of the object to display";
     readonly message: "Message";
     readonly mustBeUnique: "Must be unique";
     readonly newTree: "Nouvel arbre";
@@ -30,13 +31,17 @@ declare const FORM_EN: {
     readonly objectDemo: "Example of object mapping";
     readonly offMessage: "Message (disable)";
     readonly onMessage: "Message (enable)";
+    readonly optionConfig: "Option mapping";
     readonly pattern: "Pattern";
     readonly patternMessage: "Pattern message";
     readonly phoneNumber: "Phone number";
-    readonly receiveValueFromParent: "Default value from ancestor";
+    readonly prefillField: "pre-fill field";
+    readonly queryParams: "query params";
+    readonly receiveValueFromParent: "Pre-fill field from parent";
     readonly repeatable: "Repeatable";
     readonly searchKeyPlaceholder: "text";
     readonly selectStructureHint: "Must be an value existing in the values option.";
+    readonly setupApi: "Setup API";
     readonly staticFields: "Static fields";
     readonly staticValue: "(Option) Static value";
     readonly staticValueDescription: "By default, it will use the ancestor value, but you can assign a static value.";
@@ -45,11 +50,11 @@ declare const FORM_EN: {
     readonly treeName: "Tree name";
     readonly type: {
         readonly address: "Address";
-        readonly autocomplete: "Autocomplete";
+        readonly autocomplete: "API Field";
         readonly checkbox: "Checkbox";
         readonly date: "Date";
         readonly dateRange: "Date range";
-        readonly dynamicSelect: "Dynamic select";
+        readonly dynamicSelect: "API Field";
         readonly email: "Email";
         readonly file: "File";
         readonly hidden: "Hidden field";
@@ -66,12 +71,15 @@ declare const FORM_EN: {
         readonly tree: "Tree";
         readonly url: "URL";
     };
-    readonly typeStructureWarning: "Type structure must be: {{type}}";
     readonly url: "URL";
+    readonly urlBuilder: "URL Builder";
     readonly urlConstruction: "URL construction";
+    readonly URlVariables: "URL Variables";
     readonly useAncestorValueAsParam: "Use Ancestor value";
     readonly value: "Value";
+    readonly valueOfParentIsOfType: "Value of parent is of type";
     readonly values: "Values";
+    readonly variant: "Field type: {{variant}}";
     readonly warningApiAutocomplete: {
         readonly response: "should have as a response";
         readonly url: "The API Route";

package/dist/locales/en/translation-en.d.ts

@@ -1,5 +1,7 @@
 declare const TRANSLATION_EN: {
+    readonly activateSearch: "Activate search";
     readonly add: "Add";
+    readonly advancedConfiguration: "Advanced configuration";
     readonly cancel: "Cancel";
     readonly disabled: "Disabled";
     readonly edit: "Edit";

package/dist/locales/fr/form-fr.d.ts

@@ -1,11 +1,13 @@
 declare const FORM_FR: {
-    readonly additionalParams: "Paramètres API";
+    readonly addParentsBeforeIntegrateUrlVariable: "Ajouter des champs parents avant d'intégrer une variable d'URL";
     readonly addressStructureHint: "Un type d'adresse doit être :";
+    readonly addUrlVariable: "Ajouter une variable d'URL";
     readonly ancestor: "Ancêtre";
     readonly ancestorValue: "Récupération de la valeur de : {{ancestorName}}";
+    readonly apiConfigDescription: "Lorsque la recherche ne trouve qu’un seul choix possible, ce choix est directement affiché dans le champ.";
     readonly apiRoute: "Api route";
+    readonly baseUrl: "URL de base";
     readonly cardNumber: "Numéro de carte";
-    readonly dataMapping: "Mapping des options";
     readonly decisionField: "Champs de décision";
     readonly disabledPast: "Passé désactivé";
     readonly dynamicSelectStructureHint: "Assurez-vous que le champ accepte la valeur de l'ancêtre.";
@@ -16,11 +18,10 @@ declare const FORM_FR: {
     readonly key: "Clé";
     readonly keyPath: "Chemin de la clé (string | number)";
     readonly keyPathApiDescription: "Pour insérer une valeur dans une URL, utilisez la syntaxe {paramName}. Par exemple : http://api.com/userId={userId}, ajouter {userId} en params.";
-    readonly keyPathAssignment: "Chemin vers la valeur : {{keyPath}}";
     readonly keyPathObject: "Clé vers la valeur";
     readonly label: "Label";
     readonly letter: "Lettre";
-    readonly mapObject: "Mapper l'objet";
+    readonly mapObjectToRender: "Mapper la valeur de l'objet à afficher";
     readonly message: "Message";
     readonly mustBeUnique: "Doit être unique";
     readonly newTree: "Nouvel arbre";
@@ -30,13 +31,17 @@ declare const FORM_FR: {
     readonly objectDemo: "Exemple de mapping d'objet";
     readonly offMessage: "Message (désactiver)";
     readonly onMessage: "Message (activer)";
+    readonly optionConfig: "Configuration des options";
     readonly pattern: "Expression régulière";
     readonly patternMessage: "Message d'aide invalide";
     readonly phoneNumber: "Numéro de téléphone";
-    readonly receiveValueFromParent: "Valeur par défaut depuis l'ancêtre";
+    readonly prefillField: "pré-remplir le champ";
+    readonly queryParams: "Query params";
+    readonly receiveValueFromParent: "Pré-remplissage du champ depuis un parent";
     readonly repeatable: "Répétable";
     readonly searchKeyPlaceholder: "text";
     readonly selectStructureHint: "Doit être une valeur existante dans les options de valeurs.";
+    readonly setupApi: "Configurer l'API";
     readonly staticFields: "Champs statiques";
     readonly staticValue: "(Option) Valeur statique";
     readonly staticValueDescription: "Par défaut, il utilisera la valeur de l'ancêtre, mais vous pouvez assigner une valeur statique.";
@@ -45,11 +50,11 @@ declare const FORM_FR: {
     readonly treeName: "Nom de l'arbre";
     readonly type: {
         readonly address: "Adresse";
-        readonly autocomplete: "Autocomplétion";
+        readonly autocomplete: "Champs API";
         readonly checkbox: "Case à cocher";
         readonly date: "Date";
         readonly dateRange: "Plage de dates";
-        readonly dynamicSelect: "Sélection dynamique";
+        readonly dynamicSelect: "Champs API";
         readonly email: "Email";
         readonly file: "Fichier";
         readonly hidden: "Champs caché";
@@ -66,12 +71,15 @@ declare const FORM_FR: {
         readonly tree: "Arbre";
         readonly url: "URL";
     };
-    readonly typeStructureWarning: "Le type d'input doit être : {{type}}";
     readonly url: "URL";
+    readonly urlBuilder: "URL Builder";
     readonly urlConstruction: "Construction de l'URL";
+    readonly URlVariables: "Variables d'URL";
     readonly useAncestorValueAsParam: "Utiliser une valeur ancêtre";
     readonly value: "Valeur";
+    readonly valueOfParentIsOfType: "La valeur du parent est de type";
     readonly values: "Valeurs";
+    readonly variant: "Champ de type : {{variant}}";
     readonly warningApiAutocomplete: {
         readonly response: "dois avoir comme réponse";
         readonly url: "La route de l'API";

package/dist/locales/fr/translation-fr.d.ts

@@ -1,5 +1,7 @@
 declare const TRANSLATION_FR: {
+    readonly activateSearch: "Activer la recherche";
     readonly add: "Ajouter";
+    readonly advancedConfiguration: "Configuration avancée";
     readonly cancel: "Annuler";
     readonly disabled: "Désactivé";
     readonly edit: "Éditer";