@strapi/content-type-builder 5.54.0 → 5.55.0

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

@@ -0,0 +1,379 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sortable = require('@dnd-kit/sortable');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var styledComponents = require('styled-components');
+var getTrad = require('../../../../utils/getTrad.js');
+var Status = require('../../../Status.js');
+var FolderNameField = require('./FolderNameField.js');
+
+/**
+ * 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 = styledComponents.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 = styledComponents.styled(designSystem.Menu.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+
+  position: relative;
+  z-index: 1;
+`;
+const Row = styledComponents.styled(designSystem.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 && styledComponents.css`
+      & > *:not(${DropIndicator}) {
+        opacity: 0.4;
+      }
+    `}
+`;
+const GrabArea = styledComponents.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 = styledComponents.styled(reactRouterDom.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 = styledComponents.styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 16px;
+`;
+const Bullet = styledComponents.styled(Glyph)`
+  &::before {
+    content: '';
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+`;
+const Label = styledComponents.styled(designSystem.Typography)`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const SortableTreeRow = ({ item, handlers })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const renameSelectedRef = React.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 } = sortable.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__*/ jsxRuntime.jsx("div", {
+            ref: setNodeRef,
+            children: /*#__PURE__*/ jsxRuntime.jsx(FolderNameField.FolderNameField, {
+                onCancel: handlers.onCancelRename,
+                onSubmit: onFolderNameSubmit,
+                validate: validateFolderName,
+                defaultValue: node.name,
+                depth: item.depth
+            })
+        });
+    }
+    const trailingContents = /*#__PURE__*/ jsxRuntime.jsxs(designSystem.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__*/ jsxRuntime.jsx(designSystem.Box, {
+                tag: "span",
+                textAlign: "center",
+                width: "24px",
+                children: /*#__PURE__*/ jsxRuntime.jsx(Status.Status, {
+                    status: node.status
+                })
+            }),
+            node.type === 'folder' && handlers.canEdit && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(MenuTrigger, {
+                        variant: "ghost",
+                        endIcon: null,
+                        size: "S",
+                        "aria-label": formatMessage({
+                            id: getTrad.getTrad('nav.folder.actions-label'),
+                            defaultMessage: 'Actions for {name}'
+                        }, {
+                            name: node.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.More, {
+                            "aria-hidden": true,
+                            focusable: false
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Content, {
+                        zIndex: 2,
+                        onCloseAutoFocus: (event)=>{
+                            if (renameSelectedRef.current) {
+                                event.preventDefault();
+                            }
+                            renameSelectedRef.current = false;
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                onSelect: ()=>{
+                                    renameSelectedRef.current = true;
+                                    handlers.onBeginRename(node.id);
+                                },
+                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Pencil, {}),
+                                children: formatMessage({
+                                    id: getTrad.getTrad('nav.folder.rename'),
+                                    defaultMessage: 'Rename'
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                onSelect: ()=>handlers.onDeleteFolder(node),
+                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Trash, {}),
+                                variant: "danger",
+                                children: formatMessage({
+                                    id: getTrad.getTrad('nav.folder.delete'),
+                                    defaultMessage: 'Delete folder'
+                                })
+                            }),
+                            node.children.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                onSelect: ()=>handlers.onDeleteFolderAndContent(node),
+                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Trash, {}),
+                                children: formatMessage({
+                                    id: getTrad.getTrad('nav.folder.delete-with-content'),
+                                    defaultMessage: 'Delete folder and contents'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs(Row, {
+        ref: setNodeRef,
+        ...dragListeners,
+        alignItems: "center",
+        $dropTarget: handlers.dropTargetId === item.id,
+        $dragging: isDragging,
+        $depth: depth,
+        children: [
+            node.type === 'folder' ? /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(Glyph, {
+                        "aria-hidden": true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ChevronDown, {
+                            fill: "neutral500",
+                            style: {
+                                transform: handlers.isCollapsed(node.id) ? 'rotate(-90deg)' : 'none',
+                                transition: 'transform 0.2s'
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Label, {
+                        tag: "span",
+                        textColor: "neutral800",
+                        fontWeight: "semiBold",
+                        children: node.name
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxRuntime.jsxs(ContentTypeLink, {
+                to: node.to,
+                draggable: false,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(Bullet, {
+                        "aria-hidden": true
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Label, {
+                        tag: "span",
+                        children: node.title
+                    })
+                ]
+            }),
+            trailingContents,
+            dropLine && /*#__PURE__*/ jsxRuntime.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 } = reactIntl.useIntl();
+    const node = item.node;
+    const name = node.type === 'folder' ? node.name : node.title;
+    return /*#__PURE__*/ jsxRuntime.jsxs(Row, {
+        style: {
+            cursor: 'grabbing'
+        },
+        background: "neutral0",
+        shadow: "filterShadow",
+        alignItems: "center",
+        $depth: 0,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Glyph, {
+                "aria-hidden": true,
+                children: node.type === 'folder' ? /*#__PURE__*/ jsxRuntime.jsx(Icons.ChevronDown, {
+                    fill: "neutral500"
+                }) : /*#__PURE__*/ jsxRuntime.jsx(Bullet, {})
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Label, {
+                tag: "span",
+                fontWeight: node.type === 'folder' ? 'semiBold' : 'regular',
+                children: node.type === 'folder' ? node.name : node.title
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                children: formatMessage({
+                    id: getTrad.getTrad('nav.folder.dragging'),
+                    defaultMessage: 'Dragging {name}'
+                }, {
+                    name
+                })
+            })
+        ]
+    });
+};
+
+exports.RowOverlay = RowOverlay;
+exports.SortableTreeRow = SortableTreeRow;
+//# sourceMappingURL=SortableTreeRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTreeRow.js","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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"}