@strapi/content-type-builder 5.53.0 → 5.55.0

package/dist/admin/components/ContentTypeBuilderNav/components/FolderNav/SortableTreeRow.mjs

@@ -0,0 +1,376 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { Flex, Box, Menu, VisuallyHidden, Typography } from '@strapi/design-system';
+import { More, Pencil, Trash, ChevronDown } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { NavLink } from 'react-router-dom';
+import { styled, css } from 'styled-components';
+import { getTrad } from '../../../../utils/getTrad.mjs';
+import { Status } from '../../../Status.mjs';
+import { FolderNameField } from './FolderNameField.mjs';
+
+/**
+ * The drop-position indicator is absolutely positioned so that it does not displace
+ * a row and cause cyclical layout shifts.
+ * It is justified to the right edge of the row and its width is based on the
+ * depth of the destination it indicates.
+ */ const DropIndicator = styled.span`
+  position: absolute;
+  left: ${({ theme, $indentDepth })=>`calc(${$indentDepth} * ${theme.spaces[6]})`};
+  right: 0;
+  ${({ $edge })=>$edge === 'top' ? 'top: 0;' : 'bottom: 0;'}
+  transform: ${({ $edge })=>$edge === 'top' ? 'translateY(-1px)' : 'translateY(1px)'};
+
+  height: 2px;
+  background-color: ${({ theme })=>theme.colors.primary600};
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 2;
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: ${({ theme })=>theme.colors.primary600};
+    transform: translate(-50%, -50%);
+  }
+`;
+const MenuTrigger = styled(Menu.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+
+  position: relative;
+  z-index: 1;
+`;
+const Row = styled(Flex)`
+  position: relative;
+  border-radius: ${({ theme })=>theme.borderRadius};
+
+  padding-right: ${({ theme })=>theme.spaces[3]};
+  padding-block: ${({ theme })=>theme.spaces[2]};
+  padding-left: ${({ theme })=>theme.spaces[3]};
+  padding-left: ${({ theme, $depth })=>`calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};
+
+  background-color: ${({ $dropTarget, theme })=>$dropTarget ? theme.colors.primary100 : 'transparent'};
+  outline: ${({ $dropTarget, theme })=>$dropTarget ? `1px solid ${theme.colors.primary600}` : 'none'};
+  outline-offset: -1px;
+
+  ${MenuTrigger} {
+    opacity: 0;
+    transition: opacity 0.1s ease-out;
+  }
+
+  /*
+   * This selects for the opened Radix popover menu so that the hover state doesn't disappear while it is open.
+   */
+  &:hover,
+  &:has([data-state='open']) {
+    background-color: ${({ $dropTarget, theme })=>$dropTarget ? theme.colors.primary100 : theme.colors.neutral100};
+  }
+
+  &:hover ${MenuTrigger}, &:focus-within ${MenuTrigger}, &:has([data-state='open']) ${MenuTrigger} {
+    opacity: 1;
+  }
+
+  ${({ $dragging })=>$dragging && css`
+      & > *:not(${DropIndicator}) {
+        opacity: 0.4;
+      }
+    `}
+`;
+const GrabArea = styled.button`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: ${({ theme })=>theme.spaces[2]};
+
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+
+  /* The interactive area must be larger than the contents-driven hit area. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const ContentTypeLink = styled(NavLink)`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: ${({ theme })=>theme.spaces[2]};
+
+  height: 100%;
+  text-decoration: none;
+  color: ${({ theme })=>theme.colors.neutral800};
+
+  &.active {
+    color: ${({ theme })=>theme.colors.primary700};
+    font-weight: 500;
+  }
+
+  /* The interactive area must be larger than the contents-driven hit area. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const Glyph = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 16px;
+`;
+const Bullet = styled(Glyph)`
+  &::before {
+    content: '';
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+`;
+const Label = styled(Typography)`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const SortableTreeRow = ({ item, handlers })=>{
+    const { formatMessage } = useIntl();
+    const renameSelectedRef = useRef(false); // Tracks when the "rename" option is clicked in the popover so Radix's default "restore focus to menu trigger on menu close" behavior doesn't compete with our desired focus on the inline input.
+    const { listeners, setNodeRef, isDragging } = useSortable({
+        animateLayoutChanges: ()=>false,
+        disabled: !handlers.canEdit,
+        id: item.id
+    });
+    const dragListeners = handlers.canEdit ? listeners : undefined;
+    const depth = item.depth;
+    const node = item.node;
+    const canToggle = Boolean(handlers.canToggle);
+    const dropLine = handlers.dropLine && handlers.dropLine.anchorId === item.id ? handlers.dropLine : null;
+    if (node.type === 'folder' && handlers.canEdit && handlers.editingId === node.id) {
+        const validateFolderName = (name)=>{
+            return handlers.validateFolderName({
+                name,
+                parentId: node.parentId,
+                excludeId: node.id
+            });
+        };
+        const onFolderNameSubmit = (name)=>{
+            if (name === node.name) {
+                handlers.onCancelRename();
+                return;
+            }
+            handlers.onSubmitRename(node.id, name);
+        };
+        return /*#__PURE__*/ jsx("div", {
+            ref: setNodeRef,
+            children: /*#__PURE__*/ jsx(FolderNameField, {
+                onCancel: handlers.onCancelRename,
+                onSubmit: onFolderNameSubmit,
+                validate: validateFolderName,
+                defaultValue: node.name,
+                depth: item.depth
+            })
+        });
+    }
+    const trailingContents = /*#__PURE__*/ jsxs(Flex, {
+        gap: 1,
+        alignItems: "center",
+        onPointerDown: (e)=>{
+            // Prevent propagation when the interactive elements container is clicked as not to compete with the row's drag detection.
+            e.stopPropagation();
+        },
+        children: [
+            node.type === 'contentType' && /*#__PURE__*/ jsx(Box, {
+                tag: "span",
+                textAlign: "center",
+                width: "24px",
+                children: /*#__PURE__*/ jsx(Status, {
+                    status: node.status
+                })
+            }),
+            node.type === 'folder' && handlers.canEdit && /*#__PURE__*/ jsxs(Menu.Root, {
+                children: [
+                    /*#__PURE__*/ jsx(MenuTrigger, {
+                        variant: "ghost",
+                        endIcon: null,
+                        size: "S",
+                        "aria-label": formatMessage({
+                            id: getTrad('nav.folder.actions-label'),
+                            defaultMessage: 'Actions for {name}'
+                        }, {
+                            name: node.name
+                        }),
+                        children: /*#__PURE__*/ jsx(More, {
+                            "aria-hidden": true,
+                            focusable: false
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Menu.Content, {
+                        zIndex: 2,
+                        onCloseAutoFocus: (event)=>{
+                            if (renameSelectedRef.current) {
+                                event.preventDefault();
+                            }
+                            renameSelectedRef.current = false;
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(Menu.Item, {
+                                onSelect: ()=>{
+                                    renameSelectedRef.current = true;
+                                    handlers.onBeginRename(node.id);
+                                },
+                                startIcon: /*#__PURE__*/ jsx(Pencil, {}),
+                                children: formatMessage({
+                                    id: getTrad('nav.folder.rename'),
+                                    defaultMessage: 'Rename'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Menu.Separator, {}),
+                            /*#__PURE__*/ jsx(Menu.Item, {
+                                onSelect: ()=>handlers.onDeleteFolder(node),
+                                startIcon: /*#__PURE__*/ jsx(Trash, {}),
+                                variant: "danger",
+                                children: formatMessage({
+                                    id: getTrad('nav.folder.delete'),
+                                    defaultMessage: 'Delete folder'
+                                })
+                            }),
+                            node.children.length > 0 && /*#__PURE__*/ jsx(Menu.Item, {
+                                onSelect: ()=>handlers.onDeleteFolderAndContent(node),
+                                startIcon: /*#__PURE__*/ jsx(Trash, {}),
+                                children: formatMessage({
+                                    id: getTrad('nav.folder.delete-with-content'),
+                                    defaultMessage: 'Delete folder and contents'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(Row, {
+        ref: setNodeRef,
+        ...dragListeners,
+        alignItems: "center",
+        $dropTarget: handlers.dropTargetId === item.id,
+        $dragging: isDragging,
+        $depth: depth,
+        children: [
+            node.type === 'folder' ? /*#__PURE__*/ jsxs(GrabArea, {
+                "aria-expanded": canToggle ? !handlers.isCollapsed(node.id) : undefined,
+                onClick: canToggle ? ()=>handlers.onToggle(node.id) : undefined,
+                style: canToggle ? undefined : {
+                    cursor: 'default'
+                },
+                type: canToggle ? 'button' : undefined,
+                as: canToggle ? 'button' : 'span',
+                children: [
+                    /*#__PURE__*/ jsx(Glyph, {
+                        "aria-hidden": true,
+                        children: /*#__PURE__*/ jsx(ChevronDown, {
+                            fill: "neutral500",
+                            style: {
+                                transform: handlers.isCollapsed(node.id) ? 'rotate(-90deg)' : 'none',
+                                transition: 'transform 0.2s'
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Label, {
+                        tag: "span",
+                        textColor: "neutral800",
+                        fontWeight: "semiBold",
+                        children: node.name
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxs(ContentTypeLink, {
+                to: node.to,
+                draggable: false,
+                children: [
+                    /*#__PURE__*/ jsx(Bullet, {
+                        "aria-hidden": true
+                    }),
+                    /*#__PURE__*/ jsx(Label, {
+                        tag: "span",
+                        children: node.title
+                    })
+                ]
+            }),
+            trailingContents,
+            dropLine && /*#__PURE__*/ jsx(DropIndicator, {
+                $indentDepth: dropLine.depth,
+                $edge: dropLine.edge,
+                "aria-hidden": true
+            })
+        ]
+    });
+};
+/**
+ * This is rendered in place of the actual row when it is being dragged.
+ */ const RowOverlay = ({ item })=>{
+    const { formatMessage } = useIntl();
+    const node = item.node;
+    const name = node.type === 'folder' ? node.name : node.title;
+    return /*#__PURE__*/ jsxs(Row, {
+        style: {
+            cursor: 'grabbing'
+        },
+        background: "neutral0",
+        shadow: "filterShadow",
+        alignItems: "center",
+        $depth: 0,
+        children: [
+            /*#__PURE__*/ jsx(Glyph, {
+                "aria-hidden": true,
+                children: node.type === 'folder' ? /*#__PURE__*/ jsx(ChevronDown, {
+                    fill: "neutral500"
+                }) : /*#__PURE__*/ jsx(Bullet, {})
+            }),
+            /*#__PURE__*/ jsx(Label, {
+                tag: "span",
+                fontWeight: node.type === 'folder' ? 'semiBold' : 'regular',
+                children: node.type === 'folder' ? node.name : node.title
+            }),
+            /*#__PURE__*/ jsx(VisuallyHidden, {
+                children: formatMessage({
+                    id: getTrad('nav.folder.dragging'),
+                    defaultMessage: 'Dragging {name}'
+                }, {
+                    name
+                })
+            })
+        ]
+    });
+};
+
+export { RowOverlay, SortableTreeRow };
+//# sourceMappingURL=SortableTreeRow.mjs.map

package/dist/admin/components/ContentTypeBuilderNav/components/FolderNav/SortableTreeRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTreeRow.mjs","sources":["../../../../../../admin/src/components/ContentTypeBuilderNav/components/FolderNav/SortableTreeRow.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { Box, Flex, Menu, Typography, VisuallyHidden } from '@strapi/design-system';\nimport { ChevronDown, More, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { css, styled } from 'styled-components';\n\nimport { getTrad } from '../../../../utils/getTrad';\nimport { Status } from '../../../Status';\n\nimport { FolderNameField } from './FolderNameField';\n\nimport type { SectionKey } from '../../../DataManager/utils/contentStructure';\nimport type { FolderNode } from '../../lib/buildFolderTree';\nimport type { FlatItem } from '../../lib/flatModel';\n\n/**\n * The drop-position indicator is absolutely positioned so that it does not displace\n * a row and cause cyclical layout shifts.\n * It is justified to the right edge of the row and its width is based on the\n * depth of the destination it indicates.\n */\nconst DropIndicator = styled.span<{ $edge: 'top' | 'bottom'; $indentDepth: number }>`\n  position: absolute;\n  left: ${({ theme, $indentDepth }) => `calc(${$indentDepth} * ${theme.spaces[6]})`};\n  right: 0;\n  ${({ $edge }) => ($edge === 'top' ? 'top: 0;' : 'bottom: 0;')}\n  transform: ${({ $edge }) => ($edge === 'top' ? 'translateY(-1px)' : 'translateY(1px)')};\n\n  height: 2px;\n  background-color: ${({ theme }) => theme.colors.primary600};\n  border-radius: 2px;\n  pointer-events: none;\n  z-index: 2;\n\n  &::before {\n    content: '';\n\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ${({ theme }) => theme.colors.primary600};\n    transform: translate(-50%, -50%);\n  }\n`;\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n\n  position: relative;\n  z-index: 1;\n`;\n\nconst Row = styled(Flex)<{ $depth: number; $dropTarget?: boolean; $dragging?: boolean }>`\n  position: relative;\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-block: ${({ theme }) => theme.spaces[2]};\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-left: ${({ theme, $depth }) =>\n    `calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};\n\n  background-color: ${({ $dropTarget, theme }) =>\n    $dropTarget ? theme.colors.primary100 : 'transparent'};\n  outline: ${({ $dropTarget, theme }) =>\n    $dropTarget ? `1px solid ${theme.colors.primary600}` : 'none'};\n  outline-offset: -1px;\n\n  ${MenuTrigger} {\n    opacity: 0;\n    transition: opacity 0.1s ease-out;\n  }\n\n  /*\n   * This selects for the opened Radix popover menu so that the hover state doesn't disappear while it is open.\n   */\n  &:hover,\n  &:has([data-state='open']) {\n    background-color: ${({ $dropTarget, theme }) =>\n      $dropTarget ? theme.colors.primary100 : theme.colors.neutral100};\n  }\n\n  &:hover ${MenuTrigger}, &:focus-within ${MenuTrigger}, &:has([data-state='open']) ${MenuTrigger} {\n    opacity: 1;\n  }\n\n  ${({ $dragging }) =>\n    $dragging &&\n    css`\n      & > *:not(${DropIndicator}) {\n        opacity: 0.4;\n      }\n    `}\n`;\n\nconst GrabArea = styled.button`\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: ${({ theme }) => theme.spaces[2]};\n\n  height: 100%;\n  padding: 0;\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n\n  /* The interactive area must be larger than the contents-driven hit area. */\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst ContentTypeLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: ${({ theme }) => theme.spaces[2]};\n\n  height: 100%;\n  text-decoration: none;\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active {\n    color: ${({ theme }) => theme.colors.primary700};\n    font-weight: 500;\n  }\n\n  /* The interactive area must be larger than the contents-driven hit area. */\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Glyph = styled.span`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 16px;\n`;\n\nconst Bullet = styled(Glyph)`\n  &::before {\n    content: '';\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background-color: currentColor;\n  }\n`;\n\nconst Label = styled(Typography)`\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport interface TreeHandlers {\n  section: SectionKey;\n  canEdit: boolean;\n  /** Whether a folder can be collapsed / uncollapsed. */\n  canToggle?: boolean;\n  editingId: string | null;\n  isCollapsed: (id: string) => boolean;\n  onToggle: (id: string) => void;\n  onBeginRename: (id: string) => void;\n  onSubmitRename: (id: string, name: string) => void;\n  onCancelRename: () => void;\n  onDeleteFolder: (node: FolderNode) => void;\n  onDeleteFolderAndContent: (node: FolderNode) => void;\n  validateFolderName: (params: {\n    name: string;\n    parentId: string | null;\n    excludeId?: string;\n  }) => string | undefined;\n  dropTargetId: string | null;\n  dropLine: { anchorId: string; edge: 'top' | 'bottom'; depth: number } | null;\n}\n\nexport const SortableTreeRow = ({ item, handlers }: { item: FlatItem; handlers: TreeHandlers }) => {\n  const { formatMessage } = useIntl();\n\n  const renameSelectedRef = useRef(false); // Tracks when the \"rename\" option is clicked in the popover so Radix's default \"restore focus to menu trigger on menu close\" behavior doesn't compete with our desired focus on the inline input.\n\n  const { listeners, setNodeRef, isDragging } = useSortable({\n    animateLayoutChanges: () => false,\n    disabled: !handlers.canEdit,\n    id: item.id,\n  });\n\n  const dragListeners = handlers.canEdit ? listeners : undefined;\n\n  const depth = item.depth;\n  const node = item.node;\n\n  const canToggle = Boolean(handlers.canToggle);\n\n  const dropLine =\n    handlers.dropLine && handlers.dropLine.anchorId === item.id ? handlers.dropLine : null;\n\n  if (node.type === 'folder' && handlers.canEdit && handlers.editingId === node.id) {\n    const validateFolderName = (name: string) => {\n      return handlers.validateFolderName({ name, parentId: node.parentId, excludeId: node.id });\n    };\n\n    const onFolderNameSubmit = (name: string) => {\n      if (name === node.name) {\n        handlers.onCancelRename();\n        return;\n      }\n\n      handlers.onSubmitRename(node.id, name);\n    };\n\n    return (\n      <div ref={setNodeRef}>\n        <FolderNameField\n          onCancel={handlers.onCancelRename}\n          onSubmit={onFolderNameSubmit}\n          validate={validateFolderName}\n          defaultValue={node.name}\n          depth={item.depth}\n        />\n      </div>\n    );\n  }\n\n  const trailingContents = (\n    <Flex\n      gap={1}\n      alignItems=\"center\"\n      onPointerDown={(e) => {\n        // Prevent propagation when the interactive elements container is clicked as not to compete with the row's drag detection.\n        e.stopPropagation();\n      }}\n    >\n      {node.type === 'contentType' && (\n        <Box tag=\"span\" textAlign=\"center\" width=\"24px\">\n          <Status status={node.status} />\n        </Box>\n      )}\n      {node.type === 'folder' && handlers.canEdit && (\n        <Menu.Root>\n          <MenuTrigger\n            variant=\"ghost\"\n            endIcon={null}\n            size=\"S\"\n            aria-label={formatMessage(\n              { id: getTrad('nav.folder.actions-label'), defaultMessage: 'Actions for {name}' },\n              { name: node.name }\n            )}\n          >\n            <More aria-hidden focusable={false} />\n          </MenuTrigger>\n          <Menu.Content\n            zIndex={2}\n            onCloseAutoFocus={(event) => {\n              if (renameSelectedRef.current) {\n                event.preventDefault();\n              }\n\n              renameSelectedRef.current = false;\n            }}\n          >\n            <Menu.Item\n              onSelect={() => {\n                renameSelectedRef.current = true;\n                handlers.onBeginRename(node.id);\n              }}\n              startIcon={<Pencil />}\n            >\n              {formatMessage({ id: getTrad('nav.folder.rename'), defaultMessage: 'Rename' })}\n            </Menu.Item>\n\n            <Menu.Separator />\n            <Menu.Item\n              onSelect={() => handlers.onDeleteFolder(node)}\n              startIcon={<Trash />}\n              variant=\"danger\"\n            >\n              {formatMessage({ id: getTrad('nav.folder.delete'), defaultMessage: 'Delete folder' })}\n            </Menu.Item>\n\n            {node.children.length > 0 && (\n              <Menu.Item\n                onSelect={() => handlers.onDeleteFolderAndContent(node)}\n                startIcon={<Trash />}\n              >\n                {formatMessage({\n                  id: getTrad('nav.folder.delete-with-content'),\n                  defaultMessage: 'Delete folder and contents',\n                })}\n              </Menu.Item>\n            )}\n          </Menu.Content>\n        </Menu.Root>\n      )}\n    </Flex>\n  );\n\n  return (\n    <Row\n      ref={setNodeRef}\n      {...dragListeners}\n      alignItems=\"center\"\n      $dropTarget={handlers.dropTargetId === item.id}\n      $dragging={isDragging}\n      $depth={depth}\n    >\n      {node.type === 'folder' ? (\n        <GrabArea\n          aria-expanded={canToggle ? !handlers.isCollapsed(node.id) : undefined}\n          onClick={canToggle ? () => handlers.onToggle(node.id) : undefined}\n          style={canToggle ? undefined : { cursor: 'default' }}\n          type={canToggle ? 'button' : undefined}\n          as={canToggle ? 'button' : 'span'}\n        >\n          <Glyph aria-hidden>\n            <ChevronDown\n              fill=\"neutral500\"\n              style={{\n                transform: handlers.isCollapsed(node.id) ? 'rotate(-90deg)' : 'none',\n                transition: 'transform 0.2s',\n              }}\n            />\n          </Glyph>\n          <Label tag=\"span\" textColor=\"neutral800\" fontWeight=\"semiBold\">\n            {node.name}\n          </Label>\n        </GrabArea>\n      ) : (\n        <ContentTypeLink to={node.to} draggable={false}>\n          <Bullet aria-hidden />\n          <Label tag=\"span\">{node.title}</Label>\n        </ContentTypeLink>\n      )}\n      {trailingContents}\n      {dropLine && (\n        <DropIndicator $indentDepth={dropLine.depth} $edge={dropLine.edge} aria-hidden />\n      )}\n    </Row>\n  );\n};\n\n/**\n * This is rendered in place of the actual row when it is being dragged.\n */\nexport const RowOverlay = ({ item }: { item: FlatItem }) => {\n  const { formatMessage } = useIntl();\n  const node = item.node;\n  const name = node.type === 'folder' ? node.name : node.title;\n\n  return (\n    <Row\n      style={{ cursor: 'grabbing' }}\n      background=\"neutral0\"\n      shadow=\"filterShadow\"\n      alignItems=\"center\"\n      $depth={0}\n    >\n      <Glyph aria-hidden>\n        {node.type === 'folder' ? <ChevronDown fill=\"neutral500\" /> : <Bullet />}\n      </Glyph>\n      <Label tag=\"span\" fontWeight={node.type === 'folder' ? 'semiBold' : 'regular'}>\n        {node.type === 'folder' ? node.name : node.title}\n      </Label>\n      <VisuallyHidden>\n        {formatMessage(\n          { id: getTrad('nav.folder.dragging'), defaultMessage: 'Dragging {name}' },\n          { name }\n        )}\n      </VisuallyHidden>\n    </Row>\n  );\n};\n"],"names":["DropIndicator","styled","span","theme","$indentDepth","spaces","$edge","colors","primary600","MenuTrigger","Menu","Trigger","Row","Flex","borderRadius","$depth","$dropTarget","primary100","neutral100","$dragging","css","GrabArea","button","ContentTypeLink","NavLink","neutral800","primary700","Glyph","Bullet","Label","Typography","SortableTreeRow","item","handlers","formatMessage","useIntl","renameSelectedRef","useRef","listeners","setNodeRef","isDragging","useSortable","animateLayoutChanges","disabled","canEdit","id","dragListeners","undefined","depth","node","canToggle","Boolean","dropLine","anchorId","type","editingId","validateFolderName","name","parentId","excludeId","onFolderNameSubmit","onCancelRename","onSubmitRename","_jsx","div","ref","FolderNameField","onCancel","onSubmit","validate","defaultValue","trailingContents","_jsxs","gap","alignItems","onPointerDown","e","stopPropagation","Box","tag","textAlign","width","Status","status","Root","variant","endIcon","size","aria-label","getTrad","defaultMessage","More","aria-hidden","focusable","Content","zIndex","onCloseAutoFocus","event","current","preventDefault","Item","onSelect","onBeginRename","startIcon","Pencil","Separator","onDeleteFolder","Trash","children","length","onDeleteFolderAndContent","dropTargetId","aria-expanded","isCollapsed","onClick","onToggle","style","cursor","as","ChevronDown","fill","transform","transition","textColor","fontWeight","to","draggable","title","edge","RowOverlay","background","shadow","VisuallyHidden"],"mappings":"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"}

package/dist/admin/components/ContentTypeBuilderNav/hooks/useContentTypeBuilderMenu.js

@@ -0,0 +1,172 @@
+'use strict';
+
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var upperFirst = require('lodash/upperFirst');
+var reactIntl = require('react-intl');
+var pluginId = require('../../../pluginId.js');
+var getTrad = require('../../../utils/getTrad.js');
+require('react/jsx-runtime');
+require('../../CTBSession/sessionContext.js');
+var useCTBTracking = require('../../CTBSession/useCTBTracking.js');
+var useDataManager = require('../../DataManager/useDataManager.js');
+var useFormModalNavigation = require('../../FormModalNavigation/useFormModalNavigation.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
+
+function useContentTypeBuilderMenu() {
+    const { componentsGroupedByCategory, isInDevelopmentMode, sortedContentTypesList } = useDataManager.useDataManager();
+    const { onOpenModalCreateSchema } = useFormModalNavigation.useFormModalNavigation();
+    const { locale, formatMessage } = reactIntl.useIntl();
+    const { trackUsage } = useCTBTracking.useCTBTracking();
+    const [searchValue, setSearchValue] = React.useState('');
+    const { contains } = designSystem.useFilter(locale, {
+        sensitivity: 'base'
+    });
+    const formatter = designSystem.useCollator(locale, {
+        sensitivity: 'base'
+    });
+    const handleClickOpenModalCreateCollectionType = ()=>{
+        trackUsage(`willCreateContentType`);
+        onOpenModalCreateSchema({
+            forTarget: 'contentType',
+            modalType: 'contentType',
+            kind: 'collectionType',
+            actionType: 'create'
+        });
+    };
+    const handleClickOpenModalCreateSingleType = ()=>{
+        trackUsage(`willCreateSingleType`);
+        onOpenModalCreateSchema({
+            forTarget: 'contentType',
+            modalType: 'contentType',
+            actionType: 'create',
+            kind: 'singleType'
+        });
+    };
+    const handleClickOpenModalCreateComponent = ()=>{
+        trackUsage('willCreateComponent');
+        onOpenModalCreateSchema({
+            modalType: 'component',
+            kind: 'collectionType',
+            forTarget: 'component',
+            actionType: 'create'
+        });
+    };
+    const sortByTitle = (a, b)=>{
+        return formatter.compare(a.title, b.title);
+    };
+    const componentsData = Object.entries(componentsGroupedByCategory).map(([category, components])=>{
+        const categoryLinks = components.map((component)=>({
+                to: `/plugins/${pluginId.pluginId}/component-categories/${category}/${component.uid}`,
+                title: component.info.displayName,
+                status: component.status,
+                name: component.uid
+            })).sort(sortByTitle);
+        return {
+            title: upperFirst__default.default(category),
+            links: categoryLinks,
+            name: category
+        };
+    }).sort(sortByTitle);
+    const displayedContentTypes = sortedContentTypesList.filter((obj)=>obj.visible).map((info)=>({
+            status: info.status,
+            title: info.title,
+            kind: info.kind,
+            name: info.name,
+            to: info.to
+        }));
+    const toContentTypeLink = (contentType)=>({
+            status: contentType.status,
+            title: contentType.title,
+            uid: contentType.name,
+            to: contentType.to
+        });
+    const folderSections = [
+        {
+            section: 'collectionTypes',
+            sectionId: 'models',
+            title: formatMessage({
+                id: getTrad.getTrad('menu.section.models.name'),
+                defaultMessage: 'Collection Types'
+            }),
+            links: displayedContentTypes.filter((contentType)=>contentType.kind === 'collectionType').map(toContentTypeLink),
+            createTypeLabel: formatMessage({
+                id: getTrad.getTrad('nav.action.new-collection-type'),
+                defaultMessage: 'New Collection-Type'
+            }),
+            onCreateContentType: handleClickOpenModalCreateCollectionType
+        },
+        {
+            section: 'singleTypes',
+            sectionId: 'singleTypes',
+            title: formatMessage({
+                id: getTrad.getTrad('menu.section.single-types.name'),
+                defaultMessage: 'Single Types'
+            }),
+            links: displayedContentTypes.filter((contentType)=>contentType.kind === 'singleType').map(toContentTypeLink),
+            createTypeLabel: formatMessage({
+                id: getTrad.getTrad('nav.action.new-single-type'),
+                defaultMessage: 'New Single-Type'
+            }),
+            onCreateContentType: handleClickOpenModalCreateSingleType
+        }
+    ];
+    const flatSections = [
+        {
+            name: 'components',
+            title: {
+                id: `${getTrad.getTrad('menu.section.components.name')}`,
+                defaultMessage: 'Components'
+            },
+            customLink: isInDevelopmentMode ? {
+                id: `${getTrad.getTrad('button.component.create')}`,
+                defaultMessage: 'Create a new component',
+                onClick: handleClickOpenModalCreateComponent
+            } : undefined,
+            links: componentsData
+        }
+    ].map((section)=>{
+        const hasChild = section.links.some((l)=>'links' in l && Array.isArray(l.links));
+        if (hasChild) {
+            let filteredLinksCount = 0;
+            const links = section.links.reduce((acc, link)=>{
+                const filteredLinks = 'links' in link ? link.links.filter((link)=>contains(link.title, searchValue)) : [];
+                if (filteredLinks.length === 0) {
+                    return acc;
+                }
+                filteredLinksCount += filteredLinks.length;
+                acc.push({
+                    ...link,
+                    links: filteredLinks.sort(sortByTitle)
+                });
+                return acc;
+            }, []);
+            return {
+                ...section,
+                linksCount: filteredLinksCount,
+                links: links
+            };
+        }
+        const filteredLinks = section.links.filter((link)=>contains(link.title, searchValue)).sort(sortByTitle);
+        return {
+            ...section,
+            linksCount: filteredLinks.length,
+            links: filteredLinks
+        };
+    });
+    return {
+        folderSections,
+        flatSections,
+        search: {
+            clear: ()=>setSearchValue(''),
+            onChange: setSearchValue,
+            value: searchValue
+        }
+    };
+}
+
+exports.useContentTypeBuilderMenu = useContentTypeBuilderMenu;
+//# sourceMappingURL=useContentTypeBuilderMenu.js.map

package/dist/admin/components/ContentTypeBuilderNav/hooks/useContentTypeBuilderMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentTypeBuilderMenu.js","sources":["../../../../../admin/src/components/ContentTypeBuilderNav/hooks/useContentTypeBuilderMenu.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { useCollator, useFilter } from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\n\nimport { pluginId } from '../../../pluginId';\nimport { getTrad } from '../../../utils/getTrad';\nimport { useCTBTracking } from '../../CTBSession/ctbSession';\nimport { useDataManager } from '../../DataManager/useDataManager';\nimport { useFormModalNavigation } from '../../FormModalNavigation/useFormModalNavigation';\n\nimport type { Status } from '../../../types';\nimport type { SectionKey } from '../../DataManager/utils/contentStructure';\nimport type { ContentTypeLink } from '../lib/buildFolderTree';\n\nexport type FolderMenuSection = {\n  onCreateContentType: () => void;\n  links: ContentTypeLink[];\n  createTypeLabel: string;\n  section: SectionKey;\n  sectionId: string;\n  title: string;\n};\n\ntype Link = {\n  name: string;\n  to: string;\n  status: Status;\n  title: string;\n};\n\ntype SubSection = {\n  name: string;\n  title: string;\n  links: Link[];\n};\n\nexport type FlatMenuSection = {\n  name: string;\n  title: {\n    id: string;\n    defaultMessage: string;\n  };\n  customLink?: {\n    id: string;\n    defaultMessage: string;\n    onClick: () => void;\n  };\n  links: Array<SubSection | Link>;\n  linksCount?: number;\n};\n\nexport function useContentTypeBuilderMenu() {\n  const { componentsGroupedByCategory, isInDevelopmentMode, sortedContentTypesList } =\n    useDataManager();\n  const { onOpenModalCreateSchema } = useFormModalNavigation();\n  const { locale, formatMessage } = useIntl();\n  const { trackUsage } = useCTBTracking();\n\n  const [searchValue, setSearchValue] = useState('');\n\n  const { contains } = useFilter(locale, {\n    sensitivity: 'base',\n  });\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const handleClickOpenModalCreateCollectionType = () => {\n    trackUsage(`willCreateContentType`);\n\n    onOpenModalCreateSchema({\n      forTarget: 'contentType',\n      modalType: 'contentType',\n      kind: 'collectionType',\n      actionType: 'create',\n    });\n  };\n\n  const handleClickOpenModalCreateSingleType = () => {\n    trackUsage(`willCreateSingleType`);\n\n    onOpenModalCreateSchema({\n      forTarget: 'contentType',\n      modalType: 'contentType',\n      actionType: 'create',\n      kind: 'singleType',\n    });\n  };\n\n  const handleClickOpenModalCreateComponent = () => {\n    trackUsage('willCreateComponent');\n\n    onOpenModalCreateSchema({\n      modalType: 'component',\n      kind: 'collectionType',\n      forTarget: 'component',\n      actionType: 'create',\n    });\n  };\n\n  const sortByTitle = (a: { title: string }, b: { title: string }) => {\n    return formatter.compare(a.title, b.title);\n  };\n\n  const componentsData = Object.entries(componentsGroupedByCategory)\n    .map(([category, components]) => {\n      const categoryLinks = components\n        .map((component) => ({\n          to: `/plugins/${pluginId}/component-categories/${category}/${component.uid}`,\n          title: component.info.displayName,\n          status: component.status,\n          name: component.uid,\n        }))\n        .sort(sortByTitle);\n\n      return {\n        title: upperFirst(category),\n        links: categoryLinks,\n        name: category,\n      };\n    })\n    .sort(sortByTitle);\n\n  const displayedContentTypes = sortedContentTypesList\n    .filter((obj) => obj.visible)\n    .map((info) => ({\n      status: info.status,\n      title: info.title,\n      kind: info.kind,\n      name: info.name,\n      to: info.to,\n    }));\n\n  const toContentTypeLink = (\n    contentType: (typeof displayedContentTypes)[number]\n  ): ContentTypeLink => ({\n    status: contentType.status,\n    title: contentType.title,\n    uid: contentType.name,\n    to: contentType.to,\n  });\n\n  const folderSections: FolderMenuSection[] = [\n    {\n      section: 'collectionTypes',\n      sectionId: 'models',\n      title: formatMessage({\n        id: getTrad('menu.section.models.name'),\n        defaultMessage: 'Collection Types',\n      }),\n      links: displayedContentTypes\n        .filter((contentType) => contentType.kind === 'collectionType')\n        .map(toContentTypeLink),\n      createTypeLabel: formatMessage({\n        id: getTrad('nav.action.new-collection-type'),\n        defaultMessage: 'New Collection-Type',\n      }),\n      onCreateContentType: handleClickOpenModalCreateCollectionType,\n    },\n    {\n      section: 'singleTypes',\n      sectionId: 'singleTypes',\n      title: formatMessage({\n        id: getTrad('menu.section.single-types.name'),\n        defaultMessage: 'Single Types',\n      }),\n      links: displayedContentTypes\n        .filter((contentType) => contentType.kind === 'singleType')\n        .map(toContentTypeLink),\n      createTypeLabel: formatMessage({\n        id: getTrad('nav.action.new-single-type'),\n        defaultMessage: 'New Single-Type',\n      }),\n      onCreateContentType: handleClickOpenModalCreateSingleType,\n    },\n  ];\n\n  const flatSections: FlatMenuSection[] = [\n    {\n      name: 'components',\n      title: {\n        id: `${getTrad('menu.section.components.name')}`,\n        defaultMessage: 'Components',\n      },\n      customLink: isInDevelopmentMode\n        ? {\n            id: `${getTrad('button.component.create')}`,\n            defaultMessage: 'Create a new component',\n            onClick: handleClickOpenModalCreateComponent,\n          }\n        : undefined,\n      links: componentsData,\n    },\n  ].map((section) => {\n    const hasChild = section.links.some((l) => 'links' in l && Array.isArray(l.links));\n\n    if (hasChild) {\n      let filteredLinksCount = 0;\n\n      const links = section.links.reduce((acc, link) => {\n        const filteredLinks =\n          'links' in link ? link.links.filter((link) => contains(link.title, searchValue)) : [];\n\n        if (filteredLinks.length === 0) {\n          return acc;\n        }\n\n        filteredLinksCount += filteredLinks.length;\n\n        acc.push({\n          ...link,\n          links: filteredLinks.sort(sortByTitle),\n        });\n\n        return acc;\n      }, [] as SubSection[]);\n\n      return {\n        ...section,\n        linksCount: filteredLinksCount,\n        links: links,\n      };\n    }\n\n    const filteredLinks = section.links\n      .filter((link) => contains(link.title, searchValue))\n      .sort(sortByTitle);\n\n    return {\n      ...section,\n      linksCount: filteredLinks.length,\n      links: filteredLinks,\n    };\n  });\n\n  return {\n    folderSections,\n    flatSections,\n    search: {\n      clear: () => setSearchValue(''),\n      onChange: setSearchValue,\n      value: searchValue,\n    },\n  };\n}\n"],"names":["useContentTypeBuilderMenu","componentsGroupedByCategory","isInDevelopmentMode","sortedContentTypesList","useDataManager","onOpenModalCreateSchema","useFormModalNavigation","locale","formatMessage","useIntl","trackUsage","useCTBTracking","searchValue","setSearchValue","useState","contains","useFilter","sensitivity","formatter","useCollator","handleClickOpenModalCreateCollectionType","forTarget","modalType","kind","actionType","handleClickOpenModalCreateSingleType","handleClickOpenModalCreateComponent","sortByTitle","a","b","compare","title","componentsData","Object","entries","map","category","components","categoryLinks","component","to","pluginId","uid","info","displayName","status","name","sort","upperFirst","links","displayedContentTypes","filter","obj","visible","toContentTypeLink","contentType","folderSections","section","sectionId","id","getTrad","defaultMessage","createTypeLabel","onCreateContentType","flatSections","customLink","onClick","undefined","hasChild","some","l","Array","isArray","filteredLinksCount","reduce","acc","link","filteredLinks","length","push","linksCount","search","clear","onChange","value"],"mappings":"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"}