@strapi/content-type-builder 5.53.0 → 5.55.0

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

@@ -0,0 +1,159 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var getTrad = require('../../../../utils/getTrad.js');
+
+const Row = styledComponents.styled(designSystem.Flex)`
+  padding-right: ${({ theme })=>theme.spaces[3]};
+
+  padding-block: ${({ theme })=>theme.spaces[1]};
+
+  padding-left: ${({ theme, $depth })=>`calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};
+
+  gap: ${({ theme })=>theme.spaces[2]};
+`;
+const NameInput = styledComponents.styled.input`
+  flex: 1;
+
+  min-width: 0;
+  padding: 4px 8px;
+
+  background: ${({ theme })=>theme.colors.neutral0};
+  border: 1px solid
+    ${({ $hasError, theme })=>$hasError ? theme.colors.danger600 : theme.colors.primary600};
+  border-radius: ${({ theme })=>theme.borderRadius};
+
+  font-weight: ${({ theme })=>theme.fontWeights.semiBold};
+  color: ${({ theme })=>theme.colors.neutral800};
+  font-size: ${({ theme })=>theme.fontSizes[1]};
+
+  &:focus {
+    outline: none;
+  }
+`;
+const ErrorBox = styledComponents.styled(designSystem.Box)`
+  padding-left: ${({ theme, $depth })=>`calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]} + ${theme.spaces[4]} + ${theme.spaces[2]})`};
+`;
+const FolderNameField = ({ defaultValue, onSubmit, onCancel, validate, depth })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const errorId = React.useId();
+    const [error, setError] = React.useState(undefined);
+    const [value, setValue] = React.useState(defaultValue);
+    const inputRef = React.useRef(null);
+    const settledRef = React.useRef(false); // Guards against Enter and the subsequent blur both firing.
+    React.useEffect(()=>{
+        inputRef.current?.select();
+        inputRef.current?.focus();
+    }, []);
+    const handleChange = (next)=>{
+        setValue(next);
+        const trimmed = next.trim();
+        setError(trimmed.length > 0 ? validate?.(trimmed) : undefined);
+    };
+    const commitFromEnter = ()=>{
+        if (settledRef.current) {
+            return;
+        }
+        const trimmed = value.trim();
+        if (trimmed.length === 0) {
+            settledRef.current = true;
+            onCancel();
+            return;
+        }
+        const validationError = validate?.(trimmed);
+        if (validationError) {
+            setError(validationError);
+            inputRef.current?.focus();
+            return;
+        }
+        settledRef.current = true;
+        onSubmit(trimmed);
+    };
+    const commitFromBlur = ()=>{
+        if (settledRef.current) {
+            return;
+        }
+        settledRef.current = true;
+        const trimmed = value.trim();
+        // On blur, an empty or invalid name cancels the edit rather than trapping focus.
+        if (trimmed.length === 0 || validate?.(trimmed)) {
+            onCancel();
+            return;
+        }
+        onSubmit(trimmed);
+    };
+    const cancel = ()=>{
+        if (settledRef.current) {
+            return;
+        }
+        settledRef.current = true;
+        onCancel();
+    };
+    const onNameInputChange = (event)=>{
+        handleChange(event.target.value);
+    };
+    const onNameInputKeyDown = (event)=>{
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commitFromEnter();
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(Row, {
+                $depth: depth,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        tag: "span",
+                        width: "16px",
+                        flex: "0 0 auto",
+                        "aria-hidden": true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ChevronDown, {
+                            fill: "neutral500",
+                            style: {
+                                transform: 'rotate(-90deg)'
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(NameInput, {
+                        ref: inputRef,
+                        value: value,
+                        "aria-describedby": error ? errorId : undefined,
+                        "aria-invalid": Boolean(error),
+                        "aria-label": formatMessage({
+                            id: getTrad.getTrad('nav.folder.name-label'),
+                            defaultMessage: 'Folder name'
+                        }),
+                        onKeyDown: onNameInputKeyDown,
+                        onChange: onNameInputChange,
+                        onBlur: commitFromBlur,
+                        $hasError: Boolean(error)
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ jsxRuntime.jsx(ErrorBox, {
+                $depth: depth,
+                paddingTop: 1,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    id: errorId,
+                    variant: "pi",
+                    textColor: "danger600",
+                    children: error
+                })
+            })
+        ]
+    });
+};
+
+exports.FolderNameField = FolderNameField;
+//# sourceMappingURL=FolderNameField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderNameField.js","sources":["../../../../../../admin/src/components/ContentTypeBuilderNav/components/FolderNav/FolderNameField.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { ChevronDown } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../../../utils/getTrad';\n\nconst Row = styled(Flex)<{ $depth: number }>`\n  padding-right: ${({ theme }) => theme.spaces[3]};\n\n  padding-block: ${({ theme }) => theme.spaces[1]};\n\n  padding-left: ${({ theme, $depth }) =>\n    `calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};\n\n  gap: ${({ theme }) => theme.spaces[2]};\n`;\n\nconst NameInput = styled.input<{ $hasError: boolean }>`\n  flex: 1;\n\n  min-width: 0;\n  padding: 4px 8px;\n\n  background: ${({ theme }) => theme.colors.neutral0};\n  border: 1px solid\n    ${({ $hasError, theme }) => ($hasError ? theme.colors.danger600 : theme.colors.primary600)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n  color: ${({ theme }) => theme.colors.neutral800};\n  font-size: ${({ theme }) => theme.fontSizes[1]};\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nconst ErrorBox = styled(Box)<{ $depth: number }>`\n  padding-left: ${({ theme, $depth }) =>\n    `calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]} + ${theme.spaces[4]} + ${theme.spaces[2]})`};\n`;\n\ninterface FolderNameFieldProps {\n  defaultValue: string;\n  depth: number;\n\n  /**\n   * Function to validate a draft entry. Return an error message to block acceptance, or `undefined` if the draft is acceptable.\n   */\n  validate?: (name: string) => string | undefined;\n\n  onSubmit: (name: string) => void;\n  onCancel: () => void;\n}\n\nexport const FolderNameField = ({\n  defaultValue,\n  onSubmit,\n  onCancel,\n  validate,\n  depth,\n}: FolderNameFieldProps) => {\n  const { formatMessage } = useIntl();\n  const errorId = useId();\n\n  const [error, setError] = useState<string | undefined>(undefined);\n  const [value, setValue] = useState(defaultValue);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const settledRef = useRef(false); // Guards against Enter and the subsequent blur both firing.\n\n  useEffect(() => {\n    inputRef.current?.select();\n    inputRef.current?.focus();\n  }, []);\n\n  const handleChange = (next: string) => {\n    setValue(next);\n\n    const trimmed = next.trim();\n    setError(trimmed.length > 0 ? validate?.(trimmed) : undefined);\n  };\n\n  const commitFromEnter = () => {\n    if (settledRef.current) {\n      return;\n    }\n\n    const trimmed = value.trim();\n\n    if (trimmed.length === 0) {\n      settledRef.current = true;\n\n      onCancel();\n      return;\n    }\n\n    const validationError = validate?.(trimmed);\n\n    if (validationError) {\n      setError(validationError);\n      inputRef.current?.focus();\n\n      return;\n    }\n\n    settledRef.current = true;\n    onSubmit(trimmed);\n  };\n\n  const commitFromBlur = () => {\n    if (settledRef.current) {\n      return;\n    }\n\n    settledRef.current = true;\n    const trimmed = value.trim();\n\n    // On blur, an empty or invalid name cancels the edit rather than trapping focus.\n    if (trimmed.length === 0 || validate?.(trimmed)) {\n      onCancel();\n      return;\n    }\n\n    onSubmit(trimmed);\n  };\n\n  const cancel = () => {\n    if (settledRef.current) {\n      return;\n    }\n\n    settledRef.current = true;\n    onCancel();\n  };\n\n  const onNameInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    handleChange(event.target.value);\n  };\n\n  const onNameInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      commitFromEnter();\n    }\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      cancel();\n    }\n  };\n\n  return (\n    <Box>\n      <Row $depth={depth} alignItems=\"center\">\n        <Box tag=\"span\" width=\"16px\" flex=\"0 0 auto\" aria-hidden>\n          <ChevronDown fill=\"neutral500\" style={{ transform: 'rotate(-90deg)' }} />\n        </Box>\n        <NameInput\n          ref={inputRef}\n          value={value}\n          aria-describedby={error ? errorId : undefined}\n          aria-invalid={Boolean(error)}\n          aria-label={formatMessage({\n            id: getTrad('nav.folder.name-label'),\n            defaultMessage: 'Folder name',\n          })}\n          onKeyDown={onNameInputKeyDown}\n          onChange={onNameInputChange}\n          onBlur={commitFromBlur}\n          $hasError={Boolean(error)}\n        />\n      </Row>\n      {error && (\n        <ErrorBox $depth={depth} paddingTop={1}>\n          <Typography id={errorId} variant=\"pi\" textColor=\"danger600\">\n            {error}\n          </Typography>\n        </ErrorBox>\n      )}\n    </Box>\n  );\n};\n"],"names":["Row","styled","Flex","theme","spaces","$depth","NameInput","input","colors","neutral0","$hasError","danger600","primary600","borderRadius","fontWeights","semiBold","neutral800","fontSizes","ErrorBox","Box","FolderNameField","defaultValue","onSubmit","onCancel","validate","depth","formatMessage","useIntl","errorId","useId","error","setError","useState","undefined","value","setValue","inputRef","useRef","settledRef","useEffect","current","select","focus","handleChange","next","trimmed","trim","length","commitFromEnter","validationError","commitFromBlur","cancel","onNameInputChange","event","target","onNameInputKeyDown","key","preventDefault","_jsxs","alignItems","_jsx","tag","width","flex","aria-hidden","ChevronDown","fill","style","transform","ref","aria-describedby","aria-invalid","Boolean","aria-label","id","getTrad","defaultMessage","onKeyDown","onChange","onBlur","paddingTop","Typography","variant","textColor"],"mappings":"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"}

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

@@ -0,0 +1,157 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, useRef, useEffect } from 'react';
+import { Box, Typography, Flex } from '@strapi/design-system';
+import { ChevronDown } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTrad } from '../../../../utils/getTrad.mjs';
+
+const Row = styled(Flex)`
+  padding-right: ${({ theme })=>theme.spaces[3]};
+
+  padding-block: ${({ theme })=>theme.spaces[1]};
+
+  padding-left: ${({ theme, $depth })=>`calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};
+
+  gap: ${({ theme })=>theme.spaces[2]};
+`;
+const NameInput = styled.input`
+  flex: 1;
+
+  min-width: 0;
+  padding: 4px 8px;
+
+  background: ${({ theme })=>theme.colors.neutral0};
+  border: 1px solid
+    ${({ $hasError, theme })=>$hasError ? theme.colors.danger600 : theme.colors.primary600};
+  border-radius: ${({ theme })=>theme.borderRadius};
+
+  font-weight: ${({ theme })=>theme.fontWeights.semiBold};
+  color: ${({ theme })=>theme.colors.neutral800};
+  font-size: ${({ theme })=>theme.fontSizes[1]};
+
+  &:focus {
+    outline: none;
+  }
+`;
+const ErrorBox = styled(Box)`
+  padding-left: ${({ theme, $depth })=>`calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]} + ${theme.spaces[4]} + ${theme.spaces[2]})`};
+`;
+const FolderNameField = ({ defaultValue, onSubmit, onCancel, validate, depth })=>{
+    const { formatMessage } = useIntl();
+    const errorId = useId();
+    const [error, setError] = useState(undefined);
+    const [value, setValue] = useState(defaultValue);
+    const inputRef = useRef(null);
+    const settledRef = useRef(false); // Guards against Enter and the subsequent blur both firing.
+    useEffect(()=>{
+        inputRef.current?.select();
+        inputRef.current?.focus();
+    }, []);
+    const handleChange = (next)=>{
+        setValue(next);
+        const trimmed = next.trim();
+        setError(trimmed.length > 0 ? validate?.(trimmed) : undefined);
+    };
+    const commitFromEnter = ()=>{
+        if (settledRef.current) {
+            return;
+        }
+        const trimmed = value.trim();
+        if (trimmed.length === 0) {
+            settledRef.current = true;
+            onCancel();
+            return;
+        }
+        const validationError = validate?.(trimmed);
+        if (validationError) {
+            setError(validationError);
+            inputRef.current?.focus();
+            return;
+        }
+        settledRef.current = true;
+        onSubmit(trimmed);
+    };
+    const commitFromBlur = ()=>{
+        if (settledRef.current) {
+            return;
+        }
+        settledRef.current = true;
+        const trimmed = value.trim();
+        // On blur, an empty or invalid name cancels the edit rather than trapping focus.
+        if (trimmed.length === 0 || validate?.(trimmed)) {
+            onCancel();
+            return;
+        }
+        onSubmit(trimmed);
+    };
+    const cancel = ()=>{
+        if (settledRef.current) {
+            return;
+        }
+        settledRef.current = true;
+        onCancel();
+    };
+    const onNameInputChange = (event)=>{
+        handleChange(event.target.value);
+    };
+    const onNameInputKeyDown = (event)=>{
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commitFromEnter();
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+        }
+    };
+    return /*#__PURE__*/ jsxs(Box, {
+        children: [
+            /*#__PURE__*/ jsxs(Row, {
+                $depth: depth,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        tag: "span",
+                        width: "16px",
+                        flex: "0 0 auto",
+                        "aria-hidden": true,
+                        children: /*#__PURE__*/ jsx(ChevronDown, {
+                            fill: "neutral500",
+                            style: {
+                                transform: 'rotate(-90deg)'
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(NameInput, {
+                        ref: inputRef,
+                        value: value,
+                        "aria-describedby": error ? errorId : undefined,
+                        "aria-invalid": Boolean(error),
+                        "aria-label": formatMessage({
+                            id: getTrad('nav.folder.name-label'),
+                            defaultMessage: 'Folder name'
+                        }),
+                        onKeyDown: onNameInputKeyDown,
+                        onChange: onNameInputChange,
+                        onBlur: commitFromBlur,
+                        $hasError: Boolean(error)
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ jsx(ErrorBox, {
+                $depth: depth,
+                paddingTop: 1,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    id: errorId,
+                    variant: "pi",
+                    textColor: "danger600",
+                    children: error
+                })
+            })
+        ]
+    });
+};
+
+export { FolderNameField };
+//# sourceMappingURL=FolderNameField.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderNameField.mjs","sources":["../../../../../../admin/src/components/ContentTypeBuilderNav/components/FolderNav/FolderNameField.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { ChevronDown } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../../../utils/getTrad';\n\nconst Row = styled(Flex)<{ $depth: number }>`\n  padding-right: ${({ theme }) => theme.spaces[3]};\n\n  padding-block: ${({ theme }) => theme.spaces[1]};\n\n  padding-left: ${({ theme, $depth }) =>\n    `calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]})`};\n\n  gap: ${({ theme }) => theme.spaces[2]};\n`;\n\nconst NameInput = styled.input<{ $hasError: boolean }>`\n  flex: 1;\n\n  min-width: 0;\n  padding: 4px 8px;\n\n  background: ${({ theme }) => theme.colors.neutral0};\n  border: 1px solid\n    ${({ $hasError, theme }) => ($hasError ? theme.colors.danger600 : theme.colors.primary600)};\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  font-weight: ${({ theme }) => theme.fontWeights.semiBold};\n  color: ${({ theme }) => theme.colors.neutral800};\n  font-size: ${({ theme }) => theme.fontSizes[1]};\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nconst ErrorBox = styled(Box)<{ $depth: number }>`\n  padding-left: ${({ theme, $depth }) =>\n    `calc(${$depth} * ${theme.spaces[6]} + ${theme.spaces[3]} + ${theme.spaces[4]} + ${theme.spaces[2]})`};\n`;\n\ninterface FolderNameFieldProps {\n  defaultValue: string;\n  depth: number;\n\n  /**\n   * Function to validate a draft entry. Return an error message to block acceptance, or `undefined` if the draft is acceptable.\n   */\n  validate?: (name: string) => string | undefined;\n\n  onSubmit: (name: string) => void;\n  onCancel: () => void;\n}\n\nexport const FolderNameField = ({\n  defaultValue,\n  onSubmit,\n  onCancel,\n  validate,\n  depth,\n}: FolderNameFieldProps) => {\n  const { formatMessage } = useIntl();\n  const errorId = useId();\n\n  const [error, setError] = useState<string | undefined>(undefined);\n  const [value, setValue] = useState(defaultValue);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const settledRef = useRef(false); // Guards against Enter and the subsequent blur both firing.\n\n  useEffect(() => {\n    inputRef.current?.select();\n    inputRef.current?.focus();\n  }, []);\n\n  const handleChange = (next: string) => {\n    setValue(next);\n\n    const trimmed = next.trim();\n    setError(trimmed.length > 0 ? validate?.(trimmed) : undefined);\n  };\n\n  const commitFromEnter = () => {\n    if (settledRef.current) {\n      return;\n    }\n\n    const trimmed = value.trim();\n\n    if (trimmed.length === 0) {\n      settledRef.current = true;\n\n      onCancel();\n      return;\n    }\n\n    const validationError = validate?.(trimmed);\n\n    if (validationError) {\n      setError(validationError);\n      inputRef.current?.focus();\n\n      return;\n    }\n\n    settledRef.current = true;\n    onSubmit(trimmed);\n  };\n\n  const commitFromBlur = () => {\n    if (settledRef.current) {\n      return;\n    }\n\n    settledRef.current = true;\n    const trimmed = value.trim();\n\n    // On blur, an empty or invalid name cancels the edit rather than trapping focus.\n    if (trimmed.length === 0 || validate?.(trimmed)) {\n      onCancel();\n      return;\n    }\n\n    onSubmit(trimmed);\n  };\n\n  const cancel = () => {\n    if (settledRef.current) {\n      return;\n    }\n\n    settledRef.current = true;\n    onCancel();\n  };\n\n  const onNameInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    handleChange(event.target.value);\n  };\n\n  const onNameInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      commitFromEnter();\n    }\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      cancel();\n    }\n  };\n\n  return (\n    <Box>\n      <Row $depth={depth} alignItems=\"center\">\n        <Box tag=\"span\" width=\"16px\" flex=\"0 0 auto\" aria-hidden>\n          <ChevronDown fill=\"neutral500\" style={{ transform: 'rotate(-90deg)' }} />\n        </Box>\n        <NameInput\n          ref={inputRef}\n          value={value}\n          aria-describedby={error ? errorId : undefined}\n          aria-invalid={Boolean(error)}\n          aria-label={formatMessage({\n            id: getTrad('nav.folder.name-label'),\n            defaultMessage: 'Folder name',\n          })}\n          onKeyDown={onNameInputKeyDown}\n          onChange={onNameInputChange}\n          onBlur={commitFromBlur}\n          $hasError={Boolean(error)}\n        />\n      </Row>\n      {error && (\n        <ErrorBox $depth={depth} paddingTop={1}>\n          <Typography id={errorId} variant=\"pi\" textColor=\"danger600\">\n            {error}\n          </Typography>\n        </ErrorBox>\n      )}\n    </Box>\n  );\n};\n"],"names":["Row","styled","Flex","theme","spaces","$depth","NameInput","input","colors","neutral0","$hasError","danger600","primary600","borderRadius","fontWeights","semiBold","neutral800","fontSizes","ErrorBox","Box","FolderNameField","defaultValue","onSubmit","onCancel","validate","depth","formatMessage","useIntl","errorId","useId","error","setError","useState","undefined","value","setValue","inputRef","useRef","settledRef","useEffect","current","select","focus","handleChange","next","trimmed","trim","length","commitFromEnter","validationError","commitFromBlur","cancel","onNameInputChange","event","target","onNameInputKeyDown","key","preventDefault","_jsxs","alignItems","_jsx","tag","width","flex","aria-hidden","ChevronDown","fill","style","transform","ref","aria-describedby","aria-invalid","Boolean","aria-label","id","getTrad","defaultMessage","onKeyDown","onChange","onBlur","paddingTop","Typography","variant","textColor"],"mappings":"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"}

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

@@ -0,0 +1,311 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var getTrad = require('../../../../utils/getTrad.js');
+var useDataManager = require('../../../DataManager/useDataManager.js');
+var contentStructure = require('../../../DataManager/utils/contentStructure.js');
+var useFolderActions = require('../../hooks/useFolderActions.js');
+var useSortableTree = require('../../hooks/useSortableTree.js');
+var buildFolderTree = require('../../lib/buildFolderTree.js');
+var flatModel = require('../../lib/flatModel.js');
+var DeleteFolderDialog = require('./DeleteFolderDialog.js');
+var FolderNameField = require('./FolderNameField.js');
+var SortableTreeRow = require('./SortableTreeRow.js');
+
+const countContentTypes = (nodes)=>{
+    return nodes.reduce((total, node)=>{
+        if (node.type === 'folder') {
+            return total + countContentTypes(node.children);
+        }
+        return total + 1;
+    }, 0);
+};
+const EMPTY_COLLAPSED = new Set(); // Empty set to uncollapse all items while searching
+const FolderNavSection = ({ onCreateContentType, createTypeLabel, searchValue, sectionId, section, title, links })=>{
+    const { contentStructure: contentStructure$1, contentTypes, isInDevelopmentMode } = useDataManager.useDataManager();
+    const { formatMessage, locale } = reactIntl.useIntl();
+    const actions = useFolderActions.useFolderActions();
+    const [collapsed, setCollapsed] = React.useState(new Set());
+    const [editingId, setEditingId] = React.useState(null);
+    const [isDrafting, setIsDrafting] = React.useState(false);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const { contains } = designSystem.useFilter(locale, {
+        sensitivity: 'base'
+    });
+    const formatter = designSystem.useCollator(locale, {
+        sensitivity: 'base'
+    });
+    const sectionData = contentStructure$1.sections[section];
+    const searchActive = searchValue.trim().length > 0;
+    const canEdit = Boolean(isInDevelopmentMode);
+    const deletableContentTypeUids = React.useMemo(()=>{
+        return new Set(Object.values(contentTypes).filter((contentType)=>contentType.uid.startsWith('api::') && !contentType.plugin).map((contentType)=>contentType.uid));
+    }, [
+        contentTypes
+    ]);
+    const tree = React.useMemo(()=>{
+        return buildFolderTree.buildSectionTree(sectionData, links, (a, b)=>formatter.compare(a, b));
+    }, [
+        sectionData,
+        links,
+        formatter
+    ]);
+    const effectiveCollapsed = searchActive ? EMPTY_COLLAPSED : collapsed;
+    const visibleTree = React.useMemo(()=>{
+        return searchActive ? buildFolderTree.filterTree(tree, (text)=>contains(text, searchValue)) : tree;
+    }, [
+        searchActive,
+        tree,
+        contains,
+        searchValue
+    ]);
+    const flatItems = React.useMemo(()=>{
+        return flatModel.flattenSortableTree(visibleTree, effectiveCollapsed);
+    }, [
+        visibleTree,
+        effectiveCollapsed
+    ]);
+    // This hook supplies the CTB contentStructure dnd engine.
+    const dnd = useSortableTree.useSortableTree({
+        disabled: !canEdit || searchActive,
+        collapsed: effectiveCollapsed,
+        items: flatItems,
+        canDrop: (activeNode, target)=>{
+            if (activeNode.type !== 'folder') {
+                return true;
+            }
+            const parentId = target.kind === 'nest' ? target.folderId : target.parentId;
+            if (contentStructure.isFolderNameTakenBySibling(sectionData.groups, parentId, activeNode.name, activeNode.id)) {
+                return false;
+            }
+            return true;
+        },
+        onDrop: (activeNode, target)=>{
+            const parentId = target.kind === 'nest' ? target.folderId : target.parentId;
+            const index = target.kind === 'nest' ? 0 : target.index;
+            if (activeNode.type === 'folder') {
+                actions.moveFolder({
+                    newParentId: parentId,
+                    id: activeNode.id,
+                    section,
+                    index
+                });
+                return;
+            }
+            actions.assignContentTypeToFolder({
+                targetGroupId: parentId,
+                uid: activeNode.uid,
+                section,
+                index
+            });
+        },
+        onExpandFolder: (folderId)=>setCollapsed((prev)=>{
+                const next = new Set(prev);
+                next.delete(folderId);
+                return next;
+            })
+    });
+    const confirmDelete = ()=>{
+        if (!deleteTarget) {
+            return;
+        }
+        if (deleteTarget.mode === 'withContent') {
+            actions.deleteFolderAndContent({
+                contentTypeUids: buildFolderTree.collectSubtreeContentTypeUids(sectionData, deleteTarget.node.id).filter((uid)=>deletableContentTypeUids.has(uid)),
+                id: deleteTarget.node.id,
+                section
+            });
+        } else {
+            if (contentStructure.getDeleteFolderOnlySiblingNameCollisions(sectionData.groups, deleteTarget.node.id).length > 0) {
+                return;
+            }
+            actions.deleteFolderOnly({
+                section,
+                id: deleteTarget.node.id
+            });
+        }
+        setDeleteTarget(null);
+    };
+    const validateFolderName = ({ excludeId, parentId, name })=>{
+        const folderNameTaken = contentStructure.isFolderNameTakenBySibling(sectionData.groups, parentId, name, excludeId);
+        if (folderNameTaken) {
+            return formatMessage({
+                defaultMessage: 'A folder with this name already exists in this location',
+                id: getTrad.getTrad('nav.folder.name.duplicate')
+            });
+        }
+        return undefined;
+    };
+    const handlers = {
+        dropTargetId: dnd.dropTargetId,
+        dropLine: dnd.dropLine,
+        validateFolderName,
+        editingId,
+        section,
+        canEdit,
+        isCollapsed: (id)=>{
+            return effectiveCollapsed.has(id);
+        },
+        // Search forces the tree open; a collapse toggle then can't take effect, so don't present one.
+        canToggle: !searchActive,
+        onToggle: (id)=>{
+            setCollapsed((prev)=>{
+                const next = new Set(prev);
+                if (next.has(id)) {
+                    next.delete(id);
+                } else {
+                    next.add(id);
+                }
+                return next;
+            });
+        },
+        // Deferred past the closing menu's focus restoration so the inline input isn't blurred (and consequently auto-committed) the instant it mounts.
+        onBeginRename: (id)=>{
+            setTimeout(()=>{
+                setIsDrafting(false);
+                setEditingId(id);
+            }, 0);
+        },
+        onSubmitRename: (id, name)=>{
+            actions.renameFolder({
+                section,
+                id,
+                name
+            });
+            setEditingId(null);
+        },
+        onCancelRename: ()=>{
+            setEditingId(null);
+        },
+        onDeleteFolder: (node)=>{
+            setDeleteTarget({
+                node,
+                mode: 'only'
+            });
+        },
+        onDeleteFolderAndContent: (node)=>{
+            setDeleteTarget({
+                node,
+                mode: 'withContent'
+            });
+        }
+    };
+    const sectionLink = {
+        label: createTypeLabel,
+        // The "New folder" option mounts the folder name input input and focuses it. Without this flag enabled, closing the menu would restore focus to the menu icon trigger.
+        suppressFocusCaptureOnMenuClose: true,
+        menu: [
+            {
+                label: createTypeLabel,
+                onSelect: onCreateContentType,
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.File, {})
+            },
+            {
+                label: formatMessage({
+                    id: getTrad.getTrad('nav.action.new-folder'),
+                    defaultMessage: 'New folder'
+                }),
+                onSelect: ()=>{
+                    setEditingId(null);
+                    setTimeout(()=>setIsDrafting(true), 0);
+                },
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Folder, {})
+            }
+        ]
+    };
+    const rows = // No extra horizontal padding here — the rows sit directly in the section's
+    // list so their left edge lines up with the components SubSections.
+    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+        children: [
+            canEdit && isDrafting && /*#__PURE__*/ jsxRuntime.jsx(FolderNameField.FolderNameField, {
+                depth: 0,
+                defaultValue: formatMessage({
+                    id: getTrad.getTrad('nav.folder.default-name'),
+                    defaultMessage: 'New folder'
+                }),
+                validate: (name)=>{
+                    return validateFolderName({
+                        name,
+                        parentId: null
+                    });
+                },
+                onSubmit: (name)=>{
+                    actions.createFolder({
+                        section,
+                        name,
+                        parentId: null
+                    });
+                    setIsDrafting(false);
+                },
+                onCancel: ()=>{
+                    setIsDrafting(false);
+                }
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core.DndContext, {
+                collisionDetection: dnd.collisionDetection,
+                onDragCancel: dnd.onDragCancel,
+                onDragStart: dnd.onDragStart,
+                onDragMove: dnd.onDragMove,
+                onDragEnd: dnd.onDragEnd,
+                sensors: dnd.sensors,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(sortable.SortableContext, {
+                        items: dnd.renderedItems.map((item)=>item.id),
+                        strategy: dnd.sortingStrategy,
+                        children: dnd.renderedItems.map((item)=>{
+                            return /*#__PURE__*/ jsxRuntime.jsx(SortableTreeRow.SortableTreeRow, {
+                                item: item,
+                                handlers: handlers
+                            }, item.id);
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core.DragOverlay, {
+                        dropAnimation: null,
+                        children: dnd.activeItem ? /*#__PURE__*/ jsxRuntime.jsx(SortableTreeRow.RowOverlay, {
+                            item: dnd.activeItem
+                        }) : null
+                    })
+                ]
+            })
+        ]
+    }, "section-rows");
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Section, {
+                badgeLabel: countContentTypes(visibleTree).toString(),
+                link: canEdit ? sectionLink : undefined,
+                sectionId: sectionId,
+                label: title,
+                children: [
+                    rows
+                ]
+            }),
+            deleteTarget && /*#__PURE__*/ jsxRuntime.jsx(DeleteFolderDialog.DeleteFolderDialog, {
+                counts: {
+                    ...buildFolderTree.countSubtree(sectionData, deleteTarget.node.id, deletableContentTypeUids),
+                    preservedContentTypes: buildFolderTree.collectSubtreeContentTypeUids(sectionData, deleteTarget.node.id).filter((uid)=>!deletableContentTypeUids.has(uid)).length
+                },
+                conflictingFolderNames: deleteTarget.mode === 'only' ? contentStructure.getDeleteFolderOnlySiblingNameCollisions(sectionData.groups, deleteTarget.node.id) : [],
+                folderName: deleteTarget.node.name,
+                onConfirm: confirmDelete,
+                mode: deleteTarget.mode,
+                open: true,
+                onOpenChange: (open)=>{
+                    if (!open) {
+                        setDeleteTarget(null);
+                    }
+                }
+            })
+        ]
+    });
+};
+
+exports.FolderNavSection = FolderNavSection;
+//# sourceMappingURL=FolderNavSection.js.map