npm - @strapi/content-manager - Versions diffs - 0.0.0-experimental.8bf99b7c43ed372264c198d347a2ada9dfed174d → 0.0.0-experimental.8c28a74d1219c09f4ee67402fd3a26f182c4990a - Mend

@strapi/content-manager 0.0.0-experimental.8bf99b7c43ed372264c198d347a2ada9dfed174d → 0.0.0-experimental.8c28a74d1219c09f4ee67402fd3a26f182c4990a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/dist/admin/pages/EditView/components/FormInputs/UID.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UID.mjs","sources":["../../../../../../admin/src/pages/EditView/components/FormInputs/UID.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n type InputProps,\n useField,\n useForm,\n useNotification,\n useAPIErrorHandler,\n useQueryParams,\n useFocusInputField,\n} from '@strapi/admin/strapi-admin';\nimport {\n Field,\n Flex,\n FlexComponent,\n TextInput,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CheckCircle, WarningCircle, Loader, ArrowClockwise } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useMatch } from 'react-router-dom';\nimport { styled, keyframes } from 'styled-components';\n\nimport { useDebounce } from '../../../../hooks/useDebounce';\nimport { useDoc } from '../../../../hooks/useDocument';\nimport { CLONE_PATH } from '../../../../router';\nimport {\n useGenerateUIDMutation,\n useGetAvailabilityQuery,\n useGetDefaultUIDQuery,\n} from '../../../../services/uid';\nimport { buildValidParams } from '../../../../utils/api';\n\nimport type { CheckUIDAvailability } from '../../../../../../shared/contracts/uid';\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * InputUID\n * -----------------------------------------------------------------------------------------------/\n\nconst UID_REGEX = /^[A-Za-z0-9-_.~]$/;\n\ninterface UIDInputProps extends Omit<InputProps, 'type'> {\n type: Schema.Attribute.TypeOf<Schema.Attribute.UID>;\n}\n\nconst UIDInput = React.forwardRef<any, UIDInputProps>(\n ({ hint, label, labelAction, name, required, ...props }, ref) => {\n const { model, id } = useDoc();\n const allFormValues = useForm('InputUID', (form) => form.values);\n const [availability, setAvailability] = React.useState<CheckUIDAvailability.Response>();\n const [showRegenerate, setShowRegenerate] = React.useState(false);\n const isCloning = useMatch(CLONE_PATH) !== null;\n const field = useField(name);\n const debouncedValue = useDebounce(field.value, 300);\n const hasChanged = debouncedValue !== field.initialValue;\n const { toggleNotification } = useNotification();\n const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n const { formatMessage } = useIntl();\n const [{ query }] = useQueryParams();\n const params = React.useMemo(() => buildValidParams(query), [query]);\n\n const {\n data: defaultGeneratedUID,\n isLoading: isGeneratingDefaultUID,\n error: apiError,\n } = useGetDefaultUIDQuery(\n {\n contentTypeUID: model,\n field: name,\n data: {\n id: id ?? '',\n ...allFormValues,\n },\n params,\n },\n {\n skip: field.value \|\| !required,\n }\n );\n\n React.useEffect(() => {\n if (apiError) {\n toggleNotification({\n type: 'warning',\n message: formatAPIError(apiError),\n });\n }\n }, [apiError, formatAPIError, toggleNotification]);\n\n /*\n If the defaultGeneratedUID is available, then we set it as the value,\n * but we also want to set it as the initialValue too.\n /\n React.useEffect(() => {\n if (defaultGeneratedUID && field.value === undefined) {\n field.onChange(name, defaultGeneratedUID);\n }\n }, [defaultGeneratedUID, field, name]);\n\n const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();\n\n const handleRegenerateClick = async () => {\n try {\n const res = await generateUID({\n contentTypeUID: model,\n field: name,\n data: { id: id ?? '', ...allFormValues },\n params,\n });\n\n if ('data' in res) {\n field.onChange(name, res.data);\n } else {\n toggleNotification({\n type: 'danger',\n message: formatAPIError(res.error),\n });\n }\n } catch (err) {\n toggleNotification({\n type: 'danger',\n message: formatMessage({\n id: 'notification.error',\n defaultMessage: 'An error occurred.',\n }),\n });\n }\n };\n\n const {\n data: availabilityData,\n isLoading: isCheckingAvailability,\n error: availabilityError,\n } = useGetAvailabilityQuery(\n {\n contentTypeUID: model,\n field: name,\n value: debouncedValue ? debouncedValue.trim() : '',\n params,\n },\n {\n // Don't check availability if the value is empty or wasn't changed\n skip: !Boolean(\n (hasChanged \|\| isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim())\n ),\n }\n );\n\n React.useEffect(() => {\n if (availabilityError) {\n toggleNotification({\n type: 'warning',\n message: formatAPIError(availabilityError),\n });\n }\n }, [availabilityError, formatAPIError, toggleNotification]);\n\n React.useEffect(() => {\n /\n always store the data in state because that way as seen below\n * we can then remove the data to stop showing the label.\n /\n setAvailability(availabilityData);\n\n let timer: number;\n\n if (availabilityData?.isAvailable) {\n timer = window.setTimeout(() => {\n setAvailability(undefined);\n }, 4000);\n }\n\n return () => {\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [availabilityData]);\n\n const isLoading = isGeneratingDefaultUID \|\| isGeneratingUID \|\| isCheckingAvailability;\n\n const fieldRef = useFocusInputField(name);\n const composedRefs = useComposedRefs(ref, fieldRef);\n\n const shouldShowAvailability =\n (hasChanged \|\| isCloning) && debouncedValue != null && availability && !showRegenerate;\n\n return (\n <Field.Root hint={hint} name={name} error={field.error} required={required}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <TextInput\n ref={composedRefs}\n disabled={props.disabled}\n endAction={\n <Flex position=\"relative\" gap={1}>\n {shouldShowAvailability && (\n <TextValidation\n alignItems=\"center\"\n gap={1}\n justifyContent=\"flex-end\"\n $available={!!availability?.isAvailable}\n data-not-here-outer\n position=\"absolute\"\n pointerEvents=\"none\"\n right={6}\n width=\"100px\"\n >\n {availability?.isAvailable ? <CheckCircle /> : <WarningCircle />}\n\n <Typography\n textColor={availability.isAvailable ? 'success600' : 'danger600'}\n variant=\"pi\"\n >\n {formatMessage(\n availability.isAvailable\n ? {\n id: 'content-manager.components.uid.available',\n defaultMessage: 'Available',\n }\n : {\n id: 'content-manager.components.uid.unavailable',\n defaultMessage: 'Unavailable',\n }\n )}\n </Typography>\n </TextValidation>\n )}\n\n {!props.disabled && (\n <>\n {showRegenerate && (\n <TextValidation alignItems=\"center\" justifyContent=\"flex-end\" gap={1}>\n <Typography textColor=\"primary600\" variant=\"pi\">\n {formatMessage({\n id: 'content-manager.components.uid.regenerate',\n defaultMessage: 'Regenerate',\n })}\n </Typography>\n </TextValidation>\n )}\n\n <FieldActionWrapper\n onClick={handleRegenerateClick}\n label={formatMessage({\n id: 'content-manager.components.uid.regenerate',\n defaultMessage: 'Regenerate',\n })}\n onMouseEnter={() => setShowRegenerate(true)}\n onMouseLeave={() => setShowRegenerate(false)}\n >\n {isLoading ? (\n <LoadingWrapper data-testid=\"loading-wrapper\">\n <Loader />\n </LoadingWrapper>\n ) : (\n <ArrowClockwise />\n )}\n </FieldActionWrapper>\n </>\n )}\n </Flex>\n }\n onChange={field.onChange}\n value={field.value ?? ''}\n {...props}\n />\n <Field.Error />\n <Field.Hint />\n </Field.Root>\n );\n }\n);\n\n/ -------------------------------------------------------------------------------------------------\n * FieldActionWrapper\n * -----------------------------------------------------------------------------------------------/\n\nconst FieldActionWrapper = styled(Field.Action)`\n width: 1.6rem;\n\n svg {\n height: 1.6rem;\n width: 1.6rem;\n path {\n fill: ${({ theme }) => theme.colors.neutral400};\n }\n }\n\n svg:hover {\n path {\n fill: ${({ theme }) => theme.colors.primary600};\n }\n }\n`;\n\n/ -------------------------------------------------------------------------------------------------\n * TextValidation\n * -----------------------------------------------------------------------------------------------/\n\nconst TextValidation = styled<FlexComponent>(Flex)<{ $available?: boolean }>`\n svg {\n height: 1.2rem;\n width: 1.2rem;\n\n path {\n fill: ${({ theme, $available }) =>\n $available ? theme.colors.success600 : theme.colors.danger600};\n }\n }\n`;\n\n/ -------------------------------------------------------------------------------------------------\n * LoadingWrapper\n * -----------------------------------------------------------------------------------------------*/\n\nconst rotation = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n`;\n\nconst LoadingWrapper = styled<FlexComponent>(Flex)`\n animation: ${rotation} 2s infinite linear;\n`;\n\nconst MemoizedUIDInput = React.memo(UIDInput);\n\nexport { MemoizedUIDInput as UIDInput };\nexport type { UIDInputProps };\n"],"names":["UID_REGEX","UIDInput","React","forwardRef","hint","label","labelAction","name","required","props","ref","model","id","useDoc","allFormValues","useForm","form","values","availability","setAvailability","useState","showRegenerate","setShowRegenerate","isCloning","useMatch","CLONE_PATH","field","useField","debouncedValue","useDebounce","value","hasChanged","initialValue","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","formatMessage","useIntl","query","useQueryParams","params","useMemo","buildValidParams","data","defaultGeneratedUID","isLoading","isGeneratingDefaultUID","error","apiError","useGetDefaultUIDQuery","contentTypeUID","skip","useEffect","type","message","undefined","onChange","generateUID","isGeneratingUID","useGenerateUIDMutation","handleRegenerateClick","res","err","defaultMessage","availabilityData","isCheckingAvailability","availabilityError","useGetAvailabilityQuery","trim","Boolean","test","timer","isAvailable","window","setTimeout","clearTimeout","fieldRef","useFocusInputField","composedRefs","useComposedRefs","shouldShowAvailability","_jsxs","Field","Root","_jsx","Label","action","TextInput","disabled","endAction","Flex","position","gap","TextValidation","alignItems","justifyContent","$available","data-not-here-outer","pointerEvents","right","width","CheckCircle","WarningCircle","Typography","textColor","variant","_Fragment","FieldActionWrapper","onClick","onMouseEnter","onMouseLeave","LoadingWrapper","data-testid","Loader","ArrowClockwise","Error","Hint","styled","Action","theme","colors","neutral400","primary600","success600","danger600","rotation","keyframes","MemoizedUIDInput","memo"],"mappings":";;;;;;;;;;;;;;AAqCA;;AAEkG,qGAElG,MAAMA,SAAY,GAAA,oBAAA;AAMlB,MAAMC,yBAAWC,KAAMC,CAAAA,UAAU,CAC/B,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAM,EAAEC,KAAK,EAAEC,EAAE,EAAE,GAAGC,MAAAA,EAAAA;AACtB,IAAA,MAAMC,gBAAgBC,OAAQ,CAAA,UAAA,EAAY,CAACC,IAAAA,GAASA,KAAKC,MAAM,CAAA;AAC/D,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAgB,CAAA,GAAGjB,MAAMkB,QAAQ,EAAA;AACtD,IAAA,MAAM,CAACC,cAAgBC,EAAAA,iBAAAA,CAAkB,GAAGpB,KAAAA,CAAMkB,QAAQ,CAAC,KAAA,CAAA;IAC3D,MAAMG,SAAAA,GAAYC,SAASC,UAAgB,CAAA,KAAA,IAAA;AAC3C,IAAA,MAAMC,QAAQC,QAASpB,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMqB,cAAiBC,GAAAA,WAAAA,CAAYH,KAAMI,CAAAA,KAAK,EAAE,GAAA,CAAA;IAChD,MAAMC,UAAAA,GAAaH,cAAmBF,KAAAA,KAAAA,CAAMM,YAAY;IACxD,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,eAAAA,EAAAA;AAC/B,IAAA,MAAM,EAAEC,uBAAAA,EAAyBC,cAAc,EAAE,GAAGC,kBAAAA,EAAAA;IACpD,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;AACpB,IAAA,MAAMC,SAASxC,KAAMyC,CAAAA,OAAO,CAAC,IAAMC,iBAAiBJ,KAAQ,CAAA,EAAA;AAACA,QAAAA;AAAM,KAAA,CAAA;IAEnE,MAAM,EACJK,IAAMC,EAAAA,mBAAmB,EACzBC,SAAAA,EAAWC,sBAAsB,EACjCC,KAAOC,EAAAA,QAAQ,EAChB,GAAGC,qBACF,CAAA;QACEC,cAAgBzC,EAAAA,KAAAA;QAChBe,KAAOnB,EAAAA,IAAAA;QACPsC,IAAM,EAAA;AACJjC,YAAAA,EAAAA,EAAIA,EAAM,IAAA,EAAA;AACV,YAAA,GAAGE;AACL,SAAA;AACA4B,QAAAA;KAEF,EAAA;QACEW,IAAM3B,EAAAA,KAAAA,CAAMI,KAAK,IAAI,CAACtB;AACxB,KAAA,CAAA;AAGFN,IAAAA,KAAAA,CAAMoD,SAAS,CAAC,IAAA;AACd,QAAA,IAAIJ,QAAU,EAAA;YACZjB,kBAAmB,CAAA;gBACjBsB,IAAM,EAAA,SAAA;AACNC,gBAAAA,OAAAA,EAASpB,cAAec,CAAAA,QAAAA;AAC1B,aAAA,CAAA;AACF;KACC,EAAA;AAACA,QAAAA,QAAAA;AAAUd,QAAAA,cAAAA;AAAgBH,QAAAA;AAAmB,KAAA,CAAA;AAEjD;;;QAIA/B,KAAAA,CAAMoD,SAAS,CAAC,IAAA;AACd,QAAA,IAAIR,mBAAuBpB,IAAAA,KAAAA,CAAMI,KAAK,KAAK2B,SAAW,EAAA;YACpD/B,KAAMgC,CAAAA,QAAQ,CAACnD,IAAMuC,EAAAA,mBAAAA,CAAAA;AACvB;KACC,EAAA;AAACA,QAAAA,mBAAAA;AAAqBpB,QAAAA,KAAAA;AAAOnB,QAAAA;AAAK,KAAA,CAAA;AAErC,IAAA,MAAM,CAACoD,WAAa,EAAA,EAAEZ,WAAWa,eAAe,EAAE,CAAC,GAAGC,sBAAAA,EAAAA;AAEtD,IAAA,MAAMC,qBAAwB,GAAA,UAAA;QAC5B,IAAI;YACF,MAAMC,GAAAA,GAAM,MAAMJ,WAAY,CAAA;gBAC5BP,cAAgBzC,EAAAA,KAAAA;gBAChBe,KAAOnB,EAAAA,IAAAA;gBACPsC,IAAM,EAAA;AAAEjC,oBAAAA,EAAAA,EAAIA,EAAM,IAAA,EAAA;AAAI,oBAAA,GAAGE;AAAc,iBAAA;AACvC4B,gBAAAA;AACF,aAAA,CAAA;AAEA,YAAA,IAAI,UAAUqB,GAAK,EAAA;AACjBrC,gBAAAA,KAAAA,CAAMgC,QAAQ,CAACnD,IAAMwD,EAAAA,GAAAA,CAAIlB,IAAI,CAAA;aACxB,MAAA;gBACLZ,kBAAmB,CAAA;oBACjBsB,IAAM,EAAA,QAAA;oBACNC,OAASpB,EAAAA,cAAAA,CAAe2B,IAAId,KAAK;AACnC,iBAAA,CAAA;AACF;AACF,SAAA,CAAE,OAAOe,GAAK,EAAA;YACZ/B,kBAAmB,CAAA;gBACjBsB,IAAM,EAAA,QAAA;AACNC,gBAAAA,OAAAA,EAASlB,aAAc,CAAA;oBACrB1B,EAAI,EAAA,oBAAA;oBACJqD,cAAgB,EAAA;AAClB,iBAAA;AACF,aAAA,CAAA;AACF;AACF,KAAA;IAEA,MAAM,EACJpB,IAAMqB,EAAAA,gBAAgB,EACtBnB,SAAAA,EAAWoB,sBAAsB,EACjClB,KAAOmB,EAAAA,iBAAiB,EACzB,GAAGC,uBACF,CAAA;QACEjB,cAAgBzC,EAAAA,KAAAA;QAChBe,KAAOnB,EAAAA,IAAAA;QACPuB,KAAOF,EAAAA,cAAAA,GAAiBA,cAAe0C,CAAAA,IAAI,EAAK,GAAA,EAAA;AAChD5B,QAAAA;KAEF,EAAA;;AAEEW,QAAAA,IAAAA,EAAM,CAACkB,OAAAA,CACL,CAACxC,UAAcR,IAAAA,SAAQ,KAAMK,cAAAA,IAAkB5B,SAAUwE,CAAAA,IAAI,CAAC5C,cAAAA,CAAe0C,IAAI,EAAA,CAAA;AAErF,KAAA,CAAA;AAGFpE,IAAAA,KAAAA,CAAMoD,SAAS,CAAC,IAAA;AACd,QAAA,IAAIc,iBAAmB,EAAA;YACrBnC,kBAAmB,CAAA;gBACjBsB,IAAM,EAAA,SAAA;AACNC,gBAAAA,OAAAA,EAASpB,cAAegC,CAAAA,iBAAAA;AAC1B,aAAA,CAAA;AACF;KACC,EAAA;AAACA,QAAAA,iBAAAA;AAAmBhC,QAAAA,cAAAA;AAAgBH,QAAAA;AAAmB,KAAA,CAAA;AAE1D/B,IAAAA,KAAAA,CAAMoD,SAAS,CAAC,IAAA;AACd;;;AAGC,UACDnC,eAAgB+C,CAAAA,gBAAAA,CAAAA;QAEhB,IAAIO,KAAAA;AAEJ,QAAA,IAAIP,kBAAkBQ,WAAa,EAAA;YACjCD,KAAQE,GAAAA,MAAAA,CAAOC,UAAU,CAAC,IAAA;gBACxBzD,eAAgBsC,CAAAA,SAAAA,CAAAA;aACf,EAAA,IAAA,CAAA;AACL;QAEA,OAAO,IAAA;AACL,YAAA,IAAIgB,KAAO,EAAA;gBACTI,YAAaJ,CAAAA,KAAAA,CAAAA;AACf;AACF,SAAA;KACC,EAAA;AAACP,QAAAA;AAAiB,KAAA,CAAA;IAErB,MAAMnB,SAAAA,GAAYC,0BAA0BY,eAAmBO,IAAAA,sBAAAA;AAE/D,IAAA,MAAMW,WAAWC,kBAAmBxE,CAAAA,IAAAA,CAAAA;IACpC,MAAMyE,YAAAA,GAAeC,gBAAgBvE,GAAKoE,EAAAA,QAAAA,CAAAA;IAE1C,MAAMI,sBAAAA,GACJ,CAACnD,UAAAA,IAAcR,SAAQ,KAAMK,cAAAA,IAAkB,IAAQV,IAAAA,YAAAA,IAAgB,CAACG,cAAAA;IAE1E,qBACE8D,IAAA,CAACC,MAAMC,IAAI,EAAA;QAACjF,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;AAAM0C,QAAAA,KAAAA,EAAOvB,MAAMuB,KAAK;QAAEzC,QAAUA,EAAAA,QAAAA;;AAChE,0BAAA8E,GAAA,CAACF,MAAMG,KAAK,EAAA;gBAACC,MAAQlF,EAAAA,WAAAA;AAAcD,gBAAAA,QAAAA,EAAAA;;0BACnCiF,GAACG,CAAAA,SAAAA,EAAAA;gBACC/E,GAAKsE,EAAAA,YAAAA;AACLU,gBAAAA,QAAAA,EAAUjF,MAAMiF,QAAQ;AACxBC,gBAAAA,SAAAA,gBACER,IAACS,CAAAA,IAAAA,EAAAA;oBAAKC,QAAS,EAAA,UAAA;oBAAWC,GAAK,EAAA,CAAA;;AAC5BZ,wBAAAA,sBAAAA,kBACCC,IAACY,CAAAA,cAAAA,EAAAA;4BACCC,UAAW,EAAA,QAAA;4BACXF,GAAK,EAAA,CAAA;4BACLG,cAAe,EAAA,UAAA;4BACfC,UAAY,EAAA,CAAC,CAAChF,YAAcwD,EAAAA,WAAAA;4BAC5ByB,qBAAmB,EAAA,IAAA;4BACnBN,QAAS,EAAA,UAAA;4BACTO,aAAc,EAAA,MAAA;4BACdC,KAAO,EAAA,CAAA;4BACPC,KAAM,EAAA,OAAA;;gCAELpF,YAAcwD,EAAAA,WAAAA,iBAAcY,GAACiB,CAAAA,WAAAA,EAAAA,EAAAA,CAAAA,iBAAiBjB,GAACkB,CAAAA,aAAAA,EAAAA,EAAAA,CAAAA;8CAEhDlB,GAACmB,CAAAA,UAAAA,EAAAA;oCACCC,SAAWxF,EAAAA,YAAAA,CAAawD,WAAW,GAAG,YAAe,GAAA,WAAA;oCACrDiC,OAAQ,EAAA,IAAA;8CAEPrE,aACCpB,CAAAA,YAAAA,CAAawD,WAAW,GACpB;wCACE9D,EAAI,EAAA,0CAAA;wCACJqD,cAAgB,EAAA;qCAElB,GAAA;wCACErD,EAAI,EAAA,4CAAA;wCACJqD,cAAgB,EAAA;AAClB,qCAAA;;;;wBAMX,CAACxD,KAAAA,CAAMiF,QAAQ,kBACdP,IAAA,CAAAyB,QAAA,EAAA;;AACGvF,gCAAAA,cAAAA,kBACCiE,GAACS,CAAAA,cAAAA,EAAAA;oCAAeC,UAAW,EAAA,QAAA;oCAASC,cAAe,EAAA,UAAA;oCAAWH,GAAK,EAAA,CAAA;AACjE,oCAAA,QAAA,gBAAAR,GAACmB,CAAAA,UAAAA,EAAAA;wCAAWC,SAAU,EAAA,YAAA;wCAAaC,OAAQ,EAAA,IAAA;kDACxCrE,aAAc,CAAA;4CACb1B,EAAI,EAAA,2CAAA;4CACJqD,cAAgB,EAAA;AAClB,yCAAA;;;8CAKNqB,GAACuB,CAAAA,kBAAAA,EAAAA;oCACCC,OAAShD,EAAAA,qBAAAA;AACTzD,oCAAAA,KAAAA,EAAOiC,aAAc,CAAA;wCACnB1B,EAAI,EAAA,2CAAA;wCACJqD,cAAgB,EAAA;AAClB,qCAAA,CAAA;AACA8C,oCAAAA,YAAAA,EAAc,IAAMzF,iBAAkB,CAAA,IAAA,CAAA;AACtC0F,oCAAAA,YAAAA,EAAc,IAAM1F,iBAAkB,CAAA,KAAA,CAAA;AAErCyB,oCAAAA,QAAAA,EAAAA,SAAAA,iBACCuC,GAAC2B,CAAAA,cAAAA,EAAAA;wCAAeC,aAAY,EAAA,iBAAA;AAC1B,wCAAA,QAAA,gBAAA5B,GAAC6B,CAAAA,MAAAA,EAAAA,EAAAA;uDAGH7B,GAAC8B,CAAAA,cAAAA,EAAAA,EAAAA;;;;;;AAOb1D,gBAAAA,QAAAA,EAAUhC,MAAMgC,QAAQ;gBACxB5B,KAAOJ,EAAAA,KAAAA,CAAMI,KAAK,IAAI,EAAA;AACrB,gBAAA,GAAGrB;;AAEN,0BAAA6E,GAAA,CAACF,MAAMiC,KAAK,EAAA,EAAA,CAAA;AACZ,0BAAA/B,GAAA,CAACF,MAAMkC,IAAI,EAAA,EAAA;;;AAGjB,CAAA,CAAA;AAGF;;AAEkG,qGAElG,MAAMT,kBAAqBU,GAAAA,MAAAA,CAAOnC,KAAMoC,CAAAA,MAAM,CAAC;;;;;;;YAOnC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;YAMzC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;;;AAGrD,CAAC;AAED;;AAEkG,qGAElG,MAAM7B,cAAAA,GAAiBwB,MAAsB3B,CAAAA,IAAAA,CAA+B;;;;;;AAMhE,YAAA,EAAE,CAAC,EAAE6B,KAAK,EAAEvB,UAAU,EAAE,GAC5BA,UAAAA,GAAauB,KAAMC,CAAAA,MAAM,CAACG,UAAU,GAAGJ,MAAMC,MAAM,CAACI,SAAS,CAAC;;;AAGtE,CAAC;AAED;;qGAIA,MAAMC,QAAWC,GAAAA,SAAS;;;;;;;AAO1B,CAAC;AAED,MAAMf,cAAAA,GAAiBM,MAAsB3B,CAAAA,IAAAA,CAAK;AACrC,aAAA,EAAEmC,QAAS,CAAA;AACxB,CAAC;AAEKE,MAAAA,gBAAAA,iBAAmB/H,KAAMgI,CAAAA,IAAI,CAACjI,QAAAA;;;;"}
1	+ {"version":3,"file":"UID.mjs","sources":["../../../../../../admin/src/pages/EditView/components/FormInputs/UID.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n type InputProps,\n useField,\n useForm,\n useNotification,\n useAPIErrorHandler,\n useQueryParams,\n useFocusInputField,\n} from '@strapi/admin/strapi-admin';\nimport {\n Field,\n Flex,\n FlexComponent,\n TextInput,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CheckCircle, WarningCircle, Loader, ArrowClockwise } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useMatch } from 'react-router-dom';\nimport { styled, keyframes } from 'styled-components';\n\nimport { useDebounce } from '../../../../hooks/useDebounce';\nimport { useDocumentContext } from '../../../../hooks/useDocumentContext';\nimport { CLONE_PATH } from '../../../../router';\nimport {\n useGenerateUIDMutation,\n useGetAvailabilityQuery,\n useGetDefaultUIDQuery,\n} from '../../../../services/uid';\nimport { buildValidParams } from '../../../../utils/api';\n\nimport type { CheckUIDAvailability } from '../../../../../../shared/contracts/uid';\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * InputUID\n * -----------------------------------------------------------------------------------------------/\n\nconst UID_REGEX = /^[A-Za-z0-9-_.~]$/;\n\ninterface UIDInputProps extends Omit<InputProps, 'type'> {\n type: Schema.Attribute.TypeOf<Schema.Attribute.UID>;\n}\n\nconst UIDInput = React.forwardRef<any, UIDInputProps>(\n ({ hint, label, labelAction, name, required, ...props }, ref) => {\n const { currentDocumentMeta } = useDocumentContext('UIDInput');\n const allFormValues = useForm('InputUID', (form) => form.values);\n const [availability, setAvailability] = React.useState<CheckUIDAvailability.Response>();\n const [showRegenerate, setShowRegenerate] = React.useState(false);\n const isCloning = useMatch(CLONE_PATH) !== null;\n const field = useField(name);\n const debouncedValue = useDebounce(field.value, 300);\n const hasChanged = debouncedValue !== field.initialValue;\n const { toggleNotification } = useNotification();\n const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n const { formatMessage } = useIntl();\n const [{ query }] = useQueryParams();\n const params = React.useMemo(() => buildValidParams(query), [query]);\n\n const {\n data: defaultGeneratedUID,\n isLoading: isGeneratingDefaultUID,\n error: apiError,\n } = useGetDefaultUIDQuery(\n {\n contentTypeUID: currentDocumentMeta.model,\n field: name,\n data: {\n id: currentDocumentMeta.documentId ?? '',\n ...allFormValues,\n },\n params,\n },\n {\n skip: field.value \|\| !required,\n }\n );\n\n React.useEffect(() => {\n if (apiError) {\n toggleNotification({\n type: 'warning',\n message: formatAPIError(apiError),\n });\n }\n }, [apiError, formatAPIError, toggleNotification]);\n\n /*\n If the defaultGeneratedUID is available, then we set it as the value,\n * but we also want to set it as the initialValue too.\n /\n React.useEffect(() => {\n if (defaultGeneratedUID && field.value === undefined) {\n field.onChange(name, defaultGeneratedUID);\n }\n }, [defaultGeneratedUID, field, name]);\n\n const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();\n\n const handleRegenerateClick = async () => {\n try {\n const res = await generateUID({\n contentTypeUID: currentDocumentMeta.model,\n field: name,\n data: { id: currentDocumentMeta.documentId ?? '', ...allFormValues },\n params,\n });\n\n if ('data' in res) {\n field.onChange(name, res.data);\n } else {\n toggleNotification({\n type: 'danger',\n message: formatAPIError(res.error),\n });\n }\n } catch (err) {\n toggleNotification({\n type: 'danger',\n message: formatMessage({\n id: 'notification.error',\n defaultMessage: 'An error occurred.',\n }),\n });\n }\n };\n\n const {\n data: availabilityData,\n isLoading: isCheckingAvailability,\n error: availabilityError,\n } = useGetAvailabilityQuery(\n {\n contentTypeUID: currentDocumentMeta.model,\n field: name,\n value: debouncedValue ? debouncedValue.trim() : '',\n params,\n },\n {\n // Don't check availability if the value is empty or wasn't changed\n skip: !Boolean(\n (hasChanged \|\| isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim())\n ),\n }\n );\n\n React.useEffect(() => {\n if (availabilityError) {\n toggleNotification({\n type: 'warning',\n message: formatAPIError(availabilityError),\n });\n }\n }, [availabilityError, formatAPIError, toggleNotification]);\n\n React.useEffect(() => {\n /\n always store the data in state because that way as seen below\n * we can then remove the data to stop showing the label.\n /\n setAvailability(availabilityData);\n\n let timer: number;\n\n if (availabilityData?.isAvailable) {\n timer = window.setTimeout(() => {\n setAvailability(undefined);\n }, 4000);\n }\n\n return () => {\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [availabilityData]);\n\n const isLoading = isGeneratingDefaultUID \|\| isGeneratingUID \|\| isCheckingAvailability;\n\n const fieldRef = useFocusInputField(name);\n const composedRefs = useComposedRefs(ref, fieldRef);\n\n const shouldShowAvailability =\n (hasChanged \|\| isCloning) && debouncedValue != null && availability && !showRegenerate;\n\n return (\n <Field.Root hint={hint} name={name} error={field.error} required={required}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <TextInput\n ref={composedRefs}\n disabled={props.disabled}\n endAction={\n <Flex position=\"relative\" gap={1}>\n {shouldShowAvailability && (\n <TextValidation\n alignItems=\"center\"\n gap={1}\n justifyContent=\"flex-end\"\n $available={!!availability?.isAvailable}\n data-not-here-outer\n position=\"absolute\"\n pointerEvents=\"none\"\n right={6}\n width=\"100px\"\n >\n {availability?.isAvailable ? <CheckCircle /> : <WarningCircle />}\n\n <Typography\n textColor={availability.isAvailable ? 'success600' : 'danger600'}\n variant=\"pi\"\n >\n {formatMessage(\n availability.isAvailable\n ? {\n id: 'content-manager.components.uid.available',\n defaultMessage: 'Available',\n }\n : {\n id: 'content-manager.components.uid.unavailable',\n defaultMessage: 'Unavailable',\n }\n )}\n </Typography>\n </TextValidation>\n )}\n\n {!props.disabled && (\n <>\n {showRegenerate && (\n <TextValidation alignItems=\"center\" justifyContent=\"flex-end\" gap={1}>\n <Typography textColor=\"primary600\" variant=\"pi\">\n {formatMessage({\n id: 'content-manager.components.uid.regenerate',\n defaultMessage: 'Regenerate',\n })}\n </Typography>\n </TextValidation>\n )}\n\n <FieldActionWrapper\n onClick={handleRegenerateClick}\n label={formatMessage({\n id: 'content-manager.components.uid.regenerate',\n defaultMessage: 'Regenerate',\n })}\n onMouseEnter={() => setShowRegenerate(true)}\n onMouseLeave={() => setShowRegenerate(false)}\n >\n {isLoading ? (\n <LoadingWrapper data-testid=\"loading-wrapper\">\n <Loader />\n </LoadingWrapper>\n ) : (\n <ArrowClockwise />\n )}\n </FieldActionWrapper>\n </>\n )}\n </Flex>\n }\n onChange={field.onChange}\n value={field.value ?? ''}\n {...props}\n />\n <Field.Error />\n <Field.Hint />\n </Field.Root>\n );\n }\n);\n\n/ -------------------------------------------------------------------------------------------------\n * FieldActionWrapper\n * -----------------------------------------------------------------------------------------------/\n\nconst FieldActionWrapper = styled(Field.Action)`\n width: 1.6rem;\n\n svg {\n height: 1.6rem;\n width: 1.6rem;\n path {\n fill: ${({ theme }) => theme.colors.neutral400};\n }\n }\n\n svg:hover {\n path {\n fill: ${({ theme }) => theme.colors.primary600};\n }\n }\n`;\n\n/ -------------------------------------------------------------------------------------------------\n * TextValidation\n * -----------------------------------------------------------------------------------------------/\n\nconst TextValidation = styled<FlexComponent>(Flex)<{ $available?: boolean }>`\n svg {\n height: 1.2rem;\n width: 1.2rem;\n\n path {\n fill: ${({ theme, $available }) =>\n $available ? theme.colors.success600 : theme.colors.danger600};\n }\n }\n`;\n\n/ -------------------------------------------------------------------------------------------------\n * LoadingWrapper\n * -----------------------------------------------------------------------------------------------*/\n\nconst rotation = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n`;\n\nconst LoadingWrapper = styled<FlexComponent>(Flex)`\n animation: ${rotation} 2s infinite linear;\n`;\n\nconst MemoizedUIDInput = React.memo(UIDInput);\n\nexport { MemoizedUIDInput as UIDInput };\nexport type { UIDInputProps };\n"],"names":["UID_REGEX","UIDInput","React","forwardRef","hint","label","labelAction","name","required","props","ref","currentDocumentMeta","useDocumentContext","allFormValues","useForm","form","values","availability","setAvailability","useState","showRegenerate","setShowRegenerate","isCloning","useMatch","CLONE_PATH","field","useField","debouncedValue","useDebounce","value","hasChanged","initialValue","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","formatMessage","useIntl","query","useQueryParams","params","useMemo","buildValidParams","data","defaultGeneratedUID","isLoading","isGeneratingDefaultUID","error","apiError","useGetDefaultUIDQuery","contentTypeUID","model","id","documentId","skip","useEffect","type","message","undefined","onChange","generateUID","isGeneratingUID","useGenerateUIDMutation","handleRegenerateClick","res","err","defaultMessage","availabilityData","isCheckingAvailability","availabilityError","useGetAvailabilityQuery","trim","Boolean","test","timer","isAvailable","window","setTimeout","clearTimeout","fieldRef","useFocusInputField","composedRefs","useComposedRefs","shouldShowAvailability","_jsxs","Field","Root","_jsx","Label","action","TextInput","disabled","endAction","Flex","position","gap","TextValidation","alignItems","justifyContent","$available","data-not-here-outer","pointerEvents","right","width","CheckCircle","WarningCircle","Typography","textColor","variant","_Fragment","FieldActionWrapper","onClick","onMouseEnter","onMouseLeave","LoadingWrapper","data-testid","Loader","ArrowClockwise","Error","Hint","styled","Action","theme","colors","neutral400","primary600","success600","danger600","rotation","keyframes","MemoizedUIDInput","memo"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.js CHANGED Viewed

@@ -1,117 +1,73 @@
 'use strict';
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+require('react');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var PreviewWysiwyg = require('./PreviewWysiwyg.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 EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCollapse })=>{
     const { formatMessage } = reactIntl.useIntl();
-    React__namespace.useEffect(()=>{
-        if (isExpandMode) {
-            document.body.classList.add('lock-body-scroll');
-        }
-        return ()=>{
-            document.body.classList.remove('lock-body-scroll');
-        };
-    }, [
-        isExpandMode
-    ]);
     if (isExpandMode) {
-        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Portal, {
-            role: "dialog",
-            "aria-modal": false,
-            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.FocusTrap, {
-                onEscape: onCollapse,
-                children: /*#__PURE__*/ jsxRuntime.jsx(ExpandWrapper, {
-                    position: "fixed",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 4,
-                    justifyContent: "center",
-                    onClick: onCollapse,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                        background: "neutral0",
-                        hasRadius: true,
-                        shadow: "popupShadow",
-                        overflow: "hidden",
-                        width: "90%",
-                        height: "90%",
-                        onClick: (e)=>e.stopPropagation(),
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
+            open: isExpandMode,
+            onOpenChange: onCollapse,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
+                style: {
+                    maxWidth: 'unset',
+                    width: 'unset'
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    height: "90vh",
+                    width: "90vw",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(BoxWithBorder, {
+                            flex: "1",
                             height: "100%",
-                            alignItems: "flex-start",
+                            children: children
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            alignItems: "start",
+                            direction: "column",
+                            flex: 1,
+                            height: "100%",
+                            width: "100%",
                             children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(BoxWithBorder, {
-                                    flex: "1",
-                                    height: "100%",
-                                    children: children
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                    height: "4.8rem",
+                                    background: "neutral100",
+                                    justifyContent: "flex-end",
+                                    shrink: 0,
+                                    width: "100%",
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs(ExpandButton, {
+                                        onClick: onCollapse,
+                                        variant: "tertiary",
+                                        size: "M",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                children: formatMessage({
+                                                    id: 'components.Wysiwyg.collapse',
+                                                    defaultMessage: 'Collapse'
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
+                                        ]
+                                    })
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                    alignItems: "start",
-                                    direction: "column",
-                                    flex: 1,
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    position: "relative",
                                     height: "100%",
                                     width: "100%",
-                                    children: [
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                            height: "4.8rem",
-                                            background: "neutral100",
-                                            justifyContent: "flex-end",
-                                            shrink: 0,
-                                            width: "100%",
-                                            children: /*#__PURE__*/ jsxRuntime.jsxs(ExpandButton, {
-                                                onClick: onCollapse,
-                                                variant: "tertiary",
-                                                size: "M",
-                                                children: [
-                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                                        children: formatMessage({
-                                                            id: 'components.Wysiwyg.collapse',
-                                                            defaultMessage: 'Collapse'
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
-                                                ]
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                            position: "relative",
-                                            height: "100%",
-                                            width: "100%",
-                                            children: /*#__PURE__*/ jsxRuntime.jsx(PreviewWysiwyg.PreviewWysiwyg, {
-                                                data: previewContent
-                                            })
-                                        })
-                                    ]
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(PreviewWysiwyg.PreviewWysiwyg, {
+                                        data: previewContent
+                                    })
                                 })
                             ]
                         })
-                    })
+                    ]
                 })
             })
         });
@@ -126,9 +82,6 @@ const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCo
         children: children
     });
 };
-const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
-  background: ${({ theme })=>`${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, '0')}`};
-`;
 const BoxWithBorder = styledComponents.styled(designSystem.Box)`
   border-right: 1px solid ${({ theme })=>theme.colors.neutral200};
 `;

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button~~,\n~~ Box~~,\n~~ BoxComponent~~,\n~~ Flex~~,\n FlexComponent,\n FocusTrap,\n Portal,\n~~ Typography~~,\n~~} from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { PreviewWysiwyg } from './PreviewWysiwyg';\n\ninterface EditorLayoutProps {\n children: React.ReactNode;\n isExpandMode: boolean;\n error?: string;\n previewContent?: string;\n onCollapse: () => void;\n}\n\nconst EditorLayout = ({\n children,\n isExpandMode,\n error,\n previewContent = '',\n onCollapse,\n}: EditorLayoutProps) => {\n const { formatMessage } = useIntl();\n\n ~~React.useEffect(() => {\n~~ if (isExpandMode) {\n ~~document.body.classList.add('lock-body-scroll');\n~~ ~~}\n\n~~ return (~~) => {~~\n ~~document~~.~~body.classList.remove('lock-body-scroll');\n };\n },~~ ~~[isExpandMode]);\n\n if (isExpandMode) {\n return (\n <Portal role=\"dialog\" aria-modal~~={~~false~~}~~>\n <FocusTrap~~ ~~onEscape~~={onCollapse}>\n <~~ExpandWrapper\n position=\"fixed\"\n top~~={~~0}\n left=~~{~~0}\n right={0}\n bottom={0}\n zIndex={4}\n justifyContent=\"center\"\n onClick={onCollapse}\n >\n <Box<~~'~~div~~'~~>\n background=\"neutral0\"\n hasRadius\n shadow=\"popupShadow\"\n overflow=\"hidden\"\n~~ width~~=\"90%\"\n height=\"90%\"\n onClick={(e)~~ => ~~e.stopPropagation()~~}\n >\n <Flex height=\"~~100%\~~" alignItems=\"flex-start\">\n <BoxWithBorder flex=\"1\" height=\"100%\">\n {children}\n </BoxWithBorder>\n <Flex alignItems=\"start\" direction=\"column\" flex={1} height=\"100%\" width=\"100%\">\n <Flex\n height=\"4.8rem\"\n background=\"neutral100\"\n justifyContent=\"flex-end\"\n shrink={0}\n width=\"100%\"\n >\n <ExpandButton onClick={onCollapse} variant=\"tertiary\" size=\"M\">\n <Typography>\n {formatMessage({\n id: 'components.Wysiwyg.collapse',\n defaultMessage: 'Collapse',\n })}\n </Typography>\n <Collapse />\n </ExpandButton>\n </Flex>\n\n <Box position=\"relative\" height=\"100%\" width=\"100%\">\n <PreviewWysiwyg data={previewContent} />\n </Box>\n </Flex>\n </Flex>\n ~~</Box>\n </ExpandWrapper>\n~~ </~~FocusTrap~~>\n </~~Portal~~>\n );\n }\n\n return (\n <Flex\n borderColor={error ? 'danger600' : 'neutral200'}\n borderStyle=\"solid\"\n borderWidth=\"1px\"\n hasRadius\n direction=\"column\"\n alignItems=\"stretch\"\n >\n {children}\n </Flex>\n );\n};\n\nconst ~~ExpandWrapper = styled<FlexComponent>(Flex)`\n background: ${({ theme }) =>\n `${theme.colors.neutral800}${Math.floor(0.2 * 255)\n .toString(16)\n .padStart(2, '0')}`};\n`;\n\nconst~~ BoxWithBorder = styled<BoxComponent>(Box)`\n border-right: 1px solid ${({ theme }) => theme.colors.neutral200};\n`;\n\nconst ExpandButton = styled(Button)`\n background-color: transparent;\n border: none;\n align-items: center;\n\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n }\n\n svg {\n margin-left: ${({ theme }) => `${theme.spaces[2]}`};\n\n path {\n fill: ${({ theme }) => theme.colors.neutral700};\n width: 1.2rem;\n height: 1.2rem;\n }\n }\n`;\n\nexport { EditorLayout, ExpandButton };\nexport type { EditorLayoutProps };\n"],"names":["EditorLayout","children","isExpandMode","error","previewContent","onCollapse","formatMessage","useIntl","~~React","useEffect","document","body","classList","add","remove","~~_jsx","~~Portal~~","~~role~~","~~aria-modal~~","~~FocusTrap~~","~~onEscape~~","~~ExpandWrapper~~","~~position~~","~~top~~","~~left~~","~~right~~","~~bottom~~","~~zIndex~~","~~justifyContent~~","~~onClick~~","~~Box~~","background","~~hasRadius~~","~~shadow~~","~~overflow~~","~~width~~","~~height","e","stopPropagation","_jsxs","Flex","alignItems","BoxWithBorder","flex","direction","shrink","ExpandButton","~~variant","size","Typography","id","defaultMessage","Collapse","~~PreviewWysiwyg~~","~~data~~","~~borderColor~~","~~borderStyle~~","~~borderWidth~~","~~styled~~","~~theme~~","~~colors~~","~~neutral800~~","~~Math~~","~~floor~~","~~toString","padStart","~~neutral200","Button","fontWeights","regular","spaces","neutral700"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA~~,MAAMA,YAAe,GAAA,CAAC,EACpBC,QAAQ,EACRC,YAAY,EACZC,KAAK,EACLC,cAAAA,GAAiB,EAAE,EACnBC,UAAU,EACQ,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;~~AAE1BC~~,~~IAAAA,gBAAAA,CAAMC,SAAS,CAAC,~~IAAA~~;AACd~~,~~QAAA~~,~~IAAIP,~~YAAc,EAAA;~~AAChBQ~~,~~YAAAA~~,~~QAAAA~~,~~CAASC,IAAI,~~CAACC,~~SAAS~~,~~CAACC,GAAG,CAAC,kBAAA,CAAA;AAC9B;QAEA,OAAO,IAAA;AACLH,YAAAA,QAAAA,CAASC,~~IAAI,~~CAACC,SAAS,CAACE,MAAM,CAAC,kBAAA,CAAA;AACjC,SAAA;KACC,~~EAAA;~~AAACZ~~,~~QAAAA;AAAa~~,~~KAAA,CAAA;AAEjB,IAAA,IAAIA,YAAc,EAAA;AAChB,QAAA,qBACEa,cAACC,CAAAA,mBAAAA,~~EAAAA~~;YAAOC~~,~~IAAK,EAAA,QAAA~~;~~YAASC~~,~~YAAY~~,~~EAAA,KAAA;AAChC,YAAA,QAAA,gBAAAH,cAACI,CAAAA,sBAAAA,~~EAAAA~~;gBAAUC~~,~~QAAUf,EAAAA,~~UAAAA;~~AACnB~~,~~gBAAA~~,~~QAAA~~,~~gBAAAU~~,~~cAACM~~,~~CAAAA,aAAAA,EAAAA;oBACCC,QAAS,~~EAAA~~,OAAA~~;~~oBACTC~~,~~GAAK~~,EAAA~~,CAAA~~;~~oBACLC~~,~~IAAM~~,EAAA,~~CAAA~~;~~oBACNC~~,KAAO,EAAA~~,CAAA~~;~~oBACPC~~,~~MAAQ,EAAA,CAAA~~;~~oBACRC~~,~~MAAQ~~,~~EAAA,CAAA;oBACRC,cAAe,EAAA,~~QAAA~~;oBACfC~~,~~OAASxB~~,~~EAAAA~~,~~UAAAA;AAET,oBAAA,QAAA,gBAAAU,cAACe,~~CAAAA,~~gBAAAA~~,EAAAA;~~wBACCC~~,~~UAAW,EAAA,UAAA;wBACXC,SAAS,EAAA,IAAA;wBACTC,~~MAAO,EAAA,~~aAAA~~;~~wBACPC~~,~~QAAS,EAAA,QAAA;wBACTC,~~KAAM,EAAA,~~KAAA;wBACNC,MAAO,EAAA,KAAA;wBACPP,OAAS,EAAA,CAACQ,CAAMA,GAAAA,CAAAA,CAAEC,eAAe,EAAA;AAEjC,wBAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;4BAAKJ,MAAO,EAAA,~~MAAA;~~4BAAOK~~,UAAW,EAAA,YAAA;;~~8CAC7B1B~~,~~cAAC2B~~,CAAAA,aAAAA,EAAAA;~~oCAAcC~~,IAAK,EAAA,GAAA;~~oCAAIP~~,MAAO,EAAA,MAAA;~~AAC5BnC~~,~~oCAAAA~~,QAAAA,EAAAA;;~~8CAEHsC~~,eAACC,CAAAA,iBAAAA,EAAAA;~~oCAAKC~~,UAAW,EAAA,OAAA;~~oCAAQG~~,SAAU,EAAA,QAAA;~~oCAASD~~,IAAM,EAAA,CAAA;~~oCAAGP~~,MAAO,EAAA,MAAA;~~oCAAOD~~,KAAM,EAAA,MAAA;;~~sDACvEpB~~,~~cAACyB~~,CAAAA,iBAAAA,EAAAA;~~4CACCJ~~,MAAO,EAAA,QAAA;~~4CACPL~~,UAAW,EAAA,YAAA;~~4CACXH~~,cAAe,EAAA,UAAA;~~4CACfiB~~,MAAQ,EAAA,CAAA;~~4CACRV~~,KAAM,EAAA,MAAA;AAEN,~~4CAAA~~,QAAA,~~gBAAAI~~,~~eAACO~~,CAAAA,YAAAA,EAAAA;~~gDAAajB~~,~~OAASxB~~,EAAAA,UAAAA;~~gDAAY0C~~,OAAQ,EAAA,UAAA;~~gDAAWC~~,IAAK,EAAA,GAAA;;~~kEACzDjC~~,~~cAACkC~~,CAAAA,uBAAAA,EAAAA;~~kEACE3C~~,aAAc,CAAA;~~4DACb4C~~,EAAI,EAAA,6BAAA;~~4DACJC~~,cAAgB,EAAA;AAClB,~~yDAAA~~;;~~kEAEFpC~~,~~cAACqC~~,CAAAA,cAAAA,EAAAA,EAAAA;;;;~~sDAILrC~~,~~cAACe~~,CAAAA,gBAAAA,EAAAA;~~4CAAIR~~,QAAS,EAAA,UAAA;~~4CAAWc~~,MAAO,EAAA,MAAA;~~4CAAOD~~,KAAM,EAAA,MAAA;AAC3C,~~4CAAA~~,QAAA,~~gBAAApB~~,~~cAACsC~~,CAAAA,6BAAAA,EAAAA;~~gDAAeC~~,~~IAAMlD~~,EAAAA~~;;;;;;;;;;;AASxC~~;AAEA,IAAA,~~qBACEW~~,~~cAACyB~~,CAAAA,iBAAAA,EAAAA;~~AACCe~~,QAAAA,WAAAA,~~EAAapD~~,QAAQ,WAAc,GAAA,YAAA;~~QACnCqD~~,WAAY,EAAA,OAAA;QACZC,WAAY,EAAA,KAAA;~~QACZzB~~,SAAS,EAAA,IAAA;~~QACTY~~,SAAU,EAAA,QAAA;QACVH,UAAW,EAAA,SAAA;~~AAEVxC~~,QAAAA,QAAAA,EAAAA;;AAGP;AAEA,MAAMoB,aAAAA,~~GAAgBqC~~,~~uBAAsBlB~~,CAAAA,iBAAAA,CAAK;cACnC,EAAE,CAAC,EAAEmB,KAAK,EAAE,GACtB,CAAC,EAAEA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC,EAAEC,KAAKC,KAAK,CAAC,GAAM,GAAA,GAAA,CAAA,CAC3CC,QAAQ,CAAC,EACTC,CAAAA,CAAAA,QAAQ,CAAC,CAAA,EAAG,GAAK,CAAA,CAAA,CAAC,CAAC;AAC1B,CAAC;AAED,MAAMvB,aAAAA,GAAgBgB,uBAAqB5B,CAAAA,gBAAAA,CAAI;0BACrB,EAAE,CAAC,~~EAAE6B~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,~~CAACM~~,UAAU,CAAC;AACnE,CAAC;~~AAEKpB~~,MAAAA,YAAAA,~~GAAeY~~,~~uBAAOS~~,CAAAA,mBAAAA,CAAO;;;;;;;;;;iBAUlB,EAAE,CAAC,~~EAAER~~,KAAK,EAAE,GAAKA,~~KAAMS~~,CAAAA,WAAW,CAACC,OAAO,CAAC;;;;AAI3C,iBAAA,EAAE,CAAC,~~EAAEV~~,KAAK,EAAE,GAAK,CAAC,EAAEA,KAAAA,~~CAAMW~~,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,CAAC;;;YAG3C,EAAE,CAAC,~~EAAEX~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,~~CAACW~~,UAAU,CAAC;;;;;AAKrD;;;;;"}
1	+ {"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Box, BoxComponent, Flex, Typography, Modal } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { PreviewWysiwyg } from './PreviewWysiwyg';\n\ninterface EditorLayoutProps {\n children: React.ReactNode;\n isExpandMode: boolean;\n error?: string;\n previewContent?: string;\n onCollapse: () => void;\n}\n\nconst EditorLayout = ({\n children,\n isExpandMode,\n error,\n previewContent = '',\n onCollapse,\n}: EditorLayoutProps) => {\n const { formatMessage } = useIntl();\n\n if (isExpandMode) {\n return (\n <Modal.Root open={isExpandMode} onOpenChange={onCollapse}>\n <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n <Flex height=\"90vh\" width=\"90vw\" alignItems=\"flex-start\">\n <BoxWithBorder flex=\"1\" height=\"100%\">\n {children}\n </BoxWithBorder>\n <Flex alignItems=\"start\" direction=\"column\" flex={1} height=\"100%\" width=\"100%\">\n <Flex\n height=\"4.8rem\"\n background=\"neutral100\"\n justifyContent=\"flex-end\"\n shrink={0}\n width=\"100%\"\n >\n <ExpandButton onClick={onCollapse} variant=\"tertiary\" size=\"M\">\n <Typography>\n {formatMessage({\n id: 'components.Wysiwyg.collapse',\n defaultMessage: 'Collapse',\n })}\n </Typography>\n <Collapse />\n </ExpandButton>\n </Flex>\n <Box position=\"relative\" height=\"100%\" width=\"100%\">\n <PreviewWysiwyg data={previewContent} />\n </Box>\n </Flex>\n </Flex>\n </Modal.Content>\n </Modal.Root>\n );\n }\n\n return (\n <Flex\n borderColor={error ? 'danger600' : 'neutral200'}\n borderStyle=\"solid\"\n borderWidth=\"1px\"\n hasRadius\n direction=\"column\"\n alignItems=\"stretch\"\n >\n {children}\n </Flex>\n );\n};\n\nconst BoxWithBorder = styled<BoxComponent>(Box)`\n border-right: 1px solid ${({ theme }) => theme.colors.neutral200};\n`;\n\nconst ExpandButton = styled(Button)`\n background-color: transparent;\n border: none;\n align-items: center;\n\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n }\n\n svg {\n margin-left: ${({ theme }) => `${theme.spaces[2]}`};\n\n path {\n fill: ${({ theme }) => theme.colors.neutral700};\n width: 1.2rem;\n height: 1.2rem;\n }\n }\n`;\n\nexport { EditorLayout, ExpandButton };\nexport type { EditorLayoutProps };\n"],"names":["EditorLayout","children","isExpandMode","error","previewContent","onCollapse","formatMessage","useIntl","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","_jsxs","Flex","height","alignItems","BoxWithBorder","flex","direction","background","justifyContent","shrink","ExpandButton","onClick","variant","size","Typography","id","defaultMessage","Collapse","Box","position","PreviewWysiwyg","data","borderColor","borderStyle","borderWidth","hasRadius","styled","theme","colors","neutral200","Button","fontWeights","regular","spaces","neutral700"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { Flex, Box, Button, Portal, FocusTrap, Typography } from '@strapi/design-system';
+import 'react';
+import { Box, Button, Modal, Flex, Typography } from '@strapi/design-system';
 import { Collapse } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
@@ -8,89 +8,64 @@ import { PreviewWysiwyg } from './PreviewWysiwyg.mjs';
 const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCollapse })=>{
     const { formatMessage } = useIntl();
-    React.useEffect(()=>{
-        if (isExpandMode) {
-            document.body.classList.add('lock-body-scroll');
-        }
-        return ()=>{
-            document.body.classList.remove('lock-body-scroll');
-        };
-    }, [
-        isExpandMode
-    ]);
     if (isExpandMode) {
-        return /*#__PURE__*/ jsx(Portal, {
-            role: "dialog",
-            "aria-modal": false,
-            children: /*#__PURE__*/ jsx(FocusTrap, {
-                onEscape: onCollapse,
-                children: /*#__PURE__*/ jsx(ExpandWrapper, {
-                    position: "fixed",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 4,
-                    justifyContent: "center",
-                    onClick: onCollapse,
-                    children: /*#__PURE__*/ jsx(Box, {
-                        background: "neutral0",
-                        hasRadius: true,
-                        shadow: "popupShadow",
-                        overflow: "hidden",
-                        width: "90%",
-                        height: "90%",
-                        onClick: (e)=>e.stopPropagation(),
-                        children: /*#__PURE__*/ jsxs(Flex, {
+        return /*#__PURE__*/ jsx(Modal.Root, {
+            open: isExpandMode,
+            onOpenChange: onCollapse,
+            children: /*#__PURE__*/ jsx(Modal.Content, {
+                style: {
+                    maxWidth: 'unset',
+                    width: 'unset'
+                },
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    height: "90vh",
+                    width: "90vw",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsx(BoxWithBorder, {
+                            flex: "1",
                             height: "100%",
-                            alignItems: "flex-start",
+                            children: children
+                        }),
+                        /*#__PURE__*/ jsxs(Flex, {
+                            alignItems: "start",
+                            direction: "column",
+                            flex: 1,
+                            height: "100%",
+                            width: "100%",
                             children: [
-                                /*#__PURE__*/ jsx(BoxWithBorder, {
-                                    flex: "1",
-                                    height: "100%",
-                                    children: children
+                                /*#__PURE__*/ jsx(Flex, {
+                                    height: "4.8rem",
+                                    background: "neutral100",
+                                    justifyContent: "flex-end",
+                                    shrink: 0,
+                                    width: "100%",
+                                    children: /*#__PURE__*/ jsxs(ExpandButton, {
+                                        onClick: onCollapse,
+                                        variant: "tertiary",
+                                        size: "M",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Typography, {
+                                                children: formatMessage({
+                                                    id: 'components.Wysiwyg.collapse',
+                                                    defaultMessage: 'Collapse'
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Collapse, {})
+                                        ]
+                                    })
                                 }),
-                                /*#__PURE__*/ jsxs(Flex, {
-                                    alignItems: "start",
-                                    direction: "column",
-                                    flex: 1,
+                                /*#__PURE__*/ jsx(Box, {
+                                    position: "relative",
                                     height: "100%",
                                     width: "100%",
-                                    children: [
-                                        /*#__PURE__*/ jsx(Flex, {
-                                            height: "4.8rem",
-                                            background: "neutral100",
-                                            justifyContent: "flex-end",
-                                            shrink: 0,
-                                            width: "100%",
-                                            children: /*#__PURE__*/ jsxs(ExpandButton, {
-                                                onClick: onCollapse,
-                                                variant: "tertiary",
-                                                size: "M",
-                                                children: [
-                                                    /*#__PURE__*/ jsx(Typography, {
-                                                        children: formatMessage({
-                                                            id: 'components.Wysiwyg.collapse',
-                                                            defaultMessage: 'Collapse'
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Collapse, {})
-                                                ]
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsx(Box, {
-                                            position: "relative",
-                                            height: "100%",
-                                            width: "100%",
-                                            children: /*#__PURE__*/ jsx(PreviewWysiwyg, {
-                                                data: previewContent
-                                            })
-                                        })
-                                    ]
+                                    children: /*#__PURE__*/ jsx(PreviewWysiwyg, {
+                                        data: previewContent
+                                    })
                                 })
                             ]
                         })
-                    })
+                    ]
                 })
             })
         });
@@ -105,9 +80,6 @@ const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCo
         children: children
     });
 };
-const ExpandWrapper = styled(Flex)`
-  background: ${({ theme })=>`${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, '0')}`};
-`;
 const BoxWithBorder = styled(Box)`
   border-right: 1px solid ${({ theme })=>theme.colors.neutral200};
 `;

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button~~,\n~~ Box~~,\n~~ BoxComponent~~,\n~~ Flex~~,\n FlexComponent,\n FocusTrap,\n Portal,\n~~ Typography~~,\n~~} from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { PreviewWysiwyg } from './PreviewWysiwyg';\n\ninterface EditorLayoutProps {\n children: React.ReactNode;\n isExpandMode: boolean;\n error?: string;\n previewContent?: string;\n onCollapse: () => void;\n}\n\nconst EditorLayout = ({\n children,\n isExpandMode,\n error,\n previewContent = '',\n onCollapse,\n}: EditorLayoutProps) => {\n const { formatMessage } = useIntl();\n\n ~~React.useEffect(() => {\n~~ if (isExpandMode) {\n ~~document.body.classList.add('lock-body-scroll');\n~~ ~~}\n\n~~ return (~~) => {~~\n ~~document~~.~~body.classList.remove('lock-body-scroll');\n };\n },~~ ~~[isExpandMode]);\n\n if (isExpandMode) {\n return (\n <Portal role=\"dialog\" aria-modal~~={~~false~~}~~>\n <FocusTrap~~ ~~onEscape~~={onCollapse}>\n <~~ExpandWrapper\n position=\"fixed\"\n top~~={~~0}\n left=~~{~~0}\n right={0}\n bottom={0}\n zIndex={4}\n justifyContent=\"center\"\n onClick={onCollapse}\n >\n <Box<~~'~~div~~'~~>\n background=\"neutral0\"\n hasRadius\n shadow=\"popupShadow\"\n overflow=\"hidden\"\n~~ width~~=\"90%\"\n height=\"90%\"\n onClick={(e)~~ => ~~e.stopPropagation()~~}\n >\n <Flex height=\"~~100%\~~" alignItems=\"flex-start\">\n <BoxWithBorder flex=\"1\" height=\"100%\">\n {children}\n </BoxWithBorder>\n <Flex alignItems=\"start\" direction=\"column\" flex={1} height=\"100%\" width=\"100%\">\n <Flex\n height=\"4.8rem\"\n background=\"neutral100\"\n justifyContent=\"flex-end\"\n shrink={0}\n width=\"100%\"\n >\n <ExpandButton onClick={onCollapse} variant=\"tertiary\" size=\"M\">\n <Typography>\n {formatMessage({\n id: 'components.Wysiwyg.collapse',\n defaultMessage: 'Collapse',\n })}\n </Typography>\n <Collapse />\n </ExpandButton>\n </Flex>\n\n <Box position=\"relative\" height=\"100%\" width=\"100%\">\n <PreviewWysiwyg data={previewContent} />\n </Box>\n </Flex>\n </Flex>\n ~~</Box>\n </ExpandWrapper>\n~~ </~~FocusTrap~~>\n </~~Portal~~>\n );\n }\n\n return (\n <Flex\n borderColor={error ? 'danger600' : 'neutral200'}\n borderStyle=\"solid\"\n borderWidth=\"1px\"\n hasRadius\n direction=\"column\"\n alignItems=\"stretch\"\n >\n {children}\n </Flex>\n );\n};\n\nconst ~~ExpandWrapper = styled<FlexComponent>(Flex)`\n background: ${({ theme }) =>\n `${theme.colors.neutral800}${Math.floor(0.2 * 255)\n .toString(16)\n .padStart(2, '0')}`};\n`;\n\nconst~~ BoxWithBorder = styled<BoxComponent>(Box)`\n border-right: 1px solid ${({ theme }) => theme.colors.neutral200};\n`;\n\nconst ExpandButton = styled(Button)`\n background-color: transparent;\n border: none;\n align-items: center;\n\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n }\n\n svg {\n margin-left: ${({ theme }) => `${theme.spaces[2]}`};\n\n path {\n fill: ${({ theme }) => theme.colors.neutral700};\n width: 1.2rem;\n height: 1.2rem;\n }\n }\n`;\n\nexport { EditorLayout, ExpandButton };\nexport type { EditorLayoutProps };\n"],"names":["EditorLayout","children","isExpandMode","error","previewContent","onCollapse","formatMessage","useIntl","~~React","useEffect","document","body","classList","add","remove","~~_jsx","~~Portal~~","~~role~~","~~aria-modal~~","~~FocusTrap~~","~~onEscape~~","~~ExpandWrapper~~","~~position~~","~~top~~","~~left~~","~~right~~","~~bottom~~","~~zIndex~~","~~justifyContent~~","~~onClick~~","~~Box~~","background","~~hasRadius~~","~~shadow~~","~~overflow~~","~~width~~","~~height","e","stopPropagation","_jsxs","Flex","alignItems","BoxWithBorder","flex","direction","shrink","ExpandButton","~~variant","size","Typography","id","defaultMessage","Collapse","~~PreviewWysiwyg~~","~~data~~","~~borderColor~~","~~borderStyle~~","~~borderWidth~~","~~styled~~","~~theme~~","~~colors~~","~~neutral800~~","~~Math~~","~~floor~~","~~toString","padStart","~~neutral200","Button","fontWeights","regular","spaces","neutral700"],"mappings":";;;;;;;;~~AA0BA~~,MAAMA,YAAe,GAAA,CAAC,EACpBC,QAAQ,EACRC,YAAY,EACZC,KAAK,EACLC,cAAAA,GAAiB,EAAE,EACnBC,UAAU,EACQ,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;~~AAE1BC~~,~~IAAAA,KAAAA,CAAMC,SAAS,CAAC,~~IAAA~~;AACd~~,~~QAAA~~,~~IAAIP,~~YAAc,EAAA;~~AAChBQ~~,~~YAAAA~~,~~QAAAA~~,~~CAASC,IAAI,~~CAACC,~~SAAS~~,~~CAACC,GAAG,CAAC,kBAAA,CAAA;AAC9B;QAEA,OAAO,IAAA;AACLH,YAAAA,QAAAA,CAASC,~~IAAI,~~CAACC,SAAS,CAACE,MAAM,CAAC,kBAAA,CAAA;AACjC,SAAA;KACC,~~EAAA;~~AAACZ~~,~~QAAAA;AAAa~~,~~KAAA,CAAA;AAEjB,IAAA,IAAIA,YAAc,EAAA;AAChB,QAAA,qBACEa,GAACC,CAAAA,MAAAA,~~EAAAA~~;YAAOC~~,~~IAAK,EAAA,QAAA~~;~~YAASC~~,~~YAAY~~,~~EAAA,KAAA;AAChC,YAAA,QAAA,gBAAAH,GAACI,CAAAA,SAAAA,~~EAAAA~~;gBAAUC~~,~~QAAUf,EAAAA,~~UAAAA;~~AACnB~~,~~gBAAA~~,~~QAAA~~,~~gBAAAU~~,~~GAACM~~,~~CAAAA,aAAAA,EAAAA;oBACCC,QAAS,~~EAAA~~,OAAA~~;~~oBACTC~~,~~GAAK~~,EAAA~~,CAAA~~;~~oBACLC~~,~~IAAM~~,EAAA,~~CAAA~~;~~oBACNC~~,KAAO,EAAA~~,CAAA~~;~~oBACPC~~,~~MAAQ,EAAA,CAAA~~;~~oBACRC~~,~~MAAQ~~,~~EAAA,CAAA;oBACRC,cAAe,EAAA,~~QAAA~~;oBACfC~~,~~OAASxB~~,~~EAAAA~~,~~UAAAA;AAET,oBAAA,QAAA,gBAAAU,GAACe,~~CAAAA,~~GAAAA~~,EAAAA;~~wBACCC~~,~~UAAW,EAAA,UAAA;wBACXC,SAAS,EAAA,IAAA;wBACTC,~~MAAO,EAAA,~~aAAA~~;~~wBACPC~~,~~QAAS,EAAA,QAAA;wBACTC,~~KAAM,EAAA,~~KAAA;wBACNC,MAAO,EAAA,KAAA;wBACPP,OAAS,EAAA,CAACQ,CAAMA,GAAAA,CAAAA,CAAEC,eAAe,EAAA;AAEjC,wBAAA,QAAA,gBAAAC,IAACC,CAAAA,IAAAA,EAAAA;4BAAKJ,MAAO,EAAA,~~MAAA;~~4BAAOK~~,UAAW,EAAA,YAAA;;~~8CAC7B1B~~,~~GAAC2B~~,CAAAA,aAAAA,EAAAA;~~oCAAcC~~,IAAK,EAAA,GAAA;~~oCAAIP~~,MAAO,EAAA,MAAA;~~AAC5BnC~~,~~oCAAAA~~,QAAAA,EAAAA;;~~8CAEHsC~~,IAACC,CAAAA,IAAAA,EAAAA;~~oCAAKC~~,UAAW,EAAA,OAAA;~~oCAAQG~~,SAAU,EAAA,QAAA;~~oCAASD~~,IAAM,EAAA,CAAA;~~oCAAGP~~,MAAO,EAAA,MAAA;~~oCAAOD~~,KAAM,EAAA,MAAA;;~~sDACvEpB~~,~~GAACyB~~,CAAAA,IAAAA,EAAAA;~~4CACCJ~~,MAAO,EAAA,QAAA;~~4CACPL~~,UAAW,EAAA,YAAA;~~4CACXH~~,cAAe,EAAA,UAAA;~~4CACfiB~~,MAAQ,EAAA,CAAA;~~4CACRV~~,KAAM,EAAA,MAAA;AAEN,~~4CAAA~~,QAAA,~~gBAAAI~~,~~IAACO~~,CAAAA,YAAAA,EAAAA;~~gDAAajB~~,~~OAASxB~~,EAAAA,UAAAA;~~gDAAY0C~~,OAAQ,EAAA,UAAA;~~gDAAWC~~,IAAK,EAAA,GAAA;;~~kEACzDjC~~,~~GAACkC~~,CAAAA,UAAAA,EAAAA;~~kEACE3C~~,aAAc,CAAA;~~4DACb4C~~,EAAI,EAAA,6BAAA;~~4DACJC~~,cAAgB,EAAA;AAClB,~~yDAAA~~;;~~kEAEFpC~~,~~GAACqC~~,CAAAA,QAAAA,EAAAA,EAAAA;;;;~~sDAILrC~~,~~GAACe~~,CAAAA,GAAAA,EAAAA;~~4CAAIR~~,QAAS,EAAA,UAAA;~~4CAAWc~~,MAAO,EAAA,MAAA;~~4CAAOD~~,KAAM,EAAA,MAAA;AAC3C,~~4CAAA~~,QAAA,~~gBAAApB~~,~~GAACsC~~,CAAAA,cAAAA,EAAAA;~~gDAAeC~~,~~IAAMlD~~,EAAAA~~;;;;;;;;;;;AASxC~~;AAEA,IAAA,~~qBACEW~~,~~GAACyB~~,CAAAA,IAAAA,EAAAA;~~AACCe~~,QAAAA,WAAAA,~~EAAapD~~,QAAQ,WAAc,GAAA,YAAA;~~QACnCqD~~,WAAY,EAAA,OAAA;QACZC,WAAY,EAAA,KAAA;~~QACZzB~~,SAAS,EAAA,IAAA;~~QACTY~~,SAAU,EAAA,QAAA;QACVH,UAAW,EAAA,SAAA;~~AAEVxC~~,QAAAA,QAAAA,EAAAA;;AAGP;AAEA,MAAMoB,aAAAA,~~GAAgBqC~~,~~MAAsBlB~~,CAAAA,IAAAA,CAAK;cACnC,EAAE,CAAC,EAAEmB,KAAK,EAAE,GACtB,CAAC,EAAEA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC,EAAEC,KAAKC,KAAK,CAAC,GAAM,GAAA,GAAA,CAAA,CAC3CC,QAAQ,CAAC,EACTC,CAAAA,CAAAA,QAAQ,CAAC,CAAA,EAAG,GAAK,CAAA,CAAA,CAAC,CAAC;AAC1B,CAAC;AAED,MAAMvB,aAAAA,GAAgBgB,MAAqB5B,CAAAA,GAAAA,CAAI;0BACrB,EAAE,CAAC,~~EAAE6B~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,~~CAACM~~,UAAU,CAAC;AACnE,CAAC;~~AAEKpB~~,MAAAA,YAAAA,~~GAAeY~~,~~MAAOS~~,CAAAA,MAAAA,CAAO;;;;;;;;;;iBAUlB,EAAE,CAAC,~~EAAER~~,KAAK,EAAE,GAAKA,~~KAAMS~~,CAAAA,WAAW,CAACC,OAAO,CAAC;;;;AAI3C,iBAAA,EAAE,CAAC,~~EAAEV~~,KAAK,EAAE,GAAK,CAAC,EAAEA,KAAAA,~~CAAMW~~,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,CAAC;;;YAG3C,EAAE,CAAC,~~EAAEX~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,~~CAACW~~,UAAU,CAAC;;;;;AAKrD;;;;"}
1	+ {"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Box, BoxComponent, Flex, Typography, Modal } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { PreviewWysiwyg } from './PreviewWysiwyg';\n\ninterface EditorLayoutProps {\n children: React.ReactNode;\n isExpandMode: boolean;\n error?: string;\n previewContent?: string;\n onCollapse: () => void;\n}\n\nconst EditorLayout = ({\n children,\n isExpandMode,\n error,\n previewContent = '',\n onCollapse,\n}: EditorLayoutProps) => {\n const { formatMessage } = useIntl();\n\n if (isExpandMode) {\n return (\n <Modal.Root open={isExpandMode} onOpenChange={onCollapse}>\n <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n <Flex height=\"90vh\" width=\"90vw\" alignItems=\"flex-start\">\n <BoxWithBorder flex=\"1\" height=\"100%\">\n {children}\n </BoxWithBorder>\n <Flex alignItems=\"start\" direction=\"column\" flex={1} height=\"100%\" width=\"100%\">\n <Flex\n height=\"4.8rem\"\n background=\"neutral100\"\n justifyContent=\"flex-end\"\n shrink={0}\n width=\"100%\"\n >\n <ExpandButton onClick={onCollapse} variant=\"tertiary\" size=\"M\">\n <Typography>\n {formatMessage({\n id: 'components.Wysiwyg.collapse',\n defaultMessage: 'Collapse',\n })}\n </Typography>\n <Collapse />\n </ExpandButton>\n </Flex>\n <Box position=\"relative\" height=\"100%\" width=\"100%\">\n <PreviewWysiwyg data={previewContent} />\n </Box>\n </Flex>\n </Flex>\n </Modal.Content>\n </Modal.Root>\n );\n }\n\n return (\n <Flex\n borderColor={error ? 'danger600' : 'neutral200'}\n borderStyle=\"solid\"\n borderWidth=\"1px\"\n hasRadius\n direction=\"column\"\n alignItems=\"stretch\"\n >\n {children}\n </Flex>\n );\n};\n\nconst BoxWithBorder = styled<BoxComponent>(Box)`\n border-right: 1px solid ${({ theme }) => theme.colors.neutral200};\n`;\n\nconst ExpandButton = styled(Button)`\n background-color: transparent;\n border: none;\n align-items: center;\n\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n }\n\n svg {\n margin-left: ${({ theme }) => `${theme.spaces[2]}`};\n\n path {\n fill: ${({ theme }) => theme.colors.neutral700};\n width: 1.2rem;\n height: 1.2rem;\n }\n }\n`;\n\nexport { EditorLayout, ExpandButton };\nexport type { EditorLayoutProps };\n"],"names":["EditorLayout","children","isExpandMode","error","previewContent","onCollapse","formatMessage","useIntl","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","_jsxs","Flex","height","alignItems","BoxWithBorder","flex","direction","background","justifyContent","shrink","ExpandButton","onClick","variant","size","Typography","id","defaultMessage","Collapse","Box","position","PreviewWysiwyg","data","borderColor","borderStyle","borderWidth","hasRadius","styled","theme","colors","neutral200","Button","fontWeights","regular","spaces","neutral700"],"mappings":"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"}

package/dist/admin/pages/EditView/components/InputRenderer.js CHANGED Viewed

@@ -5,9 +5,8 @@ var React = require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var reactIntl = require('react-intl');
 var collections = require('../../../constants/collections.js');
-var DocumentContext = require('../../../features/DocumentContext.js');
 var DocumentRBAC = require('../../../features/DocumentRBAC.js');
-var useDocument = require('../../../hooks/useDocument.js');
+var useDocumentContext = require('../../../hooks/useDocumentContext.js');
 var useDocumentLayout = require('../../../hooks/useDocumentLayout.js');
 var useLazyComponents = require('../../../hooks/useLazyComponents.js');
 var BlocksInput = require('./FormInputs/BlocksInput/BlocksInput.js');
@@ -45,14 +44,8 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
  * the complete EditFieldLayout and will handle RBAC conditions and rendering CM specific
  * components such as Blocks / Relations.
  */ const InputRenderer = ({ visible, hint: providedHint, document, ...props })=>{
-    const { model: rootModel } = useDocument.useDoc();
-    const rootDocumentMeta = DocumentContext.useDocumentContext('DynamicComponent', (state)=>state.rootDocumentMeta);
-    const { edit: { components: rootComponents } } = useDocumentLayout.useDocumentLayout(rootDocumentMeta.model);
-    const { edit: { components: relatedComponents } } = useDocumentLayout.useDocumentLayout(document.schema?.uid ?? rootModel);
-    const components = {
-        ...rootComponents,
-        ...relatedComponents
-    };
+    const { currentDocumentMeta } = useDocumentContext.useDocumentContext('DynamicComponent');
+    const { edit: { components } } = useDocumentLayout.useDocumentLayout(currentDocumentMeta.model);
     const collectionType = document.schema?.kind === 'collectionType' ? 'collection-types' : 'single-types';
     const isInDynamicZone = Field.useDynamicZone('isInDynamicZone', (state)=>state.isInDynamicZone);
     const isFormDisabled = strapiAdmin.useForm('InputRenderer', (state)=>state.disabled);