strapi-plugin-navigation 2.3.2 → 2.4.0

package/admin/src/components/AdditionalFieldInput/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { AdditionalFieldInputProps } from './types';
+import React from "react";
+import { AdditionalFieldInputProps } from "./types";
 declare const AdditionalFieldInput: React.FC<AdditionalFieldInputProps>;
 export default AdditionalFieldInput;
 //# sourceMappingURL=index.d.ts.map

package/admin/src/components/AdditionalFieldInput/index.js

@@ -34,9 +34,24 @@ const lodash_1 = require("lodash");
 const react_intl_1 = require("react-intl");
 const DEFAULT_STRING_VALUE = "";
 const handlerFactory = ({ field, prop, onChange }) => ({ target }) => {
-    onChange(field.name, target[prop]);
+    onChange(field.name, target[prop], field.type);
 };
-const AdditionalFieldInput = ({ field, isLoading, onChange, value, disabled, error }) => {
+const mediaAttribute = {
+    type: "media",
+    multiple: false,
+    required: false,
+    allowedTypes: ["images"],
+    pluginOptions: {
+        i18n: {
+            localized: false,
+        },
+    },
+};
+const AdditionalFieldInput = ({ field, isLoading, onChange, value: baseValue, disabled, error, }) => {
+    const { fields } = (0, helper_plugin_1.useLibrary)();
+    const value = (0, react_1.useMemo)(() => field.type === "media" && baseValue
+        ? JSON.parse(baseValue)
+        : baseValue, [baseValue, field.type]);
     const toggleNotification = (0, helper_plugin_1.useNotification)();
     const { formatMessage } = (0, react_intl_1.useIntl)();
     const defaultInputProps = (0, react_1.useMemo)(() => ({
@@ -48,21 +63,34 @@ const AdditionalFieldInput = ({ field, isLoading, onChange, value, disabled, err
     }), [field, isLoading, error]);
     const handleBoolean = (0, react_1.useMemo)(() => handlerFactory({ field, onChange, prop: "checked" }), [onChange, field]);
     const handleString = (0, react_1.useMemo)(() => handlerFactory({ field, onChange, prop: "value" }), [onChange, field]);
+    const handleMedia = (0, react_1.useMemo)(() => handlerFactory({ field, onChange, prop: "value" }), [onChange, field]);
+    const MediaInput = (fields?.media ??
+        (() => react_1.default.createElement(react_1.default.Fragment, null)));
+    (0, react_1.useEffect)(() => {
+        if (!MediaInput) {
+            toggleNotification({
+                type: "warning",
+                message: (0, translations_1.getTrad)("notification.error.customField.media.missing"),
+            });
+        }
+    }, []);
     switch (field.type) {
-        case 'boolean':
+        case "boolean":
             if (!(0, lodash_1.isNil)(value))
                 (0, types_1.assertBoolean)(value);
             return (react_1.default.createElement(ToggleInput_1.ToggleInput, { ...defaultInputProps, checked: !!value, onChange: handleBoolean, onLabel: "true", offLabel: "false" }));
-        case 'string':
+        case "string":
             if (!(0, lodash_1.isNil)(value))
                 (0, types_1.assertString)(value);
             return (react_1.default.createElement(TextInput_1.TextInput, { ...defaultInputProps, onChange: handleString, value: value || DEFAULT_STRING_VALUE }));
-        case 'select':
-            return (react_1.default.createElement(Select_1.Select, { ...defaultInputProps, onChange: (v) => onChange(field.name, v), value: (0, lodash_1.isNil)(value) ? field.multi ? [] : null : value, multi: field.multi, withTags: field.multi }, field.options.map((option, index) => (react_1.default.createElement(Select_1.Option, { key: `${field.name}-option-${index}`, value: option }, option)))));
+        case "select":
+            return (react_1.default.createElement(Select_1.Select, { ...defaultInputProps, onChange: (v) => onChange(field.name, v, "select"), value: (0, lodash_1.isNil)(value) ? (field.multi ? [] : null) : value, multi: field.multi, withTags: field.multi }, field.options.map((option, index) => (react_1.default.createElement(Select_1.Option, { key: `${field.name}-option-${index}`, value: option }, option)))));
+        case "media":
+            return (react_1.default.createElement(MediaInput, { ...defaultInputProps, id: "navigation-item-media", onChange: handleMedia, value: value || [], intlLabel: defaultInputProps.label, attribute: mediaAttribute }));
         default:
             toggleNotification({
-                type: 'warning',
-                message: (0, translations_1.getTrad)('notification.error.customField.type'),
+                type: "warning",
+                message: (0, translations_1.getTrad)("notification.error.customField.type"),
             });
             throw new Error(`Type of custom field is unsupported`);
     }

package/admin/src/components/AdditionalFieldInput/types.d.ts

@@ -3,7 +3,7 @@ import { NavigationItemCustomField } from "../../../../types";
 export type AdditionalFieldInputProps = {
     field: NavigationItemCustomField;
     isLoading: boolean;
-    onChange: (name: string, value: string) => void;
+    onChange: (name: string, value: string, fieldType: string) => void;
     value: string | boolean | string[] | null;
     disabled: boolean;
     error: MessageDescriptor | null;

package/admin/src/components/DragButton/index.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-declare const DragButton: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare const DragButton: React.ForwardRefExoticComponent<{
+    isActive?: boolean | undefined;
+} & React.RefAttributes<unknown>>;
 export default DragButton;
 //# sourceMappingURL=index.d.ts.map

package/admin/src/components/DragButton/index.js

@@ -16,10 +16,11 @@ const DragButtonWrapper = styled_components_1.default.span `
   width: ${DRAG_BUTTON_SIZE_IN_REM}rem;
   padding: ${({ theme }) => theme.spaces[2]};
 
-  background: ${({ theme }) => theme.colors.neutral0};
+  background: ${({ theme, isActive }) => isActive ? theme.colors.neutral150 : theme.colors.neutral0};
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
   border-radius: ${({ theme }) => theme.borderRadius};
   cursor: pointer;
+  transition: background-color 0.3s ease-in;
 
   svg {
     height: ${({ theme }) => theme.spaces[3]};

package/admin/src/components/Item/ItemCardHeader/index.d.ts

@@ -10,6 +10,7 @@ interface IProps {
     onItemEdit: VoidEffect;
     onItemRestore: VoidEffect;
     dragRef: React.MutableRefObject<HTMLHeadingElement>;
+    isSearchActive?: boolean;
 }
 declare const ItemCardHeader: React.FC<IProps>;
 export default ItemCardHeader;

package/admin/src/components/Item/ItemCardHeader/index.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const Flex_1 = require("@strapi/design-system/Flex");
 const Typography_1 = require("@strapi/design-system/Typography");
 const IconButton_1 = require("@strapi/design-system/IconButton");
@@ -15,9 +16,9 @@ const utils_1 = require("../../../utils");
 const icons_1 = require("./icons");
 const wrapperStyle = { zIndex: 2 };
 const pathWrapperStyle = { maxWidth: "425px" };
-const ItemCardHeader = ({ title, path, icon, removed, canUpdate, onItemRemove, onItemEdit, onItemRestore, dragRef }) => (react_1.default.createElement(Wrapper_1.default, null,
+const ItemCardHeader = ({ title, path, icon, removed, canUpdate, onItemRemove, onItemEdit, onItemRestore, dragRef, isSearchActive }) => (react_1.default.createElement(Wrapper_1.default, null,
     react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
-        canUpdate && (react_1.default.createElement(DragButton_1.default, { ref: dragRef })),
+        canUpdate && (react_1.default.createElement(DragButton_1.default, { ref: dragRef, isActive: isSearchActive })),
         react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold" }, title),
         react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold", textColor: 'neutral500', ellipsis: true, style: pathWrapperStyle }, path),
         react_1.default.createElement(Flex_1.Flex, null,
@@ -25,9 +26,13 @@ const ItemCardHeader = ({ title, path, icon, removed, canUpdate, onItemRemove, o
     react_1.default.createElement(Flex_1.Flex, { alignItems: "center", style: wrapperStyle },
         removed &&
             (react_1.default.createElement(ItemCardBadge_1.default, { borderColor: "danger200", backgroundColor: "danger100", textColor: "danger600" }, (0, utils_1.getMessage)("components.navigationItem.badge.removed"))),
-        react_1.default.createElement(IconButton_1.IconButton, { disabled: removed, onClick: onItemEdit, label: (0, utils_1.getMessage)(`components.navigationItem.action.${canUpdate ? 'edit' : 'view'}`, canUpdate ? 'Edit' : 'View'), icon: canUpdate ? icons_1.pencilIcon : icons_1.eyeIcon }),
+        react_1.default.createElement(IconButton, { isActive: isSearchActive, disabled: removed, onClick: onItemEdit, label: (0, utils_1.getMessage)(`components.navigationItem.action.${canUpdate ? 'edit' : 'view'}`, canUpdate ? 'Edit' : 'View'), icon: canUpdate ? icons_1.pencilIcon : icons_1.eyeIcon }),
         canUpdate && (react_1.default.createElement(react_1.default.Fragment, null, removed ?
-            react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRestore, label: (0, utils_1.getMessage)('components.navigationItem.action.restore', "Restore"), icon: icons_1.refreshIcon }) :
-            react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRemove, label: (0, utils_1.getMessage)('components.navigationItem.action.remove', "Remove"), icon: icons_1.trashIcon }))))));
+            react_1.default.createElement(IconButton, { isActive: isSearchActive, onClick: onItemRestore, label: (0, utils_1.getMessage)('components.navigationItem.action.restore', "Restore"), icon: icons_1.refreshIcon }) :
+            react_1.default.createElement(IconButton, { isActive: isSearchActive, onClick: onItemRemove, label: (0, utils_1.getMessage)('components.navigationItem.action.remove', "Remove"), icon: icons_1.trashIcon }))))));
+const IconButton = (0, styled_components_1.default)(IconButton_1.IconButton) `
+  transition: background-color 0.3s ease-in;
+  ${({ isActive, theme }) => isActive ? `background-color: ${theme.colors.neutral150} ;` : ''}
+`;
 exports.default = ItemCardHeader;
 //# sourceMappingURL=index.js.map

package/admin/src/components/Item/index.js

@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_dnd_1 = require("react-dnd");
 const lodash_1 = require("lodash");
+const styled_components_1 = require("styled-components");
 const Card_1 = require("@strapi/design-system/Card");
 const Divider_1 = require("@strapi/design-system/Divider");
 const Flex_1 = require("@strapi/design-system/Flex");
@@ -47,7 +48,7 @@ const utils_1 = require("../../utils");
 const CollapseButton_1 = __importDefault(require("../CollapseButton"));
 const Item = (props) => {
     const { item, isLast = false, level = 0, levelPath = '', allowedLevels, relatedRef, isParentAttachedToMenu, onItemLevelAdd, onItemRemove, onItemRestore, onItemEdit, onItemReOrder, onItemToggleCollapse, error, displayChildren, config = {}, permissions = {}, } = props;
-    const { viewId, title, type, path, removed, externalPath, menuAttached, collapsed, structureId, items = [], } = item;
+    const { viewId, title, type, path, removed, externalPath, menuAttached, collapsed, structureId, items = [], isSearchActive, } = item;
     const { contentTypes = [], contentTypesNameFields } = config;
     const isExternal = type === utils_1.navigationItemType.EXTERNAL;
     const isWrapper = type === utils_1.navigationItemType.WRAPPER;
@@ -110,11 +111,29 @@ const Item = (props) => {
     const generatePreviewUrl = entity => {
         const { isSingle } = contentType;
         const entityLocale = entity?.locale ? `?plugins[i18n][locale]=${entity?.locale}` : '';
-        return `/content-manager/${isSingle ? 'singleType' : 'collectionType'}/${entity?.__collectionUid}${!isSingle ? '/' + entity?.id : ''}${entityLocale}`;
+        return `/content-manager/${isSingle ? 'single-types' : 'collection-types'}/${entity?.__collectionUid}${!isSingle ? '/' + entity?.id : ''}${entityLocale}`;
     };
     const onNewItemClick = (0, react_1.useCallback)((event) => canUpdate && onItemLevelAdd(event, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, `${structureId}.${items.length}`), [viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, structureId, items, canUpdate]);
+    (0, react_1.useEffect)(() => {
+        if (isSearchActive) {
+            refs.dropRef.current?.scrollIntoView?.({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+            });
+        }
+    }, [isSearchActive, refs.dropRef.current]);
+    const theme = (0, styled_components_1.useTheme)();
     return (react_1.default.createElement(Wrapper_1.default, { level: level, isLast: isLast, style: { opacity: isDragging ? 0.2 : 1 }, ref: refs ? refs.dropRef : null },
-        react_1.default.createElement(Card_1.Card, { style: { width: "728px", zIndex: 1, position: "relative", overflow: 'hidden' } },
+        react_1.default.createElement(Card_1.Card, { style: {
+                width: "728px",
+                zIndex: 1,
+                position: "relative",
+                overflow: "hidden",
+                backgroundColor: isSearchActive ? theme.colors.neutral150 : undefined,
+                borderColor: isSearchActive ? theme.colors.neutral300 : undefined,
+                transition: "background-color 0.3s ease-in"
+            } },
             removed && (react_1.default.createElement(ItemCardRemovedOverlay_1.ItemCardRemovedOverlay, null)),
             react_1.default.createElement("div", { ref: refs.previewRef },
                 react_1.default.createElement(Card_1.CardBody, null,
@@ -122,7 +141,8 @@ const Item = (props) => {
                             ...item,
                             isMenuAllowedLevel,
                             isParentAttachedToMenu,
-                        }, levelPath, isParentAttachedToMenu), onItemRestore: () => onItemRestore(item), dragRef: refs.dragRef, removed: removed, canUpdate: canUpdate })),
+                            isSearchActive: false,
+                        }, levelPath, isParentAttachedToMenu), onItemRestore: () => onItemRestore(item), dragRef: refs.dragRef, removed: removed, canUpdate: canUpdate, isSearchActive: isSearchActive })),
                 react_1.default.createElement(Divider_1.Divider, null),
                 !isExternal && (react_1.default.createElement(Card_1.CardBody, { style: { padding: '8px' } },
                     react_1.default.createElement(Flex_1.Flex, { style: { width: '100%' }, direction: "row", alignItems: "center", justifyContent: "space-between" },

package/admin/src/components/NavigationItemList/index.js

@@ -12,7 +12,7 @@ const List = ({ allowedLevels, error, isParentAttachedToMenu = false, items, lev
     return (react_1.default.createElement(Item_1.default, { key: `list-item-${item.viewId || n}`, item: itemProps, isLast: n === items.length - 1, relatedRef: relatedRef, level: level, levelPath: levelPath, isParentAttachedToMenu: isParentAttachedToMenu, allowedLevels: allowedLevels, onItemRestore: onItemRestore, onItemLevelAdd: onItemLevelAdd, onItemRemove: onItemRemove, onItemEdit: onItemEdit, onItemReOrder: onItemReOrder, onItemToggleCollapse: onItemToggleCollapse, error: error, displayChildren: displayFlat, config: {
             contentTypes,
             contentTypesNameFields
-        }, permissions: permissions }));
+        }, permissions: permissions, isSearchActive: !!item.isSearchActive }));
 })));
 List.propTypes = {
     allowedLevels: prop_types_1.default.number,

package/admin/src/components/Search/index.d.ts

@@ -1,6 +1,12 @@
+import { Effect } from "../../../../types";
+interface Props {
+    value: string;
+    setValue: Effect<{
+        value: string;
+        index: number;
+    }>;
+    initialIndex?: number;
+}
+declare const Search: ({ value, setValue, initialIndex }: Props) => JSX.Element;
 export default Search;
-declare function Search({ value, setValue }: {
-    value: any;
-    setValue: any;
-}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/admin/src/components/Search/index.js

@@ -30,25 +30,64 @@ const react_1 = __importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const IconButton_1 = require("@strapi/design-system/IconButton");
 const Searchbar_1 = require("@strapi/design-system/Searchbar");
+const Typography_1 = require("@strapi/design-system/Typography");
 const Search_1 = __importDefault(require("@strapi/icons/Search"));
 const translations_1 = require("../../translations");
-const Search = ({ value, setValue }) => {
+const DEFAULT_INDEX = 0;
+const Search = ({ value, setValue, initialIndex = DEFAULT_INDEX }) => {
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
+    const [previousValue, setPreviousValue] = (0, react_1.useState)(value);
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(initialIndex);
     const [isOpen, setIsOpen] = (0, react_1.useState)(!!value);
     const wrapperRef = (0, react_1.useRef)(null);
     const { formatMessage } = (0, react_intl_1.useIntl)();
     (0, react_1.useEffect)(() => {
         if (isOpen) {
             setTimeout(() => {
-                wrapperRef.current.querySelector('input').focus();
+                wrapperRef.current?.querySelector("input")?.focus();
             }, 0);
         }
     }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        if (currentIndex && currentValue === previousValue) {
+            setValue({
+                value: currentValue,
+                index: currentIndex,
+            });
+        }
+    }, [currentIndex, currentValue, previousValue]);
+    (0, react_1.useEffect)(() => {
+        if (currentValue !== previousValue) {
+            setPreviousValue(currentValue);
+            setCurrentIndex(DEFAULT_INDEX);
+            setValue({
+                value: currentValue,
+                index: DEFAULT_INDEX,
+            });
+        }
+    }, [currentValue, previousValue]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.code.toLowerCase() === "enter") {
+            setCurrentIndex((current) => current + 1);
+        }
+    }, []);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setCurrentValue(e.target.value);
+    }, [setCurrentValue]);
+    const onClear = (0, react_1.useCallback)(() => {
+        setCurrentValue("");
+        setIsOpen(false);
+    }, [setCurrentValue, setIsOpen]);
     if (isOpen) {
         return (react_1.default.createElement("div", { ref: wrapperRef },
-            react_1.default.createElement(Searchbar_1.Searchbar, { name: "searchbar", onClear: () => { setValue(''); setIsOpen(false); }, value: value, size: "S", onChange: (e) => setValue(e.target.value), clearLabel: "Clearing the search", placeholder: formatMessage({
-                    id: (0, translations_1.getTradId)('pages.main.search.placeholder'),
-                    defaultMessage: 'Type to start searching...',
-                }) }, "Search for navigation items")));
+            react_1.default.createElement(Searchbar_1.Searchbar, { name: "searchbar", onClear: onClear, value: value, size: "S", onChange: onChange, clearLabel: "Clearing the search", placeholder: formatMessage({
+                    id: (0, translations_1.getTradId)("pages.main.search.placeholder"),
+                    defaultMessage: "Type to start searching...",
+                }), onKeyDown: onKeyDown }, "Search for navigation items"),
+            react_1.default.createElement(Typography_1.Typography, { variant: "pi", fontColor: "neutral150", style: { margin: "3px 0 0", display: "inline-block" } }, formatMessage({
+                id: (0, translations_1.getTradId)("pages.main.search.subLabel"),
+                defaultMessage: "press ENTER to highlight next item",
+            }))));
     }
     else {
         return (react_1.default.createElement(IconButton_1.IconButton, { icon: react_1.default.createElement(Search_1.default, null), onClick: () => setIsOpen(!isOpen) }));

package/admin/src/components/TextArrayInput/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Effect } from '../../../../types';
+import { GenericInputProps } from "@strapi/helper-plugin";
 interface IProps {
     onChange: Effect<string[]>;
     initialValue?: string[];
@@ -7,7 +8,7 @@ interface IProps {
     name?: string;
     label?: string;
     disabled?: boolean;
-    error?: string | string[];
+    error?: GenericInputProps["error"];
 }
 declare const TextArrayInput: React.FC<IProps>;
 export default TextArrayInput;

package/admin/src/pages/SettingsPage/common/const.d.ts

@@ -0,0 +1,2 @@
+export declare const customFieldsTypes: string[];
+//# sourceMappingURL=const.d.ts.map

package/admin/src/pages/SettingsPage/common/const.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customFieldsTypes = void 0;
+exports.customFieldsTypes = ["string", "boolean", "select", "media"];
+//# sourceMappingURL=const.js.map

package/admin/src/pages/SettingsPage/common/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./const";
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/SettingsPage/common/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./const"), exports);
+//# sourceMappingURL=index.js.map

package/admin/src/pages/SettingsPage/components/CustomFieldForm/index.js

@@ -37,21 +37,23 @@ const utils_1 = require("../../../../utils");
 const lodash_1 = require("lodash");
 const translations_1 = require("../../../../translations");
 const TextArrayInput_1 = __importDefault(require("../../../../components/TextArrayInput"));
+const common_1 = require("../../common");
 const tradPrefix = 'pages.settings.form.customFields.popup.';
-const customFieldsTypes = ["string", "boolean", "select"];
 const prepareSelectOptions = (options) => options.map((option, index) => ({
-    key: index,
+    key: `${option}-${index}`,
     metadatas: {
         intlLabel: {
             id: option,
             defaultMessage: option,
-        }
+        },
+        hidden: false,
+        disabled: false,
     },
     value: option,
     label: option,
 }));
 const CustomFieldForm = ({ isEditForm, customField, onSubmit, onClose, usedCustomFieldNames }) => {
-    const typeSelectOptions = prepareSelectOptions(customFieldsTypes);
+    const typeSelectOptions = prepareSelectOptions(common_1.customFieldsTypes);
     const initialValues = (0, react_1.useMemo)(() => {
         if ((0, lodash_1.isNil)(customField.type)) {
             return formDefinition.defaultValues;
@@ -85,18 +87,21 @@ const CustomFieldForm = ({ isEditForm, customField, onSubmit, onClose, usedCusto
         validationSchema: formDefinition.schemaFactory(usedCustomFieldNames),
         validateOnChange: false,
     });
-    const defaultProps = (0, react_1.useCallback)((fieldName) => ({
-        intlLabel: (0, translations_1.getTrad)(`${tradPrefix}${fieldName}.label`),
-        onChange: handleChange,
-        name: fieldName,
-        value: values[fieldName],
-        error: errors[fieldName],
-    }), [values, errors, handleChange]);
+    const defaultProps = (0, react_1.useCallback)((fieldName) => {
+        const error = mapError(errors[fieldName]);
+        return {
+            intlLabel: (0, translations_1.getTrad)(`${tradPrefix}${fieldName}.label`),
+            onChange: handleChange,
+            name: fieldName,
+            value: values[fieldName],
+            error,
+        };
+    }, [values, errors, handleChange]);
     return (react_1.default.createElement("form", null,
         react_1.default.createElement(ModalLayout_1.ModalBody, null,
             react_1.default.createElement(Grid_1.Grid, { gap: 5 },
                 react_1.default.createElement(Grid_1.GridItem, { key: "name", col: 12 },
-                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("name"), autoFocused: true, placeholder: (0, translations_1.getTrad)(`${tradPrefix}name.placeholder`), description: (0, translations_1.getTrad)(`${tradPrefix}name.description`), type: "text", disabled: isEditForm })),
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("name"), placeholder: (0, translations_1.getTrad)(`${tradPrefix}name.placeholder`), description: (0, translations_1.getTrad)(`${tradPrefix}name.description`), type: "text", disabled: isEditForm })),
                 react_1.default.createElement(Grid_1.GridItem, { key: "label", col: 12 },
                     react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("label"), placeholder: (0, translations_1.getTrad)(`${tradPrefix}label.placeholder`), description: (0, translations_1.getTrad)(`${tradPrefix}label.description`), type: "text" })),
                 react_1.default.createElement(Grid_1.GridItem, { key: "type", col: 12 },
@@ -111,4 +116,14 @@ const CustomFieldForm = ({ isEditForm, customField, onSubmit, onClose, usedCusto
         react_1.default.createElement(ModalLayout_1.ModalFooter, { startActions: react_1.default.createElement(Button_1.Button, { onClick: onClose, variant: "tertiary" }, (0, utils_1.getMessage)('popup.item.form.button.cancel')), endActions: react_1.default.createElement(Button_1.Button, { onClick: handleSubmit, disabled: !(0, lodash_1.isEmpty)(errors) || isSubmitting }, (0, utils_1.getMessage)(`popup.item.form.button.save`)) })));
 };
 exports.default = CustomFieldForm;
+const mapError = (err) => {
+    if (typeof err === "string") {
+        return err;
+    }
+    if (typeof err === "object" &&
+        err &&
+        (err.id || err.description || err.defaultMessage)) {
+        return err;
+    }
+};
 //# sourceMappingURL=index.js.map

package/admin/src/pages/SettingsPage/components/CustomFieldTable/index.js

@@ -61,7 +61,7 @@ const CustomFieldTable = ({ data, onOpenModal, onRemoveCustomField, onToggleCust
                 type: 'warning',
                 message: {
                     id: (0, translations_1.getTradId)(`${tradPrefix}confirmation.error`),
-                    default: 'Something went wrong',
+                    defaultMessage: 'Something went wrong',
                 }
             });
         }

package/admin/src/pages/SettingsPage/components/DisableI18nModal/index.d.ts

@@ -1,5 +1,4 @@
-import React, { VFC } from "react";
-import { Form } from "@strapi/helper-plugin";
+import React, { FC } from "react";
 interface Form {
     pruneNavigations: boolean;
     enabled: boolean;
@@ -14,7 +13,7 @@ interface Props {
     onSubmit: SubmitEffect;
     onCancel: CancelEffect;
 }
-export declare const DisableI18nModal: VFC<Props>;
+export declare const DisableI18nModal: FC<Props>;
 export declare const useDisableI18nModal: (onSubmit: SubmitEffect) => {
     setDisableI18nModalOpened: React.Dispatch<React.SetStateAction<boolean>>;
     setI18nModalOnCancel: React.Dispatch<React.SetStateAction<() => void>>;

package/admin/src/pages/SettingsPage/components/DisableI18nModal/index.js

@@ -31,7 +31,6 @@ const react_1 = __importStar(require("react"));
 const ConfirmationDialog_1 = __importDefault(require("../../../../components/ConfirmationDialog"));
 const utils_1 = require("../../../../utils");
 const formik_1 = require("formik");
-const helper_plugin_1 = require("@strapi/helper-plugin");
 const Stack_1 = require("@strapi/design-system/Stack");
 const Box_1 = require("@strapi/design-system/Box");
 const Grid_1 = require("@strapi/design-system/Grid");
@@ -45,25 +44,24 @@ const DisableI18nModal = ({ onSubmit, onCancel }) => {
         onSubmit(state);
     }, [onSubmit, state]);
     return (react_1.default.createElement(ConfirmationDialog_1.default, { isVisible: true, header: (0, utils_1.getMessage)("pages.settings.actions.disableI18n.confirmation.header"), labelConfirm: (0, utils_1.getMessage)("pages.settings.actions.disableI18n.confirmation.confirm"), iconConfirm: refreshIcon, mainIcon: refreshIcon, onConfirm: onConfirm, onCancel: onCancel },
-        react_1.default.createElement(formik_1.Formik, { initialValues: INITIAL_VALUES, onSubmit: onConfirm }, ({ handleSubmit, setFieldValue, values }) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(formik_1.Formik, { initialValues: INITIAL_VALUES, onSubmit: onConfirm }, ({ setFieldValue, values }) => (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Grid_1.Grid, { gap: 4 },
                 react_1.default.createElement(Grid_1.GridItem, { col: 12 },
                     react_1.default.createElement(Box_1.Box, { padding: 2 }, (0, utils_1.getMessage)("pages.settings.actions.disableI18n.confirmation.description.line1")),
                     react_1.default.createElement(Box_1.Box, { padding: 2 }, (0, utils_1.getMessage)("pages.settings.actions.disableI18n.confirmation.description.line2")),
                     react_1.default.createElement(Box_1.Box, { padding: 2 },
                         react_1.default.createElement(Typography_1.Typography, { fontWeight: "bold" }, (0, utils_1.getMessage)("pages.settings.actions.disableI18n.confirmation.description.line3"))))),
-            react_1.default.createElement(helper_plugin_1.Form, { noValidate: true, onSubmit: handleSubmit },
-                react_1.default.createElement(Stack_1.Stack, { spacing: 4 },
-                    react_1.default.createElement(Grid_1.Grid, { gap: 4 },
-                        react_1.default.createElement(Grid_1.GridItem, { col: 12 },
-                            react_1.default.createElement(Box_1.Box, { padding: 2 },
-                                react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "audienceFieldChecked", label: (0, utils_1.getMessage)("pages.settings.actions.disableI18n.prune.label"), hint: "", checked: values.pruneNavigations, onChange: ({ target: { checked }, }) => {
-                                        setFieldValue("pruneNavigations", checked, false);
-                                        setState((state) => ({
-                                            ...state,
-                                            pruneNavigations: checked,
-                                        }));
-                                    }, onLabel: (0, utils_1.getMessage)("pages.settings.actions.disableI18n.prune.on"), offLabel: (0, utils_1.getMessage)("pages.settings.actions.disableI18n.prune.off") })))))))))));
+            react_1.default.createElement(Stack_1.Stack, { spacing: 4 },
+                react_1.default.createElement(Grid_1.Grid, { gap: 4 },
+                    react_1.default.createElement(Grid_1.GridItem, { col: 12 },
+                        react_1.default.createElement(Box_1.Box, { padding: 2 },
+                            react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "audienceFieldChecked", label: (0, utils_1.getMessage)("pages.settings.actions.disableI18n.prune.label"), hint: "", checked: values.pruneNavigations, onChange: ({ target: { checked }, }) => {
+                                    setFieldValue("pruneNavigations", checked, false);
+                                    setState((state) => ({
+                                        ...state,
+                                        pruneNavigations: checked,
+                                    }));
+                                }, onLabel: (0, utils_1.getMessage)("pages.settings.actions.disableI18n.prune.on"), offLabel: (0, utils_1.getMessage)("pages.settings.actions.disableI18n.prune.off") }))))))))));
 };
 exports.DisableI18nModal = DisableI18nModal;
 const useDisableI18nModal = (onSubmit) => {

package/admin/src/pages/SettingsPage/index.js

@@ -67,9 +67,10 @@ const BOX_DEFAULT_PROPS = {
     shadow: "filterShadow",
     padding: 6,
 };
+const noopFallback = () => { };
 const SettingsPage = () => {
-    const { lockApp, unlockApp } = (0, helper_plugin_1.useOverlayBlocker)();
-    const { lockAppWithAutoreload, unlockAppWithAutoreload } = (0, helper_plugin_1.useAutoReloadOverlayBlocker)();
+    const { lockApp = noopFallback, unlockApp = noopFallback } = (0, helper_plugin_1.useOverlayBlocker)();
+    const { lockAppWithAutoreload = noopFallback, unlockAppWithAutoreload = noopFallback } = (0, helper_plugin_1.useAutoReloadOverlayBlocker)();
     const [restartStatus, setRestartStatus] = (0, react_1.useState)(RESTART_NOT_REQUIRED);
     const [pruneObsoleteI18nNavigations, setPruneObsoleteI18nNavigations] = (0, react_1.useState)(false);
     const [isCustomFieldModalOpen, setIsCustomFieldModalOpen] = (0, react_1.useState)(false);

package/admin/src/pages/SettingsPage/utils/form.js

@@ -4,11 +4,12 @@ exports.defaultValues = exports.schemaFactory = void 0;
 const yup_1 = require("yup");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const translations_1 = require("../../../translations");
+const common_1 = require("../common");
 const schemaFactory = (usedCustomFieldNames) => {
     return (0, yup_1.object)({
         name: (0, yup_1.string)().matches(/^\S+$/, "Invalid name string. Name cannot contain spaces").required(helper_plugin_1.translatedErrors.required).notOneOf(usedCustomFieldNames, helper_plugin_1.translatedErrors.unique),
         label: (0, yup_1.string)().required(helper_plugin_1.translatedErrors.required),
-        type: (0, yup_1.mixed)().required(helper_plugin_1.translatedErrors.required).oneOf(['string', 'boolean', 'select'], (0, translations_1.getTradId)("notification.error.customField.type")),
+        type: (0, yup_1.mixed)().required(helper_plugin_1.translatedErrors.required).oneOf(common_1.customFieldsTypes, (0, translations_1.getTradId)("notification.error.customField.type")),
         required: (0, yup_1.bool)().required(helper_plugin_1.translatedErrors.required),
         multi: (0, yup_1.mixed)().when('type', {
             is: (val) => val === 'select',