@payloadcms/ui 4.0.0-internal.4cbdd50 → 4.0.0-internal.4e1f822

package/dist/elements/ListHeader/TitleActions/ListEmptyTrashButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEmptyTrashButton.js","names":["useModal","getTranslation","formatAdminURL","qs","React","toast","useConfig","useLocale","useRouteCache","useRouter","useSearchParams","useTranslation","requests","Button","ConfirmationModal","Translation","confirmEmptyTrashSlug","ListEmptyTrashButton","collectionConfig","hasDeletePermission","i18n","t","code","locale","config","openModal","router","searchParams","clearRouteCache","trashCount","setTrashCount","useState","useEffect","fetchTrashCount","queryString","stringify","depth","limit","trash","where","deletedAt","exists","addQueryPrefix","res","get","apiRoute","routes","api","path","slug","headers","language","json","totalDocs","handleEmptyTrash","useCallback","labels","delete","deletedCount","docs","length","status","success","count","label","plural","errors","error","message","description","map","err","join","replace","Object","fromEntries","entries","page","_jsxs","Fragment","_jsx","buttonStyle","disabled","id","onClick","size","body","elements","0","children","1","i18nKey","variables","singular","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../../src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useRouteCache } from '../../../providers/RouteCache/index.js'\nimport { useRouter, useSearchParams } from '../../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { Button } from '../../Button/index.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { Translation } from '../../Translation/index.js'\n\nconst confirmEmptyTrashSlug = 'confirm-empty-trash'\n\nexport function ListEmptyTrashButton({\n  collectionConfig,\n  hasDeletePermission,\n}: {\n  collectionConfig: ClientCollectionConfig\n  hasDeletePermission: boolean\n}) {\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { config } = useConfig()\n  const { openModal } = useModal()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const { clearRouteCache } = useRouteCache()\n\n  const [trashCount, setTrashCount] = React.useState<null | number>(null)\n\n  React.useEffect(() => {\n    const fetchTrashCount = async () => {\n      const queryString = qs.stringify(\n        {\n          depth: 0,\n          limit: 0,\n          locale,\n          trash: true,\n          where: {\n            deletedAt: {\n              exists: true,\n            },\n          },\n        },\n        { addQueryPrefix: true },\n      )\n\n      try {\n        const res = await requests.get(\n          formatAdminURL({\n            apiRoute: config.routes.api,\n            path: `/${collectionConfig.slug}${queryString}`,\n          }),\n          {\n            headers: {\n              'Accept-Language': i18n.language,\n              'Content-Type': 'application/json',\n            },\n          },\n        )\n\n        const json = await res.json()\n        setTrashCount(json?.totalDocs ?? 0)\n      } catch {\n        setTrashCount(0)\n      }\n    }\n\n    void fetchTrashCount()\n  }, [collectionConfig.slug, config, i18n.language, locale])\n\n  const handleEmptyTrash = React.useCallback(async () => {\n    if (!hasDeletePermission) {\n      return\n    }\n\n    const { slug, labels } = collectionConfig\n\n    const queryString = qs.stringify(\n      {\n        limit: 0,\n        locale,\n        trash: true,\n        where: {\n          deletedAt: {\n            exists: true,\n          },\n        },\n      },\n      { addQueryPrefix: true },\n    )\n\n    const res = await requests.delete(\n      formatAdminURL({\n        apiRoute: config.routes.api,\n        path: `/${slug}${queryString}`,\n      }),\n      {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      },\n    )\n\n    try {\n      const json = await res.json()\n      const deletedCount = json?.docs?.length || 0\n\n      if (res.status < 400) {\n        toast.success(\n          t('general:permanentlyDeletedCountSuccessfully', {\n            count: deletedCount,\n            label: getTranslation(labels?.plural, i18n),\n          }),\n        )\n      }\n\n      if (json?.errors?.length > 0) {\n        toast.error(json.message, {\n          description: json.errors.map((err) => err.message).join('\\n'),\n        })\n      }\n\n      router.replace(\n        qs.stringify(\n          {\n            ...Object.fromEntries(searchParams.entries()),\n            page: '1',\n          },\n          { addQueryPrefix: true },\n        ),\n      )\n\n      clearRouteCache()\n    } catch {\n      toast.error(t('error:unknown'))\n    }\n  }, [\n    collectionConfig,\n    config,\n    hasDeletePermission,\n    i18n,\n    t,\n    locale,\n    searchParams,\n    router,\n    clearRouteCache,\n  ])\n\n  return (\n    <React.Fragment>\n      <Button\n        aria-label={t('general:emptyTrashLabel', {\n          label: getTranslation(collectionConfig?.labels?.plural, i18n),\n        })}\n        buttonStyle=\"pill\"\n        disabled={trashCount === 0}\n        id=\"empty-trash-button\"\n        key=\"empty-trash-button\"\n        onClick={() => {\n          openModal(confirmEmptyTrashSlug)\n        }}\n        size=\"medium\"\n      >\n        {t('general:emptyTrash')}\n      </Button>\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              '0': ({ children }) => <strong>{children}</strong>,\n              '1': ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"general:aboutToPermanentlyDeleteTrash\"\n            t={t}\n            variables={{\n              count: trashCount ?? 0,\n              label: getTranslation(\n                trashCount === 1\n                  ? collectionConfig.labels?.singular\n                  : collectionConfig.labels?.plural,\n                i18n,\n              ),\n            }}\n          />\n        }\n        confirmingLabel={t('general:deleting')}\n        heading={t('general:confirmDeletion')}\n        modalSlug={confirmEmptyTrashSlug}\n        onConfirm={handleEmptyTrash}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListEmptyTrashButton.js","names":["useModal","getTranslation","formatAdminURL","qs","React","toast","useConfig","useLocale","useRouteCache","useRouter","useSearchParams","useTranslation","requests","Button","ConfirmationModal","Translation","confirmEmptyTrashSlug","ListEmptyTrashButton","collectionConfig","hasDeletePermission","i18n","t","currentLocale","locale","code","config","openModal","router","searchParams","clearRouteCache","trashCount","setTrashCount","useState","useEffect","fetchTrashCount","queryString","stringify","depth","limit","trash","where","deletedAt","exists","addQueryPrefix","res","get","apiRoute","routes","api","path","slug","headers","language","json","totalDocs","handleEmptyTrash","useCallback","labels","delete","deletedCount","docs","length","status","success","count","label","plural","errors","error","message","description","map","err","join","replace","Object","fromEntries","entries","page","_jsxs","Fragment","_jsx","buttonStyle","disabled","id","onClick","size","body","elements","0","children","1","i18nKey","variables","singular","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../../src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useRouteCache } from '../../../providers/RouteCache/index.js'\nimport { useRouter, useSearchParams } from '../../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { Button } from '../../Button/index.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { Translation } from '../../Translation/index.js'\n\nconst confirmEmptyTrashSlug = 'confirm-empty-trash'\n\nexport function ListEmptyTrashButton({\n  collectionConfig,\n  hasDeletePermission,\n}: {\n  collectionConfig: ClientCollectionConfig\n  hasDeletePermission: boolean\n}) {\n  const { i18n, t } = useTranslation()\n  const currentLocale = useLocale()\n  const locale = currentLocale?.code\n  const { config } = useConfig()\n  const { openModal } = useModal()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const { clearRouteCache } = useRouteCache()\n\n  const [trashCount, setTrashCount] = React.useState<null | number>(null)\n\n  React.useEffect(() => {\n    const fetchTrashCount = async () => {\n      const queryString = qs.stringify(\n        {\n          depth: 0,\n          limit: 0,\n          locale,\n          trash: true,\n          where: {\n            deletedAt: {\n              exists: true,\n            },\n          },\n        },\n        { addQueryPrefix: true },\n      )\n\n      try {\n        const res = await requests.get(\n          formatAdminURL({\n            apiRoute: config.routes.api,\n            path: `/${collectionConfig.slug}${queryString}`,\n          }),\n          {\n            headers: {\n              'Accept-Language': i18n.language,\n              'Content-Type': 'application/json',\n            },\n          },\n        )\n\n        const json = await res.json()\n        setTrashCount(json?.totalDocs ?? 0)\n      } catch {\n        setTrashCount(0)\n      }\n    }\n\n    void fetchTrashCount()\n  }, [collectionConfig.slug, config, i18n.language, locale])\n\n  const handleEmptyTrash = React.useCallback(async () => {\n    if (!hasDeletePermission) {\n      return\n    }\n\n    const { slug, labels } = collectionConfig\n\n    const queryString = qs.stringify(\n      {\n        limit: 0,\n        locale,\n        trash: true,\n        where: {\n          deletedAt: {\n            exists: true,\n          },\n        },\n      },\n      { addQueryPrefix: true },\n    )\n\n    const res = await requests.delete(\n      formatAdminURL({\n        apiRoute: config.routes.api,\n        path: `/${slug}${queryString}`,\n      }),\n      {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      },\n    )\n\n    try {\n      const json = await res.json()\n      const deletedCount = json?.docs?.length || 0\n\n      if (res.status < 400) {\n        toast.success(\n          t('general:permanentlyDeletedCountSuccessfully', {\n            count: deletedCount,\n            label: getTranslation(labels?.plural, i18n),\n          }),\n        )\n      }\n\n      if (json?.errors?.length > 0) {\n        toast.error(json.message, {\n          description: json.errors.map((err) => err.message).join('\\n'),\n        })\n      }\n\n      router.replace(\n        qs.stringify(\n          {\n            ...Object.fromEntries(searchParams.entries()),\n            page: '1',\n          },\n          { addQueryPrefix: true },\n        ),\n      )\n\n      clearRouteCache()\n    } catch {\n      toast.error(t('error:unknown'))\n    }\n  }, [\n    collectionConfig,\n    config,\n    hasDeletePermission,\n    i18n,\n    t,\n    locale,\n    searchParams,\n    router,\n    clearRouteCache,\n  ])\n\n  return (\n    <React.Fragment>\n      <Button\n        aria-label={t('general:emptyTrashLabel', {\n          label: getTranslation(collectionConfig?.labels?.plural, i18n),\n        })}\n        buttonStyle=\"pill\"\n        disabled={trashCount === 0}\n        id=\"empty-trash-button\"\n        key=\"empty-trash-button\"\n        onClick={() => {\n          openModal(confirmEmptyTrashSlug)\n        }}\n        size=\"medium\"\n      >\n        {t('general:emptyTrash')}\n      </Button>\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              '0': ({ children }) => <strong>{children}</strong>,\n              '1': ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"general:aboutToPermanentlyDeleteTrash\"\n            t={t}\n            variables={{\n              count: trashCount ?? 0,\n              label: getTranslation(\n                trashCount === 1\n                  ? collectionConfig.labels?.singular\n                  : collectionConfig.labels?.plural,\n                i18n,\n              ),\n            }}\n          />\n        }\n        confirmingLabel={t('general:deleting')}\n        heading={t('general:confirmDeletion')}\n        modalSlug={confirmEmptyTrashSlug}\n        onConfirm={handleEmptyTrash}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LivePreview/Toolbar/Controls/index.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { ChevronIcon } from '../../../../icons/Chevron/index.js';
 import { CollapseIcon } from '../../../../icons/Collapse/index.js';
 import { ExpandIcon } from '../../../../icons/Expand/index.js';
-import { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js';
+import { NewTabIcon } from '../../../../icons/NewTab/index.js';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { Button } from '../../../Button/index.js';
@@ -177,7 +177,7 @@ export const ToolbarControls = () => {
           "aria-label": t("general:openInNewWindow"),
           buttonStyle: "ghost",
           className: `${baseClass}__external`,
-          icon: _jsx(ExternalLinkIcon, {
+          icon: _jsx(NewTabIcon, {
             size: 16
           }),
           onClick: t5,

package/dist/elements/LivePreview/Toolbar/Controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CollapseIcon","ExpandIcon","ExternalLinkIcon","useLivePreviewContext","useTranslation","Button","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","isExpanded","openPopupWindow","setBreakpoint","setIsExpanded","setIsLivePreviewing","setZoom","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","RadioGroup","children","Fragment","map","zoomValue","isActive_0","_jsxs","RadioGroupItem","active","isActive","onClick","buttonProps_0","buttonProps","buttonStyle","icon","size","className","t4","t5","e","preventDefault","length","horizontalAlign","render","t1","bp","name","find","bp_0","axis","tooltip"],"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { CollapseIcon } from '../../../../icons/Collapse/index.js'\nimport { ExpandIcon } from '../../../../icons/Expand/index.js'\nimport { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const {\n    breakpoint,\n    breakpoints,\n    isExpanded,\n    openPopupWindow,\n    setBreakpoint,\n    setIsExpanded,\n    setIsLivePreviewing,\n    setZoom,\n    zoom,\n  } = useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => {\n                  const isActive = bp.name == breakpoint\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={bp.name}\n                      onClick={() => {\n                        setBreakpoint(bp.name)\n                        close()\n                      }}\n                    >\n                      {bp.label}\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.RadioGroupItem\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.RadioGroupItem>\n                )}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"secondary\" icon={<ChevronIcon size={16} />}>\n              {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__center`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <PreviewFrameSizeInput axis=\"y\" />\n        <Popup\n          className={`${baseClass}__zoom`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {zoomOptions.map((zoomValue) => {\n                  const isActive = zoom * 100 == zoomValue\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={zoomValue}\n                      onClick={() => {\n                        setZoom(zoomValue / 100)\n                        close()\n                      }}\n                    >\n                      {zoomValue}%\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"pill\" icon={<ChevronIcon size={16} />}>\n              <span className={`${baseClass}__zoom-percentage`}>%</span>\n              {zoom * 100}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      </div>\n      <div className={`${baseClass}__end`}>\n        <Button\n          aria-label={isExpanded ? t('general:collapse') : t('general:expand')}\n          buttonStyle=\"ghost\"\n          icon={isExpanded ? <CollapseIcon size={16} /> : <ExpandIcon size={16} />}\n          onClick={() => setIsExpanded(!isExpanded)}\n          tooltip={isExpanded ? t('general:collapse') : t('general:expand')}\n        />\n        <Button\n          aria-label={t('general:openInNewWindow')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__external`}\n          icon={<ExternalLinkIcon size={16} />}\n          onClick={(e) => {\n            e.preventDefault()\n            openPopupWindow()\n            setIsLivePreviewing(false)\n          }}\n          tooltip={t('general:openInNewWindow')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CollapseIcon","ExpandIcon","NewTabIcon","useLivePreviewContext","useTranslation","Button","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","isExpanded","openPopupWindow","setBreakpoint","setIsExpanded","setIsLivePreviewing","setZoom","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","RadioGroup","children","Fragment","map","zoomValue","isActive_0","_jsxs","RadioGroupItem","active","isActive","onClick","buttonProps_0","buttonProps","buttonStyle","icon","size","className","t4","t5","e","preventDefault","length","horizontalAlign","render","t1","bp","name","find","bp_0","axis","tooltip"],"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { CollapseIcon } from '../../../../icons/Collapse/index.js'\nimport { ExpandIcon } from '../../../../icons/Expand/index.js'\nimport { NewTabIcon } from '../../../../icons/NewTab/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const {\n    breakpoint,\n    breakpoints,\n    isExpanded,\n    openPopupWindow,\n    setBreakpoint,\n    setIsExpanded,\n    setIsLivePreviewing,\n    setZoom,\n    zoom,\n  } = useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => {\n                  const isActive = bp.name == breakpoint\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={bp.name}\n                      onClick={() => {\n                        setBreakpoint(bp.name)\n                        close()\n                      }}\n                    >\n                      {bp.label}\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.RadioGroupItem\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.RadioGroupItem>\n                )}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"secondary\" icon={<ChevronIcon size={16} />}>\n              {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__center`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <PreviewFrameSizeInput axis=\"y\" />\n        <Popup\n          className={`${baseClass}__zoom`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {zoomOptions.map((zoomValue) => {\n                  const isActive = zoom * 100 == zoomValue\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={zoomValue}\n                      onClick={() => {\n                        setZoom(zoomValue / 100)\n                        close()\n                      }}\n                    >\n                      {zoomValue}%\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"pill\" icon={<ChevronIcon size={16} />}>\n              <span className={`${baseClass}__zoom-percentage`}>%</span>\n              {zoom * 100}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      </div>\n      <div className={`${baseClass}__end`}>\n        <Button\n          aria-label={isExpanded ? t('general:collapse') : t('general:expand')}\n          buttonStyle=\"ghost\"\n          icon={isExpanded ? <CollapseIcon size={16} /> : <ExpandIcon size={16} />}\n          onClick={() => setIsExpanded(!isExpanded)}\n          tooltip={isExpanded ? t('general:collapse') : t('general:expand')}\n        />\n        <Button\n          aria-label={t('general:openInNewWindow')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__external`}\n          icon={<NewTabIcon size={16} />}\n          onClick={(e) => {\n            e.preventDefault()\n            openPopupWindow()\n            setIsLivePreviewing(false)\n          }}\n          tooltip={t('general:openInNewWindow')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LivePreview/Toolbar/SizeInput/index.css

@@ -1,50 +1,11 @@
 @layer payload-default {
-  .toolbar-input__group {
-    display: flex;
-    align-items: stretch;
-    height: var(--spacer-4);
-    border: var(--stroke-width-small) solid transparent;
-    border-radius: var(--field-border-radius);
-    background: var(--color-bg-secondary);
-    overflow: hidden;
-
-    &:hover:not(:focus-within) {
-      border-color: var(--color-border);
-    }
-
-    &:focus-within {
-      border-color: var(--color-border-selected);
-    }
-  }
-
-  .toolbar-input__prefix {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--spacer-4);
-    font-size: var(--text-body-medium-font-size, 0.6875rem);
-    color: var(--color-text-secondary);
-    user-select: none;
+  /* Keep the toolbar size input compact rather than filling available space */
+  .toolbar-input {
+    width: max-content;
   }
 
-  .toolbar-input {
+  .toolbar-input .form-input {
+    flex: 0 0 auto;
     width: calc(var(--spacer-4) * 2);
-    display: flex;
-    align-items: center;
-    border: none;
-    background: transparent;
-    font-size: var(--text-body-medium-font-size, 0.6875rem);
-    color: var(--color-text);
-    appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-
-    &:focus {
-      outline: none;
-    }
   }
 }

package/dist/elements/LivePreview/Toolbar/SizeInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CAiGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA2FA,CAAA"}

package/dist/elements/LivePreview/Toolbar/SizeInput/index.js

@@ -1,15 +1,15 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect } from 'react';
-import { InputStepper } from '../../../../elements/InputStepper/index.js';
+import { NumberInput } from '../../../../fields/Number/index.js';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'toolbar-input';
 export const PreviewFrameSizeInput = props => {
-  const $ = _c(32);
+  const $ = _c(30);
   const {
     axis
   } = props;
@@ -27,8 +27,8 @@ export const PreviewFrameSizeInput = props => {
   const [internalState, setInternalState] = React.useState((axis === "x" ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
   let t0;
   if ($[0] !== axis || $[1] !== measuredDeviceSize?.height || $[2] !== measuredDeviceSize?.width || $[3] !== setBreakpoint || $[4] !== setSize || $[5] !== zoom) {
-    t0 = e => {
-      let newValue = Number(e.target.value);
+    t0 = value => {
+      let newValue = Number(value);
       if (newValue < 0) {
         newValue = 0;
       }
@@ -111,40 +111,27 @@ export const PreviewFrameSizeInput = props => {
     t3 = $[21];
   }
   useEffect(t2, t3);
-  const t4 = axis === "x" ? "W" : "H";
-  let t5;
-  if ($[22] !== axis || $[23] !== handleChange || $[24] !== handleStep || $[25] !== internalState || $[26] !== t || $[27] !== t4) {
-    let t6;
-    let t7;
-    if ($[29] !== handleStep) {
-      t6 = () => handleStep("down");
-      t7 = () => handleStep("up");
-      $[29] = handleStep;
-      $[30] = t6;
-      $[31] = t7;
+  let t4;
+  if ($[22] !== axis || $[23] !== handleChange || $[24] !== handleStep || $[25] !== internalState || $[26] !== t) {
+    let t5;
+    if ($[28] !== handleChange) {
+      t5 = e => handleChange(e.target.value);
+      $[28] = handleChange;
+      $[29] = t5;
     } else {
-      t6 = $[30];
-      t7 = $[31];
+      t5 = $[29];
     }
-    t5 = _jsxs("div", {
-      className: `${baseClass}__group`,
-      children: [_jsx("span", {
-        className: `${baseClass}__prefix`,
-        children: t4
-      }), _jsx("input", {
-        "aria-label": axis === "x" ? t("upload:width") : t("upload:height"),
-        className: baseClass,
-        min: 0,
-        name: axis === "x" ? "live-preview-width" : "live-preview-height",
-        onChange: handleChange,
-        onWheel: _temp,
-        step: 1,
-        type: "number",
-        value: internalState || 0
-      }), _jsx(InputStepper, {
-        onDecrement: t6,
-        onIncrement: t7
-      })]
+    t4 = _jsx(NumberInput, {
+      ariaLabel: axis === "x" ? t("upload:width") : t("upload:height"),
+      className: baseClass,
+      min: 0,
+      onChange: t5,
+      onStep: handleStep,
+      path: axis === "x" ? "live-preview-width" : "live-preview-height",
+      prefix: axis === "x" ? "W" : "H",
+      size: "medium",
+      step: 1,
+      value: internalState || 0
     });
     $[22] = axis;
     $[23] = handleChange;
@@ -152,13 +139,9 @@ export const PreviewFrameSizeInput = props => {
     $[25] = internalState;
     $[26] = t;
     $[27] = t4;
-    $[28] = t5;
   } else {
-    t5 = $[28];
+    t4 = $[27];
   }
-  return t5;
+  return t4;
 };
-function _temp(e_0) {
-  e_0.target.blur();
-}
 //# sourceMappingURL=index.js.map

package/dist/elements/LivePreview/Toolbar/SizeInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","InputStepper","useLivePreviewContext","useTranslation","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","t","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","direction","currentValue","newValue_0","handleStep","t2","t3","t4","t5","t6","t7","_jsxs","className","children","_jsx","min","name","onChange","onWheel","_temp","step","onDecrement","onIncrement","e_0","blur"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { InputStepper } from '../../../../elements/InputStepper/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  const handleStep = useCallback(\n    (direction: 'down' | 'up') => {\n      const currentValue = internalState || 0\n      let newValue = direction === 'up' ? currentValue + 1 : currentValue - 1\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, internalState, measuredDeviceSize, setBreakpoint, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <div className={`${baseClass}__group`}>\n      <span className={`${baseClass}__prefix`}>{axis === 'x' ? 'W' : 'H'}</span>\n      <input\n        aria-label={axis === 'x' ? t('upload:width') : t('upload:height')}\n        className={baseClass}\n        min={0}\n        name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n        onChange={handleChange}\n        onWheel={(e) => {\n          // @ts-expect-error - blur() exists on input elements but not typed on EventTarget\n          e.target.blur()\n        }}\n        step={1}\n        type=\"number\"\n        value={internalState || 0}\n      />\n      <InputStepper onDecrement={() => handleStep('down')} onIncrement={() => handleStep('up')} />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","NumberInput","useLivePreviewContext","useTranslation","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","t","internalState","setInternalState","useState","width","height","t0","value","newValue","Number","type","toFixed","handleChange","t1","direction","currentValue","newValue_0","handleStep","t2","t3","t4","t5","e","target","_jsx","ariaLabel","className","min","onChange","onStep","path","prefix","step"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { NumberInput } from '../../../../fields/Number/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (value: string) => {\n      let newValue = Number(value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  const handleStep = useCallback(\n    (direction: 'down' | 'up') => {\n      const currentValue = internalState || 0\n      let newValue = direction === 'up' ? currentValue + 1 : currentValue - 1\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, internalState, measuredDeviceSize, setBreakpoint, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <NumberInput\n      ariaLabel={axis === 'x' ? t('upload:width') : t('upload:height')}\n      className={baseClass}\n      min={0}\n      onChange={(e) => handleChange(e.target.value)}\n      onStep={handleStep}\n      path={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      prefix={axis === 'x' ? 'W' : 'H'}\n      size=\"medium\"\n      step={1}\n      value={internalState || 0}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,QAAQ;AAE9C,SAASC,WAAW,QAAQ;AAC5B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACH;IAAAW;EAAA,IAAiBF,KAAA;EAEjB;IAAAG,UAAA;IAAAC,kBAAA;IAAAC,aAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC;EAAA,IACEZ,qBAAA;EAEF;IAAAa;EAAA,IAAcZ,cAAA;EAEd,OAAAa,aAAA,EAAAC,gBAAA,IAA0CnB,KAAA,CAAAoB,QAAA,CACxC,CAACV,IAAA,KAAS,MAAME,kBAAA,EAAAS,KAAA,GAA4BT,kBAAA,EAAAU,MAAyB,MAAM;EAAA,IAAAC,EAAA;EAAA,IAAAd,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAG,kBAAA,EAAAU,MAAA,IAAAb,CAAA,QAAAG,kBAAA,EAAAS,KAAA,IAAAZ,CAAA,QAAAI,aAAA,IAAAJ,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAO,IAAA;IAM3EO,EAAA,GAAAC,KAAA;MACE,IAAAC,QAAA,GAAeC,MAAA,CAAOF,KAAA;MAAA,IAElBC,QAAA,IAAW;QACbA,QAAA,CAAAA,CAAA,CAAAA,CAAA;MAAA;MAGFN,gBAAA,CAAiBM,QAAA;MACjBZ,aAAA,CAAc;MAIdC,OAAA;QAAAa,IAAA,EACQ;QAAAH,KAAA;UAAAF,MAAA,EAEIZ,IAAA,KAAS,MAAMe,QAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAU,MAAA,CAAAM,OAAA,GAAmC,IAAMZ,IAAA;UAAAK,KAAA,EAC3EX,IAAA,KAAS,MAAMe,QAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAS,KAAA,CAAAO,OAAA,GAAkC,IAAMZ;QAAA;MAAA,CAEpF;IAAA;IACFP,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAG,kBAAA,EAAAU,MAAA;IAAAb,CAAA,MAAAG,kBAAA,EAAAS,KAAA;IAAAZ,CAAA,MAAAI,aAAA;IAAAJ,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAO,IAAA;IAAAP,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EApBF,MAAAoB,YAAA,GAAqBN,EAqBqC;EAAA,IAAAO,EAAA;EAAA,IAAArB,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAS,aAAA,IAAAT,CAAA,QAAAG,kBAAA,EAAAU,MAAA,IAAAb,CAAA,SAAAG,kBAAA,EAAAS,KAAA,IAAAZ,CAAA,SAAAI,aAAA,IAAAJ,CAAA,SAAAK,OAAA,IAAAL,CAAA,SAAAO,IAAA;IAIxDc,EAAA,GAAAC,SAAA;MACE,MAAAC,YAAA,GAAqBd,aAAA,KAAiB;MACtC,IAAAe,UAAA,GAAeF,SAAA,KAAc,OAAOC,YAAA,IAAe,GAAIA,YAAA,IAAe;MAAA,IAElEP,UAAA,IAAW;QACbA,UAAA,CAAAA,CAAA,CAAAA,CAAA;MAAA;MAGFN,gBAAA,CAAiBM,UAAA;MACjBZ,aAAA,CAAc;MAEdC,OAAA;QAAAa,IAAA,EACQ;QAAAH,KAAA;UAAAF,MAAA,EAEIZ,IAAA,KAAS,MAAMe,UAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAU,MAAA,CAAAM,OAAA,GAAmC,IAAMZ,IAAA;UAAAK,KAAA,EAC3EX,IAAA,KAAS,MAAMe,UAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAS,KAAA,CAAAO,OAAA,GAAkC,IAAMZ;QAAA;MAAA,CAEpF;IAAA;IACFP,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAS,aAAA;IAAAT,CAAA,MAAAG,kBAAA,EAAAU,MAAA;IAAAb,CAAA,OAAAG,kBAAA,EAAAS,KAAA;IAAAZ,CAAA,OAAAI,aAAA;IAAAJ,CAAA,OAAAK,OAAA;IAAAL,CAAA,OAAAO,IAAA;IAAAP,CAAA,OAAAqB,EAAA;EAAA;IAAAA,EAAA,GAAArB,CAAA;EAAA;EAnBF,MAAAyB,UAAA,GAAmBJ,EAoBsD;EAAA,IAAAK,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA3B,CAAA,SAAAC,IAAA,IAAAD,CAAA,SAAAE,UAAA,IAAAF,CAAA,SAAAG,kBAAA,IAAAH,CAAA,SAAAM,IAAA,IAAAN,CAAA,SAAAO,IAAA;IAK/DmB,EAAA,GAAAA,CAAA;MAAA,IACJxB,UAAA,KAAe,gBAAgBC,kBAAA;QAAA,IAC7BF,IAAA,KAAS;UACXS,gBAAA,CAAiBO,MAAA,CAAOd,kBAAA,CAAAS,KAAA,CAAAO,OAAA,EAAiC,KAAMZ,IAAA;QAAA;UAE/DG,gBAAA,CAAiBO,MAAA,CAAOd,kBAAA,CAAAU,MAAA,CAAAM,OAAA,EAAkC,KAAMZ,IAAA;QAAA;MAAA;MAAA,IAIhEL,UAAA,KAAe,gBAAgBI,IAAA;QACjCI,gBAAA,CAAiBT,IAAA,KAAS,MAAMK,IAAA,CAAAM,KAAA,GAAaN,IAAA,CAAAO,MAAW;MAAA;IAAA;IAEzDc,EAAA,IAACzB,UAAA,EAAYD,IAAA,EAAME,kBAAA,EAAoBG,IAAA,EAAMC,IAAA;IAAKP,CAAA,OAAAC,IAAA;IAAAD,CAAA,OAAAE,UAAA;IAAAF,CAAA,OAAAG,kBAAA;IAAAH,CAAA,OAAAM,IAAA;IAAAN,CAAA,OAAAO,IAAA;IAAAP,CAAA,OAAA0B,EAAA;IAAA1B,CAAA,OAAA2B,EAAA;EAAA;IAAAD,EAAA,GAAA1B,CAAA;IAAA2B,EAAA,GAAA3B,CAAA;EAAA;EAZrDP,SAAA,CAAUiC,EAYV,EAAGC,EAAkD;EAAA,IAAAC,EAAA;EAAA,IAAA5B,CAAA,SAAAC,IAAA,IAAAD,CAAA,SAAAoB,YAAA,IAAApB,CAAA,SAAAyB,UAAA,IAAAzB,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAQ,CAAA;IAAA,IAAAqB,EAAA;IAAA,IAAA7B,CAAA,SAAAoB,YAAA;MAOvCS,EAAA,GAAAC,CAAA,IAAOV,YAAA,CAAaU,CAAA,CAAAC,MAAA,CAAAhB,KAAc;MAAAf,CAAA,OAAAoB,YAAA;MAAApB,CAAA,OAAA6B,EAAA;IAAA;MAAAA,EAAA,GAAA7B,CAAA;IAAA;IAJ9C4B,EAAA,GAAAI,IAAA,CAAAtC,WAAA;MAAAuC,SAAA,EACahC,IAAA,KAAS,MAAMO,CAAA,CAAE,kBAAkBA,CAAA,CAAE;MAAA0B,SAAA,EAAArC,SAAA;MAAAsC,GAAA;MAAAC,QAAA,EAGtCP,EAAkC;MAAAQ,MAAA,EACpCZ,UAAA;MAAAa,IAAA,EACFrC,IAAA,KAAS,MAAM,uBAAuB;MAAAsC,MAAA,EACpCtC,IAAA,KAAS,MAAM,MAAM;MAAAK,IAAA,EACxB;MAAAkC,IAAA;MAAAzB,KAAA,EAEEN,aAAA;IAAiB,C;;;;;;;;;;SAV1BmB,E;CAaJ","ignoreList":[]}

package/dist/elements/LivePreview/Window/index.css

@@ -1,4 +1,10 @@
 @layer payload-default {
+  .collection-edit:has(.live-preview-window--is-expanded) {
+    .document-fields {
+      width: 0;
+    }
+  }
+
   .live-preview-window {
     background-color: var(--color-bg);
     display: none;

package/dist/elements/LivePreview/Window/index.js

@@ -67,7 +67,7 @@ export const LivePreviewWindow = props => {
       data: values,
       externallyUpdatedRelationship: mostRecentUpdate,
       globalSlug,
-      locale: locale.code
+      locale: locale?.code
     });
   }, [formState, collectionSlug, globalSlug, id, appIsReady, mostRecentUpdate, locale, hasActiveTarget, loadedURL, lastReadyAt, postMessageToTargets]);
   /**

package/dist/elements/LivePreview/Window/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["reduceFieldsToValues","React","useCallback","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","IframeLoader","DeviceContainer","LivePreviewToolbar","baseClass","LivePreviewWindow","props","appIsReady","breakpoint","iframeRef","isExpanded","isLivePreviewing","lastReadyAt","loadedURL","popupRef","setLoadedURL","shouldRenderIframe","url","zoom","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","postMessageToTargets","message","current","closed","postMessage","contentWindow","hasActiveTarget","values","type","data","externallyUpdatedRelationship","code","_jsx","className","filter","Boolean","join","_jsxs","onLoad","ref","src","style","transform","undefined"],"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { IframeLoader } from '../../IframeLoader/index.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    breakpoint,\n    iframeRef,\n    isExpanded,\n    isLivePreviewing,\n    lastReadyAt,\n    loadedURL,\n    popupRef,\n    setLoadedURL,\n    shouldRenderIframe,\n    url,\n    zoom,\n  } = useLivePreviewContext()\n\n  const locale = useLocale()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const [formState] = useAllFormFields()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const postMessageToTargets = useCallback(\n    (message: object) => {\n      if (popupRef.current && !popupRef.current.closed) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      if (iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    },\n    [iframeRef, popupRef, url],\n  )\n\n  const hasActiveTarget = isLivePreviewing || (popupRef.current && !popupRef.current.closed)\n\n  /**\n   * For client-side apps, send data through `window.postMessage`\n   * The preview could either be an iframe embedded on the page\n   * Or it could be a separate popup window\n   * Also fires when a preview signals ready (lastReadyAt) to sync initial state\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady || !formState) {\n      return\n    }\n\n    const values = reduceFieldsToValues(formState, true)\n\n    if (!values.id) {\n      values.id = id\n    }\n\n    postMessageToTargets({\n      type: 'payload-live-preview',\n      collectionSlug,\n      data: values,\n      externallyUpdatedRelationship: mostRecentUpdate,\n      globalSlug,\n      locale: locale.code,\n    })\n  }, [\n    formState,\n    collectionSlug,\n    globalSlug,\n    id,\n    appIsReady,\n    mostRecentUpdate,\n    locale,\n    hasActiveTarget,\n    loadedURL,\n    lastReadyAt,\n    postMessageToTargets,\n  ])\n\n  /**\n   * To support SSR, we transmit a `window.postMessage` event without a payload\n   * This is because the event will ultimately trigger a server-side roundtrip\n   * i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady) {\n      return\n    }\n\n    postMessageToTargets({ type: 'payload-document-event' })\n  }, [mostRecentUpdate, hasActiveTarget, appIsReady, postMessageToTargets])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isLivePreviewing && `${baseClass}--is-live-previewing`,\n        isExpanded && `${baseClass}--is-expanded`,\n        breakpoint &&\n          breakpoint !== 'responsive' &&\n          breakpoint !== 'custom' &&\n          `${baseClass}--has-breakpoint`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <LivePreviewToolbar {...props} />\n        <div className={`${baseClass}__main`}>\n          <DeviceContainer>\n            {shouldRenderIframe && (\n              <IframeLoader\n                className=\"live-preview-iframe\"\n                id=\"live-preview-iframe\"\n                onLoad={() => {\n                  setLoadedURL(url)\n                }}\n                ref={iframeRef}\n                src={url}\n                style={{\n                  transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n                }}\n              />\n            )}\n          </DeviceContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["reduceFieldsToValues","React","useCallback","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","IframeLoader","DeviceContainer","LivePreviewToolbar","baseClass","LivePreviewWindow","props","appIsReady","breakpoint","iframeRef","isExpanded","isLivePreviewing","lastReadyAt","loadedURL","popupRef","setLoadedURL","shouldRenderIframe","url","zoom","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","postMessageToTargets","message","current","closed","postMessage","contentWindow","hasActiveTarget","values","type","data","externallyUpdatedRelationship","code","_jsx","className","filter","Boolean","join","_jsxs","onLoad","ref","src","style","transform","undefined"],"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { IframeLoader } from '../../IframeLoader/index.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    breakpoint,\n    iframeRef,\n    isExpanded,\n    isLivePreviewing,\n    lastReadyAt,\n    loadedURL,\n    popupRef,\n    setLoadedURL,\n    shouldRenderIframe,\n    url,\n    zoom,\n  } = useLivePreviewContext()\n\n  const locale = useLocale()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const [formState] = useAllFormFields()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const postMessageToTargets = useCallback(\n    (message: object) => {\n      if (popupRef.current && !popupRef.current.closed) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      if (iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    },\n    [iframeRef, popupRef, url],\n  )\n\n  const hasActiveTarget = isLivePreviewing || (popupRef.current && !popupRef.current.closed)\n\n  /**\n   * For client-side apps, send data through `window.postMessage`\n   * The preview could either be an iframe embedded on the page\n   * Or it could be a separate popup window\n   * Also fires when a preview signals ready (lastReadyAt) to sync initial state\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady || !formState) {\n      return\n    }\n\n    const values = reduceFieldsToValues(formState, true)\n\n    if (!values.id) {\n      values.id = id\n    }\n\n    postMessageToTargets({\n      type: 'payload-live-preview',\n      collectionSlug,\n      data: values,\n      externallyUpdatedRelationship: mostRecentUpdate,\n      globalSlug,\n      locale: locale?.code,\n    })\n  }, [\n    formState,\n    collectionSlug,\n    globalSlug,\n    id,\n    appIsReady,\n    mostRecentUpdate,\n    locale,\n    hasActiveTarget,\n    loadedURL,\n    lastReadyAt,\n    postMessageToTargets,\n  ])\n\n  /**\n   * To support SSR, we transmit a `window.postMessage` event without a payload\n   * This is because the event will ultimately trigger a server-side roundtrip\n   * i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady) {\n      return\n    }\n\n    postMessageToTargets({ type: 'payload-document-event' })\n  }, [mostRecentUpdate, hasActiveTarget, appIsReady, postMessageToTargets])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isLivePreviewing && `${baseClass}--is-live-previewing`,\n        isExpanded && `${baseClass}--is-expanded`,\n        breakpoint &&\n          breakpoint !== 'responsive' &&\n          breakpoint !== 'custom' &&\n          `${baseClass}--has-breakpoint`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <LivePreviewToolbar {...props} />\n        <div className={`${baseClass}__main`}>\n          <DeviceContainer>\n            {shouldRenderIframe && (\n              <IframeLoader\n                className=\"live-preview-iframe\"\n                id=\"live-preview-iframe\"\n                onLoad={() => {\n                  setLoadedURL(url)\n                }}\n                ref={iframeRef}\n                src={url}\n                style={{\n                  transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n                }}\n              />\n            )}\n          </DeviceContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LoadingOverlay/reducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../../src/elements/LoadingOverlay/reducer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,0BAA0B;;;;;CAKtC,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,EAAE,QAAQ,MAAM,KAAG,KAmBtD,CAAA"}
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../../src/elements/LoadingOverlay/reducer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,0BAA0B;;;;;CAKtC,CAAA;AAED,eAAO,MAAM,OAAO,UAAW,KAAK,UAAU,MAAM,KAAG,KAmBtD,CAAA"}

package/dist/elements/Localizer/index.js

@@ -40,7 +40,7 @@ export const Localizer = props => {
     t
   } = useTranslation();
   const locale = useLocale();
-  if (localization) {
+  if (localization && locale) {
     const {
       locales
     } = localization;

package/dist/elements/Localizer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","qs","React","Fragment","ChevronIcon","LanguageIcon","useConfig","useLocale","useLocaleLoading","useRouter","useRouteTransition","useTranslation","Button","Popup","PopupList","baseClass","Localizer","props","$","className","renderButton","config","t0","localization","router","startRouteTransition","setLocaleIsLoading","i18n","t","locale","locales","t1","filter","Boolean","t2","join","t3","t4","close","_jsx","RadioGroup","children","map","localeOption","localeOptionLabel","label","RadioGroupItem","active","code","disabled","onClick","searchParams","URLSearchParams","window","location","search","url","stringify","parse","toString","depth","ignoreQueryPrefix","addQueryPrefix","push","_jsxs","t5","_active","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","size","horizontalAlign","render","showScrollbar"],"sources":["../../../src/elements/Localizer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport * as qs from 'qs-esm'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale, useLocaleLoading } from '../../providers/Locale/index.js'\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'localizer'\n\nexport const Localizer: React.FC<{\n  className?: string\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n}> = (props) => {\n  const { className, renderButton } = props\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { setLocaleIsLoading } = useLocaleLoading()\n\n  const { i18n, t } = useTranslation()\n  const locale = useLocale()\n\n  if (localization) {\n    const { locales } = localization\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Popup\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              {locales.map((localeOption) => {\n                const localeOptionLabel = getTranslation(localeOption.label, i18n)\n\n                return (\n                  <PopupList.RadioGroupItem\n                    active={locale.code === localeOption.code}\n                    disabled={locale.code === localeOption.code}\n                    key={localeOption.code}\n                    onClick={() => {\n                      setLocaleIsLoading(true)\n                      close()\n\n                      // can't use `useSearchParams` here because it is stale due to `window.history.pushState` in `ListQueryProvider`\n                      const searchParams = new URLSearchParams(window.location.search)\n\n                      const url = qs.stringify(\n                        {\n                          ...qs.parse(searchParams.toString(), {\n                            depth: 10,\n                            ignoreQueryPrefix: true,\n                          }),\n                          locale: localeOption.code,\n                        },\n                        { addQueryPrefix: true },\n                      )\n\n                      startRouteTransition(() => {\n                        router.push(url)\n                      })\n                    }}\n                  >\n                    {localeOptionLabel !== localeOption.code ? (\n                      <Fragment>\n                        {localeOptionLabel}\n                        &nbsp;\n                        <span\n                          className={`${baseClass}__locale-code`}\n                          data-locale={localeOption.code}\n                        >\n                          {`(${localeOption.code})`}\n                        </span>\n                      </Fragment>\n                    ) : (\n                      <span className={`${baseClass}__locale-code`} data-locale={localeOption.code}>\n                        {localeOptionLabel}\n                      </span>\n                    )}\n                  </PopupList.RadioGroupItem>\n                )\n              })}\n            </PopupList.RadioGroup>\n          )}\n          renderButton={\n            renderButton ??\n            (({ active: _active, onClick, onKeyDown, ...ariaProps }) => (\n              <Button\n                aria-label={t('general:locale')}\n                buttonStyle=\"secondary\"\n                extraButtonProps={{ onKeyDown }}\n                icon={<LanguageIcon size={24} />}\n                iconPosition=\"left\"\n                onClick={onClick}\n                {...ariaProps}\n              >\n                <div className={`${baseClass}__button-content`}>\n                  {locale.code}\n                  <ChevronIcon size={16} />\n                </div>\n              </Button>\n            ))\n          }\n          showScrollbar\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","qs","React","Fragment","ChevronIcon","LanguageIcon","useConfig","useLocale","useLocaleLoading","useRouter","useRouteTransition","useTranslation","Button","Popup","PopupList","baseClass","Localizer","props","$","className","renderButton","config","t0","localization","router","startRouteTransition","setLocaleIsLoading","i18n","t","locale","locales","t1","filter","Boolean","t2","join","t3","t4","close","_jsx","RadioGroup","children","map","localeOption","localeOptionLabel","label","RadioGroupItem","active","code","disabled","onClick","searchParams","URLSearchParams","window","location","search","url","stringify","parse","toString","depth","ignoreQueryPrefix","addQueryPrefix","push","_jsxs","t5","_active","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","size","horizontalAlign","render","showScrollbar"],"sources":["../../../src/elements/Localizer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport * as qs from 'qs-esm'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale, useLocaleLoading } from '../../providers/Locale/index.js'\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'localizer'\n\nexport const Localizer: React.FC<{\n  className?: string\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n}> = (props) => {\n  const { className, renderButton } = props\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { setLocaleIsLoading } = useLocaleLoading()\n\n  const { i18n, t } = useTranslation()\n  const locale = useLocale()\n\n  if (localization && locale) {\n    const { locales } = localization\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Popup\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              {locales.map((localeOption) => {\n                const localeOptionLabel = getTranslation(localeOption.label, i18n)\n\n                return (\n                  <PopupList.RadioGroupItem\n                    active={locale.code === localeOption.code}\n                    disabled={locale.code === localeOption.code}\n                    key={localeOption.code}\n                    onClick={() => {\n                      setLocaleIsLoading(true)\n                      close()\n\n                      // can't use `useSearchParams` here because it is stale due to `window.history.pushState` in `ListQueryProvider`\n                      const searchParams = new URLSearchParams(window.location.search)\n\n                      const url = qs.stringify(\n                        {\n                          ...qs.parse(searchParams.toString(), {\n                            depth: 10,\n                            ignoreQueryPrefix: true,\n                          }),\n                          locale: localeOption.code,\n                        },\n                        { addQueryPrefix: true },\n                      )\n\n                      startRouteTransition(() => {\n                        router.push(url)\n                      })\n                    }}\n                  >\n                    {localeOptionLabel !== localeOption.code ? (\n                      <Fragment>\n                        {localeOptionLabel}\n                        &nbsp;\n                        <span\n                          className={`${baseClass}__locale-code`}\n                          data-locale={localeOption.code}\n                        >\n                          {`(${localeOption.code})`}\n                        </span>\n                      </Fragment>\n                    ) : (\n                      <span className={`${baseClass}__locale-code`} data-locale={localeOption.code}>\n                        {localeOptionLabel}\n                      </span>\n                    )}\n                  </PopupList.RadioGroupItem>\n                )\n              })}\n            </PopupList.RadioGroup>\n          )}\n          renderButton={\n            renderButton ??\n            (({ active: _active, onClick, onKeyDown, ...ariaProps }) => (\n              <Button\n                aria-label={t('general:locale')}\n                buttonStyle=\"secondary\"\n                extraButtonProps={{ onKeyDown }}\n                icon={<LanguageIcon size={24} />}\n                iconPosition=\"left\"\n                onClick={onClick}\n                {...ariaProps}\n              >\n                <div className={`${baseClass}__button-content`}>\n                  {locale.code}\n                  <ChevronIcon size={16} />\n                </div>\n              </Button>\n            ))\n          }\n          showScrollbar\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Locked/index.css

@@ -24,10 +24,5 @@
     &:focus-visible {
       outline-color: var(--color-border-selected);
     }
-
-    .locked__tooltip {
-      left: 0;
-      transform: translate3d(0, calc(var(--caret-height) + var(--caret-offset) - 1px), 0);
-    }
   }
 }

package/dist/elements/Locked/index.d.ts

@@ -1,8 +1,8 @@
-import type { ClientUser } from 'payload';
+import type { User } from 'payload';
 import React from 'react';
 import './index.css';
 export declare const Locked: React.FC<{
     className?: string;
-    user: ClientUser;
+    user: User;
 }>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Locked/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Locked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,UAAU,CAAA;CACjB,CAwBA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Locked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,IAAI,CAAA;CACX,CAkCA,CAAA"}

package/dist/elements/Locked/index.js

@@ -10,7 +10,7 @@ import { Tooltip } from '../Tooltip/index.js';
 import './index.css';
 const baseClass = 'locked';
 export const Locked = t0 => {
-  const $ = _c(8);
+  const $ = _c(10);
   const {
     className,
     user
@@ -20,6 +20,7 @@ export const Locked = t0 => {
     t
   } = useTranslation();
   const userToUse = isClientUserObject(user) ? user.email ?? user.id : t("general:anotherUser");
+  const tooltipLabel = `${userToUse} ${t("general:isEditing")}`;
   let t1;
   if ($[0] !== className) {
     t1 = [baseClass, className].filter(Boolean);
@@ -32,39 +33,57 @@ export const Locked = t0 => {
   let t3;
   let t4;
   if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => setHovered(true);
-    t4 = () => setHovered(false);
+    t3 = () => setHovered(false);
+    t4 = () => setHovered(true);
     $[2] = t3;
     $[3] = t4;
   } else {
     t3 = $[2];
     t4 = $[3];
   }
-  const t5 = `${userToUse} ${t("general:isEditing")}`;
+  let t5;
   let t6;
-  if ($[4] !== hovered || $[5] !== t2 || $[6] !== t5) {
-    t6 = _jsxs("div", {
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => setHovered(true);
+    t6 = () => setHovered(false);
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t5 = $[4];
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== hovered || $[7] !== t2 || $[8] !== tooltipLabel) {
+    t7 = _jsxs("div", {
+      "aria-label": tooltipLabel,
       className: t2,
-      onMouseEnter: t3,
-      onMouseLeave: t4,
+      onBlur: t3,
+      onFocus: t4,
+      onKeyDown: _temp,
+      onMouseEnter: t5,
+      onMouseLeave: t6,
       role: "button",
       tabIndex: 0,
-      children: [_jsx(Tooltip, {
-        alignCaret: "left",
+      children: [_jsx(LockIcon, {}), _jsx(Tooltip, {
+        alignCaret: "center",
         className: `${baseClass}__tooltip`,
         position: "bottom",
         show: hovered,
-        staticPositioning: true,
-        children: t5
-      }), _jsx(LockIcon, {})]
+        children: tooltipLabel
+      })]
     });
-    $[4] = hovered;
-    $[5] = t2;
-    $[6] = t5;
-    $[7] = t6;
+    $[6] = hovered;
+    $[7] = t2;
+    $[8] = tooltipLabel;
+    $[9] = t7;
   } else {
-    t6 = $[7];
+    t7 = $[9];
   }
-  return t6;
+  return t7;
 };
+function _temp(e) {
+  if (e.key === " ") {
+    e.preventDefault();
+  }
+}
 //# sourceMappingURL=index.js.map