strapi-plugin-navigation 2.0.13 → 2.1.0-beta.1

package/README.md

@@ -44,12 +44,13 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
    - [Settings page](#in-v203-and-newer)
    - [Plugin file](#in-v202-and-older--default-configuration-state-for-v203-and-newer)
 5. [🔧 GraphQL Configuration](#-gql-configuration)
-6. [🕸️ Public API specification](#%EF%B8%8F-public-api-specification)
+6. [🌍 i18n Internationalization](#-i18n-internationalization)
+7. [🕸️ Public API specification](#%EF%B8%8F-public-api-specification)
    - [REST API](#rest-api) 
    - [GraphQL API](#graphql-api)
 8. [💬 FAQ](#-faq)
-9. [🤝 Contributing](#-contributing)
-10. [👨‍💻 Community support](#-community-support)
+10. [🤝 Contributing](#-contributing)
+11. [👨‍💻 Community support](#-community-support)
 
 ## ✨ Features
 
@@ -59,6 +60,7 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
 - **Different types of navigation items:** Create navigation with items linked to internal types, to external links or wrapper elements to keep structure clean 
 - **Multiple navigations:** Create as many Navigation containers as you want, setup them and use in the consumer application
 - **Light / Dark mode compatible:** By design we're supporting Strapi ☀️ Light / 🌙 Dark modes 
+- **Webhooks integration:** Changes to navigation will trigger 'entry.update' or 'entry.create' webhook events. 
 - **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
 - **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
 
@@ -165,6 +167,7 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
 - `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)**
 
 ## 🔧 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:
@@ -195,6 +198,38 @@ gql: {
 ```
 where `Page` and `UploadFile` are your type names for the **Content Types** you're referring by navigation items relations. 
 
+## 🌍 i18n Internationalization
+
+### Settings
+
+This feature is **opt-in**.
+
+In order to use this functionality setting **default locale** is required. (See: Settings -> Internationalization)
+
+Once feature is enabled a restart is required. On server startup missing navigations for other locales will be created. From then you can manage navigation's localizations just like before.
+
+If you want go back to _pre-i18n_ way you can disable it in settings. Already created navigations will not be removed unless you make a choice for plugin to do so(this will require a restart).
+
+If your newly created navigation localization is empty you can copy contents of one version's to the empty one. If related item is localized and locale version exists localization will be used as a related item. Otherwise plugin will fallback to an original item.
+
+### Rendering
+
+Shape of the rendered navigation will not change. Querying stays almost the same. To query for specific locale version just add `locale` query param. For example:
+
+```https://yourdomain.cool/api/navigation/render/1?locale=fr```
+
+or
+
+```https://yourdomain.cool/api/navigation/render/main-navigation?locale=fr```
+
+If `locale` is not specified whatever version used to be at id `1` will be returned.
+
+Of course if you know that `fr` version is present at id `2` you can just query for that.
+
+### GraphQL
+
+If feature is enabled GQL render navigation query is expanded to handle `locale` param(it will work the same as regular requests). Checkout schema provided by GraphQL plugin.
+
 ## 👤 RBAC
 Plugin provides granular permissions based on Strapi RBAC functionality.
 
@@ -296,7 +331,7 @@ Plugin supports both **REST API** and **GraphQL API** exposed by Strapi.
 
 `GET <host>/api/navigation/render/<navigationIdOrSlug>?type=<type>`
 
-Return a rendered navigation structure depends on passed type (`tree`, `rfr` or nothing to render as `flat/raw`).
+Return a rendered navigation structure depends on passed type (`TREE`, `RFR` or nothing to render as `FLAT`).
 
 > The ID of navigation by default is `1`, if you've got defined multiple navigations you must work with their IDs or Slugs to fetch.
 
@@ -329,7 +364,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/api/navigation/render/1?type=tree`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=TREE`
 
 **Example response body**
 
@@ -365,7 +400,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/api/navigation/render/1?type=rfr`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=RFR`
 
 **Example response body**
 
@@ -450,7 +485,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 
 ### GraphQL API
 
-Same as [**REST API**](#rest-api) returns a rendered navigation structure depends on passed type (`tree`, `rfr` or nothing to render as `flat/raw`).
+Same as [**REST API**](#rest-api) returns a rendered navigation structure depends on passed type (`TREE`, `RFR` or nothing to render as `FLAT`).
 
 **Example request**
 
@@ -465,14 +500,17 @@ query {
     title
     path
     related {
-      __typename
+      id
+      attributes {
+        __typename
 
-      ... on Page {
-        Title
-      }
+        ... on Page {
+          Title
+        }
 
-      ... on WithFlowType {
-        Name
+        ... on WithFlowType {
+          Name
+        }
       }
     }
     items {
@@ -480,14 +518,17 @@ query {
       title
       path
       related {
-        __typename
+        id
+        attributes {
+          __typename
 
-        ... on Page {
-          Title
-        }
+          ... on Page {
+            Title
+          }
 
-        ... on WithFlowType {
-          Name
+          ... on WithFlowType {
+            Name
+          }
         }
       }
     }
@@ -506,8 +547,11 @@ query {
         "title": "Test page",
         "path": "/test-path",
         "related": {
-          "__typename": "WithFlowType",
-          "Name": "Test"
+          "id": 3,
+          "attributes": {
+            "__typename": "WithFlowType",
+            "Name": "Test"
+          }
         },
         "items": [
           {
@@ -515,8 +559,11 @@ query {
             "title": "Nested",
             "path": "/test-path/nested-one",
             "related": {
-              "__typename": "Page",
-              "Title": "Eg. Page title"
+              "id": 1,
+              "attributes": {
+                  "__typename": "Page",
+                "Title": "Eg. Page title"
+              }
             }
           }
         ]
@@ -526,8 +573,11 @@ query {
         "title": "Another page",
         "path": "/another",
         "related": {
-          "__typename": "Page",
-          "Title": "dfdfdf"
+          "id": 2,
+          "attributes": {
+            "__typename": "Page",
+            "Title": "dfdfdf"
+          }
         },
         "items": []
       }
@@ -554,7 +604,7 @@ Live example of plugin usage can be found in the [VirtusLab Strapi Examples](htt
 
 **Q:** I would like to use GraphQL schemas but I'm not getting renderNavigation query or even proper types as Navigation, NavigationItem etc. What should I do?
 
-**A:** There is a one trick you might try. Strapi by default is ordering plugins by the way which takes `strapi-plugin-graphql` to initialize earlier than other plugins so types might not be injected. If you don't have it yet, please create `config/plugins.js` file and put there at lease following lines:
+**A:** **A:** There is a one trick you might try. Strapi by default is ordering plugins by the way which takes `strapi-plugin-graphql` to initialize earlier than other plugins so types might not be injected. If you don't have it yet, please create `config/plugins.js` file and put there following lines (put `graphql` at the end):
 
 ```js
 module.exports = {
@@ -578,6 +628,28 @@ If you already got it, make sure that `navigation` plugin is inserted before `gr
 
 Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
 
+- Clone repository
+
+    ```
+    git clone git@github.com:VirtusLab-Open-Source/strapi-plugin-navigation.git
+    ```
+
+- Create a soft link in your strapi project to plugin build folder
+
+    ```sh
+    ln -s <...>/strapi-plugin-navigation/build <...>/strapi-project/src/plugins/navigation 
+    ```
+
+- Run build command 
+
+    ```ts
+    // Watch for file changes
+    yarn develop
+
+    // or run build without nodemon
+    yarn build:dev
+    ```
+
 ## 👨‍💻 Community support
 
 For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:

package/admin/src/components/Alert/styles.d.ts

@@ -0,0 +1,2 @@
+export const PermanentAlert: any;
+//# sourceMappingURL=styles.d.ts.map

package/admin/src/components/Alert/styles.js

@@ -1,8 +1,14 @@
-import styled from 'styled-components';
-import { Alert } from '@strapi/design-system/Alert';
-
-export const PermanentAlert = styled(Alert)`
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermanentAlert = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Alert_1 = require("@strapi/design-system/Alert");
+exports.PermanentAlert = (0, styled_components_1.default)(Alert_1.Alert) `
  button {
      display: none;
  }
 `;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1,7 @@
+export default CollapseButton;
+declare function CollapseButton({ toggle, collapsed, itemsCount }: {
+    toggle: any;
+    collapsed: any;
+    itemsCount: any;
+}): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,15 @@
-import React from 'react';
-import styled from 'styled-components'
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Icon } from '@strapi/design-system/Icon';
-import { CarretUp, CarretDown } from '@strapi/icons';
-
-const Wrapper = styled.div`
+"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 Flex_1 = require("@strapi/design-system/Flex");
+const Typography_1 = require("@strapi/design-system/Typography");
+const Icon_1 = require("@strapi/design-system/Icon");
+const icons_1 = require("@strapi/icons");
+const Wrapper = styled_components_1.default.div `
 	border-radius: 50%;
 	background: #DCDCE4;
 	width: 25px;
@@ -15,17 +19,12 @@ const Wrapper = styled.div`
 	align-items: center;
 	margin-right: 8px;
 `;
-
-const CollapseButton = ({ toggle, collapsed, itemsCount }) => (
-	<Flex justifyContent='space-between' alignItems='center' onClick={toggle} cursor="pointer" style={{ marginRight: '16px' }}>
-		<Wrapper>
-			{ collapsed ?
-				<Icon as={CarretDown} width='7px' height='4px' /> :
-				<Icon as={CarretUp} width='7px' height='4px' />
-			}
-		</Wrapper>
-		<Typography variant="pi">{itemsCount} nested items</Typography>
-	</Flex >
-);
-
-export default CollapseButton;
+const CollapseButton = ({ toggle, collapsed, itemsCount }) => (react_1.default.createElement(Flex_1.Flex, { justifyContent: 'space-between', alignItems: 'center', onClick: toggle, cursor: "pointer", style: { marginRight: '16px' } },
+    react_1.default.createElement(Wrapper, null, collapsed ?
+        react_1.default.createElement(Icon_1.Icon, { as: icons_1.CarretDown, width: '7px', height: '4px' }) :
+        react_1.default.createElement(Icon_1.Icon, { as: icons_1.CarretUp, width: '7px', height: '4px' })),
+    react_1.default.createElement(Typography_1.Typography, { variant: "pi" },
+        itemsCount,
+        " nested items")));
+exports.default = CollapseButton;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,28 @@
+export default ConfirmationDialog;
+declare function ConfirmationDialog({ isVisible, isActionAsync, children, onConfirm, onCancel, header, labelCancel, labelConfirm, iconConfirm, mainIcon }: {
+    isVisible?: boolean | undefined;
+    isActionAsync?: boolean | undefined;
+    children: any;
+    onConfirm: any;
+    onCancel: any;
+    header: any;
+    labelCancel: any;
+    labelConfirm: any;
+    iconConfirm: any;
+    mainIcon?: JSX.Element | undefined;
+}): JSX.Element;
+declare namespace ConfirmationDialog {
+    namespace propTypes {
+        const isVisible: PropTypes.Requireable<boolean>;
+        const isActionAsync: PropTypes.Requireable<boolean>;
+        const children: PropTypes.Requireable<any>;
+        const header: PropTypes.Requireable<string>;
+        const labelCancel: PropTypes.Requireable<string>;
+        const labelConfirm: PropTypes.Requireable<string>;
+        const iconConfirm: PropTypes.Requireable<object>;
+        const onConfirm: PropTypes.Validator<(...args: any[]) => any>;
+        const onCancel: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,56 +1,34 @@
-/**
- *
- * Entity Details
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from '@strapi/design-system/Button';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { ExclamationMarkCircle, Check } from '@strapi/icons';
-import { getMessage } from '../../utils';
-
-const ConfirmationDialog = ({
-	isVisible = false,
-	isActionAsync = false,
-	children,
-	onConfirm,
-	onCancel,
-	header,
-	labelCancel,
-	labelConfirm,
-	iconConfirm
-}) => (
-	<Dialog onClose={onCancel} title={header || getMessage('components.confirmation.dialog.header', 'Confirmation')} isOpen={isVisible}>
-		<DialogBody icon={<ExclamationMarkCircle />}>
-			<Stack spacing={2}>
-				<Flex justifyContent="center">
-					<Typography id="dialog-confirm-description">{children || getMessage('components.confirmation.dialog.description')}</Typography>
-				</Flex>
-			</Stack>
-		</DialogBody>
-		<DialogFooter startAction={<Button onClick={onCancel} variant="tertiary" disabled={isActionAsync}>
-			{labelCancel || getMessage('components.confirmation.dialog.button.cancel', 'Cancel')}
-		</Button>} endAction={<Button onClick={onConfirm} variant="danger-light" startIcon={iconConfirm || <Check />} disabled={isActionAsync}>
-			{labelConfirm || getMessage('components.confirmation.dialog.button.confirm', 'Confirm')}
-		</Button>} />
-	</Dialog>
-);
-
+"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 prop_types_1 = __importDefault(require("prop-types"));
+const Button_1 = require("@strapi/design-system/Button");
+const Dialog_1 = require("@strapi/design-system/Dialog");
+const Flex_1 = require("@strapi/design-system/Flex");
+const Stack_1 = require("@strapi/design-system/Stack");
+const Typography_1 = require("@strapi/design-system/Typography");
+const icons_1 = require("@strapi/icons");
+const utils_1 = require("../../utils");
+const DEFAULT_ICON = react_1.default.createElement(icons_1.ExclamationMarkCircle, null);
+const ConfirmationDialog = ({ isVisible = false, isActionAsync = false, children, onConfirm, onCancel, header, labelCancel, labelConfirm, iconConfirm, mainIcon = DEFAULT_ICON }) => (react_1.default.createElement(Dialog_1.Dialog, { onClose: onCancel, title: header || (0, utils_1.getMessage)('components.confirmation.dialog.header', 'Confirmation'), isOpen: isVisible },
+    react_1.default.createElement(Dialog_1.DialogBody, { icon: mainIcon },
+        react_1.default.createElement(Stack_1.Stack, { spacing: 2 },
+            react_1.default.createElement(Flex_1.Flex, { justifyContent: "center" },
+                react_1.default.createElement(Typography_1.Typography, { id: "dialog-confirm-description" }, children || (0, utils_1.getMessage)('components.confirmation.dialog.description'))))),
+    react_1.default.createElement(Dialog_1.DialogFooter, { startAction: react_1.default.createElement(Button_1.Button, { onClick: onCancel, variant: "tertiary", disabled: isActionAsync }, labelCancel || (0, utils_1.getMessage)('components.confirmation.dialog.button.cancel', 'Cancel')), endAction: react_1.default.createElement(Button_1.Button, { onClick: onConfirm, variant: "danger-light", startIcon: iconConfirm || react_1.default.createElement(icons_1.Check, null), disabled: isActionAsync }, labelConfirm || (0, utils_1.getMessage)('components.confirmation.dialog.button.confirm', 'Confirm')) })));
 ConfirmationDialog.propTypes = {
-	isVisible: PropTypes.bool,
-	isActionAsync: PropTypes.bool,
-	children: PropTypes.string.isRequired,
-	header: PropTypes.string,
-	labelCancel: PropTypes.string,
-	labelConfirm: PropTypes.string,
-	iconConfirm: PropTypes.object,
-	onConfirm: PropTypes.func.isRequired,
-	onCancel: PropTypes.func.isRequired,
+    isVisible: prop_types_1.default.bool,
+    isActionAsync: prop_types_1.default.bool,
+    children: prop_types_1.default.any,
+    header: prop_types_1.default.string,
+    labelCancel: prop_types_1.default.string,
+    labelConfirm: prop_types_1.default.string,
+    iconConfirm: prop_types_1.default.object,
+    onConfirm: prop_types_1.default.func.isRequired,
+    onCancel: prop_types_1.default.func.isRequired,
 };
-
-export default ConfirmationDialog;
+exports.default = ConfirmationDialog;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1,8 +1,10 @@
-import styled from "styled-components";
-import { Box } from '@strapi/design-system/Box';
-import { Button } from "@strapi/design-system/Button";
-
-const EmptyView = styled.div`
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const EmptyView = styled_components_1.default.div `
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -22,5 +24,5 @@ const EmptyView = styled.div`
 		margin: 1rem;
 	}
 `;
-
-export default EmptyView;
+exports.default = EmptyView;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1,10 +1,14 @@
-import styled from "styled-components";
-import { Badge } from '@strapi/design-system/Badge';
-
-const ItemCardBadge = styled(Badge)`
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const Badge_1 = require("@strapi/design-system/Badge");
+const ItemCardBadge = (0, styled_components_1.default)(Badge_1.Badge) `
 		border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]};
 
-		${ ({small, theme}) => small && `
+		${({ small, theme }) => small && `
 			padding: ${theme.spaces[1]} ${theme.spaces[2]};
 			margin: 0px ${theme.spaces[3]};
 			vertical-align: middle;
@@ -18,5 +22,5 @@ const ItemCardBadge = styled(Badge)`
 			}
 		`}
 `;
-
-export default ItemCardBadge;
+exports.default = ItemCardBadge;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1,7 +1,11 @@
-import styled from "styled-components";
-import { CardTitle } from '@strapi/design-system/Card';
-
-const CardItemTitle = styled(CardTitle)`
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const Card_1 = require("@strapi/design-system/Card");
+const CardItemTitle = (0, styled_components_1.default)(Card_1.CardTitle) `
 	width: 100%;
 	
 	display: flex;
@@ -13,5 +17,5 @@ const CardItemTitle = styled(CardTitle)`
 			margin: 0px ${({ theme }) => theme.spaces[1]};
 	}
 `;
-
-export default CardItemTitle;
+exports.default = CardItemTitle;
+//# sourceMappingURL=Wrapper.js.map

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

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

@@ -1,17 +1,19 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Flex } from '@strapi/design-system/Flex';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { Icon } from '@strapi/design-system/Icon';
-import { Pencil, Trash, Refresh, Drag } from '@strapi/icons/';
-
-import Wrapper from './Wrapper';
-import ItemCardBadge from '../ItemCardBadge';
-import { getMessage } from '../../../utils';
-
-const IconWrapper = styled.div`
+"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 Flex_1 = require("@strapi/design-system/Flex");
+const IconButton_1 = require("@strapi/design-system/IconButton");
+const Typography_1 = require("@strapi/design-system/Typography");
+const Icon_1 = require("@strapi/design-system/Icon");
+const icons_1 = require("@strapi/icons/");
+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;
@@ -30,42 +32,21 @@ svg {
 		fill: ${({ theme }) => theme.colors.neutral500};
 	}
 }
-`
-
+`;
 const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => {
-	return (
-		<Wrapper>
-			<Flex alignItems="center">
-				<IconWrapper ref={dragRef}>
-					<Icon as={Drag} />
-				</IconWrapper>
-				<Typography variant="omega" fontWeight="bold">
-					{title}
-				</Typography>
-				<Typography variant="omega" fontWeight="bold" textColor='neutral500'>
-					{path}
-				</Typography>
-				<Icon as={icon} />
-			</Flex>
-			<Flex alignItems="center" style={{ zIndex: 2 }}>
-				{removed &&
-					(<ItemCardBadge
-						borderColor={`danger200`}
-						backgroundColor={`danger100`}
-						textColor={`danger600`}
-					>
-						{getMessage("components.navigationItem.badge.removed")}
-					</ItemCardBadge>)
-				}
-
-				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<Pencil />} />
-				{removed ?
-					<IconButton onClick={onItemRestore} label="Restore" icon={<Refresh />} /> :
-					<IconButton onClick={onItemRemove} label="Remove" icon={<Trash />} />
-				}
-			</Flex>
-		</Wrapper>
-	);
-}
-
-export default ItemCardHeader;
+    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) }))));
+};
+exports.default = ItemCardHeader;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,2 @@
+export const ItemCardRemovedOverlay: any;
+//# sourceMappingURL=index.d.ts.map