strapi-plugin-navigation 2.3.1 → 2.4.0

package/README.md

@@ -51,10 +51,11 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
    - [REST API](#rest-api) 
    - [GraphQL API](#graphql-api)
 10. [🔌 Extensions](#-extensions)
-11. [🧩 Examples](#-examples)
-12. [💬 FAQ](#-faq)
-13. [🤝 Contributing](#-contributing)
-14. [👨‍💻 Community support](#-community-support)
+11. [🌿 Model lifecycle hooks](#model-life-cycle-hooks)
+12. [🧩 Examples](#-examples)
+13. [💬 FAQ](#-faq)
+14. [🤝 Contributing](#-contributing)
+15. [👨‍💻 Community support](#-community-support)
 
 ## ✨ Features
 
@@ -122,7 +123,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.15.x (recently tested)
+- Strapi v4.20.x (recently tested)
 - Strapi v4.x
 
 > This plugin is designed for **Strapi v4** and is not working with v3.x. To get version for **Strapi v3** install version [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/strapi-v3).
@@ -192,7 +193,7 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
 ### Additional Fields
 It is advised to configure additional fields through the plugin's Settings Page. There you can find the table of custom fields and toggle input for the audience field. When enabled, the audience field can be customized through the content manager. Custom fields can be added, edited, toggled, and removed with the use of the table provided on the Settings Page. When removing custom fields be advised that their values in navigation items will be lost. Disabling the custom fields will not affect the data and can be done with no consequence of loosing information. 
 
-Creating configuration for additional fields with the `config.js` file should be done with caution. Config object contains the `additionalFields` property of type `Array<CustomField | 'audience'>`, where CustomField is of type `{type: 'string' | 'boolean', name: string, label: string}`. When creating custom fields be advised that the `name` property has to be unique. When editing a custom field it is advised not to edit its `name` and `type` properties. After config has been restored the custom fields that are not present in `config.js` file will be deleted and their values in navigation items will be lost.
+Creating configuration for additional fields with the `config.js` file should be done with caution. Config object contains the `additionalFields` property of type `Array<CustomField | 'audience'>`, where CustomField is of type `{ type: 'string' | 'boolean' | { "name": string, "url": string, "mime": string, "width": number, "height": number, "previewUrl": string }, name: string, label: string }`. When creating custom fields be advised that the `name` property has to be unique. When editing a custom field it is advised not to edit its `name` and `type` properties. After config has been restored the custom fields that are not present in `config.js` file will be deleted and their values in navigation items will be lost.
 
 ## 🔧 GQL Configuration
 Using navigation with GraphQL requires both plugins to be installed and working. You can find installation guide for GraphQL plugin **[here](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#graphql)**.  To properly configure GQL to work with navigation you should provide `gql` prop. This should contain union types that will be used to define GQL response format for your data while fetching:
@@ -733,6 +734,46 @@ module.exports = {
 };
 ```
 
+## Model lifecycle hooks
+
+Navigation plugin allows to register lifecycle hooks for `Navigation` and `NavigationItem` content types.
+
+You can read more about lifecycle hooks [here](https://docs.strapi.io/dev-docs/backend-customization/models#lifecycle-hooks). (You can set a listener for all of the hooks).
+
+Lifecycle hooks can be register either in `register()` or `bootstrap()` methods of your server. You can register more than one listener for a specified lifecycle hook. For example: you want to do three things on navigation item creation and do not want to handle all of these actions in one big function. You can split logic in as many listeners as you want.
+
+Listeners can by sync and `async`.
+
+>Be aware that lifecycle hooks registered in `register()` may be fired by plugin's bootstrapping. If you want listen to events triggered after server's startup use `bootstrap()`.
+
+Example:
+
+```ts
+  const navigationCommonService = strapi
+    .plugin("navigation")
+    .service("common");
+
+  navigationCommonService.registerLifecycleHook({
+    callback: async ({ action, result }) => {
+      const saveResult = await logIntoSystem(action, result);
+
+      console.log(saveResult);
+    },
+    contentTypeName: "navigation",
+    hookName: "afterCreate",
+  });
+
+  navigationCommonService.registerLifecycleHook({
+    callback: async ({ action, result }) => {
+      const saveResult = await logIntoSystem(action, result);
+
+      console.log(saveResult);
+    },
+    contentTypeName: "navigation-item",
+    hookName: "afterCreate",
+  });
+```
+
 ## 🧩 Examples
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-navigation) repository.

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/hooks/useAllContentTypes.d.ts

@@ -1,3 +1,3 @@
-declare const useAllContentTypes: () => Pick<any, "data" | "isLoading" | "error">;
+declare const useAllContentTypes: () => Pick<import("react-query").UseQueryResult<any, unknown>, "data" | "isLoading" | "error">;
 export default useAllContentTypes;
 //# sourceMappingURL=useAllContentTypes.d.ts.map

package/admin/src/hooks/useNavigationConfig.d.ts

@@ -1,8 +1,8 @@
 export default useNavigationConfig;
 declare function useNavigationConfig(): {
-    data: any;
-    isLoading: any;
-    error: any;
+    data: unknown;
+    isLoading: boolean;
+    error: unknown;
     submitMutation: (...args: any[]) => Promise<void>;
     restoreMutation: (...args: any[]) => Promise<void>;
     restartMutation: (...args: any[]) => Promise<void>;

package/admin/src/index.d.ts

@@ -4,7 +4,9 @@ declare namespace _default {
     function registerTrads({ locales }: {
         locales?: any[] | undefined;
     }): {
-        data: any;
+        data: {
+            [x: string]: string;
+        };
         locale: any;
     }[];
 }

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>>;