@strapi/content-manager 0.0.0-next.68883a121b7f22cc4ba74b40e02159d567c34e84 → 0.0.0-next.6a38f974ec7350286f5c323503fb1e90c54da7ca

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

@@ -1 +1 @@
-{"version":3,"file":"Filters.mjs","sources":["../../../../../admin/src/pages/ListView/components/Filters.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Filters,\n  useField,\n  useAuth,\n  useTracking,\n  useQueryParams,\n  useAdminUsers,\n} from '@strapi/admin/strapi-admin';\nimport { Combobox, ComboboxOption, useCollator } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { CREATOR_FIELDS } from '../../../constants/attributes';\nimport { useContentTypeSchema } from '../../../hooks/useContentTypeSchema';\nimport { useDebounce } from '../../../hooks/useDebounce';\nimport { Schema } from '../../../hooks/useDocument';\nimport { useGetContentTypeConfigurationQuery } from '../../../services/contentTypes';\nimport { getMainField } from '../../../utils/attributes';\nimport { getDisplayName } from '../../../utils/users';\n\n/**\n * If new attributes are added, this list needs to be updated.\n */\nconst NOT_ALLOWED_FILTERS = [\n  'json',\n  'component',\n  'media',\n  'richtext',\n  'dynamiczone',\n  'password',\n  'blocks',\n];\nconst DEFAULT_ALLOWED_FILTERS = ['createdAt', 'updatedAt'];\nconst USER_FILTER_ATTRIBUTES = [...CREATOR_FIELDS, 'strapi_assignee'];\n\n/* -------------------------------------------------------------------------------------------------\n * Filters\n * -----------------------------------------------------------------------------------------------*/\ninterface FiltersProps {\n  disabled?: boolean;\n  schema: Schema;\n}\n\nconst FiltersImpl = ({ disabled, schema }: FiltersProps) => {\n  const { attributes, uid: model, options } = schema;\n  const { formatMessage, locale } = useIntl();\n  const { trackUsage } = useTracking();\n  const allPermissions = useAuth('FiltersImpl', (state) => state.permissions);\n  const [{ query }] = useQueryParams<Filters.Query>();\n  const { schemas } = useContentTypeSchema();\n\n  const canReadAdminUsers = React.useMemo(\n    () =>\n      allPermissions.filter(\n        (permission) => permission.action === 'admin::users.read' && permission.subject === null\n      ).length > 0,\n    [allPermissions]\n  );\n\n  const selectedUserIds = (query?.filters?.$and ?? []).reduce<string[]>((acc, filter) => {\n    const [key, value] = Object.entries(filter)[0];\n    if (typeof value.id !== 'object') {\n      return acc;\n    }\n\n    const id = value.id.$eq || value.id.$ne;\n\n    if (id && USER_FILTER_ATTRIBUTES.includes(key) && !acc.includes(id)) {\n      acc.push(id);\n    }\n\n    return acc;\n  }, []);\n\n  const { data: userData, isLoading: isLoadingAdminUsers } = useAdminUsers(\n    { filters: { id: { $in: selectedUserIds } } },\n    {\n      // fetch the list of admin users only if the filter contains users and the\n      // current user has permissions to display users\n      skip: selectedUserIds.length === 0 || !canReadAdminUsers,\n    }\n  );\n\n  const { users = [] } = userData ?? {};\n\n  const { metadata } = useGetContentTypeConfigurationQuery(model, {\n    selectFromResult: ({ data }) => ({ metadata: data?.contentType.metadatas ?? {} }),\n  });\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const displayedFilters = React.useMemo(() => {\n    const [{ properties: { fields = [] } = { fields: [] } }] = allPermissions.filter(\n      (permission) =>\n        permission.action === 'plugin::content-manager.explorer.read' &&\n        permission.subject === model\n    );\n\n    const allowedFields = fields.filter((field) => {\n      const attribute = attributes[field] ?? {};\n\n      return attribute.type && !NOT_ALLOWED_FILTERS.includes(attribute.type);\n    });\n\n    return (\n      [\n        'id',\n        'documentId',\n        ...allowedFields,\n        ...DEFAULT_ALLOWED_FILTERS,\n        ...(canReadAdminUsers ? CREATOR_FIELDS : []),\n      ]\n        .map((name) => {\n          const attribute = attributes[name];\n\n          if (NOT_ALLOWED_FILTERS.includes(attribute.type)) {\n            return null;\n          }\n\n          const { mainField: mainFieldName = '', label } = metadata[name].list;\n\n          let filter: Filters.Filter = {\n            name,\n            label: label ?? '',\n            mainField: getMainField(attribute, mainFieldName, { schemas, components: {} }),\n            // @ts-expect-error – TODO: this is filtered out above in the `allowedFields` call but TS complains, is there a better way to solve this?\n            type: attribute.type,\n          };\n\n          if (\n            attribute.type === 'relation' &&\n            'target' in attribute &&\n            attribute.target === 'admin::user'\n          ) {\n            filter = {\n              ...filter,\n              input: AdminUsersFilter,\n              options: users.map((user) => ({\n                label: getDisplayName(user),\n                value: user.id.toString(),\n              })),\n              operators: [\n                {\n                  label: formatMessage({\n                    id: 'components.FilterOptions.FILTER_TYPES.$eq',\n                    defaultMessage: 'is',\n                  }),\n                  value: '$eq',\n                },\n                {\n                  label: formatMessage({\n                    id: 'components.FilterOptions.FILTER_TYPES.$ne',\n                    defaultMessage: 'is not',\n                  }),\n                  value: '$ne',\n                },\n              ],\n              mainField: {\n                name: 'id',\n                type: 'integer',\n              },\n            };\n          }\n\n          if (attribute.type === 'enumeration') {\n            filter = {\n              ...filter,\n              options: attribute.enum.map((value) => ({\n                label: value,\n                value,\n              })),\n            };\n          }\n\n          return filter;\n        })\n        .filter(Boolean) as Filters.Filter[]\n    ).toSorted((a, b) => formatter.compare(a.label, b.label));\n  }, [\n    allPermissions,\n    canReadAdminUsers,\n    model,\n    attributes,\n    metadata,\n    schemas,\n    users,\n    formatMessage,\n    formatter,\n  ]);\n\n  const onOpenChange = (isOpen: boolean) => {\n    if (isOpen) {\n      trackUsage('willFilterEntries');\n    }\n  };\n\n  const handleFilterChange: Filters.Props['onChange'] = (data) => {\n    const attribute = attributes[data.name];\n\n    if (attribute) {\n      trackUsage('didFilterEntries', {\n        useRelation: attribute.type === 'relation',\n      });\n    }\n  };\n\n  return (\n    <Filters.Root\n      disabled={disabled}\n      options={displayedFilters}\n      onOpenChange={onOpenChange}\n      onChange={handleFilterChange}\n    >\n      <Filters.Trigger />\n      <Filters.Popover />\n      <Filters.List />\n    </Filters.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AdminUsersFilter\n * -----------------------------------------------------------------------------------------------*/\n\nconst AdminUsersFilter = ({ name }: Filters.ValueInputProps) => {\n  const [pageSize, setPageSize] = React.useState(10);\n  const [search, setSearch] = React.useState('');\n  const { formatMessage } = useIntl();\n\n  const debouncedSearch = useDebounce(search, 300);\n\n  const { data, isLoading } = useAdminUsers({\n    pageSize,\n    _q: debouncedSearch,\n  });\n  const field = useField(name);\n\n  const handleOpenChange = (isOpen?: boolean) => {\n    if (!isOpen) {\n      setPageSize(10);\n    }\n  };\n\n  const { users = [], pagination } = data ?? {};\n  const { pageCount = 1, page = 1 } = pagination ?? {};\n\n  return (\n    <Combobox\n      value={field.value}\n      aria-label={formatMessage({\n        id: 'content-manager.components.Filters.usersSelect.label',\n        defaultMessage: 'Search and select a user to filter',\n      })}\n      onOpenChange={handleOpenChange}\n      onChange={(value) => field.onChange(name, value)}\n      loading={isLoading}\n      onLoadMore={() => setPageSize(pageSize + 10)}\n      hasMoreItems={page < pageCount}\n      onInputChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n        setSearch(e.currentTarget.value);\n      }}\n    >\n      {users.map((user) => {\n        return (\n          <ComboboxOption key={user.id} value={user.id.toString()}>\n            {getDisplayName(user)}\n          </ComboboxOption>\n        );\n      })}\n    </Combobox>\n  );\n};\n\nexport { FiltersImpl as Filters };\nexport type { FiltersProps };\n"],"names":["NOT_ALLOWED_FILTERS","DEFAULT_ALLOWED_FILTERS","USER_FILTER_ATTRIBUTES","CREATOR_FIELDS","FiltersImpl","disabled","schema","attributes","uid","model","options","formatMessage","locale","useIntl","trackUsage","useTracking","allPermissions","useAuth","state","permissions","query","useQueryParams","schemas","useContentTypeSchema","canReadAdminUsers","React","useMemo","filter","permission","action","subject","length","selectedUserIds","filters","$and","reduce","acc","key","value","Object","entries","id","$eq","$ne","includes","push","data","userData","isLoading","isLoadingAdminUsers","useAdminUsers","$in","skip","users","metadata","useGetContentTypeConfigurationQuery","selectFromResult","contentType","metadatas","formatter","useCollator","sensitivity","displayedFilters","properties","fields","allowedFields","field","attribute","type","map","name","mainField","mainFieldName","label","list","getMainField","components","target","input","AdminUsersFilter","user","getDisplayName","toString","operators","defaultMessage","enum","Boolean","toSorted","a","b","compare","onOpenChange","isOpen","handleFilterChange","useRelation","_jsxs","Filters","Root","onChange","_jsx","Trigger","Popover","List","pageSize","setPageSize","useState","search","setSearch","debouncedSearch","useDebounce","_q","useField","handleOpenChange","pagination","pageCount","page","Combobox","aria-label","loading","onLoadMore","hasMoreItems","onInputChange","e","currentTarget","ComboboxOption"],"mappings":"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"}
+{"version":3,"file":"Filters.mjs","sources":["../../../../../admin/src/pages/ListView/components/Filters.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Filters,\n  useField,\n  useAuth,\n  useTracking,\n  useQueryParams,\n  useAdminUsers,\n} from '@strapi/admin/strapi-admin';\nimport { Combobox, ComboboxOption, useCollator } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { CREATOR_FIELDS } from '../../../constants/attributes';\nimport { useContentTypeSchema } from '../../../hooks/useContentTypeSchema';\nimport { useDebounce } from '../../../hooks/useDebounce';\nimport { Schema } from '../../../hooks/useDocument';\nimport { useGetContentTypeConfigurationQuery } from '../../../services/contentTypes';\nimport { getMainField } from '../../../utils/attributes';\nimport { getDisplayName } from '../../../utils/users';\n\n/**\n * If new attributes are added, this list needs to be updated.\n */\nconst NOT_ALLOWED_FILTERS = [\n  'json',\n  'component',\n  'media',\n  'richtext',\n  'dynamiczone',\n  'password',\n  'blocks',\n];\nconst DEFAULT_ALLOWED_FILTERS = ['createdAt', 'updatedAt'];\nconst USER_FILTER_ATTRIBUTES = [...CREATOR_FIELDS, 'strapi_assignee'];\n\n/* -------------------------------------------------------------------------------------------------\n * Filters\n * -----------------------------------------------------------------------------------------------*/\ninterface FiltersProps {\n  disabled?: boolean;\n  schema: Schema;\n}\n\nconst FiltersImpl = ({ disabled, schema }: FiltersProps) => {\n  const { attributes, uid: model, options } = schema;\n  const { formatMessage, locale } = useIntl();\n  const { trackUsage } = useTracking();\n  const allPermissions = useAuth('FiltersImpl', (state) => state.permissions);\n  const [{ query }] = useQueryParams<Filters.Query>();\n  const { schemas } = useContentTypeSchema();\n\n  const canReadAdminUsers = React.useMemo(\n    () =>\n      allPermissions.filter(\n        (permission) => permission.action === 'admin::users.read' && permission.subject === null\n      ).length > 0,\n    [allPermissions]\n  );\n\n  const selectedUserIds = (query?.filters?.$and ?? []).reduce<string[]>((acc, filter) => {\n    const [key, value] = Object.entries(filter)[0];\n    if (typeof value.id !== 'object') {\n      return acc;\n    }\n\n    const id = value.id.$eq || value.id.$ne;\n\n    if (id && USER_FILTER_ATTRIBUTES.includes(key) && !acc.includes(id)) {\n      acc.push(id);\n    }\n\n    return acc;\n  }, []);\n\n  const { data: userData, isLoading: isLoadingAdminUsers } = useAdminUsers(\n    { filters: { id: { $in: selectedUserIds } } },\n    {\n      // fetch the list of admin users only if the filter contains users and the\n      // current user has permissions to display users\n      skip: selectedUserIds.length === 0 || !canReadAdminUsers,\n    }\n  );\n\n  const { users = [] } = userData ?? {};\n\n  const { metadata } = useGetContentTypeConfigurationQuery(model, {\n    selectFromResult: ({ data }) => ({ metadata: data?.contentType.metadatas ?? {} }),\n  });\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const displayedFilters = React.useMemo(() => {\n    const [{ properties: { fields = [] } = { fields: [] } }] = allPermissions.filter(\n      (permission) =>\n        permission.action === 'plugin::content-manager.explorer.read' &&\n        permission.subject === model\n    );\n\n    const allowedFields = fields.filter((field) => {\n      const attribute = attributes[field] ?? {};\n\n      return attribute.type && !NOT_ALLOWED_FILTERS.includes(attribute.type);\n    });\n\n    return (\n      [\n        'id',\n        'documentId',\n        ...allowedFields,\n        ...DEFAULT_ALLOWED_FILTERS,\n        ...(canReadAdminUsers ? CREATOR_FIELDS : []),\n      ]\n        .map((name) => {\n          const attribute = attributes[name];\n\n          if (NOT_ALLOWED_FILTERS.includes(attribute.type)) {\n            return null;\n          }\n\n          const { mainField: mainFieldName = '', label } = metadata[name].list;\n\n          let filter: Filters.Filter = {\n            name,\n            label: label ?? '',\n            mainField: getMainField(attribute, mainFieldName, { schemas, components: {} }),\n            // @ts-expect-error – TODO: this is filtered out above in the `allowedFields` call but TS complains, is there a better way to solve this?\n            type: attribute.type,\n          };\n\n          if (\n            attribute.type === 'relation' &&\n            'target' in attribute &&\n            attribute.target === 'admin::user'\n          ) {\n            filter = {\n              ...filter,\n              input: AdminUsersFilter,\n              options: users.map((user) => ({\n                label: getDisplayName(user),\n                value: user.id.toString(),\n              })),\n              operators: [\n                {\n                  label: formatMessage({\n                    id: 'components.FilterOptions.FILTER_TYPES.$eq',\n                    defaultMessage: 'is',\n                  }),\n                  value: '$eq',\n                },\n                {\n                  label: formatMessage({\n                    id: 'components.FilterOptions.FILTER_TYPES.$ne',\n                    defaultMessage: 'is not',\n                  }),\n                  value: '$ne',\n                },\n              ],\n              mainField: {\n                name: 'id',\n                type: 'integer',\n              },\n            };\n          }\n\n          if (attribute.type === 'enumeration') {\n            filter = {\n              ...filter,\n              options: attribute.enum.map((value) => ({\n                label: value,\n                value,\n              })),\n            };\n          }\n\n          return filter;\n        })\n        .filter(Boolean) as Filters.Filter[]\n    ).toSorted((a, b) => formatter.compare(a.label, b.label));\n  }, [\n    allPermissions,\n    canReadAdminUsers,\n    model,\n    attributes,\n    metadata,\n    schemas,\n    users,\n    formatMessage,\n    formatter,\n  ]);\n\n  const onOpenChange = (isOpen: boolean) => {\n    if (isOpen) {\n      trackUsage('willFilterEntries');\n    }\n  };\n\n  const handleFilterChange: Filters.Props['onChange'] = (data) => {\n    const attribute = attributes[data.name];\n\n    if (attribute) {\n      trackUsage('didFilterEntries', {\n        useRelation: attribute.type === 'relation',\n      });\n    }\n  };\n\n  return (\n    <Filters.Root\n      disabled={disabled}\n      options={displayedFilters}\n      onOpenChange={onOpenChange}\n      onChange={handleFilterChange}\n    >\n      <Filters.Trigger />\n      <Filters.Popover zIndex={499} />\n      <Filters.List />\n    </Filters.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AdminUsersFilter\n * -----------------------------------------------------------------------------------------------*/\n\nconst AdminUsersFilter = ({ name }: Filters.ValueInputProps) => {\n  const [pageSize, setPageSize] = React.useState(10);\n  const [search, setSearch] = React.useState('');\n  const { formatMessage } = useIntl();\n\n  const debouncedSearch = useDebounce(search, 300);\n\n  const { data, isLoading } = useAdminUsers({\n    pageSize,\n    _q: debouncedSearch,\n  });\n  const field = useField(name);\n\n  const handleOpenChange = (isOpen?: boolean) => {\n    if (!isOpen) {\n      setPageSize(10);\n    }\n  };\n\n  const { users = [], pagination } = data ?? {};\n  const { pageCount = 1, page = 1 } = pagination ?? {};\n\n  return (\n    <Combobox\n      value={field.value}\n      aria-label={formatMessage({\n        id: 'content-manager.components.Filters.usersSelect.label',\n        defaultMessage: 'Search and select a user to filter',\n      })}\n      onOpenChange={handleOpenChange}\n      onChange={(value) => field.onChange(name, value)}\n      loading={isLoading}\n      onLoadMore={() => setPageSize(pageSize + 10)}\n      hasMoreItems={page < pageCount}\n      onInputChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n        setSearch(e.currentTarget.value);\n      }}\n    >\n      {users.map((user) => {\n        return (\n          <ComboboxOption key={user.id} value={user.id.toString()}>\n            {getDisplayName(user)}\n          </ComboboxOption>\n        );\n      })}\n    </Combobox>\n  );\n};\n\nexport { FiltersImpl as Filters };\nexport type { FiltersProps };\n"],"names":["NOT_ALLOWED_FILTERS","DEFAULT_ALLOWED_FILTERS","USER_FILTER_ATTRIBUTES","CREATOR_FIELDS","FiltersImpl","disabled","schema","attributes","uid","model","options","formatMessage","locale","useIntl","trackUsage","useTracking","allPermissions","useAuth","state","permissions","query","useQueryParams","schemas","useContentTypeSchema","canReadAdminUsers","React","useMemo","filter","permission","action","subject","length","selectedUserIds","filters","$and","reduce","acc","key","value","Object","entries","id","$eq","$ne","includes","push","data","userData","isLoading","isLoadingAdminUsers","useAdminUsers","$in","skip","users","metadata","useGetContentTypeConfigurationQuery","selectFromResult","contentType","metadatas","formatter","useCollator","sensitivity","displayedFilters","properties","fields","allowedFields","field","attribute","type","map","name","mainField","mainFieldName","label","list","getMainField","components","target","input","AdminUsersFilter","user","getDisplayName","toString","operators","defaultMessage","enum","Boolean","toSorted","a","b","compare","onOpenChange","isOpen","handleFilterChange","useRelation","_jsxs","Filters","Root","onChange","_jsx","Trigger","Popover","zIndex","List","pageSize","setPageSize","useState","search","setSearch","debouncedSearch","useDebounce","_q","useField","handleOpenChange","pagination","pageCount","page","Combobox","aria-label","loading","onLoadMore","hasMoreItems","onInputChange","e","currentTarget","ComboboxOption"],"mappings":"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"}

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

@@ -0,0 +1,73 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var InputRenderer = require('../../pages/EditView/components/InputRenderer.js');
+var Preview = require('../pages/Preview.js');
+
+const [InputPopoverProvider, useInputPopoverContext] = strapiAdmin.createContext('InputPopover');
+const InputPopover = ({ documentResponse })=>{
+    const iframeRef = Preview.usePreviewContext('VisualEditingPopover', (state)=>state.iframeRef);
+    const popoverField = Preview.usePreviewContext('VisualEditingPopover', (state)=>state.popoverField);
+    const setPopoverField = Preview.usePreviewContext('VisualEditingPopover', (state)=>state.setPopoverField);
+    if (!popoverField || !documentResponse.schema || !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
+            }),
+            /*#__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: documentResponse.schema.attributes[popoverField.path],
+                                    label: popoverField.path,
+                                    name: popoverField.path,
+                                    type: documentResponse.schema.attributes[popoverField.path].type,
+                                    visible: true
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+function useHasInputPopoverParent() {
+    const context = useInputPopoverContext('useHasInputPopoverParent', ()=>true, false);
+    // useContext will return undefined if the called is not wrapped in the provider
+    return context !== undefined;
+}
+
+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 } from '@strapi/admin/strapi-admin';\nimport { Box, Popover } from '@strapi/design-system';\n\nimport { type UseDocument } from '../../hooks/useDocument';\nimport { InputRenderer } from '../../pages/EditView/components/InputRenderer';\nimport { usePreviewContext } from '../pages/Preview';\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\nconst InputPopover = ({ documentResponse }: { documentResponse: ReturnType<UseDocument> }) => {\n  const iframeRef = usePreviewContext('VisualEditingPopover', (state) => state.iframeRef);\n  const popoverField = usePreviewContext('VisualEditingPopover', (state) => state.popoverField);\n  const setPopoverField = usePreviewContext(\n    'VisualEditingPopover',\n    (state) => state.setPopoverField\n  );\n\n  if (!popoverField || !documentResponse.schema || !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      />\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              <InputRenderer\n                document={documentResponse}\n                attribute={documentResponse.schema.attributes[popoverField.path] as any}\n                label={popoverField.path}\n                name={popoverField.path}\n                type={documentResponse.schema.attributes[popoverField.path].type}\n                visible={true}\n              />\n            </Box>\n          </Popover.Content>\n        </Popover.Root>\n      </InputPopoverProvider>\n    </>\n  );\n};\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\nexport { InputPopover, useHasInputPopoverParent };\n"],"names":["InputPopoverProvider","useInputPopoverContext","createContext","InputPopover","documentResponse","iframeRef","usePreviewContext","state","popoverField","setPopoverField","schema","current","iframeRect","getBoundingClientRect","_jsxs","_Fragment","_jsx","Box","position","top","left","width","height","zIndex","Popover","Root","open","onOpenChange","Trigger","transform","Content","sideOffset","padding","InputRenderer","document","attribute","attributes","path","label","name","type","visible","useHasInputPopoverParent","context","undefined"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import { createContext } from '@strapi/admin/strapi-admin';
+import { Box, Popover } from '@strapi/design-system';
+import { InputRenderer as MemoizedInputRenderer } from '../../pages/EditView/components/InputRenderer.mjs';
+import { usePreviewContext } from '../pages/Preview.mjs';
+
+const [InputPopoverProvider, useInputPopoverContext] = createContext('InputPopover');
+const InputPopover = ({ documentResponse })=>{
+    const iframeRef = usePreviewContext('VisualEditingPopover', (state)=>state.iframeRef);
+    const popoverField = usePreviewContext('VisualEditingPopover', (state)=>state.popoverField);
+    const setPopoverField = usePreviewContext('VisualEditingPopover', (state)=>state.setPopoverField);
+    if (!popoverField || !documentResponse.schema || !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
+            }),
+            /*#__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: documentResponse.schema.attributes[popoverField.path],
+                                    label: popoverField.path,
+                                    name: popoverField.path,
+                                    type: documentResponse.schema.attributes[popoverField.path].type,
+                                    visible: true
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+function useHasInputPopoverParent() {
+    const context = useInputPopoverContext('useHasInputPopoverParent', ()=>true, false);
+    // useContext will return undefined if the called is not wrapped in the provider
+    return context !== undefined;
+}
+
+export { InputPopover, useHasInputPopoverParent };
+//# sourceMappingURL=InputPopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputPopover.mjs","sources":["../../../../admin/src/preview/components/InputPopover.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext } from '@strapi/admin/strapi-admin';\nimport { Box, Popover } from '@strapi/design-system';\n\nimport { type UseDocument } from '../../hooks/useDocument';\nimport { InputRenderer } from '../../pages/EditView/components/InputRenderer';\nimport { usePreviewContext } from '../pages/Preview';\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\nconst InputPopover = ({ documentResponse }: { documentResponse: ReturnType<UseDocument> }) => {\n  const iframeRef = usePreviewContext('VisualEditingPopover', (state) => state.iframeRef);\n  const popoverField = usePreviewContext('VisualEditingPopover', (state) => state.popoverField);\n  const setPopoverField = usePreviewContext(\n    'VisualEditingPopover',\n    (state) => state.setPopoverField\n  );\n\n  if (!popoverField || !documentResponse.schema || !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      />\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              <InputRenderer\n                document={documentResponse}\n                attribute={documentResponse.schema.attributes[popoverField.path] as any}\n                label={popoverField.path}\n                name={popoverField.path}\n                type={documentResponse.schema.attributes[popoverField.path].type}\n                visible={true}\n              />\n            </Box>\n          </Popover.Content>\n        </Popover.Root>\n      </InputPopoverProvider>\n    </>\n  );\n};\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\nexport { InputPopover, useHasInputPopoverParent };\n"],"names":["InputPopoverProvider","useInputPopoverContext","createContext","InputPopover","documentResponse","iframeRef","usePreviewContext","state","popoverField","setPopoverField","schema","current","iframeRect","getBoundingClientRect","_jsxs","_Fragment","_jsx","Box","position","top","left","width","height","zIndex","Popover","Root","open","onOpenChange","Trigger","transform","Content","sideOffset","padding","InputRenderer","document","attribute","attributes","path","label","name","type","visible","useHasInputPopoverParent","context","undefined"],"mappings":"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"}

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

@@ -24,6 +24,11 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
     const { pathname } = reactRouterDom.useLocation();
     const [{ query }] = strapiAdmin.useQueryParams();
     const isModified = strapiAdmin.useForm('PreviewSidePanel', (state)=>state.modified);
+    const isUnsaved = Boolean(!document || !document.id);
+    const title = formatMessage({
+        id: 'content-manager.preview.panel.title',
+        defaultMessage: 'Preview'
+    });
     /**
    * The preview URL isn't used in this component, we just fetch it to know if preview is enabled
    * for the content type. If it's not, the panel is not displayed. If it is, we display a link to
@@ -37,7 +42,32 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
             locale: document?.locale,
             status: document?.status
         }
+    }, // Don't bother making the request since we won't show any UI
+    {
+        skip: isUnsaved
     });
+    if (isUnsaved) {
+        return null;
+    }
+    // Preview was not configured but not disabled either (otherwise it would be a success 204).
+    // So we encourage the user to set it up.
+    if (error && error.name === 'NotFoundError') {
+        return {
+            title,
+            content: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                variant: "tertiary",
+                tag: reactRouterDom.Link,
+                to: "https://docs.strapi.io/cms/features/preview",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                width: "100%",
+                children: formatMessage({
+                    id: 'content-manager.preview.panel.button-configuration',
+                    defaultMessage: 'Set up preview'
+                })
+            })
+        };
+    }
     if (!data?.data?.url || error) {
         return null;
     }
@@ -50,10 +80,7 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
         });
     };
     return {
-        title: formatMessage({
-            id: 'content-manager.preview.panel.title',
-            defaultMessage: 'Preview'
-        }),
+        title,
         content: /*#__PURE__*/ jsxRuntime.jsx(ConditionalTooltip, {
             label: formatMessage({
                 id: 'content-manager.preview.panel.button-disabled-tooltip',

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewSidePanel.js","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n  isShown: boolean;\n  label: TooltipProps['label'];\n  children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n  if (isShown) {\n    return <Tooltip label={label}>{children}</Tooltip>;\n  }\n\n  return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const [{ query }] = useQueryParams();\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n\n  /**\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n   * /preview, and the URL will already be loaded in the RTK query cache.\n   */\n  const { data, error } = useGetPreviewUrlQuery({\n    params: {\n      contentType: model as UID.ContentType,\n    },\n    query: {\n      documentId,\n      locale: document?.locale,\n      status: document?.status,\n    },\n  });\n\n  if (!data?.data?.url || error) {\n    return null;\n  }\n\n  const trackNavigation = () => {\n    // Append /preview to the current URL\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n  };\n\n  return {\n    title: formatMessage({ id: 'content-manager.preview.panel.title', defaultMessage: 'Preview' }),\n    content: (\n      <ConditionalTooltip\n        label={formatMessage({\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\n          defaultMessage: 'Please save to open the preview',\n        })}\n        isShown={isModified}\n      >\n        <Box cursor=\"not-allowed\" width=\"100%\">\n          <Button\n            variant=\"tertiary\"\n            tag={Link}\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n            onClick={trackNavigation}\n            width=\"100%\"\n            disabled={isModified}\n            pointerEvents={isModified ? 'none' : undefined}\n            tabIndex={isModified ? -1 : undefined}\n          >\n            {formatMessage({\n              id: 'content-manager.preview.panel.button',\n              defaultMessage: 'Open preview',\n            })}\n          </Button>\n        </Box>\n      </ConditionalTooltip>\n    ),\n  };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","url","trackNavigation","destinationPathname","replace","from","to","title","id","defaultMessage","content","Box","cursor","width","Button","variant","tag","Link","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":"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"}
+{"version":3,"file":"PreviewSidePanel.js","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n  isShown: boolean;\n  label: TooltipProps['label'];\n  children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n  if (isShown) {\n    return <Tooltip label={label}>{children}</Tooltip>;\n  }\n\n  return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const [{ query }] = useQueryParams();\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n  const isUnsaved = Boolean(!document || !document.id);\n\n  const title = formatMessage({\n    id: 'content-manager.preview.panel.title',\n    defaultMessage: 'Preview',\n  });\n\n  /**\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n   * /preview, and the URL will already be loaded in the RTK query cache.\n   */\n  const { data, error } = useGetPreviewUrlQuery(\n    {\n      params: {\n        contentType: model as UID.ContentType,\n      },\n      query: {\n        documentId,\n        locale: document?.locale,\n        status: document?.status,\n      },\n    },\n    // Don't bother making the request since we won't show any UI\n    { skip: isUnsaved }\n  );\n\n  if (isUnsaved) {\n    return null;\n  }\n\n  // Preview was not configured but not disabled either (otherwise it would be a success 204).\n  // So we encourage the user to set it up.\n  if (error && error.name === 'NotFoundError') {\n    return {\n      title,\n      content: (\n        <Button\n          variant=\"tertiary\"\n          tag={Link}\n          to=\"https://docs.strapi.io/cms/features/preview\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          width=\"100%\"\n        >\n          {formatMessage({\n            id: 'content-manager.preview.panel.button-configuration',\n            defaultMessage: 'Set up preview',\n          })}\n        </Button>\n      ),\n    };\n  }\n\n  if (!data?.data?.url || error) {\n    return null;\n  }\n\n  const trackNavigation = () => {\n    // Append /preview to the current URL\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n  };\n\n  return {\n    title,\n    content: (\n      <ConditionalTooltip\n        label={formatMessage({\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\n          defaultMessage: 'Please save to open the preview',\n        })}\n        isShown={isModified}\n      >\n        <Box cursor=\"not-allowed\" width=\"100%\">\n          <Button\n            variant=\"tertiary\"\n            tag={Link}\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n            onClick={trackNavigation}\n            width=\"100%\"\n            disabled={isModified}\n            pointerEvents={isModified ? 'none' : undefined}\n            tabIndex={isModified ? -1 : undefined}\n          >\n            {formatMessage({\n              id: 'content-manager.preview.panel.button',\n              defaultMessage: 'Open preview',\n            })}\n          </Button>\n        </Box>\n      </ConditionalTooltip>\n    ),\n  };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","isUnsaved","Boolean","id","title","defaultMessage","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","skip","name","content","Button","variant","tag","Link","to","target","rel","width","url","trackNavigation","destinationPathname","replace","from","Box","cursor","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { useTracking, useQueryParams, useForm } from '@strapi/admin/strapi-admin';
-import { Box, Button, Tooltip } from '@strapi/design-system';
+import { Button, Box, Tooltip } from '@strapi/design-system';
 import { stringify } from 'qs';
 import { useIntl } from 'react-intl';
 import { useLocation, Link } from 'react-router-dom';
@@ -22,6 +22,11 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
     const { pathname } = useLocation();
     const [{ query }] = useQueryParams();
     const isModified = useForm('PreviewSidePanel', (state)=>state.modified);
+    const isUnsaved = Boolean(!document || !document.id);
+    const title = formatMessage({
+        id: 'content-manager.preview.panel.title',
+        defaultMessage: 'Preview'
+    });
     /**
    * The preview URL isn't used in this component, we just fetch it to know if preview is enabled
    * for the content type. If it's not, the panel is not displayed. If it is, we display a link to
@@ -35,7 +40,32 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
             locale: document?.locale,
             status: document?.status
         }
+    }, // Don't bother making the request since we won't show any UI
+    {
+        skip: isUnsaved
     });
+    if (isUnsaved) {
+        return null;
+    }
+    // Preview was not configured but not disabled either (otherwise it would be a success 204).
+    // So we encourage the user to set it up.
+    if (error && error.name === 'NotFoundError') {
+        return {
+            title,
+            content: /*#__PURE__*/ jsx(Button, {
+                variant: "tertiary",
+                tag: Link,
+                to: "https://docs.strapi.io/cms/features/preview",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                width: "100%",
+                children: formatMessage({
+                    id: 'content-manager.preview.panel.button-configuration',
+                    defaultMessage: 'Set up preview'
+                })
+            })
+        };
+    }
     if (!data?.data?.url || error) {
         return null;
     }
@@ -48,10 +78,7 @@ const PreviewSidePanel = ({ model, documentId, document })=>{
         });
     };
     return {
-        title: formatMessage({
-            id: 'content-manager.preview.panel.title',
-            defaultMessage: 'Preview'
-        }),
+        title,
         content: /*#__PURE__*/ jsx(ConditionalTooltip, {
             label: formatMessage({
                 id: 'content-manager.preview.panel.button-disabled-tooltip',

package/dist/admin/preview/components/PreviewSidePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewSidePanel.mjs","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n  isShown: boolean;\n  label: TooltipProps['label'];\n  children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n  if (isShown) {\n    return <Tooltip label={label}>{children}</Tooltip>;\n  }\n\n  return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const [{ query }] = useQueryParams();\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n\n  /**\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n   * /preview, and the URL will already be loaded in the RTK query cache.\n   */\n  const { data, error } = useGetPreviewUrlQuery({\n    params: {\n      contentType: model as UID.ContentType,\n    },\n    query: {\n      documentId,\n      locale: document?.locale,\n      status: document?.status,\n    },\n  });\n\n  if (!data?.data?.url || error) {\n    return null;\n  }\n\n  const trackNavigation = () => {\n    // Append /preview to the current URL\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n  };\n\n  return {\n    title: formatMessage({ id: 'content-manager.preview.panel.title', defaultMessage: 'Preview' }),\n    content: (\n      <ConditionalTooltip\n        label={formatMessage({\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\n          defaultMessage: 'Please save to open the preview',\n        })}\n        isShown={isModified}\n      >\n        <Box cursor=\"not-allowed\" width=\"100%\">\n          <Button\n            variant=\"tertiary\"\n            tag={Link}\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n            onClick={trackNavigation}\n            width=\"100%\"\n            disabled={isModified}\n            pointerEvents={isModified ? 'none' : undefined}\n            tabIndex={isModified ? -1 : undefined}\n          >\n            {formatMessage({\n              id: 'content-manager.preview.panel.button',\n              defaultMessage: 'Open preview',\n            })}\n          </Button>\n        </Box>\n      </ConditionalTooltip>\n    ),\n  };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","url","trackNavigation","destinationPathname","replace","from","to","title","id","defaultMessage","content","Box","cursor","width","Button","variant","tag","Link","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":";;;;;;;;;AAmBA,MAAMA,kBAAAA,GAAqB,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAA2B,GAAA;AAC/E,IAAA,IAAIF,OAAS,EAAA;AACX,QAAA,qBAAOG,GAACC,CAAAA,OAAAA,EAAAA;YAAQH,KAAOA,EAAAA,KAAAA;AAAQC,YAAAA,QAAAA,EAAAA;;AACjC;IAEA,OAAOA,QAAAA;AACT,CAAA;AAEMG,MAAAA,gBAAAA,GAAmC,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAA;IACvE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAAA,EAAAA;AACrB,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;AACpB,IAAA,MAAMC,aAAaC,OAAQ,CAAA,kBAAA,EAAoB,CAACC,KAAAA,GAAUA,MAAMC,QAAQ,CAAA;AAExE;;;;AAIC,MACD,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,qBAAsB,CAAA;QAC5CC,MAAQ,EAAA;YACNC,WAAanB,EAAAA;AACf,SAAA;QACAS,KAAO,EAAA;AACLR,YAAAA,UAAAA;AACAmB,YAAAA,MAAAA,EAAQlB,QAAUkB,EAAAA,MAAAA;AAClBC,YAAAA,MAAAA,EAAQnB,QAAUmB,EAAAA;AACpB;AACF,KAAA,CAAA;AAEA,IAAA,IAAI,CAACN,IAAAA,EAAMA,IAAMO,EAAAA,GAAAA,IAAON,KAAO,EAAA;QAC7B,OAAO,IAAA;AACT;AAEA,IAAA,MAAMO,eAAkB,GAAA,IAAA;;AAEtB,QAAA,MAAMC,mBAAsBjB,GAAAA,QAAAA,CAASkB,OAAO,CAAC,OAAO,EAAM,CAAA,GAAA,UAAA;AAC1DpB,QAAAA,UAAAA,CAAW,cAAgB,EAAA;YAAEqB,IAAMnB,EAAAA,QAAAA;YAAUoB,EAAIH,EAAAA;AAAoB,SAAA,CAAA;AACvE,KAAA;IAEA,OAAO;AACLI,QAAAA,KAAAA,EAAOzB,aAAc,CAAA;YAAE0B,EAAI,EAAA,qCAAA;YAAuCC,cAAgB,EAAA;AAAU,SAAA,CAAA;AAC5FC,QAAAA,OAAAA,gBACElC,GAACJ,CAAAA,kBAAAA,EAAAA;AACCE,YAAAA,KAAAA,EAAOQ,aAAc,CAAA;gBACnB0B,EAAI,EAAA,uDAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;YACApC,OAASiB,EAAAA,UAAAA;AAET,YAAA,QAAA,gBAAAd,GAACmC,CAAAA,GAAAA,EAAAA;gBAAIC,MAAO,EAAA,aAAA;gBAAcC,KAAM,EAAA,MAAA;AAC9B,gBAAA,QAAA,gBAAArC,GAACsC,CAAAA,MAAAA,EAAAA;oBACCC,OAAQ,EAAA,UAAA;oBACRC,GAAKC,EAAAA,IAAAA;oBACLX,EAAI,EAAA;wBAAEpB,QAAU,EAAA,SAAA;AAAWgC,wBAAAA,MAAAA,EAAQC,UAAU/B,KAAO,EAAA;4BAAEgC,MAAQ,EAAA;AAAM,yBAAA;AAAG,qBAAA;oBACvEC,OAASnB,EAAAA,eAAAA;oBACTW,KAAM,EAAA,MAAA;oBACNS,QAAUhC,EAAAA,UAAAA;AACViC,oBAAAA,aAAAA,EAAejC,aAAa,MAASkC,GAAAA,SAAAA;oBACrCC,QAAUnC,EAAAA,UAAAA,GAAa,CAAC,CAAIkC,GAAAA,SAAAA;8BAE3B1C,aAAc,CAAA;wBACb0B,EAAI,EAAA,sCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;AAKV,KAAA;AACF;;;;"}
+{"version":3,"file":"PreviewSidePanel.mjs","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n  isShown: boolean;\n  label: TooltipProps['label'];\n  children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n  if (isShown) {\n    return <Tooltip label={label}>{children}</Tooltip>;\n  }\n\n  return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const [{ query }] = useQueryParams();\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n  const isUnsaved = Boolean(!document || !document.id);\n\n  const title = formatMessage({\n    id: 'content-manager.preview.panel.title',\n    defaultMessage: 'Preview',\n  });\n\n  /**\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n   * /preview, and the URL will already be loaded in the RTK query cache.\n   */\n  const { data, error } = useGetPreviewUrlQuery(\n    {\n      params: {\n        contentType: model as UID.ContentType,\n      },\n      query: {\n        documentId,\n        locale: document?.locale,\n        status: document?.status,\n      },\n    },\n    // Don't bother making the request since we won't show any UI\n    { skip: isUnsaved }\n  );\n\n  if (isUnsaved) {\n    return null;\n  }\n\n  // Preview was not configured but not disabled either (otherwise it would be a success 204).\n  // So we encourage the user to set it up.\n  if (error && error.name === 'NotFoundError') {\n    return {\n      title,\n      content: (\n        <Button\n          variant=\"tertiary\"\n          tag={Link}\n          to=\"https://docs.strapi.io/cms/features/preview\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          width=\"100%\"\n        >\n          {formatMessage({\n            id: 'content-manager.preview.panel.button-configuration',\n            defaultMessage: 'Set up preview',\n          })}\n        </Button>\n      ),\n    };\n  }\n\n  if (!data?.data?.url || error) {\n    return null;\n  }\n\n  const trackNavigation = () => {\n    // Append /preview to the current URL\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n  };\n\n  return {\n    title,\n    content: (\n      <ConditionalTooltip\n        label={formatMessage({\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\n          defaultMessage: 'Please save to open the preview',\n        })}\n        isShown={isModified}\n      >\n        <Box cursor=\"not-allowed\" width=\"100%\">\n          <Button\n            variant=\"tertiary\"\n            tag={Link}\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n            onClick={trackNavigation}\n            width=\"100%\"\n            disabled={isModified}\n            pointerEvents={isModified ? 'none' : undefined}\n            tabIndex={isModified ? -1 : undefined}\n          >\n            {formatMessage({\n              id: 'content-manager.preview.panel.button',\n              defaultMessage: 'Open preview',\n            })}\n          </Button>\n        </Box>\n      </ConditionalTooltip>\n    ),\n  };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","isUnsaved","Boolean","id","title","defaultMessage","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","skip","name","content","Button","variant","tag","Link","to","target","rel","width","url","trackNavigation","destinationPathname","replace","from","Box","cursor","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":"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"}

package/dist/admin/preview/hooks/usePreviewInputManager.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var InputPopover = require('../components/InputPopover.js');
+var Preview = require('../pages/Preview.js');
+var constants = require('../utils/constants.js');
+var getSendMessage = require('../utils/getSendMessage.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);
+
+function usePreviewInputManager(name) {
+    const iframe = Preview.usePreviewContext('usePreviewInputManager', (state)=>state.iframeRef, false);
+    const setPopoverField = Preview.usePreviewContext('usePreviewInputManager', (state)=>state.setPopoverField, false);
+    const hasInputPopoverParent = InputPopover.useHasInputPopoverParent();
+    const { value } = strapiAdmin.useField(name);
+    React__namespace.useEffect(()=>{
+        if (!iframe) {
+            return;
+        }
+        const sendMessage = getSendMessage.getSendMessage(iframe);
+        sendMessage(constants.INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, {
+            field: name,
+            value
+        });
+    }, [
+        name,
+        value,
+        iframe
+    ]);
+    const sendMessage = getSendMessage.getSendMessage(iframe);
+    return {
+        onFocus: ()=>{
+            if (hasInputPopoverParent) return;
+            sendMessage(constants.INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, {
+                field: name
+            });
+        },
+        onBlur: ()=>{
+            if (hasInputPopoverParent) return;
+            setPopoverField?.(null);
+            sendMessage(constants.INTERNAL_EVENTS.STRAPI_FIELD_BLUR, {
+                field: name
+            });
+        }
+    };
+}
+
+exports.usePreviewInputManager = usePreviewInputManager;
+//# sourceMappingURL=usePreviewInputManager.js.map

package/dist/admin/preview/hooks/usePreviewInputManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewInputManager.js","sources":["../../../../admin/src/preview/hooks/usePreviewInputManager.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useField } from '@strapi/admin/strapi-admin';\n\nimport { useHasInputPopoverParent } from '../components/InputPopover';\nimport { usePreviewContext } from '../pages/Preview';\nimport { INTERNAL_EVENTS } from '../utils/constants';\nimport { getSendMessage } from '../utils/getSendMessage';\n\ntype PreviewInputProps = Pick<\n  Required<React.InputHTMLAttributes<HTMLInputElement>>,\n  'onFocus' | 'onBlur'\n>;\n\nexport function usePreviewInputManager(name: string): PreviewInputProps {\n  const iframe = usePreviewContext('usePreviewInputManager', (state) => state.iframeRef, false);\n  const setPopoverField = usePreviewContext(\n    'usePreviewInputManager',\n    (state) => state.setPopoverField,\n    false\n  );\n  const hasInputPopoverParent = useHasInputPopoverParent();\n  const { value } = useField(name);\n\n  React.useEffect(() => {\n    if (!iframe) {\n      return;\n    }\n\n    const sendMessage = getSendMessage(iframe);\n    sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, { field: name, value });\n  }, [name, value, iframe]);\n\n  const sendMessage = getSendMessage(iframe);\n\n  return {\n    onFocus: () => {\n      if (hasInputPopoverParent) return;\n\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, { field: name });\n    },\n    onBlur: () => {\n      if (hasInputPopoverParent) return;\n\n      setPopoverField?.(null);\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_BLUR, { field: name });\n    },\n  };\n}\n"],"names":["usePreviewInputManager","name","iframe","usePreviewContext","state","iframeRef","setPopoverField","hasInputPopoverParent","useHasInputPopoverParent","value","useField","React","useEffect","sendMessage","getSendMessage","INTERNAL_EVENTS","STRAPI_FIELD_CHANGE","field","onFocus","STRAPI_FIELD_FOCUS","onBlur","STRAPI_FIELD_BLUR"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAASA,uBAAuBC,IAAY,EAAA;AACjD,IAAA,MAAMC,SAASC,yBAAkB,CAAA,wBAAA,EAA0B,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,EAAE,KAAA,CAAA;AACvF,IAAA,MAAMC,kBAAkBH,yBACtB,CAAA,wBAAA,EACA,CAACC,KAAUA,GAAAA,KAAAA,CAAME,eAAe,EAChC,KAAA,CAAA;AAEF,IAAA,MAAMC,qBAAwBC,GAAAA,qCAAAA,EAAAA;AAC9B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,oBAAST,CAAAA,IAAAA,CAAAA;AAE3BU,IAAAA,gBAAAA,CAAMC,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACV,MAAQ,EAAA;AACX,YAAA;AACF;AAEA,QAAA,MAAMW,cAAcC,6BAAeZ,CAAAA,MAAAA,CAAAA;QACnCW,WAAYE,CAAAA,yBAAAA,CAAgBC,mBAAmB,EAAE;YAAEC,KAAOhB,EAAAA,IAAAA;AAAMQ,YAAAA;AAAM,SAAA,CAAA;KACrE,EAAA;AAACR,QAAAA,IAAAA;AAAMQ,QAAAA,KAAAA;AAAOP,QAAAA;AAAO,KAAA,CAAA;AAExB,IAAA,MAAMW,cAAcC,6BAAeZ,CAAAA,MAAAA,CAAAA;IAEnC,OAAO;QACLgB,OAAS,EAAA,IAAA;AACP,YAAA,IAAIX,qBAAuB,EAAA;YAE3BM,WAAYE,CAAAA,yBAAAA,CAAgBI,kBAAkB,EAAE;gBAAEF,KAAOhB,EAAAA;AAAK,aAAA,CAAA;AAChE,SAAA;QACAmB,MAAQ,EAAA,IAAA;AACN,YAAA,IAAIb,qBAAuB,EAAA;YAE3BD,eAAkB,GAAA,IAAA,CAAA;YAClBO,WAAYE,CAAAA,yBAAAA,CAAgBM,iBAAiB,EAAE;gBAAEJ,KAAOhB,EAAAA;AAAK,aAAA,CAAA;AAC/D;AACF,KAAA;AACF;;;;"}

package/dist/admin/preview/hooks/usePreviewInputManager.mjs

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useField } from '@strapi/admin/strapi-admin';
+import { useHasInputPopoverParent } from '../components/InputPopover.mjs';
+import { usePreviewContext } from '../pages/Preview.mjs';
+import { INTERNAL_EVENTS } from '../utils/constants.mjs';
+import { getSendMessage } from '../utils/getSendMessage.mjs';
+
+function usePreviewInputManager(name) {
+    const iframe = usePreviewContext('usePreviewInputManager', (state)=>state.iframeRef, false);
+    const setPopoverField = usePreviewContext('usePreviewInputManager', (state)=>state.setPopoverField, false);
+    const hasInputPopoverParent = useHasInputPopoverParent();
+    const { value } = useField(name);
+    React.useEffect(()=>{
+        if (!iframe) {
+            return;
+        }
+        const sendMessage = getSendMessage(iframe);
+        sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, {
+            field: name,
+            value
+        });
+    }, [
+        name,
+        value,
+        iframe
+    ]);
+    const sendMessage = getSendMessage(iframe);
+    return {
+        onFocus: ()=>{
+            if (hasInputPopoverParent) return;
+            sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, {
+                field: name
+            });
+        },
+        onBlur: ()=>{
+            if (hasInputPopoverParent) return;
+            setPopoverField?.(null);
+            sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_BLUR, {
+                field: name
+            });
+        }
+    };
+}
+
+export { usePreviewInputManager };
+//# sourceMappingURL=usePreviewInputManager.mjs.map

package/dist/admin/preview/hooks/usePreviewInputManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewInputManager.mjs","sources":["../../../../admin/src/preview/hooks/usePreviewInputManager.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useField } from '@strapi/admin/strapi-admin';\n\nimport { useHasInputPopoverParent } from '../components/InputPopover';\nimport { usePreviewContext } from '../pages/Preview';\nimport { INTERNAL_EVENTS } from '../utils/constants';\nimport { getSendMessage } from '../utils/getSendMessage';\n\ntype PreviewInputProps = Pick<\n  Required<React.InputHTMLAttributes<HTMLInputElement>>,\n  'onFocus' | 'onBlur'\n>;\n\nexport function usePreviewInputManager(name: string): PreviewInputProps {\n  const iframe = usePreviewContext('usePreviewInputManager', (state) => state.iframeRef, false);\n  const setPopoverField = usePreviewContext(\n    'usePreviewInputManager',\n    (state) => state.setPopoverField,\n    false\n  );\n  const hasInputPopoverParent = useHasInputPopoverParent();\n  const { value } = useField(name);\n\n  React.useEffect(() => {\n    if (!iframe) {\n      return;\n    }\n\n    const sendMessage = getSendMessage(iframe);\n    sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, { field: name, value });\n  }, [name, value, iframe]);\n\n  const sendMessage = getSendMessage(iframe);\n\n  return {\n    onFocus: () => {\n      if (hasInputPopoverParent) return;\n\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, { field: name });\n    },\n    onBlur: () => {\n      if (hasInputPopoverParent) return;\n\n      setPopoverField?.(null);\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_BLUR, { field: name });\n    },\n  };\n}\n"],"names":["usePreviewInputManager","name","iframe","usePreviewContext","state","iframeRef","setPopoverField","hasInputPopoverParent","useHasInputPopoverParent","value","useField","React","useEffect","sendMessage","getSendMessage","INTERNAL_EVENTS","STRAPI_FIELD_CHANGE","field","onFocus","STRAPI_FIELD_FOCUS","onBlur","STRAPI_FIELD_BLUR"],"mappings":";;;;;;;AAcO,SAASA,uBAAuBC,IAAY,EAAA;AACjD,IAAA,MAAMC,SAASC,iBAAkB,CAAA,wBAAA,EAA0B,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,EAAE,KAAA,CAAA;AACvF,IAAA,MAAMC,kBAAkBH,iBACtB,CAAA,wBAAA,EACA,CAACC,KAAUA,GAAAA,KAAAA,CAAME,eAAe,EAChC,KAAA,CAAA;AAEF,IAAA,MAAMC,qBAAwBC,GAAAA,wBAAAA,EAAAA;AAC9B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,QAAST,CAAAA,IAAAA,CAAAA;AAE3BU,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACV,MAAQ,EAAA;AACX,YAAA;AACF;AAEA,QAAA,MAAMW,cAAcC,cAAeZ,CAAAA,MAAAA,CAAAA;QACnCW,WAAYE,CAAAA,eAAAA,CAAgBC,mBAAmB,EAAE;YAAEC,KAAOhB,EAAAA,IAAAA;AAAMQ,YAAAA;AAAM,SAAA,CAAA;KACrE,EAAA;AAACR,QAAAA,IAAAA;AAAMQ,QAAAA,KAAAA;AAAOP,QAAAA;AAAO,KAAA,CAAA;AAExB,IAAA,MAAMW,cAAcC,cAAeZ,CAAAA,MAAAA,CAAAA;IAEnC,OAAO;QACLgB,OAAS,EAAA,IAAA;AACP,YAAA,IAAIX,qBAAuB,EAAA;YAE3BM,WAAYE,CAAAA,eAAAA,CAAgBI,kBAAkB,EAAE;gBAAEF,KAAOhB,EAAAA;AAAK,aAAA,CAAA;AAChE,SAAA;QACAmB,MAAQ,EAAA,IAAA;AACN,YAAA,IAAIb,qBAAuB,EAAA;YAE3BD,eAAkB,GAAA,IAAA,CAAA;YAClBO,WAAYE,CAAAA,eAAAA,CAAgBM,iBAAiB,EAAE;gBAAEJ,KAAOhB,EAAAA;AAAK,aAAA,CAAA;AAC/D;AACF,KAAA;AACF;;;;"}