@strapi/content-manager 0.0.0-next.d9724d67b33363354d7171a9f2265e1c42485e13 → 0.0.0-next.da19c0501ff87d14fb664b55b8e0630d3c548485

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

@@ -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 { 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  attribute?: Pick<Schema.Attribute.UIDProperties, 'regex'>;\n  type: Schema.Attribute.TypeOf<Schema.Attribute.UID>;\n}\n\nconst UIDInput = React.forwardRef<any, UIDInputProps>(\n  ({ hint, label, labelAction, name, required, attribute = {}, ...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 { regex } = attribute;\n    const validationRegExp = regex ? new RegExp(regex) : UID_REGEX;\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) &&\n            debouncedValue &&\n            validationRegExp.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","attribute","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","regex","validationRegExp","RegExp","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":";;;;;;;;;;;;;;AAqCA;;AAEkG,qGAElG,MAAMA,SAAY,GAAA,oBAAA;AAOlB,MAAMC,QAAAA,iBAAWC,MAAMC,UAAU,CAC/B,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,SAAAA,GAAY,EAAE,EAAE,GAAGC,KAAAA,EAAO,EAAEC,GAAAA,GAAAA;AACvE,IAAA,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,kBAAmB,CAAA,UAAA,CAAA;AACnD,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,EAAEK,KAAK,EAAE,GAAGpC,SAAAA;AAClB,IAAA,MAAMqC,gBAAmBD,GAAAA,KAAAA,GAAQ,IAAIE,MAAAA,CAAOF,KAAS7C,CAAAA,GAAAA,SAAAA;IAErD,MAAM,EACJgD,IAAMC,EAAAA,mBAAmB,EACzBC,SAAAA,EAAWC,sBAAsB,EACjCC,KAAOC,EAAAA,QAAQ,EAChB,GAAGC,qBACF,CAAA;AACEC,QAAAA,cAAAA,EAAgB3C,oBAAoB4C,KAAK;QACzC9B,KAAOnB,EAAAA,IAAAA;QACPyC,IAAM,EAAA;YACJS,EAAI7C,EAAAA,mBAAAA,CAAoB8C,UAAU,IAAI,EAAA;AACtC,YAAA,GAAG5C;AACL,SAAA;AACA4B,QAAAA;KAEF,EAAA;QACEiB,IAAMjC,EAAAA,KAAAA,CAAMI,KAAK,IAAI,CAACtB;AACxB,KAAA,CAAA;AAGFN,IAAAA,KAAAA,CAAM0D,SAAS,CAAC,IAAA;AACd,QAAA,IAAIP,QAAU,EAAA;YACZpB,kBAAmB,CAAA;gBACjB4B,IAAM,EAAA,SAAA;AACNC,gBAAAA,OAAAA,EAAS1B,cAAeiB,CAAAA,QAAAA;AAC1B,aAAA,CAAA;AACF;KACC,EAAA;AAACA,QAAAA,QAAAA;AAAUjB,QAAAA,cAAAA;AAAgBH,QAAAA;AAAmB,KAAA,CAAA;AAEjD;;;QAIA/B,KAAAA,CAAM0D,SAAS,CAAC,IAAA;AACd,QAAA,IAAIX,mBAAuBvB,IAAAA,KAAAA,CAAMI,KAAK,KAAKiC,SAAW,EAAA;YACpDrC,KAAMsC,CAAAA,QAAQ,CAACzD,IAAM0C,EAAAA,mBAAAA,CAAAA;AACvB;KACC,EAAA;AAACA,QAAAA,mBAAAA;AAAqBvB,QAAAA,KAAAA;AAAOnB,QAAAA;AAAK,KAAA,CAAA;AAErC,IAAA,MAAM,CAAC0D,WAAa,EAAA,EAAEf,WAAWgB,eAAe,EAAE,CAAC,GAAGC,sBAAAA,EAAAA;AAEtD,IAAA,MAAMC,qBAAwB,GAAA,UAAA;QAC5B,IAAI;YACF,MAAMC,GAAAA,GAAM,MAAMJ,WAAY,CAAA;AAC5BV,gBAAAA,cAAAA,EAAgB3C,oBAAoB4C,KAAK;gBACzC9B,KAAOnB,EAAAA,IAAAA;gBACPyC,IAAM,EAAA;oBAAES,EAAI7C,EAAAA,mBAAAA,CAAoB8C,UAAU,IAAI,EAAA;AAAI,oBAAA,GAAG5C;AAAc,iBAAA;AACnE4B,gBAAAA;AACF,aAAA,CAAA;AAEA,YAAA,IAAI,UAAU2B,GAAK,EAAA;AACjB3C,gBAAAA,KAAAA,CAAMsC,QAAQ,CAACzD,IAAM8D,EAAAA,GAAAA,CAAIrB,IAAI,CAAA;aACxB,MAAA;gBACLf,kBAAmB,CAAA;oBACjB4B,IAAM,EAAA,QAAA;oBACNC,OAAS1B,EAAAA,cAAAA,CAAeiC,IAAIjB,KAAK;AACnC,iBAAA,CAAA;AACF;AACF,SAAA,CAAE,OAAOkB,GAAK,EAAA;YACZrC,kBAAmB,CAAA;gBACjB4B,IAAM,EAAA,QAAA;AACNC,gBAAAA,OAAAA,EAASxB,aAAc,CAAA;oBACrBmB,EAAI,EAAA,oBAAA;oBACJc,cAAgB,EAAA;AAClB,iBAAA;AACF,aAAA,CAAA;AACF;AACF,KAAA;IAEA,MAAM,EACJvB,IAAMwB,EAAAA,gBAAgB,EACtBtB,SAAAA,EAAWuB,sBAAsB,EACjCrB,KAAOsB,EAAAA,iBAAiB,EACzB,GAAGC,uBACF,CAAA;AACEpB,QAAAA,cAAAA,EAAgB3C,oBAAoB4C,KAAK;QACzC9B,KAAOnB,EAAAA,IAAAA;QACPuB,KAAOF,EAAAA,cAAAA,GAAiBA,cAAegD,CAAAA,IAAI,EAAK,GAAA,EAAA;AAChDlC,QAAAA;KAEF,EAAA;;AAEEiB,QAAAA,IAAAA,EAAM,CAACkB,OAAAA,CACL,CAAC9C,UAAcR,IAAAA,SAAQ,KACrBK,cAAAA,IACAkB,gBAAiBgC,CAAAA,IAAI,CAAClD,cAAAA,CAAegD,IAAI,EAAA,CAAA;AAE/C,KAAA,CAAA;AAGF1E,IAAAA,KAAAA,CAAM0D,SAAS,CAAC,IAAA;AACd,QAAA,IAAIc,iBAAmB,EAAA;YACrBzC,kBAAmB,CAAA;gBACjB4B,IAAM,EAAA,SAAA;AACNC,gBAAAA,OAAAA,EAAS1B,cAAesC,CAAAA,iBAAAA;AAC1B,aAAA,CAAA;AACF;KACC,EAAA;AAACA,QAAAA,iBAAAA;AAAmBtC,QAAAA,cAAAA;AAAgBH,QAAAA;AAAmB,KAAA,CAAA;AAE1D/B,IAAAA,KAAAA,CAAM0D,SAAS,CAAC,IAAA;AACd;;;AAGC,UACDzC,eAAgBqD,CAAAA,gBAAAA,CAAAA;QAEhB,IAAIO,KAAAA;AAEJ,QAAA,IAAIP,kBAAkBQ,WAAa,EAAA;YACjCD,KAAQE,GAAAA,MAAAA,CAAOC,UAAU,CAAC,IAAA;gBACxB/D,eAAgB4C,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,MAAMtB,SAAAA,GAAYC,0BAA0Be,eAAmBO,IAAAA,sBAAAA;AAE/D,IAAA,MAAMW,WAAWC,kBAAmB9E,CAAAA,IAAAA,CAAAA;IACpC,MAAM+E,YAAAA,GAAeC,gBAAgB5E,GAAKyE,EAAAA,QAAAA,CAAAA;IAE1C,MAAMI,sBAAAA,GACJ,CAACzD,UAAAA,IAAcR,SAAQ,KAAMK,cAAAA,IAAkB,IAAQV,IAAAA,YAAAA,IAAgB,CAACG,cAAAA;IAE1E,qBACEoE,IAAA,CAACC,MAAMC,IAAI,EAAA;QAACvF,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;AAAM6C,QAAAA,KAAAA,EAAO1B,MAAM0B,KAAK;QAAE5C,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAoF,GAAA,CAACF,MAAMG,KAAK,EAAA;gBAACC,MAAQxF,EAAAA,WAAAA;AAAcD,gBAAAA,QAAAA,EAAAA;;0BACnCuF,GAACG,CAAAA,SAAAA,EAAAA;gBACCpF,GAAK2E,EAAAA,YAAAA;AACLU,gBAAAA,QAAAA,EAAUtF,MAAMsF,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,CAACtF,YAAc8D,EAAAA,WAAAA;4BAC5ByB,qBAAmB,EAAA,IAAA;4BACnBN,QAAS,EAAA,UAAA;4BACTO,aAAc,EAAA,MAAA;4BACdC,KAAO,EAAA,CAAA;4BACPC,KAAM,EAAA,OAAA;;gCAEL1F,YAAc8D,EAAAA,WAAAA,iBAAcY,GAACiB,CAAAA,WAAAA,EAAAA,EAAAA,CAAAA,iBAAiBjB,GAACkB,CAAAA,aAAAA,EAAAA,EAAAA,CAAAA;8CAEhDlB,GAACmB,CAAAA,UAAAA,EAAAA;oCACCC,SAAW9F,EAAAA,YAAAA,CAAa8D,WAAW,GAAG,YAAe,GAAA,WAAA;oCACrDiC,OAAQ,EAAA,IAAA;8CAEP3E,aACCpB,CAAAA,YAAAA,CAAa8D,WAAW,GACpB;wCACEvB,EAAI,EAAA,0CAAA;wCACJc,cAAgB,EAAA;qCAElB,GAAA;wCACEd,EAAI,EAAA,4CAAA;wCACJc,cAAgB,EAAA;AAClB,qCAAA;;;;wBAMX,CAAC7D,KAAAA,CAAMsF,QAAQ,kBACdP,IAAA,CAAAyB,QAAA,EAAA;;AACG7F,gCAAAA,cAAAA,kBACCuE,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;kDACxC3E,aAAc,CAAA;4CACbmB,EAAI,EAAA,2CAAA;4CACJc,cAAgB,EAAA;AAClB,yCAAA;;;8CAKNqB,GAACuB,CAAAA,kBAAAA,EAAAA;oCACCC,OAAShD,EAAAA,qBAAAA;AACT/D,oCAAAA,KAAAA,EAAOiC,aAAc,CAAA;wCACnBmB,EAAI,EAAA,2CAAA;wCACJc,cAAgB,EAAA;AAClB,qCAAA,CAAA;AACA8C,oCAAAA,YAAAA,EAAc,IAAM/F,iBAAkB,CAAA,IAAA,CAAA;AACtCgG,oCAAAA,YAAAA,EAAc,IAAMhG,iBAAkB,CAAA,KAAA,CAAA;AAErC4B,oCAAAA,QAAAA,EAAAA,SAAAA,iBACC0C,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,EAAUtC,MAAMsC,QAAQ;gBACxBlC,KAAOJ,EAAAA,KAAAA,CAAMI,KAAK,IAAI,EAAA;AACrB,gBAAA,GAAGpB;;AAEN,0BAAAkF,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,iBAAmBrI,KAAMsI,CAAAA,IAAI,CAACvI,QAAAA;;;;"}
+{"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  attribute?: Pick<Schema.Attribute.UIDProperties, 'regex'>;\n  type: Schema.Attribute.TypeOf<Schema.Attribute.UID>;\n}\n\nconst UIDInput = React.forwardRef<any, UIDInputProps>(\n  ({ hint, label, labelAction, name, required, attribute = {}, ...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 { regex } = attribute;\n    const validationRegExp = regex ? new RegExp(regex) : UID_REGEX;\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) &&\n            debouncedValue &&\n            validationRegExp.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          type=\"text\"\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","attribute","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","regex","validationRegExp","RegExp","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

@@ -20,8 +20,8 @@ const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCo
                     width: 'unset'
                 },
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    height: "90vh",
-                    width: "90vw",
+                    height: "90dvh",
+                    width: "90dvw",
                     alignItems: "flex-start",
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(BoxWithBorder, {

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

@@ -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 { 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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"}
+{"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=\"90dvh\" width=\"90dvw\" 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

@@ -18,8 +18,8 @@ const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCo
                     width: 'unset'
                 },
                 children: /*#__PURE__*/ jsxs(Flex, {
-                    height: "90vh",
-                    width: "90vw",
+                    height: "90dvh",
+                    width: "90dvw",
                     alignItems: "flex-start",
                     children: [
                         /*#__PURE__*/ jsx(BoxWithBorder, {

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

@@ -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 { 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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"}
+{"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=\"90dvh\" width=\"90dvw\" 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/FormLayout.js

@@ -8,9 +8,6 @@ var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var InputRenderer = require('./InputRenderer.js');
 
-const RESPONSIVE_CONTAINER_BREAKPOINTS = {
-    sm: '27.5rem'
-};
 const ResponsiveGridRoot = styledComponents.styled(designSystem.Grid.Root)`
   container-type: inline-size;
 `;
@@ -21,14 +18,17 @@ const ResponsiveGridItem = /**
    * for failing to parse the stylesheet.
    */ process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Grid.Item)`
         grid-column: span 12;
-        @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+        ${({ theme })=>theme.breakpoints.medium} {
           ${({ col })=>col && `grid-column: span ${col};`}
         }
       ` : styledComponents.styled(designSystem.Grid.Item)`
         grid-column: span 12;
       `;
 const panelStyles = {
-    padding: 6,
+    padding: {
+        initial: 4,
+        medium: 6
+    },
     borderColor: 'neutral150',
     background: 'neutral0',
     hasRadius: true,
@@ -48,7 +48,10 @@ const FormLayout = ({ layout, document, hasBackground = true })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
         direction: "column",
         alignItems: "stretch",
-        gap: 6,
+        gap: {
+            initial: 4,
+            large: 6
+        },
         children: layout.map((panel, index)=>{
             if (panel.some((row)=>row.some((field)=>field.type === 'dynamiczone'))) {
                 const [row] = panel;
@@ -82,7 +85,10 @@ const FormLayout = ({ layout, document, hasBackground = true })=>{
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                     direction: "column",
                     alignItems: "stretch",
-                    gap: 6,
+                    gap: {
+                        initial: 4,
+                        large: 6
+                    },
                     children: panel.map((row, gridRowIndex)=>{
                         const visibleFields = row.filter(({ name })=>{
                             const attribute = document.schema?.attributes[name];
@@ -120,7 +126,6 @@ const FormLayout = ({ layout, document, hasBackground = true })=>{
 };
 
 exports.FormLayout = FormLayout;
-exports.RESPONSIVE_CONTAINER_BREAKPOINTS = RESPONSIVE_CONTAINER_BREAKPOINTS;
 exports.ResponsiveGridItem = ResponsiveGridItem;
 exports.ResponsiveGridRoot = ResponsiveGridRoot;
 //# sourceMappingURL=FormLayout.js.map

package/dist/admin/pages/EditView/components/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, createRulesEngine } from '@strapi/admin/strapi-admin';\nimport { Box, BoxProps, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\n\nimport { InputRenderer } from './InputRenderer';\n\nimport type { UseDocument } from '../../../hooks/useDocument';\n\nexport const RESPONSIVE_CONTAINER_BREAKPOINTS = {\n  sm: '27.5rem', // 440px\n};\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem =\n  /**\n   * TODO:\n   * JSDOM cannot handle container queries.\n   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n   * for failing to parse the stylesheet.\n   */\n  process.env.NODE_ENV !== 'test'\n    ? styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n        @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {\n          ${({ col }) => col && `grid-column: span ${col};`}\n        }\n      `\n    : styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n      `;\n\nconst panelStyles = {\n  padding: 6,\n  borderColor: 'neutral150',\n  background: 'neutral0',\n  hasRadius: true,\n  shadow: 'tableShadow',\n} satisfies BoxProps;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n  document: ReturnType<UseDocument>;\n}\n\nconst FormLayout = ({ layout, document, hasBackground = true }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const modelUid = document.schema?.uid;\n  const fieldValues = useForm('Fields', (state) => state.values);\n  const rulesEngine = createRulesEngine();\n\n  const getLabel = (name: string, label: string) => {\n    return formatMessage({\n      id: `content-manager.content-types.${modelUid}.${name}`,\n      defaultMessage: label,\n    });\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n      {layout.map((panel, index) => {\n        if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n          const [row] = panel;\n          const [field] = row;\n          const attribute = document.schema?.attributes[field.name];\n          const condition = attribute?.conditions?.visible;\n\n          if (condition) {\n            const isVisible = rulesEngine.evaluate(condition, fieldValues);\n            if (!isVisible) {\n              return null; // Skip rendering the dynamic zone if the condition is not met\n            }\n          }\n\n          return (\n            <Grid.Root key={field.name} gap={4}>\n              <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <InputRenderer\n                  {...field}\n                  label={getLabel(field.name, field.label)}\n                  document={document}\n                />\n              </Grid.Item>\n            </Grid.Root>\n          );\n        }\n\n        return (\n          <Box key={index} {...(hasBackground && panelStyles)}>\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n              {panel.map((row, gridRowIndex) => {\n                const visibleFields = row.filter(({ name }) => {\n                  const attribute = document.schema?.attributes[name];\n                  const condition = attribute?.conditions?.visible;\n\n                  if (condition) {\n                    return rulesEngine.evaluate(condition, fieldValues);\n                  }\n\n                  return true;\n                });\n\n                if (visibleFields.length === 0) {\n                  return null; // Skip rendering the entire grid row\n                }\n\n                return (\n                  <ResponsiveGridRoot key={gridRowIndex} gap={4}>\n                    {visibleFields.map(({ size, ...field }) => {\n                      return (\n                        <ResponsiveGridItem\n                          col={size}\n                          key={field.name}\n                          s={12}\n                          xs={12}\n                          direction=\"column\"\n                          alignItems=\"stretch\"\n                        >\n                          <InputRenderer\n                            {...field}\n                            label={getLabel(field.name, field.label)}\n                            document={document}\n                          />\n                        </ResponsiveGridItem>\n                      );\n                    })}\n                  </ResponsiveGridRoot>\n                );\n              })}\n            </Flex>\n          </Box>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport { FormLayout, FormLayoutProps };\n"],"names":["RESPONSIVE_CONTAINER_BREAKPOINTS","sm","ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","process","env","NODE_ENV","Item","col","panelStyles","padding","borderColor","background","hasRadius","shadow","FormLayout","layout","document","hasBackground","formatMessage","useIntl","modelUid","schema","uid","fieldValues","useForm","state","values","rulesEngine","createRulesEngine","getLabel","name","label","id","defaultMessage","_jsx","Flex","direction","alignItems","gap","map","panel","index","some","row","field","type","attribute","attributes","condition","conditions","visible","isVisible","evaluate","s","xs","InputRenderer","Box","gridRowIndex","visibleFields","filter","length","size"],"mappings":"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"}
+{"version":3,"file":"FormLayout.js","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, createRulesEngine } from '@strapi/admin/strapi-admin';\nimport { Box, BoxProps, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\n\nimport { InputRenderer } from './InputRenderer';\n\nimport type { UseDocument } from '../../../hooks/useDocument';\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem =\n  /**\n   * TODO:\n   * JSDOM cannot handle container queries.\n   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n   * for failing to parse the stylesheet.\n   */\n  process.env.NODE_ENV !== 'test'\n    ? styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n        ${({ theme }) => theme.breakpoints.medium} {\n          ${({ col }) => col && `grid-column: span ${col};`}\n        }\n      `\n    : styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n      `;\n\nconst panelStyles = {\n  padding: {\n    initial: 4,\n    medium: 6,\n  },\n  borderColor: 'neutral150',\n  background: 'neutral0',\n  hasRadius: true,\n  shadow: 'tableShadow',\n} satisfies BoxProps;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n  document: ReturnType<UseDocument>;\n}\n\nconst FormLayout = ({ layout, document, hasBackground = true }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const modelUid = document.schema?.uid;\n  const fieldValues = useForm('Fields', (state) => state.values);\n  const rulesEngine = createRulesEngine();\n\n  const getLabel = (name: string, label: string) => {\n    return formatMessage({\n      id: `content-manager.content-types.${modelUid}.${name}`,\n      defaultMessage: label,\n    });\n  };\n\n  return (\n    <Flex\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={{\n        initial: 4,\n        large: 6,\n      }}\n    >\n      {layout.map((panel, index) => {\n        if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n          const [row] = panel;\n          const [field] = row;\n          const attribute = document.schema?.attributes[field.name];\n          const condition = attribute?.conditions?.visible;\n\n          if (condition) {\n            const isVisible = rulesEngine.evaluate(condition, fieldValues);\n            if (!isVisible) {\n              return null; // Skip rendering the dynamic zone if the condition is not met\n            }\n          }\n\n          return (\n            <Grid.Root key={field.name} gap={4}>\n              <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <InputRenderer\n                  {...field}\n                  label={getLabel(field.name, field.label)}\n                  document={document}\n                />\n              </Grid.Item>\n            </Grid.Root>\n          );\n        }\n\n        return (\n          <Box key={index} {...(hasBackground && panelStyles)}>\n            <Flex\n              direction=\"column\"\n              alignItems=\"stretch\"\n              gap={{\n                initial: 4,\n                large: 6,\n              }}\n            >\n              {panel.map((row, gridRowIndex) => {\n                const visibleFields = row.filter(({ name }) => {\n                  const attribute = document.schema?.attributes[name];\n                  const condition = attribute?.conditions?.visible;\n\n                  if (condition) {\n                    return rulesEngine.evaluate(condition, fieldValues);\n                  }\n\n                  return true;\n                });\n\n                if (visibleFields.length === 0) {\n                  return null; // Skip rendering the entire grid row\n                }\n\n                return (\n                  <ResponsiveGridRoot key={gridRowIndex} gap={4}>\n                    {visibleFields.map(({ size, ...field }) => {\n                      return (\n                        <ResponsiveGridItem\n                          col={size}\n                          key={field.name}\n                          s={12}\n                          xs={12}\n                          direction=\"column\"\n                          alignItems=\"stretch\"\n                        >\n                          <InputRenderer\n                            {...field}\n                            label={getLabel(field.name, field.label)}\n                            document={document}\n                          />\n                        </ResponsiveGridItem>\n                      );\n                    })}\n                  </ResponsiveGridRoot>\n                );\n              })}\n            </Flex>\n          </Box>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport { FormLayout, FormLayoutProps };\n"],"names":["ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","process","env","NODE_ENV","Item","theme","breakpoints","medium","col","panelStyles","padding","initial","borderColor","background","hasRadius","shadow","FormLayout","layout","document","hasBackground","formatMessage","useIntl","modelUid","schema","uid","fieldValues","useForm","state","values","rulesEngine","createRulesEngine","getLabel","name","label","id","defaultMessage","_jsx","Flex","direction","alignItems","gap","large","map","panel","index","some","row","field","type","attribute","attributes","condition","conditions","visible","isVisible","evaluate","s","xs","InputRenderer","Box","gridRowIndex","visibleFields","filter","length","size"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormLayout.mjs

@@ -6,9 +6,6 @@ import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { InputRenderer as MemoizedInputRenderer } from './InputRenderer.mjs';
 
-const RESPONSIVE_CONTAINER_BREAKPOINTS = {
-    sm: '27.5rem'
-};
 const ResponsiveGridRoot = styled(Grid.Root)`
   container-type: inline-size;
 `;
@@ -19,14 +16,17 @@ const ResponsiveGridItem = /**
    * for failing to parse the stylesheet.
    */ process.env.NODE_ENV !== 'test' ? styled(Grid.Item)`
         grid-column: span 12;
-        @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+        ${({ theme })=>theme.breakpoints.medium} {
           ${({ col })=>col && `grid-column: span ${col};`}
         }
       ` : styled(Grid.Item)`
         grid-column: span 12;
       `;
 const panelStyles = {
-    padding: 6,
+    padding: {
+        initial: 4,
+        medium: 6
+    },
     borderColor: 'neutral150',
     background: 'neutral0',
     hasRadius: true,
@@ -46,7 +46,10 @@ const FormLayout = ({ layout, document, hasBackground = true })=>{
     return /*#__PURE__*/ jsx(Flex, {
         direction: "column",
         alignItems: "stretch",
-        gap: 6,
+        gap: {
+            initial: 4,
+            large: 6
+        },
         children: layout.map((panel, index)=>{
             if (panel.some((row)=>row.some((field)=>field.type === 'dynamiczone'))) {
                 const [row] = panel;
@@ -80,7 +83,10 @@ const FormLayout = ({ layout, document, hasBackground = true })=>{
                 children: /*#__PURE__*/ jsx(Flex, {
                     direction: "column",
                     alignItems: "stretch",
-                    gap: 6,
+                    gap: {
+                        initial: 4,
+                        large: 6
+                    },
                     children: panel.map((row, gridRowIndex)=>{
                         const visibleFields = row.filter(({ name })=>{
                             const attribute = document.schema?.attributes[name];
@@ -117,5 +123,5 @@ const FormLayout = ({ layout, document, hasBackground = true })=>{
     });
 };
 
-export { FormLayout, RESPONSIVE_CONTAINER_BREAKPOINTS, ResponsiveGridItem, ResponsiveGridRoot };
+export { FormLayout, ResponsiveGridItem, ResponsiveGridRoot };
 //# sourceMappingURL=FormLayout.mjs.map

package/dist/admin/pages/EditView/components/FormLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.mjs","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, createRulesEngine } from '@strapi/admin/strapi-admin';\nimport { Box, BoxProps, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\n\nimport { InputRenderer } from './InputRenderer';\n\nimport type { UseDocument } from '../../../hooks/useDocument';\n\nexport const RESPONSIVE_CONTAINER_BREAKPOINTS = {\n  sm: '27.5rem', // 440px\n};\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem =\n  /**\n   * TODO:\n   * JSDOM cannot handle container queries.\n   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n   * for failing to parse the stylesheet.\n   */\n  process.env.NODE_ENV !== 'test'\n    ? styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n        @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {\n          ${({ col }) => col && `grid-column: span ${col};`}\n        }\n      `\n    : styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n      `;\n\nconst panelStyles = {\n  padding: 6,\n  borderColor: 'neutral150',\n  background: 'neutral0',\n  hasRadius: true,\n  shadow: 'tableShadow',\n} satisfies BoxProps;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n  document: ReturnType<UseDocument>;\n}\n\nconst FormLayout = ({ layout, document, hasBackground = true }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const modelUid = document.schema?.uid;\n  const fieldValues = useForm('Fields', (state) => state.values);\n  const rulesEngine = createRulesEngine();\n\n  const getLabel = (name: string, label: string) => {\n    return formatMessage({\n      id: `content-manager.content-types.${modelUid}.${name}`,\n      defaultMessage: label,\n    });\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n      {layout.map((panel, index) => {\n        if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n          const [row] = panel;\n          const [field] = row;\n          const attribute = document.schema?.attributes[field.name];\n          const condition = attribute?.conditions?.visible;\n\n          if (condition) {\n            const isVisible = rulesEngine.evaluate(condition, fieldValues);\n            if (!isVisible) {\n              return null; // Skip rendering the dynamic zone if the condition is not met\n            }\n          }\n\n          return (\n            <Grid.Root key={field.name} gap={4}>\n              <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <InputRenderer\n                  {...field}\n                  label={getLabel(field.name, field.label)}\n                  document={document}\n                />\n              </Grid.Item>\n            </Grid.Root>\n          );\n        }\n\n        return (\n          <Box key={index} {...(hasBackground && panelStyles)}>\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n              {panel.map((row, gridRowIndex) => {\n                const visibleFields = row.filter(({ name }) => {\n                  const attribute = document.schema?.attributes[name];\n                  const condition = attribute?.conditions?.visible;\n\n                  if (condition) {\n                    return rulesEngine.evaluate(condition, fieldValues);\n                  }\n\n                  return true;\n                });\n\n                if (visibleFields.length === 0) {\n                  return null; // Skip rendering the entire grid row\n                }\n\n                return (\n                  <ResponsiveGridRoot key={gridRowIndex} gap={4}>\n                    {visibleFields.map(({ size, ...field }) => {\n                      return (\n                        <ResponsiveGridItem\n                          col={size}\n                          key={field.name}\n                          s={12}\n                          xs={12}\n                          direction=\"column\"\n                          alignItems=\"stretch\"\n                        >\n                          <InputRenderer\n                            {...field}\n                            label={getLabel(field.name, field.label)}\n                            document={document}\n                          />\n                        </ResponsiveGridItem>\n                      );\n                    })}\n                  </ResponsiveGridRoot>\n                );\n              })}\n            </Flex>\n          </Box>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport { FormLayout, FormLayoutProps };\n"],"names":["RESPONSIVE_CONTAINER_BREAKPOINTS","sm","ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","process","env","NODE_ENV","Item","col","panelStyles","padding","borderColor","background","hasRadius","shadow","FormLayout","layout","document","hasBackground","formatMessage","useIntl","modelUid","schema","uid","fieldValues","useForm","state","values","rulesEngine","createRulesEngine","getLabel","name","label","id","defaultMessage","_jsx","Flex","direction","alignItems","gap","map","panel","index","some","row","field","type","attribute","attributes","condition","conditions","visible","isVisible","evaluate","s","xs","InputRenderer","Box","gridRowIndex","visibleFields","filter","length","size"],"mappings":"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"}
+{"version":3,"file":"FormLayout.mjs","sources":["../../../../../admin/src/pages/EditView/components/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, createRulesEngine } from '@strapi/admin/strapi-admin';\nimport { Box, BoxProps, Flex, Grid } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { EditLayout } from '../../../hooks/useDocumentLayout';\n\nimport { InputRenderer } from './InputRenderer';\n\nimport type { UseDocument } from '../../../hooks/useDocument';\n\nexport const ResponsiveGridRoot = styled(Grid.Root)`\n  container-type: inline-size;\n`;\n\nexport const ResponsiveGridItem =\n  /**\n   * TODO:\n   * JSDOM cannot handle container queries.\n   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n   * for failing to parse the stylesheet.\n   */\n  process.env.NODE_ENV !== 'test'\n    ? styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n        ${({ theme }) => theme.breakpoints.medium} {\n          ${({ col }) => col && `grid-column: span ${col};`}\n        }\n      `\n    : styled(Grid.Item)<{ col: number }>`\n        grid-column: span 12;\n      `;\n\nconst panelStyles = {\n  padding: {\n    initial: 4,\n    medium: 6,\n  },\n  borderColor: 'neutral150',\n  background: 'neutral0',\n  hasRadius: true,\n  shadow: 'tableShadow',\n} satisfies BoxProps;\n\ninterface FormLayoutProps extends Pick<EditLayout, 'layout'> {\n  hasBackground?: boolean;\n  document: ReturnType<UseDocument>;\n}\n\nconst FormLayout = ({ layout, document, hasBackground = true }: FormLayoutProps) => {\n  const { formatMessage } = useIntl();\n  const modelUid = document.schema?.uid;\n  const fieldValues = useForm('Fields', (state) => state.values);\n  const rulesEngine = createRulesEngine();\n\n  const getLabel = (name: string, label: string) => {\n    return formatMessage({\n      id: `content-manager.content-types.${modelUid}.${name}`,\n      defaultMessage: label,\n    });\n  };\n\n  return (\n    <Flex\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={{\n        initial: 4,\n        large: 6,\n      }}\n    >\n      {layout.map((panel, index) => {\n        if (panel.some((row) => row.some((field) => field.type === 'dynamiczone'))) {\n          const [row] = panel;\n          const [field] = row;\n          const attribute = document.schema?.attributes[field.name];\n          const condition = attribute?.conditions?.visible;\n\n          if (condition) {\n            const isVisible = rulesEngine.evaluate(condition, fieldValues);\n            if (!isVisible) {\n              return null; // Skip rendering the dynamic zone if the condition is not met\n            }\n          }\n\n          return (\n            <Grid.Root key={field.name} gap={4}>\n              <Grid.Item col={12} s={12} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <InputRenderer\n                  {...field}\n                  label={getLabel(field.name, field.label)}\n                  document={document}\n                />\n              </Grid.Item>\n            </Grid.Root>\n          );\n        }\n\n        return (\n          <Box key={index} {...(hasBackground && panelStyles)}>\n            <Flex\n              direction=\"column\"\n              alignItems=\"stretch\"\n              gap={{\n                initial: 4,\n                large: 6,\n              }}\n            >\n              {panel.map((row, gridRowIndex) => {\n                const visibleFields = row.filter(({ name }) => {\n                  const attribute = document.schema?.attributes[name];\n                  const condition = attribute?.conditions?.visible;\n\n                  if (condition) {\n                    return rulesEngine.evaluate(condition, fieldValues);\n                  }\n\n                  return true;\n                });\n\n                if (visibleFields.length === 0) {\n                  return null; // Skip rendering the entire grid row\n                }\n\n                return (\n                  <ResponsiveGridRoot key={gridRowIndex} gap={4}>\n                    {visibleFields.map(({ size, ...field }) => {\n                      return (\n                        <ResponsiveGridItem\n                          col={size}\n                          key={field.name}\n                          s={12}\n                          xs={12}\n                          direction=\"column\"\n                          alignItems=\"stretch\"\n                        >\n                          <InputRenderer\n                            {...field}\n                            label={getLabel(field.name, field.label)}\n                            document={document}\n                          />\n                        </ResponsiveGridItem>\n                      );\n                    })}\n                  </ResponsiveGridRoot>\n                );\n              })}\n            </Flex>\n          </Box>\n        );\n      })}\n    </Flex>\n  );\n};\n\nexport { FormLayout, FormLayoutProps };\n"],"names":["ResponsiveGridRoot","styled","Grid","Root","ResponsiveGridItem","process","env","NODE_ENV","Item","theme","breakpoints","medium","col","panelStyles","padding","initial","borderColor","background","hasRadius","shadow","FormLayout","layout","document","hasBackground","formatMessage","useIntl","modelUid","schema","uid","fieldValues","useForm","state","values","rulesEngine","createRulesEngine","getLabel","name","label","id","defaultMessage","_jsx","Flex","direction","alignItems","gap","large","map","panel","index","some","row","field","type","attribute","attributes","condition","conditions","visible","isVisible","evaluate","s","xs","InputRenderer","Box","gridRowIndex","visibleFields","filter","length","size"],"mappings":"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"}

package/dist/admin/pages/EditView/components/Header.js

@@ -48,8 +48,14 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         direction: "column",
         alignItems: "flex-start",
-        paddingTop: 6,
-        paddingBottom: 4,
+        paddingTop: {
+            initial: 4,
+            large: 6
+        },
+        paddingBottom: {
+            initial: 0,
+            large: 4
+        },
         gap: 2,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.BackButton, {
@@ -58,8 +64,15 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 width: "100%",
                 justifyContent: "space-between",
-                gap: "80px",
+                gap: {
+                    initial: 2,
+                    medium: '8rem'
+                },
                 alignItems: "flex-start",
+                direction: {
+                    initial: 'column',
+                    medium: 'row'
+                },
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                         variant: "alpha",
@@ -281,29 +294,74 @@ const HeaderActions = ({ actions })=>{
                             children: label
                         }, option.value))
                 }, action.id);
+            } else if (action.status) {
+                return /*#__PURE__*/ jsxRuntime.jsx(HeaderActionStatus, {
+                    tooltip: action.status?.tooltip,
+                    children: action.status.message
+                }, action.id);
             } else {
-                if (action.type === 'icon') {
-                    return /*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                disabled: action.disabled,
-                                label: action.label,
-                                size: "S",
-                                onClick: handleClick(action),
-                                children: action.icon
-                            }),
-                            action.dialog ? /*#__PURE__*/ jsxRuntime.jsx(HeaderActionDialog, {
-                                ...action.dialog,
-                                isOpen: dialogId === action.id,
-                                onClose: handleClose
-                            }) : null
-                        ]
-                    }, action.id);
-                }
+                return /*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                            disabled: action.disabled,
+                            label: action.label,
+                            size: "S",
+                            onClick: handleClick(action),
+                            children: action.icon
+                        }),
+                        action.dialog ? /*#__PURE__*/ jsxRuntime.jsx(HeaderActionDialog, {
+                            ...action.dialog,
+                            isOpen: dialogId === action.id,
+                            onClose: handleClose
+                        }) : null
+                    ]
+                }, action.id);
             }
         })
     });
 };
+const HeaderActionStatus = ({ tooltip, children })=>{
+    const [open, setOpen] = React__namespace.useState(false);
+    // Debounce the open/close so the user can hover over the popover content before it closes
+    const debouncedOpen = strapiAdmin.useDebounce(open, 100);
+    const handleMouseEnter = ()=>{
+        if (tooltip) {
+            setOpen(true);
+        }
+    };
+    const handleMouseLeave = ()=>{
+        if (tooltip) {
+            setOpen(false);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+        open: debouncedOpen,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Anchor, {
+                style: {
+                    alignSelf: 'stretch'
+                },
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                "aria-describedby": "document-header-action-status",
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    height: "100%",
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+                role: "tooltip",
+                id: "document-header-action-status",
+                side: "bottom",
+                align: "center",
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                children: tooltip
+            })
+        ]
+    });
+};
 const HeaderActionDialog = ({ onClose, onCancel, title, content: Content, isOpen })=>{
     const handleClose = async ()=>{
         if (onCancel) {
@@ -331,7 +389,8 @@ const HeaderActionDialog = ({ onClose, onCancel, title, content: Content, isOpen
  * -----------------------------------------------------------------------------------------------*/ const ConfigureTheViewAction = ({ collectionType, model })=>{
     const navigate = reactRouterDom.useNavigate();
     const { formatMessage } = reactIntl.useIntl();
-    return {
+    const isDesktop = strapiAdmin.useIsDesktop();
+    return isDesktop ? {
         label: formatMessage({
             id: 'app.links.configure-view',
             defaultMessage: 'Configure the view'
@@ -341,14 +400,15 @@ const HeaderActionDialog = ({ onClose, onCancel, title, content: Content, isOpen
             navigate(`../${collectionType}/${model}/configurations/edit`);
         },
         position: 'header'
-    };
+    } : null;
 };
 ConfigureTheViewAction.type = 'configure-the-view';
 ConfigureTheViewAction.position = 'header';
 const EditTheModelAction = ({ model })=>{
     const navigate = reactRouterDom.useNavigate();
     const { formatMessage } = reactIntl.useIntl();
-    return {
+    const isDesktop = strapiAdmin.useIsDesktop();
+    return isDesktop ? {
         label: formatMessage({
             id: 'content-manager.link-to-ctb',
             defaultMessage: 'Edit the model'
@@ -358,7 +418,7 @@ const EditTheModelAction = ({ model })=>{
             navigate(`/plugins/content-type-builder/content-types/${model}`);
         },
         position: 'header'
-    };
+    } : null;
 };
 EditTheModelAction.type = 'edit-the-model';
 EditTheModelAction.position = 'header';