strapi-plugin-navigation 2.0.13 → 2.1.0

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

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

@@ -1,6 +1,11 @@
-import styled from "styled-components";
-
-export const ItemCardRemovedOverlay = styled.div`
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemCardRemovedOverlay = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ItemCardRemovedOverlay = styled_components_1.default.div `
     width: 100%;
     height: 100%;
     position: absolute;
@@ -9,4 +14,5 @@ export const ItemCardRemovedOverlay = styled.div`
     z-index: 1;
 
     background: rgba(255,255,255,.75);
-`;
+`;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1,8 +1,12 @@
-import styled from "styled-components";
-
-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 styled_components_1 = __importDefault(require("styled-components"));
+const Wrapper = styled_components_1.default.div `
 position: relative;
-margin-top: ${({theme}) => theme.spaces[2]};
+margin-top: ${({ theme }) => theme.spaces[2]};
 margin-left: ${({ level }) => level && '54px'}};
 
 ${({ level, theme, isLast }) => level && `
@@ -35,5 +39,5 @@ ${({ level, theme, isLast }) => level && `
 	}
 `};
 `;
-
-export default Wrapper;
+exports.default = Wrapper;
+//# sourceMappingURL=Wrapper.js.map

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

@@ -0,0 +1,31 @@
+export default Item;
+declare function Item(props: any): JSX.Element;
+declare namespace Item {
+    namespace propTypes {
+        const item: PropTypes.Validator<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            uiRouterKey: PropTypes.Requireable<string>;
+            path: PropTypes.Requireable<string>;
+            externalPath: PropTypes.Requireable<string>;
+            related: PropTypes.Requireable<string | number>;
+            menuAttached: PropTypes.Requireable<boolean>;
+            collapsed: PropTypes.Requireable<boolean>;
+        }>>;
+        const relatedRef: PropTypes.Requireable<object>;
+        const level: PropTypes.Requireable<number>;
+        const levelPath: PropTypes.Requireable<string>;
+        const isParentAttachedToMenu: PropTypes.Requireable<boolean>;
+        const onItemRestore: PropTypes.Validator<(...args: any[]) => any>;
+        const onItemLevelAdd: PropTypes.Validator<(...args: any[]) => any>;
+        const onItemRemove: PropTypes.Validator<(...args: any[]) => any>;
+        const onItemReOrder: PropTypes.Validator<(...args: any[]) => any>;
+        const onItemToggleCollapse: PropTypes.Validator<(...args: any[]) => any>;
+        const config: PropTypes.Validator<PropTypes.InferProps<{
+            contentTypes: PropTypes.Validator<any[]>;
+            contentTypesNameFields: PropTypes.Validator<object>;
+        }>>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,246 +1,167 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useDrag, useDrop } from 'react-dnd';
-import { isEmpty, isNumber } from 'lodash';
-
-import { Card, CardBody } from '@strapi/design-system/Card';
-import { Divider } from '@strapi/design-system/Divider';
-import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
-import { TextButton } from '@strapi/design-system/TextButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { ArrowRight, Link as LinkIcon, Earth, Plus, Cog } from '@strapi/icons';
-
-import { navigationItemType } from '../../pages/View/utils/enums';
-import ItemCardHeader from './ItemCardHeader';
-import List from '../NavigationItemList';
-import Wrapper from './Wrapper';
-import { extractRelatedItemLabel } from '../../pages/View/utils/parsers';
-import ItemCardBadge from './ItemCardBadge';
-import { ItemCardRemovedOverlay } from './ItemCardRemovedOverlay';
-import { getMessage, ItemTypes } from '../../utils';
-import CollapseButton from '../CollapseButton';
-
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 Card_1 = require("@strapi/design-system/Card");
+const Divider_1 = require("@strapi/design-system/Divider");
+const Flex_1 = require("@strapi/design-system/Flex");
+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"));
+const parsers_1 = require("../../pages/View/utils/parsers");
+const ItemCardBadge_1 = __importDefault(require("./ItemCardBadge"));
+const ItemCardRemovedOverlay_1 = require("./ItemCardRemovedOverlay");
+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 === navigationItemType.EXTERNAL;
-  const isWrapper = type === navigationItemType.WRAPPER;
-  const isHandledByPublishFlow = relatedRef && typeof relatedRef.publishedAt !== 'undefined';
-  const isPublished = isHandledByPublishFlow && relatedRef.publishedAt;
-  const isNextMenuAllowedLevel = isNumber(allowedLevels) ? level < (allowedLevels - 1) : true;
-  const isMenuAllowedLevel = isNumber(allowedLevels) ? level < allowedLevels : true;
-  const hasChildren = !isEmpty(item.items) && !isExternal && !displayChildren;
-  const absolutePath = isExternal ? undefined : `${levelPath === '/' ? '' : levelPath}/${path === '/' ? '' : path}`;
-
-  const relatedItemLabel = !isExternal ? extractRelatedItemLabel(relatedRef, contentTypesNameFields, { contentTypes }) : '';
-  const relatedTypeLabel = relatedRef?.labelSingular;
-  const relatedBadgeColor = isPublished ? 'success' : 'secondary';
-
-  const dragRef = useRef(null);
-  const dropRef = useRef(null);
-  const previewRef = useRef(null);
-
-  const [, drop] = useDrop({
-    accept: `${ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
-    hover(hoveringItem, monitor) {
-      const dragIndex = hoveringItem.order;
-      const dropIndex = item.order;
-
-      // Don't replace items with themselves
-      if (dragIndex === dropIndex) {
-        return;
-      }
-
-      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-
-      // Place the hovering item before or after the drop target
-      const isAfter = hoverClientY > hoverMiddleY;
-      const newOrder = isAfter ? item.order + 0.5 : item.order - 0.5;
-
-      if (dragIndex < dropIndex && hoverClientY < hoverMiddleY) {
-        return;
-      }
-      // Dragging upwards
-      if (dragIndex > dropIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-
-      onItemReOrder({ ...hoveringItem }, newOrder);
-      hoveringItem.order = newOrder;
-    },
-    collect: monitor => ({
-      isOverCurrent: monitor.isOver({ shallow: true }),
-    })
-  });
-
-  const [{ isDragging }, drag, dragPreview] = useDrag({
-    type: `${ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
-    item: () => {
-      return { ...item, relatedRef };
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  const refs = {
-    dragRef: drag(dragRef),
-    dropRef: drop(dropRef),
-    previewRef: dragPreview(previewRef),
-  }
-
-  const contentTypeUid = relatedRef?.__collectionUid;
-  const contentType = contentTypes.find(_ => _.uid === contentTypeUid) || {};
-  const generatePreviewUrl = entity => {
-    const { isSingle } = contentType;
-    return `/content-manager/${ isSingle ? 'singleType' : 'collectionType'}/${entity?.__collectionUid}${!isSingle ? '/' + entity?.id : ''}`
-  }
-
-  return (
-    <Wrapper level={level} isLast={isLast} style={{ opacity: isDragging ? 0.2 : 1 }} ref={refs ? refs.dropRef : null} >
-      <Card style={{ width: "728px", zIndex: 1, position: "relative", overflow: 'hidden' }}>
-        {removed && (<ItemCardRemovedOverlay />)}
-        <div ref={refs.previewRef}>
-          <CardBody>
-            <ItemCardHeader
-              title={title}
-              path={isExternal ? externalPath : absolutePath}
-              icon={isExternal ? Earth : isWrapper ? Cog : LinkIcon}
-              onItemRemove={() => onItemRemove({
-                ...item,
-                relatedRef,
-              })}
-              onItemEdit={() => onItemEdit({
-                ...item,
-                isMenuAllowedLevel,
-                isParentAttachedToMenu,
-                relatedRef,
-              }, levelPath, isParentAttachedToMenu)}
-              onItemRestore={() => onItemRestore({
-                ...item,
-                relatedRef,
-              })}
-              dragRef={refs.dragRef}
-              removed={removed}
-            />
-          </CardBody>
-          <Divider />
-          {!isExternal && (
-            <CardBody style={{ padding: '8px' }}>
-              <Flex style={{ width: '100%' }} direction="row" alignItems="center" justifyContent="space-between">
-                <Flex>
-                  {!isEmpty(item.items) && <CollapseButton toggle={() => onItemToggleCollapse({...item, relatedRef})} collapsed={collapsed} itemsCount={item.items.length}/>}
-                  <TextButton
-                    disabled={removed}
-                    startIcon={<Plus />}
-                    onClick={(e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached)}
-                  >
-                    <Typography variant="pi" fontWeight="bold" textColor={removed ? "neutral600" : "primary600"}>
-                      {getMessage("components.navigationItem.action.newItem")}
-                    </Typography>
-                  </TextButton>
-                </Flex>
-                {relatedItemLabel && (
-                  <Flex justifyContent='center' alignItems='center'>
-                    {isHandledByPublishFlow && <ItemCardBadge
-                      borderColor={`${relatedBadgeColor}200`}
-                      backgroundColor={`${relatedBadgeColor}100`}
-                      textColor={`${relatedBadgeColor}600`}
-                      className="action"
-                      small
-                    >
-                      {getMessage({ id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}` })}
-                    </ItemCardBadge>}
-                    <Typography variant="omega" textColor='neutral600'>{relatedTypeLabel}&nbsp;/&nbsp;</Typography>
-                    <Typography variant="omega" textColor='neutral800'>{relatedItemLabel}</Typography>
-                    { contentType?.visible && (<Link
-                        to={generatePreviewUrl(relatedRef)}
-                        endIcon={<ArrowRight />}>&nbsp;</Link>) }
-                  </Flex>)
-                }
-              </Flex>
-            </CardBody>)}
-        </div>
-      </Card>
-      {hasChildren && !removed && !collapsed && <List
-        onItemLevelAdd={onItemLevelAdd}
-        onItemRemove={onItemRemove}
-        onItemEdit={onItemEdit}
-        onItemRestore={onItemRestore}
-        onItemReOrder={onItemReOrder}
-        onItemToggleCollapse={onItemToggleCollapse}
-        error={error}
-        allowedLevels={allowedLevels}
-        isParentAttachedToMenu={menuAttached}
-        items={item.items}
-        level={level + 1}
-        levelPath={absolutePath}
-        contentTypes={contentTypes}
-        contentTypesNameFields={contentTypesNameFields}
-      />
-      }
-    </Wrapper>
-
-  );
+    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, structureId, items = [], } = item;
+    const { contentTypes = [], contentTypesNameFields } = config;
+    const isExternal = type === enums_1.navigationItemType.EXTERNAL;
+    const isWrapper = type === enums_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;
+    const isMenuAllowedLevel = (0, lodash_1.isNumber)(allowedLevels) ? level < allowedLevels : true;
+    const hasChildren = !(0, lodash_1.isEmpty)(item.items) && !isExternal && !displayChildren;
+    const absolutePath = isExternal ? undefined : `${levelPath === '/' ? '' : levelPath}/${path === '/' ? '' : path}`;
+    const relatedItemLabel = !isExternal ? (0, parsers_1.extractRelatedItemLabel)(relatedRef, contentTypesNameFields, { contentTypes }) : '';
+    const relatedTypeLabel = relatedRef?.labelSingular;
+    const relatedBadgeColor = isPublished ? 'success' : 'secondary';
+    const dragRef = (0, react_1.useRef)(null);
+    const dropRef = (0, react_1.useRef)(null);
+    const previewRef = (0, react_1.useRef)(null);
+    const [, drop] = (0, react_dnd_1.useDrop)({
+        accept: `${utils_1.ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
+        hover(hoveringItem, monitor) {
+            const dragIndex = hoveringItem.order;
+            const dropIndex = item.order;
+            if (dragIndex === dropIndex) {
+                return;
+            }
+            const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            const clientOffset = monitor.getClientOffset();
+            const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+            const isAfter = hoverClientY > hoverMiddleY;
+            const newOrder = isAfter ? item.order + 0.5 : item.order - 0.5;
+            if (dragIndex < dropIndex && hoverClientY < hoverMiddleY) {
+                return;
+            }
+            if (dragIndex > dropIndex && hoverClientY > hoverMiddleY) {
+                return;
+            }
+            onItemReOrder({ ...hoveringItem }, newOrder);
+            hoveringItem.order = newOrder;
+        },
+        collect: monitor => ({
+            isOverCurrent: monitor.isOver({ shallow: true }),
+        })
+    });
+    const [{ isDragging }, drag, dragPreview] = (0, react_dnd_1.useDrag)({
+        type: `${utils_1.ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
+        item: () => {
+            return item;
+        },
+        collect: monitor => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    const refs = {
+        dragRef: drag(dragRef),
+        dropRef: drop(dropRef),
+        previewRef: dragPreview(previewRef),
+    };
+    const contentTypeUid = relatedRef?.__collectionUid;
+    const contentType = contentTypes.find(_ => _.uid === contentTypeUid) || {};
+    const generatePreviewUrl = entity => {
+        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)),
+            react_1.default.createElement("div", { ref: refs.previewRef },
+                react_1.default.createElement(Card_1.CardBody, null,
+                    react_1.default.createElement(ItemCardHeader_1.default, { title: title, path: isExternal ? externalPath : absolutePath, icon: isExternal ? icons_1.Earth : isWrapper ? icons_1.Cog : icons_1.Link, onItemRemove: () => onItemRemove(item), onItemEdit: () => onItemEdit({
+                            ...item,
+                            isMenuAllowedLevel,
+                            isParentAttachedToMenu,
+                        }, levelPath, isParentAttachedToMenu), onItemRestore: () => onItemRestore(item), dragRef: refs.dragRef, removed: removed })),
+                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" },
+                        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: 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'}` }))),
+                            react_1.default.createElement(Typography_1.Typography, { variant: "omega", textColor: 'neutral600' },
+                                relatedTypeLabel,
+                                "\u00A0/\u00A0"),
+                            react_1.default.createElement(Typography_1.Typography, { variant: "omega", textColor: 'neutral800' }, relatedItemLabel),
+                            react_1.default.createElement(Link_1.Link, { to: `/content-manager/collectionType/${relatedRef?.__collectionUid}/${relatedRef?.id}`, endIcon: react_1.default.createElement(icons_1.ArrowRight, null) }, "\u00A0")))))))),
+        hasChildren && !removed && !collapsed && react_1.default.createElement(NavigationItemList_1.default, { onItemLevelAdd: onItemLevelAdd, onItemRemove: onItemRemove, onItemEdit: onItemEdit, onItemRestore: onItemRestore, onItemReOrder: onItemReOrder, onItemToggleCollapse: onItemToggleCollapse, error: error, allowedLevels: allowedLevels, isParentAttachedToMenu: menuAttached, items: item.items, level: level + 1, levelPath: absolutePath, contentTypes: contentTypes, contentTypesNameFields: contentTypesNameFields })));
 };
-
 Item.propTypes = {
-  item: PropTypes.shape({
-    title: PropTypes.string,
-    type: PropTypes.string,
-    uiRouterKey: PropTypes.string,
-    path: PropTypes.string,
-    externalPath: PropTypes.string,
-    related: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    menuAttached: PropTypes.bool,
-    collapsed: PropTypes.bool,
-  }).isRequired,
-  relatedRef: PropTypes.object,
-  level: PropTypes.number,
-  levelPath: PropTypes.string,
-  isParentAttachedToMenu: PropTypes.bool,
-  onItemRestore: PropTypes.func.isRequired,
-  onItemLevelAdd: PropTypes.func.isRequired,
-  onItemRemove: PropTypes.func.isRequired,
-  onItemReOrder: PropTypes.func.isRequired,
-  onItemToggleCollapse: PropTypes.func.isRequired,
-  config: PropTypes.shape({
-    contentTypes: PropTypes.array.isRequired,
-    contentTypesNameFields: PropTypes.object.isRequired,
-  }).isRequired
+    item: prop_types_1.default.shape({
+        title: prop_types_1.default.string,
+        type: prop_types_1.default.string,
+        uiRouterKey: prop_types_1.default.string,
+        path: prop_types_1.default.string,
+        externalPath: prop_types_1.default.string,
+        related: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
+        menuAttached: prop_types_1.default.bool,
+        collapsed: prop_types_1.default.bool,
+    }).isRequired,
+    relatedRef: prop_types_1.default.object,
+    level: prop_types_1.default.number,
+    levelPath: prop_types_1.default.string,
+    isParentAttachedToMenu: prop_types_1.default.bool,
+    onItemRestore: prop_types_1.default.func.isRequired,
+    onItemLevelAdd: prop_types_1.default.func.isRequired,
+    onItemRemove: prop_types_1.default.func.isRequired,
+    onItemReOrder: prop_types_1.default.func.isRequired,
+    onItemToggleCollapse: prop_types_1.default.func.isRequired,
+    config: prop_types_1.default.shape({
+        contentTypes: prop_types_1.default.array.isRequired,
+        contentTypesNameFields: prop_types_1.default.object.isRequired,
+    }).isRequired
 };
-
-export default Item;
+exports.default = Item;
+//# sourceMappingURL=index.js.map

package/admin/src/components/NavigationItemList/Wrapper.d.ts

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

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

@@ -1,6 +1,10 @@
-import styled from 'styled-components';
-
-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 styled_components_1 = __importDefault(require("styled-components"));
+const Wrapper = styled_components_1.default.div `
   position: relative;
   ${({ level, theme }) => level && `
     &::before {
@@ -18,5 +22,5 @@ const Wrapper = styled.div`
     }
   `};
 `;
-
-export default Wrapper;
+exports.default = Wrapper;
+//# sourceMappingURL=Wrapper.js.map