@strapi/content-manager 0.0.0-next.3116274aabb83ba9f858814329ead55ccaea244d → 0.0.0-next.32e19446d7ac2d8eaffa53da59f933ca5716d727

package/dist/admin/pages/ListView/components/TableCells/Relations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Relations.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Relations.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, Loader, useNotifyAT, Menu } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../../hooks/useDocument';\nimport { useGetRelationsQuery } from '../../../../services/relations';\nimport { getRelationLabel } from '../../../../utils/relations';\nimport { getTranslation } from '../../../../utils/translations';\n\nimport type { CellContentProps } from './CellContent';\n\n/* -------------------------------------------------------------------------------------------------\n * RelationSingle\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationSingleProps extends Pick<CellContentProps, 'mainField' | 'content'> {}\n\nconst RelationSingle = ({ mainField, content }: RelationSingleProps) => {\n  return (\n    <Typography maxWidth=\"50rem\" textColor=\"neutral800\" ellipsis>\n      {getRelationLabel(content, mainField)}\n    </Typography>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RelationMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationMultipleProps\n  extends Pick<CellContentProps, 'mainField' | 'content' | 'name' | 'rowId'> {}\n\n/**\n * TODO: fix this component – tracking issue https://strapi-inc.atlassian.net/browse/CONTENT-2184\n */\nconst RelationMultiple = ({ mainField, content, rowId, name }: RelationMultipleProps) => {\n  const { model } = useDoc();\n  const { formatMessage } = useIntl();\n  const { notifyStatus } = useNotifyAT();\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const [targetField] = name.split('.');\n\n  const { data, isLoading } = useGetRelationsQuery(\n    {\n      model,\n      id: rowId,\n      targetField,\n    },\n    {\n      skip: !isOpen,\n      refetchOnMountOrArgChange: true,\n    }\n  );\n\n  const contentCount = Array.isArray(content) ? content.length : content.count;\n\n  React.useEffect(() => {\n    if (data) {\n      notifyStatus(\n        formatMessage({\n          id: getTranslation('DynamicTable.relation-loaded'),\n          defaultMessage: 'Relations have been loaded',\n        })\n      );\n    }\n  }, [data, formatMessage, notifyStatus]);\n\n  return (\n    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\n        <Typography style={{ cursor: 'pointer' }} textColor=\"neutral800\" fontWeight=\"regular\">\n          {contentCount > 0\n            ? formatMessage(\n                {\n                  id: 'content-manager.containers.list.items',\n                  defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}',\n                },\n                { number: contentCount }\n              )\n            : '-'}\n        </Typography>\n      </Menu.Trigger>\n      <Menu.Content>\n        {isLoading && (\n          <Menu.Item disabled>\n            <Loader small>\n              {formatMessage({\n                id: getTranslation('ListViewTable.relation-loading'),\n                defaultMessage: 'Relations are loading',\n              })}\n            </Loader>\n          </Menu.Item>\n        )}\n        {data?.results && (\n          <>\n            {data.results.map((entry) => (\n              <Menu.Item key={entry.documentId}>\n                <Typography maxWidth=\"50rem\" ellipsis>\n                  {getRelationLabel(entry, mainField)}\n                </Typography>\n              </Menu.Item>\n            ))}\n\n            {data?.pagination && data?.pagination.total > 10 && (\n              <Menu.Item\n                aria-disabled\n                aria-label={formatMessage({\n                  id: getTranslation('ListViewTable.relation-more'),\n                  defaultMessage: 'This relation contains more entities than displayed',\n                })}\n              >\n                <Typography>…</Typography>\n              </Menu.Item>\n            )}\n          </>\n        )}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { RelationSingle, RelationMultiple };\nexport type { RelationSingleProps, RelationMultipleProps };\n"],"names":["RelationSingle","mainField","content","_jsx","Typography","maxWidth","textColor","ellipsis","getRelationLabel","RelationMultiple","rowId","name","model","useDoc","formatMessage","useIntl","notifyStatus","useNotifyAT","isOpen","setIsOpen","React","useState","targetField","split","data","isLoading","useGetRelationsQuery","id","skip","refetchOnMountOrArgChange","contentCount","Array","isArray","length","count","useEffect","getTranslation","defaultMessage","_jsxs","Menu","Root","onOpenChange","Trigger","onClick","e","stopPropagation","style","cursor","fontWeight","number","Content","Item","disabled","Loader","small","results","_Fragment","map","entry","documentId","pagination","total","aria-disabled","aria-label"],"mappings":"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"}
+{"version":3,"file":"Relations.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Relations.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Typography, Loader, useNotifyAT, Menu } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../../hooks/useDocument';\nimport { useGetRelationsQuery } from '../../../../services/relations';\nimport { getRelationLabel } from '../../../../utils/relations';\nimport { getTranslation } from '../../../../utils/translations';\n\nimport type { CellContentProps } from './CellContent';\n\n/* -------------------------------------------------------------------------------------------------\n * RelationSingle\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationSingleProps extends Pick<CellContentProps, 'mainField' | 'content'> {}\n\nconst RelationSingle = ({ mainField, content }: RelationSingleProps) => {\n  return (\n    <Typography maxWidth=\"50rem\" textColor=\"neutral800\" ellipsis>\n      {getRelationLabel(content, mainField)}\n    </Typography>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RelationMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationMultipleProps\n  extends Pick<CellContentProps, 'mainField' | 'content' | 'name' | 'rowId'> {}\n\nconst RelationMultiple = ({ mainField, content, rowId, name }: RelationMultipleProps) => {\n  const { model } = useDoc();\n  const { formatMessage } = useIntl();\n  const { notifyStatus } = useNotifyAT();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [{ query }] = useQueryParams<{ plugins?: { i18n?: { locale?: string } } }>();\n  const locale = query.plugins?.i18n?.locale;\n\n  const [targetField] = name.split('.');\n\n  const { data, isLoading } = useGetRelationsQuery(\n    {\n      model,\n      id: rowId,\n      targetField,\n      params: { locale },\n    },\n    {\n      skip: !isOpen,\n      refetchOnMountOrArgChange: true,\n    }\n  );\n\n  const contentCount = Array.isArray(content) ? content.length : content.count;\n\n  React.useEffect(() => {\n    if (data) {\n      notifyStatus(\n        formatMessage({\n          id: getTranslation('DynamicTable.relation-loaded'),\n          defaultMessage: 'Relations have been loaded',\n        })\n      );\n    }\n  }, [data, formatMessage, notifyStatus]);\n\n  return (\n    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\n        <Typography style={{ cursor: 'pointer' }} textColor=\"neutral800\" fontWeight=\"regular\">\n          {contentCount > 0\n            ? formatMessage(\n                {\n                  id: 'content-manager.containers.list.items',\n                  defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}',\n                },\n                { number: contentCount }\n              )\n            : '-'}\n        </Typography>\n      </Menu.Trigger>\n      <Menu.Content>\n        {isLoading && (\n          <Menu.Item disabled>\n            <Loader small>\n              {formatMessage({\n                id: getTranslation('ListViewTable.relation-loading'),\n                defaultMessage: 'Relations are loading',\n              })}\n            </Loader>\n          </Menu.Item>\n        )}\n        {data?.results && (\n          <>\n            {data.results.map((entry) => (\n              <Menu.Item key={entry.documentId}>\n                <Typography maxWidth=\"50rem\" ellipsis>\n                  {getRelationLabel(entry, mainField)}\n                </Typography>\n              </Menu.Item>\n            ))}\n\n            {data?.pagination && data?.pagination.total > 10 && (\n              <Menu.Item\n                aria-disabled\n                aria-label={formatMessage({\n                  id: getTranslation('ListViewTable.relation-more'),\n                  defaultMessage: 'This relation contains more entities than displayed',\n                })}\n              >\n                <Typography>…</Typography>\n              </Menu.Item>\n            )}\n          </>\n        )}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { RelationSingle, RelationMultiple };\nexport type { RelationSingleProps, RelationMultipleProps };\n"],"names":["RelationSingle","mainField","content","_jsx","Typography","maxWidth","textColor","ellipsis","getRelationLabel","RelationMultiple","rowId","name","model","useDoc","formatMessage","useIntl","notifyStatus","useNotifyAT","isOpen","setIsOpen","React","useState","query","useQueryParams","locale","plugins","i18n","targetField","split","data","isLoading","useGetRelationsQuery","id","params","skip","refetchOnMountOrArgChange","contentCount","Array","isArray","length","count","useEffect","getTranslation","defaultMessage","_jsxs","Menu","Root","onOpenChange","Trigger","onClick","e","stopPropagation","style","cursor","fontWeight","number","Content","Item","disabled","Loader","small","results","_Fragment","map","entry","documentId","pagination","total","aria-disabled","aria-label"],"mappings":"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"}

package/dist/admin/pages/ListView/components/ViewSettingsMenu.js

@@ -97,13 +97,15 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
         tag: "fieldset",
         direction: "column",
         alignItems: "stretch",
-        gap: 3,
+        gap: 1,
         borderWidth: 0,
         maxHeight: '240px',
-        overflow: 'scroll',
+        padding: 1,
+        overflow: 'auto',
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 justifyContent: "space-between",
+                gap: 2,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                         tag: "legend",
@@ -134,6 +136,7 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
                         background: isActive ? 'primary100' : 'transparent',
                         hasRadius: true,
                         padding: 2,
+                        marginBottom: 1,
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
                             onCheckedChange: ()=>handleChange(header.name),
                             checked: isActive,

package/dist/admin/pages/ListView/components/ViewSettingsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSettingsMenu.js","sources":["../../../../../admin/src/pages/ListView/components/ViewSettingsMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking, useRBAC, useQueryParams } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  Popover,\n  Checkbox,\n  TextButton,\n  Typography,\n  useCollator,\n  LinkButton,\n} from '@strapi/design-system';\nimport { Cog, ListPlus } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useDocumentLayout } from '../../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../../modules/hooks';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\n\ninterface ViewSettingsMenuProps extends FieldPickerProps {}\n\nconst ViewSettingsMenu = (props: ViewSettingsMenuProps) => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []\n  );\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, unknown> }>();\n  const { formatMessage } = useIntl();\n  const {\n    allowedActions: { canConfigureView },\n  } = useRBAC(permissions);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <IconButton\n          label={formatMessage({\n            id: 'components.ViewSettings.tooltip',\n            defaultMessage: 'View Settings',\n          })}\n        >\n          <Cog />\n        </IconButton>\n      </Popover.Trigger>\n      <Popover.Content side=\"bottom\" align=\"end\" sideOffset={4}>\n        <Flex alignItems=\"stretch\" direction=\"column\" padding={3} gap={3}>\n          {canConfigureView ? (\n            <LinkButton\n              size=\"S\"\n              startIcon={<ListPlus />}\n              variant=\"secondary\"\n              tag={NavLink}\n              to={{\n                pathname: 'configurations/list',\n                search: query.plugins\n                  ? stringify({ plugins: query.plugins }, { encode: false })\n                  : '',\n              }}\n            >\n              {formatMessage({\n                id: 'app.links.configure-view',\n                defaultMessage: 'Configure the view',\n              })}\n            </LinkButton>\n          ) : null}\n          <FieldPicker {...props} />\n        </Flex>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface FieldPickerProps {\n  headers?: string[];\n  setHeaders: (headers: string[]) => void;\n  resetHeaders: () => void;\n}\n\nconst FieldPicker = ({ headers = [], resetHeaders, setHeaders }: FieldPickerProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage, locale } = useIntl();\n\n  const { schema, model } = useDoc();\n  const { list } = useDocumentLayout(model);\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const attributes = schema?.attributes ?? {};\n\n  const columns = Object.keys(attributes)\n    .filter((name) => checkIfAttributeIsDisplayable(attributes[name]))\n    .map((name) => ({\n      name,\n      label: list.metadatas[name]?.label ?? '',\n    }))\n    .sort((a, b) => formatter.compare(a.label, b.label));\n\n  const handleChange = (name: string) => {\n    trackUsage('didChangeDisplayedFields');\n\n    /**\n     * create an array of the new headers, if the new name exists it should be removed,\n     * otherwise it should be added\n     */\n    const newHeaders = headers.includes(name)\n      ? headers.filter((header) => header !== name)\n      : [...headers, name];\n\n    setHeaders(newHeaders);\n  };\n\n  const handleReset = () => {\n    resetHeaders();\n  };\n\n  return (\n    <Flex\n      tag=\"fieldset\"\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={3}\n      borderWidth={0}\n      maxHeight={'240px'}\n      overflow={'scroll'}\n    >\n      <Flex justifyContent=\"space-between\">\n        <Typography tag=\"legend\" variant=\"pi\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'containers.list.displayedFields',\n            defaultMessage: 'Displayed fields',\n          })}\n        </Typography>\n\n        <TextButton onClick={handleReset}>\n          {formatMessage({\n            id: 'app.components.Button.reset',\n            defaultMessage: 'Reset',\n          })}\n        </TextButton>\n      </Flex>\n\n      <Flex direction=\"column\" alignItems=\"stretch\">\n        {columns.map((header) => {\n          const isActive = headers.includes(header.name);\n\n          return (\n            <Flex\n              wrap=\"wrap\"\n              gap={2}\n              background={isActive ? 'primary100' : 'transparent'}\n              hasRadius\n              padding={2}\n              key={header.name}\n            >\n              <Checkbox\n                onCheckedChange={() => handleChange(header.name)}\n                checked={isActive}\n                name={header.name}\n              >\n                <Typography fontSize={1}>{header.label}</Typography>\n              </Checkbox>\n            </Flex>\n          );\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ViewSettingsMenu };\nexport type { ViewSettingsMenuProps, FieldPickerProps };\n"],"names":["ViewSettingsMenu","props","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","query","useQueryParams","formatMessage","useIntl","allowedActions","canConfigureView","useRBAC","_jsxs","Popover","Root","_jsx","Trigger","IconButton","label","id","defaultMessage","Cog","Content","side","align","sideOffset","Flex","alignItems","direction","padding","gap","LinkButton","size","startIcon","ListPlus","variant","tag","NavLink","to","pathname","search","plugins","stringify","encode","FieldPicker","headers","resetHeaders","setHeaders","trackUsage","useTracking","locale","schema","model","useDoc","list","useDocumentLayout","formatter","useCollator","sensitivity","attributes","columns","Object","keys","filter","name","checkIfAttributeIsDisplayable","map","metadatas","sort","a","b","compare","handleChange","newHeaders","includes","header","handleReset","borderWidth","maxHeight","overflow","justifyContent","Typography","fontWeight","TextButton","onClick","isActive","wrap","background","hasRadius","Checkbox","onCheckedChange","checked","fontSize"],"mappings":"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"}
+{"version":3,"file":"ViewSettingsMenu.js","sources":["../../../../../admin/src/pages/ListView/components/ViewSettingsMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking, useRBAC, useQueryParams } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  Popover,\n  Checkbox,\n  TextButton,\n  Typography,\n  useCollator,\n  LinkButton,\n} from '@strapi/design-system';\nimport { Cog, ListPlus } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useDocumentLayout } from '../../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../../modules/hooks';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\n\ninterface ViewSettingsMenuProps extends FieldPickerProps {}\n\nconst ViewSettingsMenu = (props: ViewSettingsMenuProps) => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []\n  );\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, unknown> }>();\n  const { formatMessage } = useIntl();\n  const {\n    allowedActions: { canConfigureView },\n  } = useRBAC(permissions);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <IconButton\n          label={formatMessage({\n            id: 'components.ViewSettings.tooltip',\n            defaultMessage: 'View Settings',\n          })}\n        >\n          <Cog />\n        </IconButton>\n      </Popover.Trigger>\n      <Popover.Content side=\"bottom\" align=\"end\" sideOffset={4}>\n        <Flex alignItems=\"stretch\" direction=\"column\" padding={3} gap={3}>\n          {canConfigureView ? (\n            <LinkButton\n              size=\"S\"\n              startIcon={<ListPlus />}\n              variant=\"secondary\"\n              tag={NavLink}\n              to={{\n                pathname: 'configurations/list',\n                search: query.plugins\n                  ? stringify({ plugins: query.plugins }, { encode: false })\n                  : '',\n              }}\n            >\n              {formatMessage({\n                id: 'app.links.configure-view',\n                defaultMessage: 'Configure the view',\n              })}\n            </LinkButton>\n          ) : null}\n          <FieldPicker {...props} />\n        </Flex>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface FieldPickerProps {\n  headers?: string[];\n  setHeaders: (headers: string[]) => void;\n  resetHeaders: () => void;\n}\n\nconst FieldPicker = ({ headers = [], resetHeaders, setHeaders }: FieldPickerProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage, locale } = useIntl();\n\n  const { schema, model } = useDoc();\n  const { list } = useDocumentLayout(model);\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const attributes = schema?.attributes ?? {};\n\n  const columns = Object.keys(attributes)\n    .filter((name) => checkIfAttributeIsDisplayable(attributes[name]))\n    .map((name) => ({\n      name,\n      label: list.metadatas[name]?.label ?? '',\n    }))\n    .sort((a, b) => formatter.compare(a.label, b.label));\n\n  const handleChange = (name: string) => {\n    trackUsage('didChangeDisplayedFields');\n\n    /**\n     * create an array of the new headers, if the new name exists it should be removed,\n     * otherwise it should be added\n     */\n    const newHeaders = headers.includes(name)\n      ? headers.filter((header) => header !== name)\n      : [...headers, name];\n\n    setHeaders(newHeaders);\n  };\n\n  const handleReset = () => {\n    resetHeaders();\n  };\n\n  return (\n    <Flex\n      tag=\"fieldset\"\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={1}\n      borderWidth={0}\n      maxHeight={'240px'}\n      padding={1}\n      overflow={'auto'}\n    >\n      <Flex justifyContent=\"space-between\" gap={2}>\n        <Typography tag=\"legend\" variant=\"pi\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'containers.list.displayedFields',\n            defaultMessage: 'Displayed fields',\n          })}\n        </Typography>\n\n        <TextButton onClick={handleReset}>\n          {formatMessage({\n            id: 'app.components.Button.reset',\n            defaultMessage: 'Reset',\n          })}\n        </TextButton>\n      </Flex>\n\n      <Flex direction=\"column\" alignItems=\"stretch\">\n        {columns.map((header) => {\n          const isActive = headers.includes(header.name);\n\n          return (\n            <Flex\n              wrap=\"wrap\"\n              gap={2}\n              background={isActive ? 'primary100' : 'transparent'}\n              hasRadius\n              padding={2}\n              marginBottom={1}\n              key={header.name}\n            >\n              <Checkbox\n                onCheckedChange={() => handleChange(header.name)}\n                checked={isActive}\n                name={header.name}\n              >\n                <Typography fontSize={1}>{header.label}</Typography>\n              </Checkbox>\n            </Flex>\n          );\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ViewSettingsMenu };\nexport type { ViewSettingsMenuProps, FieldPickerProps };\n"],"names":["ViewSettingsMenu","props","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","query","useQueryParams","formatMessage","useIntl","allowedActions","canConfigureView","useRBAC","_jsxs","Popover","Root","_jsx","Trigger","IconButton","label","id","defaultMessage","Cog","Content","side","align","sideOffset","Flex","alignItems","direction","padding","gap","LinkButton","size","startIcon","ListPlus","variant","tag","NavLink","to","pathname","search","plugins","stringify","encode","FieldPicker","headers","resetHeaders","setHeaders","trackUsage","useTracking","locale","schema","model","useDoc","list","useDocumentLayout","formatter","useCollator","sensitivity","attributes","columns","Object","keys","filter","name","checkIfAttributeIsDisplayable","map","metadatas","sort","a","b","compare","handleChange","newHeaders","includes","header","handleReset","borderWidth","maxHeight","overflow","justifyContent","Typography","fontWeight","TextButton","onClick","isActive","wrap","background","hasRadius","marginBottom","Checkbox","onCheckedChange","checked","fontSize"],"mappings":"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"}

package/dist/admin/pages/ListView/components/ViewSettingsMenu.mjs

@@ -95,13 +95,15 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
         tag: "fieldset",
         direction: "column",
         alignItems: "stretch",
-        gap: 3,
+        gap: 1,
         borderWidth: 0,
         maxHeight: '240px',
-        overflow: 'scroll',
+        padding: 1,
+        overflow: 'auto',
         children: [
             /*#__PURE__*/ jsxs(Flex, {
                 justifyContent: "space-between",
+                gap: 2,
                 children: [
                     /*#__PURE__*/ jsx(Typography, {
                         tag: "legend",
@@ -132,6 +134,7 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
                         background: isActive ? 'primary100' : 'transparent',
                         hasRadius: true,
                         padding: 2,
+                        marginBottom: 1,
                         children: /*#__PURE__*/ jsx(Checkbox, {
                             onCheckedChange: ()=>handleChange(header.name),
                             checked: isActive,

package/dist/admin/pages/ListView/components/ViewSettingsMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSettingsMenu.mjs","sources":["../../../../../admin/src/pages/ListView/components/ViewSettingsMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking, useRBAC, useQueryParams } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  Popover,\n  Checkbox,\n  TextButton,\n  Typography,\n  useCollator,\n  LinkButton,\n} from '@strapi/design-system';\nimport { Cog, ListPlus } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useDocumentLayout } from '../../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../../modules/hooks';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\n\ninterface ViewSettingsMenuProps extends FieldPickerProps {}\n\nconst ViewSettingsMenu = (props: ViewSettingsMenuProps) => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []\n  );\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, unknown> }>();\n  const { formatMessage } = useIntl();\n  const {\n    allowedActions: { canConfigureView },\n  } = useRBAC(permissions);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <IconButton\n          label={formatMessage({\n            id: 'components.ViewSettings.tooltip',\n            defaultMessage: 'View Settings',\n          })}\n        >\n          <Cog />\n        </IconButton>\n      </Popover.Trigger>\n      <Popover.Content side=\"bottom\" align=\"end\" sideOffset={4}>\n        <Flex alignItems=\"stretch\" direction=\"column\" padding={3} gap={3}>\n          {canConfigureView ? (\n            <LinkButton\n              size=\"S\"\n              startIcon={<ListPlus />}\n              variant=\"secondary\"\n              tag={NavLink}\n              to={{\n                pathname: 'configurations/list',\n                search: query.plugins\n                  ? stringify({ plugins: query.plugins }, { encode: false })\n                  : '',\n              }}\n            >\n              {formatMessage({\n                id: 'app.links.configure-view',\n                defaultMessage: 'Configure the view',\n              })}\n            </LinkButton>\n          ) : null}\n          <FieldPicker {...props} />\n        </Flex>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface FieldPickerProps {\n  headers?: string[];\n  setHeaders: (headers: string[]) => void;\n  resetHeaders: () => void;\n}\n\nconst FieldPicker = ({ headers = [], resetHeaders, setHeaders }: FieldPickerProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage, locale } = useIntl();\n\n  const { schema, model } = useDoc();\n  const { list } = useDocumentLayout(model);\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const attributes = schema?.attributes ?? {};\n\n  const columns = Object.keys(attributes)\n    .filter((name) => checkIfAttributeIsDisplayable(attributes[name]))\n    .map((name) => ({\n      name,\n      label: list.metadatas[name]?.label ?? '',\n    }))\n    .sort((a, b) => formatter.compare(a.label, b.label));\n\n  const handleChange = (name: string) => {\n    trackUsage('didChangeDisplayedFields');\n\n    /**\n     * create an array of the new headers, if the new name exists it should be removed,\n     * otherwise it should be added\n     */\n    const newHeaders = headers.includes(name)\n      ? headers.filter((header) => header !== name)\n      : [...headers, name];\n\n    setHeaders(newHeaders);\n  };\n\n  const handleReset = () => {\n    resetHeaders();\n  };\n\n  return (\n    <Flex\n      tag=\"fieldset\"\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={3}\n      borderWidth={0}\n      maxHeight={'240px'}\n      overflow={'scroll'}\n    >\n      <Flex justifyContent=\"space-between\">\n        <Typography tag=\"legend\" variant=\"pi\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'containers.list.displayedFields',\n            defaultMessage: 'Displayed fields',\n          })}\n        </Typography>\n\n        <TextButton onClick={handleReset}>\n          {formatMessage({\n            id: 'app.components.Button.reset',\n            defaultMessage: 'Reset',\n          })}\n        </TextButton>\n      </Flex>\n\n      <Flex direction=\"column\" alignItems=\"stretch\">\n        {columns.map((header) => {\n          const isActive = headers.includes(header.name);\n\n          return (\n            <Flex\n              wrap=\"wrap\"\n              gap={2}\n              background={isActive ? 'primary100' : 'transparent'}\n              hasRadius\n              padding={2}\n              key={header.name}\n            >\n              <Checkbox\n                onCheckedChange={() => handleChange(header.name)}\n                checked={isActive}\n                name={header.name}\n              >\n                <Typography fontSize={1}>{header.label}</Typography>\n              </Checkbox>\n            </Flex>\n          );\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ViewSettingsMenu };\nexport type { ViewSettingsMenuProps, FieldPickerProps };\n"],"names":["ViewSettingsMenu","props","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","query","useQueryParams","formatMessage","useIntl","allowedActions","canConfigureView","useRBAC","_jsxs","Popover","Root","_jsx","Trigger","IconButton","label","id","defaultMessage","Cog","Content","side","align","sideOffset","Flex","alignItems","direction","padding","gap","LinkButton","size","startIcon","ListPlus","variant","tag","NavLink","to","pathname","search","plugins","stringify","encode","FieldPicker","headers","resetHeaders","setHeaders","trackUsage","useTracking","locale","schema","model","useDoc","list","useDocumentLayout","formatter","useCollator","sensitivity","attributes","columns","Object","keys","filter","name","checkIfAttributeIsDisplayable","map","metadatas","sort","a","b","compare","handleChange","newHeaders","includes","header","handleReset","borderWidth","maxHeight","overflow","justifyContent","Typography","fontWeight","TextButton","onClick","isActive","wrap","background","hasRadius","Checkbox","onCheckedChange","checked","fontSize"],"mappings":"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"}
+{"version":3,"file":"ViewSettingsMenu.mjs","sources":["../../../../../admin/src/pages/ListView/components/ViewSettingsMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking, useRBAC, useQueryParams } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  Popover,\n  Checkbox,\n  TextButton,\n  Typography,\n  useCollator,\n  LinkButton,\n} from '@strapi/design-system';\nimport { Cog, ListPlus } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useDocumentLayout } from '../../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../../modules/hooks';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\n\ninterface ViewSettingsMenuProps extends FieldPickerProps {}\n\nconst ViewSettingsMenu = (props: ViewSettingsMenuProps) => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []\n  );\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, unknown> }>();\n  const { formatMessage } = useIntl();\n  const {\n    allowedActions: { canConfigureView },\n  } = useRBAC(permissions);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <IconButton\n          label={formatMessage({\n            id: 'components.ViewSettings.tooltip',\n            defaultMessage: 'View Settings',\n          })}\n        >\n          <Cog />\n        </IconButton>\n      </Popover.Trigger>\n      <Popover.Content side=\"bottom\" align=\"end\" sideOffset={4}>\n        <Flex alignItems=\"stretch\" direction=\"column\" padding={3} gap={3}>\n          {canConfigureView ? (\n            <LinkButton\n              size=\"S\"\n              startIcon={<ListPlus />}\n              variant=\"secondary\"\n              tag={NavLink}\n              to={{\n                pathname: 'configurations/list',\n                search: query.plugins\n                  ? stringify({ plugins: query.plugins }, { encode: false })\n                  : '',\n              }}\n            >\n              {formatMessage({\n                id: 'app.links.configure-view',\n                defaultMessage: 'Configure the view',\n              })}\n            </LinkButton>\n          ) : null}\n          <FieldPicker {...props} />\n        </Flex>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface FieldPickerProps {\n  headers?: string[];\n  setHeaders: (headers: string[]) => void;\n  resetHeaders: () => void;\n}\n\nconst FieldPicker = ({ headers = [], resetHeaders, setHeaders }: FieldPickerProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage, locale } = useIntl();\n\n  const { schema, model } = useDoc();\n  const { list } = useDocumentLayout(model);\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const attributes = schema?.attributes ?? {};\n\n  const columns = Object.keys(attributes)\n    .filter((name) => checkIfAttributeIsDisplayable(attributes[name]))\n    .map((name) => ({\n      name,\n      label: list.metadatas[name]?.label ?? '',\n    }))\n    .sort((a, b) => formatter.compare(a.label, b.label));\n\n  const handleChange = (name: string) => {\n    trackUsage('didChangeDisplayedFields');\n\n    /**\n     * create an array of the new headers, if the new name exists it should be removed,\n     * otherwise it should be added\n     */\n    const newHeaders = headers.includes(name)\n      ? headers.filter((header) => header !== name)\n      : [...headers, name];\n\n    setHeaders(newHeaders);\n  };\n\n  const handleReset = () => {\n    resetHeaders();\n  };\n\n  return (\n    <Flex\n      tag=\"fieldset\"\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={1}\n      borderWidth={0}\n      maxHeight={'240px'}\n      padding={1}\n      overflow={'auto'}\n    >\n      <Flex justifyContent=\"space-between\" gap={2}>\n        <Typography tag=\"legend\" variant=\"pi\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'containers.list.displayedFields',\n            defaultMessage: 'Displayed fields',\n          })}\n        </Typography>\n\n        <TextButton onClick={handleReset}>\n          {formatMessage({\n            id: 'app.components.Button.reset',\n            defaultMessage: 'Reset',\n          })}\n        </TextButton>\n      </Flex>\n\n      <Flex direction=\"column\" alignItems=\"stretch\">\n        {columns.map((header) => {\n          const isActive = headers.includes(header.name);\n\n          return (\n            <Flex\n              wrap=\"wrap\"\n              gap={2}\n              background={isActive ? 'primary100' : 'transparent'}\n              hasRadius\n              padding={2}\n              marginBottom={1}\n              key={header.name}\n            >\n              <Checkbox\n                onCheckedChange={() => handleChange(header.name)}\n                checked={isActive}\n                name={header.name}\n              >\n                <Typography fontSize={1}>{header.label}</Typography>\n              </Checkbox>\n            </Flex>\n          );\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ViewSettingsMenu };\nexport type { ViewSettingsMenuProps, FieldPickerProps };\n"],"names":["ViewSettingsMenu","props","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","query","useQueryParams","formatMessage","useIntl","allowedActions","canConfigureView","useRBAC","_jsxs","Popover","Root","_jsx","Trigger","IconButton","label","id","defaultMessage","Cog","Content","side","align","sideOffset","Flex","alignItems","direction","padding","gap","LinkButton","size","startIcon","ListPlus","variant","tag","NavLink","to","pathname","search","plugins","stringify","encode","FieldPicker","headers","resetHeaders","setHeaders","trackUsage","useTracking","locale","schema","model","useDoc","list","useDocumentLayout","formatter","useCollator","sensitivity","attributes","columns","Object","keys","filter","name","checkIfAttributeIsDisplayable","map","metadatas","sort","a","b","compare","handleChange","newHeaders","includes","header","handleReset","borderWidth","maxHeight","overflow","justifyContent","Typography","fontWeight","TextButton","onClick","isActive","wrap","background","hasRadius","marginBottom","Checkbox","onCheckedChange","checked","fontSize"],"mappings":";;;;;;;;;;;;;AAyBA,MAAMA,mBAAmB,CAACC,KAAAA,GAAAA;AACxB,IAAA,MAAMC,WAAcC,GAAAA,gBAAAA,CAClB,CAACC,KAAAA,GAAUA,KAAMC,CAAAA,SAAS,CAACH,WAAW,CAACI,cAAc,EAAEC,6BAAAA,IAAiC,EAAE,CAAA;AAE5F,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;IACpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EACJC,cAAgB,EAAA,EAAEC,gBAAgB,EAAE,EACrC,GAAGC,OAAQZ,CAAAA,WAAAA,CAAAA;IAEZ,qBACEa,IAAA,CAACC,QAAQC,IAAI,EAAA;;AACX,0BAAAC,GAAA,CAACF,QAAQG,OAAO,EAAA;AACd,gBAAA,QAAA,gBAAAD,GAACE,CAAAA,UAAAA,EAAAA;AACCC,oBAAAA,KAAAA,EAAOX,aAAc,CAAA;wBACnBY,EAAI,EAAA,iCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;AAEA,oBAAA,QAAA,gBAAAL,GAACM,CAAAA,GAAAA,EAAAA,EAAAA;;;AAGL,0BAAAN,GAAA,CAACF,QAAQS,OAAO,EAAA;gBAACC,IAAK,EAAA,QAAA;gBAASC,KAAM,EAAA,KAAA;gBAAMC,UAAY,EAAA,CAAA;AACrD,gBAAA,QAAA,gBAAAb,IAACc,CAAAA,IAAAA,EAAAA;oBAAKC,UAAW,EAAA,SAAA;oBAAUC,SAAU,EAAA,QAAA;oBAASC,OAAS,EAAA,CAAA;oBAAGC,GAAK,EAAA,CAAA;;AAC5DpB,wBAAAA,gBAAAA,iBACCK,GAACgB,CAAAA,UAAAA,EAAAA;4BACCC,IAAK,EAAA,GAAA;AACLC,4BAAAA,SAAAA,gBAAWlB,GAACmB,CAAAA,QAAAA,EAAAA,EAAAA,CAAAA;4BACZC,OAAQ,EAAA,WAAA;4BACRC,GAAKC,EAAAA,OAAAA;4BACLC,EAAI,EAAA;gCACFC,QAAU,EAAA,qBAAA;gCACVC,MAAQnC,EAAAA,KAAAA,CAAMoC,OAAO,GACjBC,SAAU,CAAA;AAAED,oCAAAA,OAAAA,EAASpC,MAAMoC;iCAAW,EAAA;oCAAEE,MAAQ,EAAA;iCAChD,CAAA,GAAA;AACN,6BAAA;sCAECpC,aAAc,CAAA;gCACbY,EAAI,EAAA,0BAAA;gCACJC,cAAgB,EAAA;AAClB,6BAAA;AAEA,yBAAA,CAAA,GAAA,IAAA;sCACJL,GAAC6B,CAAAA,WAAAA,EAAAA;AAAa,4BAAA,GAAG9C;;;;;;;AAK3B;AAQA,MAAM8C,WAAAA,GAAc,CAAC,EAAEC,OAAAA,GAAU,EAAE,EAAEC,YAAY,EAAEC,UAAU,EAAoB,GAAA;IAC/E,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;AACvB,IAAA,MAAM,EAAE1C,aAAa,EAAE2C,MAAM,EAAE,GAAG1C,OAAAA,EAAAA;AAElC,IAAA,MAAM,EAAE2C,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,IAAI,EAAE,GAAGC,iBAAkBH,CAAAA,KAAAA,CAAAA;IAEnC,MAAMI,SAAAA,GAAYC,YAAYP,MAAQ,EAAA;QACpCQ,WAAa,EAAA;AACf,KAAA,CAAA;IAEA,MAAMC,UAAAA,GAAaR,MAAQQ,EAAAA,UAAAA,IAAc,EAAC;AAE1C,IAAA,MAAMC,UAAUC,MAAOC,CAAAA,IAAI,CAACH,UACzBI,CAAAA,CAAAA,MAAM,CAAC,CAACC,IAAAA,GAASC,6BAA8BN,CAAAA,UAAU,CAACK,IAAK,CAAA,CAAA,CAAA,CAC/DE,GAAG,CAAC,CAACF,QAAU;AACdA,YAAAA,IAAAA;AACA9C,YAAAA,KAAAA,EAAOoC,IAAKa,CAAAA,SAAS,CAACH,IAAAA,CAAK,EAAE9C,KAAS,IAAA;AACxC,SAAA,CACCkD,CAAAA,CAAAA,IAAI,CAAC,CAACC,CAAGC,EAAAA,CAAAA,GAAMd,SAAUe,CAAAA,OAAO,CAACF,CAAAA,CAAEnD,KAAK,EAAEoD,EAAEpD,KAAK,CAAA,CAAA;AAEpD,IAAA,MAAMsD,eAAe,CAACR,IAAAA,GAAAA;QACpBhB,UAAW,CAAA,0BAAA,CAAA;AAEX;;;AAGC,QACD,MAAMyB,UAAAA,GAAa5B,OAAQ6B,CAAAA,QAAQ,CAACV,IAAAA,CAAAA,GAChCnB,OAAQkB,CAAAA,MAAM,CAAC,CAACY,MAAWA,GAAAA,MAAAA,KAAWX,IACtC,CAAA,GAAA;AAAInB,YAAAA,GAAAA,OAAAA;AAASmB,YAAAA;AAAK,SAAA;QAEtBjB,UAAW0B,CAAAA,UAAAA,CAAAA;AACb,KAAA;AAEA,IAAA,MAAMG,WAAc,GAAA,IAAA;AAClB9B,QAAAA,YAAAA,EAAAA;AACF,KAAA;AAEA,IAAA,qBACElC,IAACc,CAAAA,IAAAA,EAAAA;QACCU,GAAI,EAAA,UAAA;QACJR,SAAU,EAAA,QAAA;QACVD,UAAW,EAAA,SAAA;QACXG,GAAK,EAAA,CAAA;QACL+C,WAAa,EAAA,CAAA;QACbC,SAAW,EAAA,OAAA;QACXjD,OAAS,EAAA,CAAA;QACTkD,QAAU,EAAA,MAAA;;0BAEVnE,IAACc,CAAAA,IAAAA,EAAAA;gBAAKsD,cAAe,EAAA,eAAA;gBAAgBlD,GAAK,EAAA,CAAA;;kCACxCf,GAACkE,CAAAA,UAAAA,EAAAA;wBAAW7C,GAAI,EAAA,QAAA;wBAASD,OAAQ,EAAA,IAAA;wBAAK+C,UAAW,EAAA,MAAA;kCAC9C3E,aAAc,CAAA;4BACbY,EAAI,EAAA,iCAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;kCAGFL,GAACoE,CAAAA,UAAAA,EAAAA;wBAAWC,OAASR,EAAAA,WAAAA;kCAClBrE,aAAc,CAAA;4BACbY,EAAI,EAAA,6BAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;;0BAIJL,GAACW,CAAAA,IAAAA,EAAAA;gBAAKE,SAAU,EAAA,QAAA;gBAASD,UAAW,EAAA,SAAA;0BACjCiC,OAAQM,CAAAA,GAAG,CAAC,CAACS,MAAAA,GAAAA;AACZ,oBAAA,MAAMU,QAAWxC,GAAAA,OAAAA,CAAQ6B,QAAQ,CAACC,OAAOX,IAAI,CAAA;AAE7C,oBAAA,qBACEjD,GAACW,CAAAA,IAAAA,EAAAA;wBACC4D,IAAK,EAAA,MAAA;wBACLxD,GAAK,EAAA,CAAA;AACLyD,wBAAAA,UAAAA,EAAYF,WAAW,YAAe,GAAA,aAAA;wBACtCG,SAAS,EAAA,IAAA;wBACT3D,OAAS,EAAA,CAAA;wBACT4D,YAAc,EAAA,CAAA;AAGd,wBAAA,QAAA,gBAAA1E,GAAC2E,CAAAA,QAAAA,EAAAA;4BACCC,eAAiB,EAAA,IAAMnB,YAAaG,CAAAA,MAAAA,CAAOX,IAAI,CAAA;4BAC/C4B,OAASP,EAAAA,QAAAA;AACTrB,4BAAAA,IAAAA,EAAMW,OAAOX,IAAI;AAEjB,4BAAA,QAAA,gBAAAjD,GAACkE,CAAAA,UAAAA,EAAAA;gCAAWY,QAAU,EAAA,CAAA;AAAIlB,gCAAAA,QAAAA,EAAAA,MAAAA,CAAOzD;;;AAP9ByD,qBAAAA,EAAAA,MAAAA,CAAOX,IAAI,CAAA;AAWtB,iBAAA;;;;AAIR,CAAA;;;;"}

package/dist/admin/preview/components/InputPopover.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var InputRenderer = require('../../pages/EditView/components/InputRenderer.js');
+var Preview = require('../pages/Preview.js');
+var constants = require('../utils/constants.js');
+var fieldUtils = require('../utils/fieldUtils.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const [InputPopoverProvider, useInputPopoverContext] = strapiAdmin.createContext('InputPopover');
+function useHasInputPopoverParent() {
+    const context = useInputPopoverContext('useHasInputPopoverParent', ()=>true, false);
+    // useContext will return undefined if the called is not wrapped in the provider
+    return context !== undefined;
+}
+/* -------------------------------------------------------------------------------------------------
+ * InputPopover
+ * -----------------------------------------------------------------------------------------------*/ const InputPopover = ({ documentResponse })=>{
+    const iframeRef = Preview.usePreviewContext('InputPopover', (state)=>state.iframeRef);
+    const popoverField = Preview.usePreviewContext('InputPopover', (state)=>state.popoverField);
+    const setPopoverField = Preview.usePreviewContext('InputPopover', (state)=>state.setPopoverField);
+    const document = Preview.usePreviewContext('InputPopover', (state)=>state.document);
+    const schema = Preview.usePreviewContext('InputPopover', (state)=>state.schema);
+    const components = Preview.usePreviewContext('InputPopover', (state)=>state.components);
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const { formatMessage } = reactIntl.useIntl();
+    React__namespace.useEffect(()=>{
+        /**
+     * We receive window events sent from the user's preview via the injected script.
+     * We listen to the ones here that target a specific field.
+     */ const handleMessage = (event)=>{
+            // Only listen to events from the preview iframe
+            if (iframeRef.current) {
+                const previewOrigin = new URL(iframeRef.current?.src).origin;
+                if (event.origin !== previewOrigin) {
+                    return;
+                }
+            }
+            if (event.data?.type === constants.INTERNAL_EVENTS.STRAPI_FIELD_FOCUS_INTENT) {
+                const fieldMetaData = fieldUtils.parseFieldMetaData(event.data.payload.path);
+                if (!fieldMetaData) {
+                    const { type, message } = constants.PREVIEW_ERROR_MESSAGES.INCOMPLETE_STRAPI_SOURCE;
+                    toggleNotification({
+                        type,
+                        message: formatMessage(message)
+                    });
+                    return;
+                }
+                /**
+         * Ignore (for now) content that comes from separate API requests than the one for the
+         * current document. This doesn't do anything about fields that may come from relations to
+         * the current document however.
+         */ if (fieldMetaData.documentId !== document.documentId) {
+                    const { type, message } = constants.PREVIEW_ERROR_MESSAGES.DIFFERENT_DOCUMENT;
+                    toggleNotification({
+                        type,
+                        message: formatMessage(message)
+                    });
+                    return;
+                }
+                try {
+                    const attribute = fieldUtils.getAttributeSchemaFromPath({
+                        path: fieldMetaData.path,
+                        components,
+                        schema,
+                        document
+                    });
+                    // We're able to handle the field, set it in context so the popover can pick it up
+                    setPopoverField({
+                        ...fieldMetaData,
+                        position: event.data.payload.position,
+                        attribute
+                    });
+                } catch (error) {
+                    if (error instanceof fieldUtils.PreviewFieldError) {
+                        const { type, message } = constants.PREVIEW_ERROR_MESSAGES[error.messageKey];
+                        toggleNotification({
+                            type,
+                            message: formatMessage(message)
+                        });
+                    } else if (error instanceof Error) {
+                        toggleNotification({
+                            type: 'danger',
+                            message: error.message
+                        });
+                    }
+                }
+            }
+            if (event.data?.type === constants.INTERNAL_EVENTS.STRAPI_FIELD_SINGLE_CLICK_HINT) {
+                toggleNotification({
+                    type: 'info',
+                    message: formatMessage({
+                        id: 'content-manager.preview.info.single-click-hint',
+                        defaultMessage: 'Double click to edit'
+                    })
+                });
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        components,
+        document,
+        iframeRef,
+        schema,
+        setPopoverField,
+        toggleNotification,
+        formatMessage
+    ]);
+    if (!popoverField || !iframeRef.current) {
+        return null;
+    }
+    const iframeRect = iframeRef.current.getBoundingClientRect();
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                position: 'fixed',
+                top: iframeRect.top + 'px',
+                left: iframeRect.left + 'px',
+                width: iframeRect.width + 'px',
+                height: iframeRect.height + 'px',
+                zIndex: 4,
+                onClick: ()=>iframeRef.current?.focus()
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(InputPopoverProvider, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+                    open: true,
+                    onOpenChange: (open)=>!open && setPopoverField(null),
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                position: "fixed",
+                                width: popoverField.position.width + 'px',
+                                height: popoverField.position.height + 'px',
+                                top: 0,
+                                left: 0,
+                                transform: `translate(${iframeRect.left + popoverField.position.left}px, ${iframeRect.top + popoverField.position.top}px)`
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+                            sideOffset: 4,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                padding: 4,
+                                width: "400px",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
+                                    document: documentResponse,
+                                    attribute: popoverField.attribute,
+                                    // TODO: retrieve the proper label from the layout
+                                    label: popoverField.path,
+                                    name: popoverField.path,
+                                    type: popoverField.attribute.type,
+                                    visible: true
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+exports.InputPopover = InputPopover;
+exports.useHasInputPopoverParent = useHasInputPopoverParent;
+//# sourceMappingURL=InputPopover.js.map

package/dist/admin/preview/components/InputPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputPopover.js","sources":["../../../../admin/src/preview/components/InputPopover.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, useNotification } from '@strapi/admin/strapi-admin';\nimport { Box, Popover } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { type UseDocument } from '../../hooks/useDocument';\nimport { InputRenderer } from '../../pages/EditView/components/InputRenderer';\nimport { usePreviewContext } from '../pages/Preview';\nimport { INTERNAL_EVENTS, PREVIEW_ERROR_MESSAGES } from '../utils/constants';\nimport {\n  parseFieldMetaData,\n  getAttributeSchemaFromPath,\n  PreviewFieldError,\n} from '../utils/fieldUtils';\n\n/* -------------------------------------------------------------------------------------------------\n * Context utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * No need for actual data in the context. It's just to let children check if they're rendered\n * inside of a preview InputPopover without relying on prop drilling.\n */\ninterface InputPopoverContextValue {}\n\nconst [InputPopoverProvider, useInputPopoverContext] =\n  createContext<InputPopoverContextValue>('InputPopover');\n\nfunction useHasInputPopoverParent() {\n  const context = useInputPopoverContext('useHasInputPopoverParent', () => true, false);\n\n  // useContext will return undefined if the called is not wrapped in the provider\n  return context !== undefined;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * InputPopover\n * -----------------------------------------------------------------------------------------------*/\n\nconst InputPopover = ({ documentResponse }: { documentResponse: ReturnType<UseDocument> }) => {\n  const iframeRef = usePreviewContext('InputPopover', (state) => state.iframeRef);\n  const popoverField = usePreviewContext('InputPopover', (state) => state.popoverField);\n  const setPopoverField = usePreviewContext('InputPopover', (state) => state.setPopoverField);\n  const document = usePreviewContext('InputPopover', (state) => state.document);\n  const schema = usePreviewContext('InputPopover', (state) => state.schema);\n  const components = usePreviewContext('InputPopover', (state) => state.components);\n\n  const { toggleNotification } = useNotification();\n  const { formatMessage } = useIntl();\n\n  React.useEffect(() => {\n    /**\n     * We receive window events sent from the user's preview via the injected script.\n     * We listen to the ones here that target a specific field.\n     */\n    const handleMessage = (event: MessageEvent) => {\n      // Only listen to events from the preview iframe\n      if (iframeRef.current) {\n        const previewOrigin = new URL(iframeRef.current?.src).origin;\n        if (event.origin !== previewOrigin) {\n          return;\n        }\n      }\n\n      if (event.data?.type === INTERNAL_EVENTS.STRAPI_FIELD_FOCUS_INTENT) {\n        const fieldMetaData = parseFieldMetaData(event.data.payload.path);\n\n        if (!fieldMetaData) {\n          const { type, message } = PREVIEW_ERROR_MESSAGES.INCOMPLETE_STRAPI_SOURCE;\n          toggleNotification({ type, message: formatMessage(message) });\n          return;\n        }\n\n        /**\n         * Ignore (for now) content that comes from separate API requests than the one for the\n         * current document. This doesn't do anything about fields that may come from relations to\n         * the current document however.\n         */\n        if (fieldMetaData.documentId !== document.documentId) {\n          const { type, message } = PREVIEW_ERROR_MESSAGES.DIFFERENT_DOCUMENT;\n          toggleNotification({ type, message: formatMessage(message) });\n          return;\n        }\n\n        try {\n          const attribute = getAttributeSchemaFromPath({\n            path: fieldMetaData.path,\n            components,\n            schema,\n            document,\n          });\n\n          // We're able to handle the field, set it in context so the popover can pick it up\n          setPopoverField({ ...fieldMetaData, position: event.data.payload.position, attribute });\n        } catch (error) {\n          if (error instanceof PreviewFieldError) {\n            const { type, message } = PREVIEW_ERROR_MESSAGES[error.messageKey];\n            toggleNotification({ type, message: formatMessage(message) });\n          } else if (error instanceof Error) {\n            toggleNotification({ type: 'danger', message: error.message });\n          }\n        }\n      }\n\n      if (event.data?.type === INTERNAL_EVENTS.STRAPI_FIELD_SINGLE_CLICK_HINT) {\n        toggleNotification({\n          type: 'info',\n          message: formatMessage({\n            id: 'content-manager.preview.info.single-click-hint',\n            defaultMessage: 'Double click to edit',\n          }),\n        });\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    return () => {\n      window.removeEventListener('message', handleMessage);\n    };\n  }, [components, document, iframeRef, schema, setPopoverField, toggleNotification, formatMessage]);\n  if (!popoverField || !iframeRef.current) {\n    return null;\n  }\n\n  const iframeRect = iframeRef.current.getBoundingClientRect();\n\n  return (\n    <>\n      {/**\n       * Overlay an empty div on top of the iframe while the popover is open so it can\n       * intercept clicks. Without it, we wouldn't be able to close the popover by clicking outside,\n       * because the click would be detected by the iframe window, not by the admin.\n       **/}\n      <Box\n        position={'fixed'}\n        top={iframeRect.top + 'px'}\n        left={iframeRect.left + 'px'}\n        width={iframeRect.width + 'px'}\n        height={iframeRect.height + 'px'}\n        zIndex={4}\n        onClick={() => iframeRef.current?.focus()}\n      />\n      <InputPopoverProvider>\n        <Popover.Root open={true} onOpenChange={(open) => !open && setPopoverField(null)}>\n          <Popover.Trigger>\n            <Box\n              position=\"fixed\"\n              width={popoverField.position.width + 'px'}\n              height={popoverField.position.height + 'px'}\n              top={0}\n              left={0}\n              transform={`translate(${iframeRect.left + popoverField.position.left}px, ${iframeRect.top + popoverField.position.top}px)`}\n            />\n          </Popover.Trigger>\n          <Popover.Content sideOffset={4}>\n            <Box padding={4} width=\"400px\">\n              {/* @ts-expect-error the types of `attribute` clash for some reason */}\n              <InputRenderer\n                document={documentResponse}\n                attribute={popoverField.attribute}\n                // TODO: retrieve the proper label from the layout\n                label={popoverField.path}\n                name={popoverField.path}\n                type={popoverField.attribute.type}\n                visible={true}\n              />\n            </Box>\n          </Popover.Content>\n        </Popover.Root>\n      </InputPopoverProvider>\n    </>\n  );\n};\n\nexport { InputPopover, useHasInputPopoverParent };\n"],"names":["InputPopoverProvider","useInputPopoverContext","createContext","useHasInputPopoverParent","context","undefined","InputPopover","documentResponse","iframeRef","usePreviewContext","state","popoverField","setPopoverField","document","schema","components","toggleNotification","useNotification","formatMessage","useIntl","React","useEffect","handleMessage","event","current","previewOrigin","URL","src","origin","data","type","INTERNAL_EVENTS","STRAPI_FIELD_FOCUS_INTENT","fieldMetaData","parseFieldMetaData","payload","path","message","PREVIEW_ERROR_MESSAGES","INCOMPLETE_STRAPI_SOURCE","documentId","DIFFERENT_DOCUMENT","attribute","getAttributeSchemaFromPath","position","error","PreviewFieldError","messageKey","Error","STRAPI_FIELD_SINGLE_CLICK_HINT","id","defaultMessage","window","addEventListener","removeEventListener","iframeRect","getBoundingClientRect","_jsxs","_Fragment","_jsx","Box","top","left","width","height","zIndex","onClick","focus","Popover","Root","open","onOpenChange","Trigger","transform","Content","sideOffset","padding","InputRenderer","label","name","visible"],"mappings":"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"}

package/dist/admin/preview/components/InputPopover.mjs

@@ -0,0 +1,167 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createContext, useNotification } from '@strapi/admin/strapi-admin';
+import { Box, Popover } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { InputRenderer as MemoizedInputRenderer } from '../../pages/EditView/components/InputRenderer.mjs';
+import { usePreviewContext } from '../pages/Preview.mjs';
+import { INTERNAL_EVENTS, PREVIEW_ERROR_MESSAGES } from '../utils/constants.mjs';
+import { parseFieldMetaData, getAttributeSchemaFromPath, PreviewFieldError } from '../utils/fieldUtils.mjs';
+
+const [InputPopoverProvider, useInputPopoverContext] = createContext('InputPopover');
+function useHasInputPopoverParent() {
+    const context = useInputPopoverContext('useHasInputPopoverParent', ()=>true, false);
+    // useContext will return undefined if the called is not wrapped in the provider
+    return context !== undefined;
+}
+/* -------------------------------------------------------------------------------------------------
+ * InputPopover
+ * -----------------------------------------------------------------------------------------------*/ const InputPopover = ({ documentResponse })=>{
+    const iframeRef = usePreviewContext('InputPopover', (state)=>state.iframeRef);
+    const popoverField = usePreviewContext('InputPopover', (state)=>state.popoverField);
+    const setPopoverField = usePreviewContext('InputPopover', (state)=>state.setPopoverField);
+    const document = usePreviewContext('InputPopover', (state)=>state.document);
+    const schema = usePreviewContext('InputPopover', (state)=>state.schema);
+    const components = usePreviewContext('InputPopover', (state)=>state.components);
+    const { toggleNotification } = useNotification();
+    const { formatMessage } = useIntl();
+    React.useEffect(()=>{
+        /**
+     * We receive window events sent from the user's preview via the injected script.
+     * We listen to the ones here that target a specific field.
+     */ const handleMessage = (event)=>{
+            // Only listen to events from the preview iframe
+            if (iframeRef.current) {
+                const previewOrigin = new URL(iframeRef.current?.src).origin;
+                if (event.origin !== previewOrigin) {
+                    return;
+                }
+            }
+            if (event.data?.type === INTERNAL_EVENTS.STRAPI_FIELD_FOCUS_INTENT) {
+                const fieldMetaData = parseFieldMetaData(event.data.payload.path);
+                if (!fieldMetaData) {
+                    const { type, message } = PREVIEW_ERROR_MESSAGES.INCOMPLETE_STRAPI_SOURCE;
+                    toggleNotification({
+                        type,
+                        message: formatMessage(message)
+                    });
+                    return;
+                }
+                /**
+         * Ignore (for now) content that comes from separate API requests than the one for the
+         * current document. This doesn't do anything about fields that may come from relations to
+         * the current document however.
+         */ if (fieldMetaData.documentId !== document.documentId) {
+                    const { type, message } = PREVIEW_ERROR_MESSAGES.DIFFERENT_DOCUMENT;
+                    toggleNotification({
+                        type,
+                        message: formatMessage(message)
+                    });
+                    return;
+                }
+                try {
+                    const attribute = getAttributeSchemaFromPath({
+                        path: fieldMetaData.path,
+                        components,
+                        schema,
+                        document
+                    });
+                    // We're able to handle the field, set it in context so the popover can pick it up
+                    setPopoverField({
+                        ...fieldMetaData,
+                        position: event.data.payload.position,
+                        attribute
+                    });
+                } catch (error) {
+                    if (error instanceof PreviewFieldError) {
+                        const { type, message } = PREVIEW_ERROR_MESSAGES[error.messageKey];
+                        toggleNotification({
+                            type,
+                            message: formatMessage(message)
+                        });
+                    } else if (error instanceof Error) {
+                        toggleNotification({
+                            type: 'danger',
+                            message: error.message
+                        });
+                    }
+                }
+            }
+            if (event.data?.type === INTERNAL_EVENTS.STRAPI_FIELD_SINGLE_CLICK_HINT) {
+                toggleNotification({
+                    type: 'info',
+                    message: formatMessage({
+                        id: 'content-manager.preview.info.single-click-hint',
+                        defaultMessage: 'Double click to edit'
+                    })
+                });
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        components,
+        document,
+        iframeRef,
+        schema,
+        setPopoverField,
+        toggleNotification,
+        formatMessage
+    ]);
+    if (!popoverField || !iframeRef.current) {
+        return null;
+    }
+    const iframeRect = iframeRef.current.getBoundingClientRect();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                position: 'fixed',
+                top: iframeRect.top + 'px',
+                left: iframeRect.left + 'px',
+                width: iframeRect.width + 'px',
+                height: iframeRect.height + 'px',
+                zIndex: 4,
+                onClick: ()=>iframeRef.current?.focus()
+            }),
+            /*#__PURE__*/ jsx(InputPopoverProvider, {
+                children: /*#__PURE__*/ jsxs(Popover.Root, {
+                    open: true,
+                    onOpenChange: (open)=>!open && setPopoverField(null),
+                    children: [
+                        /*#__PURE__*/ jsx(Popover.Trigger, {
+                            children: /*#__PURE__*/ jsx(Box, {
+                                position: "fixed",
+                                width: popoverField.position.width + 'px',
+                                height: popoverField.position.height + 'px',
+                                top: 0,
+                                left: 0,
+                                transform: `translate(${iframeRect.left + popoverField.position.left}px, ${iframeRect.top + popoverField.position.top}px)`
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Popover.Content, {
+                            sideOffset: 4,
+                            children: /*#__PURE__*/ jsx(Box, {
+                                padding: 4,
+                                width: "400px",
+                                children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                                    document: documentResponse,
+                                    attribute: popoverField.attribute,
+                                    // TODO: retrieve the proper label from the layout
+                                    label: popoverField.path,
+                                    name: popoverField.path,
+                                    type: popoverField.attribute.type,
+                                    visible: true
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+export { InputPopover, useHasInputPopoverParent };
+//# sourceMappingURL=InputPopover.mjs.map