strapi-plugin-navigation 2.1.0-beta.2 → 2.2.1

package/README.md

@@ -102,10 +102,10 @@ yarn develop --watch-admin
 
 The **UI Navigation** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
-You can manage your multiple navigation containers by going to the **Navigation** section of the **Content Manager**.
+You can manage your multiple navigation containers by going to the **Navigation** manage view by clicking "Manage" button.
 
 <div style="margin: 20px 0" align="center">
-  <img style="width: 100%; height: auto;" src="public/assets/content-manager.png" alt="Strapi In-App Marketplace" />
+  <img style="width: 100%; height: auto;" src="public/assets/manager-view.png" alt="Navigation Manager View" />
 </div>
 
 As a next step you must configure your the plugin by the way you want to. See [**Configuration**](#🔧-configuration) section.
@@ -118,7 +118,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.1.11 (recently tested)
+- Strapi v4.2.0 (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).
@@ -155,25 +155,38 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
         navigation: {
             enabled: true,
             config: {
-                additionalFields: ['audience'],
+                additionalFields: ['audience', { name: 'my_custom_field', type: 'boolean', label: 'My custom field' }],
                 contentTypes: ['api::page.page'],
                 contentTypesNameFields: {
                     'api::page.page': ['title']
                 },
                 allowedLevels: 2,
                 gql: {...},
+                slugify: {
+                  customReplacements: [
+                    ["🤔", "thinking"],
+                  ],
+                }
             }
         }
     });
 ```
 
 ### Properties
-- `additionalFields` - Additional fields: 'audience', more in the future
+- `additionalFields` - Additional fields for navigation items. More **[ here ](#additional-fields)**
 - `allowedLevels` - Maximum level for which you're able to mark item as "Menu attached"
 - `contentTypes` - UIDs of related content types
 - `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 - `i18nEnabled` - should you want to manage multi-locale content via navigation set this value `Enabled`. More **[ here ](#i18n-internationalization)**
+- `slugify` - allows to extend configuration of our "slugging" solution of choice. To learn more visit the [documentation](https://github.com/sindresorhus/slugify#api). It can be left unset since it's optional. **This option can only be handled by configuration in config file**.
+
+### Properties
+
+### 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.
 
 ## 🔧 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:
@@ -579,11 +592,8 @@ query {
         "title": "Another page",
         "path": "/another",
         "related": {
-          "id": 2,
-          "attributes": {
-            "__typename": "Page",
-            "Title": "dfdfdf"
-          }
+          "__typename": "Page",
+          "Title": "Eg. Page title"
         },
         "items": []
       }

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,71 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../../../types");
+const ToggleInput_1 = require("@strapi/design-system/ToggleInput");
+const TextInput_1 = require("@strapi/design-system/TextInput");
+const Select_1 = require("@strapi/design-system/Select");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const translations_1 = require("../../translations");
+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]);
+};
+const AdditionalFieldInput = ({ field, isLoading, onChange, value, error }) => {
+    const toggleNotification = (0, helper_plugin_1.useNotification)();
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const defaultInputProps = (0, react_1.useMemo)(() => ({
+        id: field.name,
+        name: field.name,
+        label: field.label,
+        disabled: isLoading,
+        error: error && formatMessage(error),
+    }), [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]);
+    switch (field.type) {
+        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':
+            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)))));
+        default:
+            toggleNotification({
+                type: 'warning',
+                message: (0, translations_1.getTrad)('notification.error.customField.type'),
+            });
+            throw new Error(`Type of custom field is unsupported`);
+    }
+};
+exports.default = AdditionalFieldInput;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,14 @@
+import { MessageDescriptor } from "react-intl";
+import { NavigationItemCustomField } from "../../../../types";
+export declare type AdditionalFieldInputProps = {
+    field: NavigationItemCustomField;
+    isLoading: boolean;
+    onChange: (name: string, value: string) => void;
+    value: string | boolean | string[] | null;
+    error: MessageDescriptor | null;
+};
+export declare type TargetProp = "value" | "checked";
+export declare type Input = {
+    prop: TargetProp;
+} & Pick<AdditionalFieldInputProps, "onChange" | "field">;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const DragButton: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default DragButton;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("@strapi/icons");
+const DRAG_BUTTON_SIZE_IN_REM = 2;
+const DragButtonWrapper = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: ${DRAG_BUTTON_SIZE_IN_REM}rem;
+  width: ${DRAG_BUTTON_SIZE_IN_REM}rem;
+  padding: ${({ theme }) => theme.spaces[2]};
+
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  cursor: pointer;
+
+  svg {
+    height: ${({ theme }) => theme.spaces[3]};
+    width: ${({ theme }) => theme.spaces[3]};
+
+    > g,
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+  &:hover {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme }) => theme.colors.neutral600};
+      }
+    }
+  }
+  &:active {
+    svg {
+      > g,
+      path {
+        fill: ${({ theme }) => theme.colors.neutral400};
+      }
+    }
+  }
+  &[aria-disabled='true'] {
+    background-color: ${({ theme }) => theme.colors.neutral150};
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral600};
+      }
+    }
+  }
+`;
+const DragButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(DragButtonWrapper, { ...props, ref: ref },
+    react_1.default.createElement(icons_1.Drag, null))));
+exports.default = DragButton;
+//# sourceMappingURL=index.js.map

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

@@ -1,3 +1,3 @@
-export default CardItemTitle;
 declare const CardItemTitle: any;
+export default CardItemTitle;
 //# sourceMappingURL=Wrapper.d.ts.map

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const pencilIcon: JSX.Element;
+export declare const refreshIcon: JSX.Element;
+export declare const trashIcon: JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trashIcon = exports.refreshIcon = exports.pencilIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const icons_1 = require("@strapi/icons");
+exports.pencilIcon = react_1.default.createElement(icons_1.Pencil, null);
+exports.refreshIcon = react_1.default.createElement(icons_1.Refresh, null);
+exports.trashIcon = react_1.default.createElement(icons_1.Trash, null);
+//# sourceMappingURL=icons.js.map

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

@@ -1,12 +1,15 @@
+import React from 'react';
+import { ToBeFixed, VoidEffect } from '../../../../../types';
+interface IProps {
+    title: string;
+    path: string;
+    icon: ToBeFixed;
+    removed: boolean;
+    onItemRemove: VoidEffect;
+    onItemEdit: VoidEffect;
+    onItemRestore: VoidEffect;
+    dragRef: React.MutableRefObject<HTMLHeadingElement>;
+}
+declare const ItemCardHeader: React.FC<IProps>;
 export default ItemCardHeader;
-declare function ItemCardHeader({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }: {
-    title: any;
-    path: any;
-    icon: any;
-    removed: any;
-    onItemRemove: any;
-    onItemEdit: any;
-    onItemRestore: any;
-    dragRef: any;
-}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -4,49 +4,28 @@ 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 IconButton_1 = require("@strapi/design-system/IconButton");
 const Typography_1 = require("@strapi/design-system/Typography");
+const IconButton_1 = require("@strapi/design-system/IconButton");
 const Icon_1 = require("@strapi/design-system/Icon");
-const icons_1 = require("@strapi/icons/");
+const DragButton_1 = __importDefault(require("../../DragButton"));
 const Wrapper_1 = __importDefault(require("./Wrapper"));
 const ItemCardBadge_1 = __importDefault(require("../ItemCardBadge"));
 const utils_1 = require("../../../utils");
-const IconWrapper = styled_components_1.default.div `
-display: flex;
-align-items: center;
-justify-content: center;
-height: ${32 / 16}rem;
-width: ${32 / 16}rem;
-
-cursor: move;
-  padding: ${({ theme }) => theme.spaces[2]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-  border: 1px solid ${({ theme }) => theme.colors.neutral200};
-	
-svg {
-	> g,
-	path {
-		fill: ${({ theme }) => theme.colors.neutral500};
-	}
-}
-`;
-const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => {
-    return (react_1.default.createElement(Wrapper_1.default, null,
-        react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
-            react_1.default.createElement(IconButton_1.IconButton, { ref: dragRef, label: "Drag", icon: react_1.default.createElement(icons_1.Drag, null) }),
-            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' }, path),
-            react_1.default.createElement(Icon_1.Icon, { as: icon })),
-        react_1.default.createElement(Flex_1.Flex, { alignItems: "center", style: { zIndex: 2 } },
-            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: "Edit", icon: react_1.default.createElement(icons_1.Pencil, null) }),
-            removed ?
-                react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRestore, label: "Restore", icon: react_1.default.createElement(icons_1.Refresh, null) }) :
-                react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRemove, label: "Remove", icon: react_1.default.createElement(icons_1.Trash, null) }))));
-};
+const icons_1 = require("./icons");
+const wrapperStyle = { zIndex: 2 };
+const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => (react_1.default.createElement(Wrapper_1.default, null,
+    react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
+        react_1.default.createElement(DragButton_1.default, { ref: dragRef }),
+        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' }, path),
+        react_1.default.createElement(Icon_1.Icon, { as: icon })),
+    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: "Edit", icon: icons_1.pencilIcon }),
+        removed ?
+            react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRestore, label: "Restore", icon: icons_1.refreshIcon }) :
+            react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRemove, label: "Remove", icon: icons_1.trashIcon }))));
 exports.default = ItemCardHeader;
 //# sourceMappingURL=index.js.map

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

@@ -37,7 +37,6 @@ const Link_1 = require("@strapi/design-system/Link");
 const TextButton_1 = require("@strapi/design-system/TextButton");
 const Typography_1 = require("@strapi/design-system/Typography");
 const icons_1 = require("@strapi/icons");
-const enums_1 = require("../../pages/View/utils/enums");
 const ItemCardHeader_1 = __importDefault(require("./ItemCardHeader"));
 const NavigationItemList_1 = __importDefault(require("../NavigationItemList"));
 const Wrapper_1 = __importDefault(require("./Wrapper"));
@@ -48,10 +47,10 @@ 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 = {}, } = props;
-    const { viewId, title, type, path, removed, externalPath, menuAttached, collapsed, } = item;
-    const { contentTypes, contentTypesNameFields } = config;
-    const isExternal = type === enums_1.navigationItemType.EXTERNAL;
-    const isWrapper = type === enums_1.navigationItemType.WRAPPER;
+    const { viewId, title, type, path, removed, externalPath, menuAttached, collapsed, structureId, items = [], } = item;
+    const { contentTypes = [], contentTypesNameFields } = config;
+    const isExternal = type === utils_1.navigationItemType.EXTERNAL;
+    const isWrapper = type === utils_1.navigationItemType.WRAPPER;
     const isHandledByPublishFlow = contentTypes.find(_ => _.uid === relatedRef?.__collectionUid)?.draftAndPublish;
     const isPublished = isHandledByPublishFlow && relatedRef.publishedAt;
     const isNextMenuAllowedLevel = (0, lodash_1.isNumber)(allowedLevels) ? level < (allowedLevels - 1) : true;
@@ -111,6 +110,7 @@ const Item = (props) => {
         const { isSingle } = contentType;
         return `/content-manager/${isSingle ? 'singleType' : 'collectionType'}/${entity?.__collectionUid}${!isSingle ? '/' + entity?.id : ''}`;
     };
+    const onNewItemClick = (0, react_1.useCallback)((event) => onItemLevelAdd(event, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, `${structureId}.${items.length}`), [viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, structureId, items]);
     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' } },
             removed && (react_1.default.createElement(ItemCardRemovedOverlay_1.ItemCardRemovedOverlay, null)),
@@ -126,7 +126,7 @@ const Item = (props) => {
                     react_1.default.createElement(Flex_1.Flex, { style: { width: '100%' }, direction: "row", alignItems: "center", justifyContent: "space-between" },
                         react_1.default.createElement(Flex_1.Flex, null,
                             !(0, lodash_1.isEmpty)(item.items) && react_1.default.createElement(CollapseButton_1.default, { toggle: () => onItemToggleCollapse(item), collapsed: collapsed, itemsCount: item.items.length }),
-                            react_1.default.createElement(TextButton_1.TextButton, { disabled: removed, startIcon: react_1.default.createElement(icons_1.Plus, null), onClick: (e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached) },
+                            react_1.default.createElement(TextButton_1.TextButton, { disabled: removed, startIcon: react_1.default.createElement(icons_1.Plus, null), onClick: onNewItemClick },
                                 react_1.default.createElement(Typography_1.Typography, { variant: "pi", fontWeight: "bold", textColor: removed ? "neutral600" : "primary600" }, (0, utils_1.getMessage)("components.navigationItem.action.newItem")))),
                         relatedItemLabel && (react_1.default.createElement(Flex_1.Flex, { justifyContent: 'center', alignItems: 'center' },
                             isHandledByPublishFlow && (react_1.default.createElement(ItemCardBadge_1.default, { borderColor: `${relatedBadgeColor}200`, backgroundColor: `${relatedBadgeColor}100`, textColor: `${relatedBadgeColor}600`, className: "action", small: true }, (0, utils_1.getMessage)({ id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}` }))),

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

@@ -1,3 +1,3 @@
-declare var _default: any;
+declare const _default: any;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Effect } from '../../../../types';
+interface IProps {
+    onChange: Effect<string[]>;
+    initialValue?: string[];
+    id?: string;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    error?: string | string[];
+}
+declare const TextArrayInput: React.FC<IProps>;
+export default TextArrayInput;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,45 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const TextInput_1 = require("@strapi/design-system/TextInput");
+const lodash_1 = require("lodash");
+const TextArrayInput = ({ onChange, initialValue, ...props }) => {
+    const [value, setValue] = (0, react_1.useState)((0, lodash_1.isArray)(initialValue)
+        ? initialValue.reduce((acc, cur) => `${acc}${cur}; `, "")
+        : "");
+    const handleOnChange = ({ target: { value } }) => {
+        const newValue = value;
+        const valuesArray = newValue
+            .split(';')
+            .map(v => v.trim())
+            .filter(v => !!v.length);
+        setValue(value);
+        onChange(valuesArray);
+    };
+    return (react_1.default.createElement(TextInput_1.TextInput, { ...props, onChange: handleOnChange, value: value }));
+};
+exports.default = TextArrayInput;
+//# sourceMappingURL=index.js.map

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

@@ -1,6 +1,3 @@
+declare const useAllContentTypes: () => Pick<any, "data" | "isLoading" | "error">;
 export default useAllContentTypes;
-declare function useAllContentTypes(): {
-    data: any;
-    isLoading: any;
-};
 //# sourceMappingURL=useAllContentTypes.d.ts.map

package/admin/src/hooks/useAllContentTypes.js

@@ -1,12 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_query_1 = require("react-query");
-const helper_plugin_1 = require("@strapi/helper-plugin");
-const api_1 = require("../utils/api");
-const useAllContentTypes = () => {
-    const toggleNotification = (0, helper_plugin_1.useNotification)();
-    const { isLoading, data } = (0, react_query_1.useQuery)('contentTypes', () => (0, api_1.fetchAllContentTypes)(toggleNotification));
-    return { data, isLoading, };
-};
+const lodash_1 = require("lodash");
+const utils_1 = require("../utils");
+const useAllContentTypes = () => (0, lodash_1.pick)((0, react_query_1.useQuery)('contentTypes', () => (0, utils_1.fetchAllContentTypes)()), ["data", "isLoading", "error"]);
 exports.default = useAllContentTypes;
 //# sourceMappingURL=useAllContentTypes.js.map

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { ConfirmEffect } from "../pages/View/components/I18nCopyNavigationItems";
+export declare const useI18nCopyNavigationItemsModal: (onConfirm: ConfirmEffect) => {
+    setI18nCopyModalOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    setI18nCopySourceLocale: React.Dispatch<React.SetStateAction<string | undefined>>;
+    i18nCopyItemsModal: JSX.Element | null;
+    i18nCopySourceLocale: string | undefined;
+};
+//# sourceMappingURL=useI18nCopyNavigationItemsModal.d.ts.map

package/admin/src/hooks/useI18nCopyNavigationItemsModal.js

@@ -0,0 +1,51 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useI18nCopyNavigationItemsModal = void 0;
+const react_1 = __importStar(require("react"));
+const I18nCopyNavigationItems_1 = require("../pages/View/components/I18nCopyNavigationItems");
+const useI18nCopyNavigationItemsModal = (onConfirm) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [sourceLocale, setSourceLocale] = (0, react_1.useState)(undefined);
+    const onCancel = (0, react_1.useCallback)(() => {
+        setIsOpened(false);
+    }, [setIsOpened]);
+    const onConfirmWithModalClose = (0, react_1.useCallback)(() => {
+        if (!sourceLocale) {
+            return;
+        }
+        onConfirm(sourceLocale);
+        setIsOpened(false);
+    }, [onConfirm, sourceLocale]);
+    const modal = (0, react_1.useMemo)(() => isOpened ? (react_1.default.createElement(I18nCopyNavigationItems_1.I18nCopyNavigationItemsModal, { onConfirm: onConfirmWithModalClose, onCancel: onCancel })) : null, [isOpened, onConfirmWithModalClose, onCancel]);
+    return (0, react_1.useMemo)(() => ({
+        setI18nCopyModalOpened: setIsOpened,
+        setI18nCopySourceLocale: setSourceLocale,
+        i18nCopyItemsModal: modal,
+        i18nCopySourceLocale: sourceLocale,
+    }), [setSourceLocale, setIsOpened, modal, sourceLocale]);
+};
+exports.useI18nCopyNavigationItemsModal = useI18nCopyNavigationItemsModal;
+//# sourceMappingURL=useI18nCopyNavigationItemsModal.js.map

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

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

package/admin/src/hooks/useNavigationConfig.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_query_1 = require("react-query");
 const helper_plugin_1 = require("@strapi/helper-plugin");
-const api_1 = require("../utils/api");
+const utils_1 = require("../utils");
 const translations_1 = require("../translations");
 const useNavigationConfig = () => {
     const queryClient = (0, react_query_1.useQueryClient)();
     const toggleNotification = (0, helper_plugin_1.useNotification)();
-    const { isLoading, data, err } = (0, react_query_1.useQuery)('navigationConfig', () => (0, api_1.fetchNavigationConfig)(toggleNotification));
+    const { isLoading, data, error } = (0, react_query_1.useQuery)('navigationConfig', () => (0, utils_1.fetchNavigationConfig)(toggleNotification));
     const handleError = (type) => {
         toggleNotification({
             type: 'warning',
@@ -23,7 +23,7 @@ const useNavigationConfig = () => {
     };
     const submitMutation = async (...args) => {
         try {
-            await (0, api_1.updateNavigationConfig)(...args);
+            await (0, utils_1.updateNavigationConfig)(...args);
             await handleSuccess('submit');
         }
         catch (e) {
@@ -32,7 +32,7 @@ const useNavigationConfig = () => {
     };
     const restoreMutation = async (...args) => {
         try {
-            await (0, api_1.restoreNavigationConfig)(...args);
+            await (0, utils_1.restoreNavigationConfig)(...args);
             await handleSuccess('restore');
         }
         catch (e) {
@@ -41,14 +41,14 @@ const useNavigationConfig = () => {
     };
     const restartMutation = async (...args) => {
         try {
-            await (0, api_1.restartStrapi)(...args);
+            await (0, utils_1.restartStrapi)(...args);
             await handleSuccess('restart');
         }
         catch (e) {
             handleError('restart');
         }
     };
-    return { data, isLoading, err, submitMutation, restoreMutation, restartMutation };
+    return { data, isLoading, error, submitMutation, restoreMutation, restartMutation };
 };
 exports.default = useNavigationConfig;
 //# sourceMappingURL=useNavigationConfig.js.map

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useNavigationManager: () => {
+    navigationManagerModal: JSX.Element | null;
+    openNavigationManagerModal: () => void;
+    closeNavigationManagerModal: () => void;
+};
+//# sourceMappingURL=useNavigationManager.d.ts.map