@payloadcms/ui 4.0.0-internal.40de3ec → 4.0.0-internal.4804abd

package/dist/views/API/index.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","names":["formatAdminURL","hasDraftsEnabled","React","toast","Button","CodeEditor","CodeEditorLazy","CheckboxField","NumberField","TextInput","Form","ExternalLinkIcon","MinimizeMaximizeIcon","useConfig","useDocumentInfo","useLocale","useSearchParams","useTranslation","SetDocumentStepNav","LocaleSelector","baseClass","APIViewClient","id","collectionSlug","globalSlug","initialData","isTrashed","searchParams","i18n","t","code","config","defaultDepth","localization","routes","api","apiRoute","serverURL","getEntityConfig","collectionConfig","globalConfig","localeOptions","locales","map","locale","label","value","draftsEnabled","docEndpoint","undefined","data","setData","useState","draft","setDraft","get","setLocale","depth","setDepth","toString","authenticated","setAuthenticated","fullscreen","setFullscreen","origin","setOrigin","jsonString","useMemo","JSON","stringify","recalculatedHeightAt","setRecalculatedHeightAt","useEffect","count","window","location","trashParam","deletedAt","params","URLSearchParams","String","trash","fetchURL","path","fetchData","res","fetch","credentials","headers","language","method","json","error","console","_jsxs","className","filter","Boolean","join","_jsx","globalLabel","pluralLabel","labels","plural","useAsTitle","admin","view","initialState","initialValue","valid","Number","onChange","field","name","step","max","min","htmlAttributes","readOnly","buttonStyle","el","icon","size","margin","newTab","url","isMinimized","onClick","defaultLanguage","height","options","fixedOverflowWidgets","folding","lineNumbers","stickyScroll","enabled","wordWrap"],"sources":["../../../src/views/API/index.client.tsx"],"sourcesContent":["'use client'\n\nimport { formatAdminURL, hasDraftsEnabled } from 'payload/shared'\nimport * as React from 'react'\nimport { toast } from 'sonner'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { CodeEditor as CodeEditorLazy } from '../../elements/CodeEditor/index.js'\nimport { CheckboxField } from '../../fields/Checkbox/index.js'\nimport { NumberField } from '../../fields/Number/index.js'\nimport { TextInput } from '../../fields/Text/Input.js'\nimport { Form } from '../../forms/Form/index.js'\nimport { ExternalLinkIcon } from '../../icons/ExternalLink/index.js'\nimport { MinimizeMaximizeIcon } from '../../icons/MinimizeMaximize/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useSearchParams } from '../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { SetDocumentStepNav } from '../../views/Edit/SetDocumentStepNav/index.js'\nimport './index.css'\nimport { LocaleSelector } from './LocaleSelector/index.js'\n\nconst baseClass = 'query-inspector'\n\nexport const APIViewClient: React.FC = () => {\n  const { id, collectionSlug, globalSlug, initialData, isTrashed } = useDocumentInfo()\n\n  const searchParams = useSearchParams()\n  const { i18n, t } = useTranslation()\n  const { code } = useLocale()\n\n  const {\n    config: {\n      defaultDepth,\n      localization,\n      routes: { api: apiRoute },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const globalConfig = getEntityConfig({ globalSlug })\n\n  const localeOptions =\n    localization &&\n    localization.locales.map((locale) => ({ label: locale.label, value: locale.code }))\n\n  let draftsEnabled: boolean = false\n  let docEndpoint: `/${string}` = undefined\n\n  if (collectionConfig) {\n    draftsEnabled = hasDraftsEnabled(collectionConfig)\n    docEndpoint = `/${collectionSlug}/${id}`\n  }\n\n  if (globalConfig) {\n    draftsEnabled = hasDraftsEnabled(globalConfig)\n    docEndpoint = `/globals/${globalSlug}`\n  }\n\n  const [data, setData] = React.useState<any>(initialData)\n  const [draft, setDraft] = React.useState<boolean>(searchParams.get('draft') === 'true')\n  const [locale, setLocale] = React.useState<string>(searchParams?.get('locale') || code)\n  const [depth, setDepth] = React.useState<string>(\n    searchParams.get('depth') || defaultDepth.toString(),\n  )\n  const [authenticated, setAuthenticated] = React.useState<boolean>(true)\n  const [fullscreen, setFullscreen] = React.useState<boolean>(false)\n  const [origin, setOrigin] = React.useState<string>(serverURL || '')\n\n  const jsonString = React.useMemo(\n    () => (data === undefined ? '' : JSON.stringify(data, null, 2)),\n    [data],\n  )\n\n  // readOnly editors never fire onChange, so bump a counter to re-fit height on data change\n  const [recalculatedHeightAt, setRecalculatedHeightAt] = React.useState(0)\n  React.useEffect(() => {\n    setRecalculatedHeightAt((count) => count + 1)\n  }, [jsonString])\n\n  // Set the origin to the window.location.origin in useEffect to avoid hydration errors\n  React.useEffect(() => {\n    if (!serverURL) {\n      setOrigin(window.location.origin)\n    }\n  }, [serverURL])\n\n  const trashParam = typeof initialData?.deletedAt === 'string'\n\n  const params = new URLSearchParams({\n    depth,\n    draft: String(draft),\n    locale,\n    trash: trashParam ? 'true' : 'false',\n  }).toString()\n\n  const fetchURL = formatAdminURL({\n    apiRoute,\n    path: `${docEndpoint}?${params}`,\n    serverURL: origin,\n  })\n\n  React.useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const res = await fetch(fetchURL, {\n          credentials: authenticated ? 'include' : 'omit',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n          method: 'GET',\n        })\n\n        try {\n          const json = await res.json()\n          setData(json)\n        } catch (error) {\n          toast.error('Error parsing response')\n          console.error(error) // eslint-disable-line no-console\n        }\n      } catch (error) {\n        toast.error('Error making request')\n        console.error(error) // eslint-disable-line no-console\n      }\n    }\n\n    void fetchData()\n  }, [i18n.language, fetchURL, authenticated])\n\n  return (\n    <div\n      className={[baseClass, fullscreen && `${baseClass}--fullscreen`].filter(Boolean).join(' ')}\n    >\n      <SetDocumentStepNav\n        collectionSlug={collectionSlug}\n        globalLabel={globalConfig?.label}\n        globalSlug={globalSlug}\n        id={id}\n        isTrashed={isTrashed}\n        pluralLabel={collectionConfig ? collectionConfig?.labels?.plural : undefined}\n        useAsTitle={collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined}\n        view=\"API\"\n      />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__configuration`}>\n          <Form\n            initialState={{\n              authenticated: {\n                initialValue: authenticated || false,\n                valid: true,\n                value: authenticated || false,\n              },\n              depth: {\n                initialValue: Number(depth || 0),\n                valid: true,\n                value: Number(depth || 0),\n              },\n              draft: {\n                initialValue: draft || false,\n                valid: true,\n                value: draft || false,\n              },\n              locale: {\n                initialValue: locale,\n                valid: true,\n                value: locale,\n              },\n            }}\n          >\n            <div className={`${baseClass}__form-fields`}>\n              {localeOptions && (\n                <LocaleSelector localeOptions={localeOptions} onChange={setLocale} />\n              )}\n              <NumberField\n                field={{\n                  name: 'depth',\n                  admin: {\n                    step: 1,\n                  },\n                  label: t('general:depth'),\n                  max: 10,\n                  min: 0,\n                }}\n                onChange={(value) => setDepth(value?.toString())}\n                path=\"depth\"\n              />\n              {draftsEnabled && (\n                <CheckboxField\n                  field={{\n                    name: 'draft',\n                    label: t('version:draft'),\n                  }}\n                  onChange={() => setDraft(!draft)}\n                  path=\"draft\"\n                />\n              )}\n              <CheckboxField\n                field={{\n                  name: 'authenticated',\n                  label: t('authentication:authenticated'),\n                }}\n                onChange={() => setAuthenticated(!authenticated)}\n                path=\"authenticated\"\n              />\n            </div>\n          </Form>\n        </div>\n        <div className={`${baseClass}__results-wrapper`}>\n          <div className={`${baseClass}__results-bar`}>\n            <div className={`${baseClass}__api-url-field`}>\n              <TextInput\n                className={`${baseClass}__api-url-input`}\n                htmlAttributes={{\n                  'aria-label': 'API URL',\n                  readOnly: true,\n                }}\n                path=\"api-url\"\n                readOnly={false}\n                value={fetchURL}\n              />\n            </div>\n            <div className={`${baseClass}__results-bar-actions`}>\n              <Button\n                aria-label={t('general:openInNewWindow')}\n                buttonStyle=\"secondary\"\n                className={`${baseClass}__api-url-open-button`}\n                el=\"anchor\"\n                icon={<ExternalLinkIcon size={16} />}\n                margin={false}\n                newTab\n                size=\"large\"\n                url={fetchURL}\n              />\n              <Button\n                aria-label=\"toggle fullscreen\"\n                buttonStyle=\"secondary\"\n                className={`${baseClass}__toggle-fullscreen-button`}\n                icon={<MinimizeMaximizeIcon isMinimized={!fullscreen} />}\n                margin={false}\n                onClick={() => setFullscreen(!fullscreen)}\n                size=\"large\"\n              />\n            </div>\n          </div>\n          <div className={`${baseClass}__results`}>\n            <CodeEditorLazy\n              defaultLanguage=\"json\"\n              height=\"100%\"\n              options={{\n                fixedOverflowWidgets: true,\n                folding: true,\n                lineNumbers: 'on',\n                stickyScroll: { enabled: false },\n                wordWrap: 'off',\n              }}\n              readOnly\n              recalculatedHeightAt={recalculatedHeightAt}\n              value={jsonString}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.client.js","names":["formatAdminURL","hasDraftsEnabled","React","toast","Button","CodeEditor","CodeEditorLazy","CheckboxField","NumberField","TextInput","Form","MinimizeMaximizeIcon","NewTabIcon","useConfig","useDocumentInfo","useLocale","useSearchParams","useTranslation","SetDocumentStepNav","LocaleSelector","baseClass","APIViewClient","id","collectionSlug","globalSlug","initialData","isTrashed","searchParams","i18n","t","code","config","defaultDepth","localization","routes","api","apiRoute","serverURL","getEntityConfig","collectionConfig","globalConfig","localeOptions","locales","map","locale","label","value","draftsEnabled","docEndpoint","undefined","data","setData","useState","draft","setDraft","get","setLocale","depth","setDepth","toString","authenticated","setAuthenticated","fullscreen","setFullscreen","origin","setOrigin","jsonString","useMemo","JSON","stringify","recalculatedHeightAt","setRecalculatedHeightAt","useEffect","count","window","location","trashParam","deletedAt","params","URLSearchParams","String","trash","fetchURL","path","fetchData","res","fetch","credentials","headers","language","method","json","error","console","_jsxs","className","filter","Boolean","join","_jsx","globalLabel","pluralLabel","labels","plural","useAsTitle","admin","view","initialState","initialValue","valid","Number","onChange","field","name","step","max","min","htmlAttributes","readOnly","buttonStyle","el","icon","size","margin","newTab","url","isMinimized","onClick","defaultLanguage","height","options","fixedOverflowWidgets","folding","lineNumbers","stickyScroll","enabled","wordWrap"],"sources":["../../../src/views/API/index.client.tsx"],"sourcesContent":["'use client'\n\nimport { formatAdminURL, hasDraftsEnabled } from 'payload/shared'\nimport * as React from 'react'\nimport { toast } from 'sonner'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { CodeEditor as CodeEditorLazy } from '../../elements/CodeEditor/index.js'\nimport { CheckboxField } from '../../fields/Checkbox/index.js'\nimport { NumberField } from '../../fields/Number/index.js'\nimport { TextInput } from '../../fields/Text/Input.js'\nimport { Form } from '../../forms/Form/index.js'\nimport { MinimizeMaximizeIcon } from '../../icons/MinimizeMaximize/index.js'\nimport { NewTabIcon } from '../../icons/NewTab/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useSearchParams } from '../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { SetDocumentStepNav } from '../../views/Edit/SetDocumentStepNav/index.js'\nimport './index.css'\nimport { LocaleSelector } from './LocaleSelector/index.js'\n\nconst baseClass = 'query-inspector'\n\nexport const APIViewClient: React.FC = () => {\n  const { id, collectionSlug, globalSlug, initialData, isTrashed } = useDocumentInfo()\n\n  const searchParams = useSearchParams()\n  const { i18n, t } = useTranslation()\n  const { code } = useLocale()\n\n  const {\n    config: {\n      defaultDepth,\n      localization,\n      routes: { api: apiRoute },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const globalConfig = getEntityConfig({ globalSlug })\n\n  const localeOptions =\n    localization &&\n    localization.locales.map((locale) => ({ label: locale.label, value: locale.code }))\n\n  let draftsEnabled: boolean = false\n  let docEndpoint: `/${string}` = undefined\n\n  if (collectionConfig) {\n    draftsEnabled = hasDraftsEnabled(collectionConfig)\n    docEndpoint = `/${collectionSlug}/${id}`\n  }\n\n  if (globalConfig) {\n    draftsEnabled = hasDraftsEnabled(globalConfig)\n    docEndpoint = `/globals/${globalSlug}`\n  }\n\n  const [data, setData] = React.useState<any>(initialData)\n  const [draft, setDraft] = React.useState<boolean>(searchParams.get('draft') === 'true')\n  const [locale, setLocale] = React.useState<string>(searchParams?.get('locale') || code)\n  const [depth, setDepth] = React.useState<string>(\n    searchParams.get('depth') || defaultDepth.toString(),\n  )\n  const [authenticated, setAuthenticated] = React.useState<boolean>(true)\n  const [fullscreen, setFullscreen] = React.useState<boolean>(false)\n  const [origin, setOrigin] = React.useState<string>(serverURL || '')\n\n  const jsonString = React.useMemo(\n    () => (data === undefined ? '' : JSON.stringify(data, null, 2)),\n    [data],\n  )\n\n  // readOnly editors never fire onChange, so bump a counter to re-fit height on data change\n  const [recalculatedHeightAt, setRecalculatedHeightAt] = React.useState(0)\n  React.useEffect(() => {\n    setRecalculatedHeightAt((count) => count + 1)\n  }, [jsonString])\n\n  // Set the origin to the window.location.origin in useEffect to avoid hydration errors\n  React.useEffect(() => {\n    if (!serverURL) {\n      setOrigin(window.location.origin)\n    }\n  }, [serverURL])\n\n  const trashParam = typeof initialData?.deletedAt === 'string'\n\n  const params = new URLSearchParams({\n    depth,\n    draft: String(draft),\n    locale,\n    trash: trashParam ? 'true' : 'false',\n  }).toString()\n\n  const fetchURL = formatAdminURL({\n    apiRoute,\n    path: `${docEndpoint}?${params}`,\n    serverURL: origin,\n  })\n\n  React.useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const res = await fetch(fetchURL, {\n          credentials: authenticated ? 'include' : 'omit',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n          method: 'GET',\n        })\n\n        try {\n          const json = await res.json()\n          setData(json)\n        } catch (error) {\n          toast.error('Error parsing response')\n          console.error(error) // eslint-disable-line no-console\n        }\n      } catch (error) {\n        toast.error('Error making request')\n        console.error(error) // eslint-disable-line no-console\n      }\n    }\n\n    void fetchData()\n  }, [i18n.language, fetchURL, authenticated])\n\n  return (\n    <div\n      className={[baseClass, fullscreen && `${baseClass}--fullscreen`].filter(Boolean).join(' ')}\n    >\n      <SetDocumentStepNav\n        collectionSlug={collectionSlug}\n        globalLabel={globalConfig?.label}\n        globalSlug={globalSlug}\n        id={id}\n        isTrashed={isTrashed}\n        pluralLabel={collectionConfig ? collectionConfig?.labels?.plural : undefined}\n        useAsTitle={collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined}\n        view=\"API\"\n      />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__configuration`}>\n          <Form\n            initialState={{\n              authenticated: {\n                initialValue: authenticated || false,\n                valid: true,\n                value: authenticated || false,\n              },\n              depth: {\n                initialValue: Number(depth || 0),\n                valid: true,\n                value: Number(depth || 0),\n              },\n              draft: {\n                initialValue: draft || false,\n                valid: true,\n                value: draft || false,\n              },\n              locale: {\n                initialValue: locale,\n                valid: true,\n                value: locale,\n              },\n            }}\n          >\n            <div className={`${baseClass}__form-fields`}>\n              {localeOptions && (\n                <LocaleSelector localeOptions={localeOptions} onChange={setLocale} />\n              )}\n              <NumberField\n                field={{\n                  name: 'depth',\n                  admin: {\n                    step: 1,\n                  },\n                  label: t('general:depth'),\n                  max: 10,\n                  min: 0,\n                }}\n                onChange={(value) => setDepth(value?.toString())}\n                path=\"depth\"\n              />\n              {draftsEnabled && (\n                <CheckboxField\n                  field={{\n                    name: 'draft',\n                    label: t('version:draft'),\n                  }}\n                  onChange={() => setDraft(!draft)}\n                  path=\"draft\"\n                />\n              )}\n              <CheckboxField\n                field={{\n                  name: 'authenticated',\n                  label: t('authentication:authenticated'),\n                }}\n                onChange={() => setAuthenticated(!authenticated)}\n                path=\"authenticated\"\n              />\n            </div>\n          </Form>\n        </div>\n        <div className={`${baseClass}__results-wrapper`}>\n          <div className={`${baseClass}__results-bar`}>\n            <div className={`${baseClass}__api-url-field`}>\n              <TextInput\n                className={`${baseClass}__api-url-input`}\n                htmlAttributes={{\n                  'aria-label': 'API URL',\n                  readOnly: true,\n                }}\n                path=\"api-url\"\n                readOnly={false}\n                value={fetchURL}\n              />\n            </div>\n            <div className={`${baseClass}__results-bar-actions`}>\n              <Button\n                aria-label={t('general:openInNewWindow')}\n                buttonStyle=\"secondary\"\n                className={`${baseClass}__api-url-open-button`}\n                el=\"anchor\"\n                icon={<NewTabIcon size={16} />}\n                margin={false}\n                newTab\n                size=\"large\"\n                url={fetchURL}\n              />\n              <Button\n                aria-label=\"toggle fullscreen\"\n                buttonStyle=\"secondary\"\n                className={`${baseClass}__toggle-fullscreen-button`}\n                icon={<MinimizeMaximizeIcon isMinimized={!fullscreen} />}\n                margin={false}\n                onClick={() => setFullscreen(!fullscreen)}\n                size=\"large\"\n              />\n            </div>\n          </div>\n          <div className={`${baseClass}__results`}>\n            <CodeEditorLazy\n              defaultLanguage=\"json\"\n              height=\"100%\"\n              options={{\n                fixedOverflowWidgets: true,\n                folding: true,\n                lineNumbers: 'on',\n                stickyScroll: { enabled: false },\n                wordWrap: 'off',\n              }}\n              readOnly\n              recalculatedHeightAt={recalculatedHeightAt}\n              value={jsonString}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Account/ResetPreferences/index.js

@@ -90,6 +90,7 @@ export const ResetPreferences = t0 => {
   if ($[5] !== handleResetPreferences || $[6] !== t || $[7] !== t4) {
     t5 = _jsxs(Fragment, {
       children: [_jsx("div", {
+        className: "payload-reset-preferences",
         children: _jsx(Button, {
           buttonStyle: "secondary",
           onClick: t4,

package/dist/views/Account/ResetPreferences/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","qs","Fragment","useCallback","toast","Button","ConfirmationModal","useModal","useConfig","useTranslation","confirmResetModalSlug","ResetPreferences","t0","$","user","openModal","t","config","t1","routes","t2","api","apiRoute","t3","stringifiedQuery","stringify","depth","where","equals","id","addQueryPrefix","res","fetch","path","credentials","headers","method","json","message","ok","success","error","t4","_err","handleResetPreferences","t5","_jsxs","children","_jsx","buttonStyle","onClick","body","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../../src/views/Account/ResetPreferences/index.tsx"],"sourcesContent":["'use client'\nimport type { TypedUser } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport { Fragment, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { ConfirmationModal } from '../../../elements/ConfirmationModal/index.js'\nimport { useModal } from '../../../elements/Modal/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nconst confirmResetModalSlug = 'confirm-reset-modal'\n\nexport const ResetPreferences: React.FC<{\n  readonly user?: TypedUser\n}> = ({ user }) => {\n  const { openModal } = useModal()\n  const { t } = useTranslation()\n  const {\n    config: {\n      routes: { api: apiRoute },\n    },\n  } = useConfig()\n\n  const handleResetPreferences = useCallback(async () => {\n    if (!user) {\n      return\n    }\n\n    const stringifiedQuery = qs.stringify(\n      {\n        depth: 0,\n        where: {\n          'user.value': {\n            equals: user.id,\n          },\n        },\n      },\n      { addQueryPrefix: true },\n    )\n\n    try {\n      const res = await fetch(\n        formatAdminURL({\n          apiRoute,\n          path: `/payload-preferences${stringifiedQuery}`,\n        }),\n        {\n          credentials: 'include',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          method: 'DELETE',\n        },\n      )\n\n      const json = await res.json()\n      const message = json.message\n\n      if (res.ok) {\n        toast.success(message)\n      } else {\n        toast.error(message)\n      }\n    } catch (_err) {\n      // swallow error\n    }\n  }, [apiRoute, user])\n\n  return (\n    <Fragment>\n      <div>\n        <Button buttonStyle=\"secondary\" onClick={() => openModal(confirmResetModalSlug)}>\n          {t('general:resetPreferences')}\n        </Button>\n      </div>\n      <ConfirmationModal\n        body={t('general:resetPreferencesDescription')}\n        confirmingLabel={t('general:resettingPreferences')}\n        heading={t('general:resetPreferences')}\n        modalSlug={confirmResetModalSlug}\n        onConfirm={handleResetPreferences}\n      />\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AACpB,SAASC,QAAQ,EAAEC,WAAW,QAAQ;AACtC,SAASC,KAAK,QAAQ;AAEtB,SAASC,MAAM,QAAQ;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,QAAQ,QAAQ;AACzB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,qBAAA,GAAwB;AAE9B,OAAO,MAAMC,gBAAA,GAERC,EAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EAAC;IAAAe;EAAA,IAAAF,EAAQ;EACZ;IAAAG;EAAA,IAAsBR,QAAA;EACtB;IAAAS;EAAA,IAAcP,cAAA;EACd;IAAAQ,MAAA,EAAAC;EAAA,IAIIV,SAAA;EAHM;IAAAW,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,GAAA,EAAAC;EAAA,IAAAF,EAAiB;EAAA,IAAAG,EAAA;EAAA,IAAAV,CAAA,QAAAS,QAAA,IAAAT,CAAA,QAAAC,IAAA;IAIcS,EAAA,SAAAA,CAAA;MAAA,KACpCT,IAAA;QAAA;MAAA;MAIL,MAAAU,gBAAA,GAAyBvB,EAAA,CAAAwB,SAAA;QAAAC,KAAA;QAAAC,KAAA;UAAA;YAAAC,MAAA,EAKTd,IAAA,CAAAe;UAAA;QAAA;MAAA;QAAAC,cAAA;MAAA,CAIS;MAAA;MAAA;QAIvB,MAAAC,GAAA,SAAkBC,KAAA,CAChBhC,cAAA;UAAAsB,QAAA;UAAAW,IAAA,EAEQ,uBAAuBT,gBAAA;QAAkB,CACjD;UAAAU,WAAA,EAEe;UAAAC,OAAA;YAAA,gBAEK;UAAA;UAAAC,MAAA,EAEV;QAAA,CACV;QAGF,MAAAC,IAAA,SAAmBN,GAAA,CAAAM,IAAA,CAAQ;QAC3B,MAAAC,OAAA,GAAgBD,IAAA,CAAAC,OAAA;QAAY,IAExBP,GAAA,CAAAQ,EAAA;UACFnC,KAAA,CAAAoC,OAAA,CAAcF,OAAA;QAAA;UAEdlC,KAAA,CAAAqC,KAAA,CAAYH,OAAA;QAAA;MAAA,SAAAI,EAAA;QAEPC,KAAA,CAAAA,IAAA,CAAAA,CAAA,CAAAA,EAAA;MAAA;IAAA;IAGX9B,CAAA,MAAAS,QAAA;IAAAT,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EA3CA,MAAA+B,sBAAA,GAA+BrB,EA2CZ;EAAA,IAAAmB,EAAA;EAAA,IAAA7B,CAAA,QAAAE,SAAA;IAK4B2B,EAAA,GAAAA,CAAA,KAAM3B,SAAA,CAAAL,qBAAU;IAAAG,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAA6B,EAAA;EAAA;IAAAA,EAAA,GAAA7B,CAAA;EAAA;EAAA,IAAAgC,EAAA;EAAA,IAAAhC,CAAA,QAAA+B,sBAAA,IAAA/B,CAAA,QAAAG,CAAA,IAAAH,CAAA,QAAA6B,EAAA;IAF7DG,EAAA,GAAAC,KAAA,CAAA5C,QAAA;MAAA6C,QAAA,GACEC,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAA3C,MAAA;UAAA4C,WAAA,EAAoB;UAAAC,OAAA,EAAqBR,EAAgB;UAAAK,QAAA,EACtD/B,CAAA,CAAE;QAAA,C;UAGPgC,IAAA,CAAA1C,iBAAA;QAAA6C,IAAA,EACQnC,CAAA,CAAE;QAAAoC,eAAA,EACSpC,CAAA,CAAE;QAAAqC,OAAA,EACVrC,CAAA,CAAE;QAAAsC,SAAA,EAAA5C,qBAAA;QAAA6C,SAAA,EAEAX;MAAA,C;;;;;;;;;SAXfC,E;CAeJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","qs","Fragment","useCallback","toast","Button","ConfirmationModal","useModal","useConfig","useTranslation","confirmResetModalSlug","ResetPreferences","t0","$","user","openModal","t","config","t1","routes","t2","api","apiRoute","t3","stringifiedQuery","stringify","depth","where","equals","id","addQueryPrefix","res","fetch","path","credentials","headers","method","json","message","ok","success","error","t4","_err","handleResetPreferences","t5","_jsxs","children","_jsx","className","buttonStyle","onClick","body","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../../src/views/Account/ResetPreferences/index.tsx"],"sourcesContent":["'use client'\nimport type { TypedUser } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport { Fragment, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { ConfirmationModal } from '../../../elements/ConfirmationModal/index.js'\nimport { useModal } from '../../../elements/Modal/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nconst confirmResetModalSlug = 'confirm-reset-modal'\n\nexport const ResetPreferences: React.FC<{\n  readonly user?: TypedUser\n}> = ({ user }) => {\n  const { openModal } = useModal()\n  const { t } = useTranslation()\n  const {\n    config: {\n      routes: { api: apiRoute },\n    },\n  } = useConfig()\n\n  const handleResetPreferences = useCallback(async () => {\n    if (!user) {\n      return\n    }\n\n    const stringifiedQuery = qs.stringify(\n      {\n        depth: 0,\n        where: {\n          'user.value': {\n            equals: user.id,\n          },\n        },\n      },\n      { addQueryPrefix: true },\n    )\n\n    try {\n      const res = await fetch(\n        formatAdminURL({\n          apiRoute,\n          path: `/payload-preferences${stringifiedQuery}`,\n        }),\n        {\n          credentials: 'include',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          method: 'DELETE',\n        },\n      )\n\n      const json = await res.json()\n      const message = json.message\n\n      if (res.ok) {\n        toast.success(message)\n      } else {\n        toast.error(message)\n      }\n    } catch (_err) {\n      // swallow error\n    }\n  }, [apiRoute, user])\n\n  return (\n    <Fragment>\n      <div className=\"payload-reset-preferences\">\n        <Button buttonStyle=\"secondary\" onClick={() => openModal(confirmResetModalSlug)}>\n          {t('general:resetPreferences')}\n        </Button>\n      </div>\n      <ConfirmationModal\n        body={t('general:resetPreferencesDescription')}\n        confirmingLabel={t('general:resettingPreferences')}\n        heading={t('general:resetPreferences')}\n        modalSlug={confirmResetModalSlug}\n        onConfirm={handleResetPreferences}\n      />\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AACpB,SAASC,QAAQ,EAAEC,WAAW,QAAQ;AACtC,SAASC,KAAK,QAAQ;AAEtB,SAASC,MAAM,QAAQ;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,QAAQ,QAAQ;AACzB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,qBAAA,GAAwB;AAE9B,OAAO,MAAMC,gBAAA,GAERC,EAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EAAC;IAAAe;EAAA,IAAAF,EAAQ;EACZ;IAAAG;EAAA,IAAsBR,QAAA;EACtB;IAAAS;EAAA,IAAcP,cAAA;EACd;IAAAQ,MAAA,EAAAC;EAAA,IAIIV,SAAA;EAHM;IAAAW,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,GAAA,EAAAC;EAAA,IAAAF,EAAiB;EAAA,IAAAG,EAAA;EAAA,IAAAV,CAAA,QAAAS,QAAA,IAAAT,CAAA,QAAAC,IAAA;IAIcS,EAAA,SAAAA,CAAA;MAAA,KACpCT,IAAA;QAAA;MAAA;MAIL,MAAAU,gBAAA,GAAyBvB,EAAA,CAAAwB,SAAA;QAAAC,KAAA;QAAAC,KAAA;UAAA;YAAAC,MAAA,EAKTd,IAAA,CAAAe;UAAA;QAAA;MAAA;QAAAC,cAAA;MAAA,CAIS;MAAA;MAAA;QAIvB,MAAAC,GAAA,SAAkBC,KAAA,CAChBhC,cAAA;UAAAsB,QAAA;UAAAW,IAAA,EAEQ,uBAAuBT,gBAAA;QAAkB,CACjD;UAAAU,WAAA,EAEe;UAAAC,OAAA;YAAA,gBAEK;UAAA;UAAAC,MAAA,EAEV;QAAA,CACV;QAGF,MAAAC,IAAA,SAAmBN,GAAA,CAAAM,IAAA,CAAQ;QAC3B,MAAAC,OAAA,GAAgBD,IAAA,CAAAC,OAAA;QAAY,IAExBP,GAAA,CAAAQ,EAAA;UACFnC,KAAA,CAAAoC,OAAA,CAAcF,OAAA;QAAA;UAEdlC,KAAA,CAAAqC,KAAA,CAAYH,OAAA;QAAA;MAAA,SAAAI,EAAA;QAEPC,KAAA,CAAAA,IAAA,CAAAA,CAAA,CAAAA,EAAA;MAAA;IAAA;IAGX9B,CAAA,MAAAS,QAAA;IAAAT,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EA3CA,MAAA+B,sBAAA,GAA+BrB,EA2CZ;EAAA,IAAAmB,EAAA;EAAA,IAAA7B,CAAA,QAAAE,SAAA;IAK4B2B,EAAA,GAAAA,CAAA,KAAM3B,SAAA,CAAAL,qBAAU;IAAAA,CAAA,MAAAA,SAAA;IAAAA,CAAA,MAAAA,EAAA;EAAA;IAAAA,EAAA,GAAAA,CAAA;EAAA;EAAA,IAAAA,EAAA;EAAA,IAAAA,CAAA,QAAAA,sBAAA,IAAAA,CAAA,QAAAA,CAAA,IAAAA,CAAA,QAAAA,EAAA;IAF7DmC,EAAA,GAAAC,KAAA,CAAA5C,QAAA;MAAA6C,QAAA,GACEC,IAAA,CAAC;QAAAC,SAAA,EAAc;QAAAF,QAAA,EACbC,IAAA,CAAA3C,MAAA;UAAA6C,WAAA,EAAoB;UAAAC,OAAA,EAAqBT,EAAgB;UAAAhC,QAAA,EACtDM,CAAA,CAAE;QAAA,C;UAGPgC,IAAA,CAAA1C,iBAAA;QAAA8C,IAAA,EACQpC,CAAA,CAAE;QAAAqC,eAAA,EACSrC,CAAA,CAAE;QAAAsC,OAAA,EACVtC,CAAA,CAAE;QAAAuC,SAAA,EAAA7C,qBAAA;QAAA8C,SAAA,EAEAZ;MAAA,C;;;;;;;;;SAXfC,E;CAeJ","ignoreList":[]}

package/dist/views/Account/Settings/index.css

@@ -1,19 +1,7 @@
 @layer payload-default {
-  .payload-settings {
-    position: relative;
-    margin: var(--spacer-3) 0;
-    padding: var(--spacer-3) 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-3);
-  }
-
-  .payload-settings h3 {
-    margin: 0;
-  }
-
   .payload-settings::before,
   .payload-settings::after {
+    /* Section separator */
     content: '';
     display: block;
     height: var(--stroke-width-small);
@@ -23,4 +11,33 @@
     top: 0;
     position: absolute;
   }
+
+  .payload-settings {
+    position: relative;
+    margin-block-start: var(--spacer-6);
+    margin-block-end: var(--spacer-6);
+    padding-block-start: var(--spacer-6);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-field);
+
+    .payload-reset-preferences {
+      margin-block-start: var(--spacer-2);
+    }
+  }
+
+  .payload-settings__language,
+  .payload-settings__theme {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .payload-settings h3 {
+    margin: 0;
+    font-size: var(--text-heading-medium-font-size);
+    font-weight: var(--text-heading-medium-font-weight);
+    line-height: var(--text-heading-medium-line-height);
+    letter-spacing: var(--text-heading-medium-letter-spacing);
+  }
 }

package/dist/views/Account/ToggleTheme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Account/ToggleTheme/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAM1C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAqC/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Account/ToggleTheme/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAA;AASnD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAkC/B,CAAA"}

package/dist/views/Account/ToggleTheme/index.js

@@ -1,13 +1,12 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
-import { RadioGroupField } from '../../../fields/RadioGroup/index.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { ReactSelect } from '../../../elements/ReactSelect/index.js';
+import { FieldLabel } from '../../../fields/FieldLabel/index.js';
 import { useTheme } from '../../../providers/Theme/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 export const ToggleTheme = () => {
-  const $ = _c(7);
   const {
     autoMode,
     setTheme,
@@ -16,47 +15,32 @@ export const ToggleTheme = () => {
   const {
     t
   } = useTranslation();
-  let t0;
-  if ($[0] !== setTheme) {
-    t0 = newTheme => {
-      setTheme(newTheme);
-    };
-    $[0] = setTheme;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const onChange = t0;
-  let t1;
-  if ($[2] !== autoMode || $[3] !== onChange || $[4] !== t || $[5] !== theme) {
-    t1 = _jsx(RadioGroupField, {
-      disableModifyingForm: true,
-      field: {
-        name: "theme",
-        label: t("general:adminTheme"),
-        options: [{
-          label: t("general:automatic"),
-          value: "auto"
-        }, {
-          label: t("general:light"),
-          value: "light"
-        }, {
-          label: t("general:dark"),
-          value: "dark"
-        }]
-      },
-      onChange,
-      path: "theme",
-      value: autoMode ? "auto" : theme
-    });
-    $[2] = autoMode;
-    $[3] = onChange;
-    $[4] = t;
-    $[5] = theme;
-    $[6] = t1;
-  } else {
-    t1 = $[6];
-  }
-  return t1;
+  const options = useMemo(() => [{
+    label: t('general:automatic'),
+    value: 'auto'
+  }, {
+    label: t('general:light'),
+    value: 'light'
+  }, {
+    label: t('general:dark'),
+    value: 'dark'
+  }], [t]);
+  const activeValue = autoMode ? 'auto' : theme;
+  const onChange = useCallback(option => {
+    setTheme(option.value);
+  }, [setTheme]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "payload-settings__theme",
+    children: [/*#__PURE__*/_jsx(FieldLabel, {
+      htmlFor: "theme-select",
+      label: t('general:theme')
+    }), /*#__PURE__*/_jsx(ReactSelect, {
+      inputId: "theme-select",
+      isClearable: false,
+      onChange: onChange,
+      options: options,
+      value: options.find(o => o.value === activeValue)
+    })]
+  });
 };
 //# sourceMappingURL=index.js.map

package/dist/views/Account/ToggleTheme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","RadioGroupField","useTheme","useTranslation","ToggleTheme","$","autoMode","setTheme","theme","t","t0","newTheme","onChange","t1","_jsx","disableModifyingForm","field","name","label","options","value","path"],"sources":["../../../../src/views/Account/ToggleTheme/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback } from 'react'\n\nimport { RadioGroupField } from '../../../fields/RadioGroup/index.js'\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nexport const ToggleTheme: React.FC = () => {\n  const { autoMode, setTheme, theme } = useTheme()\n  const { t } = useTranslation()\n\n  const onChange = useCallback(\n    (newTheme) => {\n      setTheme(newTheme)\n    },\n    [setTheme],\n  )\n\n  return (\n    <RadioGroupField\n      disableModifyingForm={true}\n      field={{\n        name: 'theme',\n        label: t('general:adminTheme'),\n        options: [\n          {\n            label: t('general:automatic'),\n            value: 'auto',\n          },\n          {\n            label: t('general:light'),\n            value: 'light',\n          },\n          {\n            label: t('general:dark'),\n            value: 'dark',\n          },\n        ],\n      }}\n      onChange={onChange}\n      path=\"theme\"\n      value={autoMode ? 'auto' : theme}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAEnC,SAASC,eAAe,QAAQ;AAChC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,WAAA,GAAwBA,CAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACnC;IAAAQ,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAAsCN,QAAA;EACtC;IAAAO;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAL,CAAA,QAAAE,QAAA;IAGZG,EAAA,GAAAC,QAAA;MACEJ,QAAA,CAASI,QAAA;IAAA;IACXN,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAHF,MAAAO,QAAA,GAAiBF,EAIL;EAAA,IAAAG,EAAA;EAAA,IAAAR,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAO,QAAA,IAAAP,CAAA,QAAAI,CAAA,IAAAJ,CAAA,QAAAG,KAAA;IAIVK,EAAA,GAAAC,IAAA,CAAAb,eAAA;MAAAc,oBAAA;MAAAC,KAAA;QAAAC,IAAA,EAGU;QAAAC,KAAA,EACCT,CAAA,CAAE;QAAAU,OAAA;UAAAD,KAAA,EAGET,CAAA,CAAE;UAAAW,KAAA,EACF;QAAA;UAAAF,KAAA,EAGAT,CAAA,CAAE;UAAAW,KAAA,EACF;QAAA;UAAAF,KAAA,EAGAT,CAAA,CAAE;UAAAW,KAAA,EACF;QAAA;MAAA;MAAAR,QAAA;MAAAS,IAAA,EAKR;MAAAD,KAAA,EACEd,QAAA,GAAW,SAASE;IAAA,C;;;;;;;;;SAtB7BK,E;CAyBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","ReactSelect","FieldLabel","useTheme","useTranslation","ToggleTheme","autoMode","setTheme","theme","t","options","label","value","activeValue","onChange","option","_jsxs","className","_jsx","htmlFor","inputId","isClearable","find","o"],"sources":["../../../../src/views/Account/ToggleTheme/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { Option as ReactSelectOption } from '../../../elements/ReactSelect/index.js'\n\nimport { ReactSelect } from '../../../elements/ReactSelect/index.js'\nimport { FieldLabel } from '../../../fields/FieldLabel/index.js'\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nexport const ToggleTheme: React.FC = () => {\n  const { autoMode, setTheme, theme } = useTheme()\n  const { t } = useTranslation()\n\n  const options = useMemo(\n    () => [\n      { label: t('general:automatic'), value: 'auto' },\n      { label: t('general:light'), value: 'light' },\n      { label: t('general:dark'), value: 'dark' },\n    ],\n    [t],\n  )\n\n  const activeValue = autoMode ? 'auto' : theme\n\n  const onChange = useCallback(\n    (option: ReactSelectOption) => {\n      setTheme(option.value as 'auto' | 'dark' | 'light')\n    },\n    [setTheme],\n  )\n\n  return (\n    <div className=\"payload-settings__theme\">\n      <FieldLabel htmlFor=\"theme-select\" label={t('general:theme')} />\n      <ReactSelect\n        inputId=\"theme-select\"\n        isClearable={false}\n        onChange={onChange}\n        options={options}\n        value={options.find((o) => o.value === activeValue)}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,IAASC,WAAW,EAAEC,OAAO,QAAQ;AAI5C,SAASC,WAAW,QAAQ;AAC5B,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,WAAA,GAAwBA,CAAA;EACnC,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAK,CAAE,GAAGL,QAAA;EACtC,MAAM;IAAEM;EAAC,CAAE,GAAGL,cAAA;EAEd,MAAMM,OAAA,GAAUV,OAAA,CACd,MAAM,CACJ;IAAEW,KAAA,EAAOF,CAAA,CAAE;IAAsBG,KAAA,EAAO;EAAO,GAC/C;IAAED,KAAA,EAAOF,CAAA,CAAE;IAAkBG,KAAA,EAAO;EAAQ,GAC5C;IAAED,KAAA,EAAOF,CAAA,CAAE;IAAiBG,KAAA,EAAO;EAAO,EAC3C,EACD,CAACH,CAAA,CAAE;EAGL,MAAMI,WAAA,GAAcP,QAAA,GAAW,SAASE,KAAA;EAExC,MAAMM,QAAA,GAAWf,WAAA,CACdgB,MAAA;IACCR,QAAA,CAASQ,MAAA,CAAOH,KAAK;EACvB,GACA,CAACL,QAAA,CAAS;EAGZ,oBACES,KAAA,CAAC;IAAIC,SAAA,EAAU;4BACbC,IAAA,CAAChB,UAAA;MAAWiB,OAAA,EAAQ;MAAeR,KAAA,EAAOF,CAAA,CAAE;qBAC5CS,IAAA,CAACjB,WAAA;MACCmB,OAAA,EAAQ;MACRC,WAAA,EAAa;MACbP,QAAA,EAAUA,QAAA;MACVJ,OAAA,EAASA,OAAA;MACTE,KAAA,EAAOF,OAAA,CAAQY,IAAI,CAAEC,CAAA,IAAMA,CAAA,CAAEX,KAAK,KAAKC,WAAA;;;AAI/C","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetConfigDrawer.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,SAAS,CAAA;AAEtD,OAAO,KAA4D,MAAM,OAAO,CAAA;AAgBhF,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/C,MAAM,EAAE,YAAY,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACrC,CAAA;AAMD,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,MAAM,EACN,MAAM,EACN,UAAU,GACX,EAAE,uBAAuB,qBAwHzB"}
+{"version":3,"file":"WidgetConfigDrawer.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,SAAS,CAAA;AAEtD,OAAO,KAA4D,MAAM,OAAO,CAAA;AAiBhF,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/C,MAAM,EAAE,YAAY,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACrC,CAAA;AAMD,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,MAAM,EACN,MAAM,EACN,UAAU,GACX,EAAE,uBAAuB,qBA0HzB"}

package/dist/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { Drawer } from '../../../../elements/Drawer/index.js';
+import { Gutter } from '../../../../elements/Gutter/index.js';
 import { useModal } from '../../../../elements/Modal/index.js';
 import { ShimmerEffect } from '../../../../elements/ShimmerEffect/index.js';
 import { Form } from '../../../../forms/Form/index.js';
@@ -106,30 +107,33 @@ export function WidgetConfigDrawer({
   return /*#__PURE__*/_jsx(Drawer, {
     slug: drawerSlug,
     title: `${t('general:edit')} ${widgetLabel}`,
-    children: initialState === false ? /*#__PURE__*/_jsx(ShimmerEffect, {
-      height: "250px"
-    }) : /*#__PURE__*/_jsx(OperationProvider, {
-      operation: "update",
-      children: /*#__PURE__*/_jsxs(Form, {
-        fields: fields,
-        initialState: initialState,
-        onChange: [onChange],
-        onSubmit: (_, data) => {
-          onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields));
-          closeModal(drawerSlug);
-        },
-        uuid: formUUID,
-        children: [/*#__PURE__*/_jsx(RenderFields, {
+    children: /*#__PURE__*/_jsx(Gutter, {
+      className: "widget-config-drawer__content",
+      children: initialState === false ? /*#__PURE__*/_jsx(ShimmerEffect, {
+        height: "250px"
+      }) : /*#__PURE__*/_jsx(OperationProvider, {
+        operation: "update",
+        children: /*#__PURE__*/_jsxs(Form, {
           fields: fields,
-          forceRender: true,
-          parentIndexPath: "",
-          parentPath: "",
-          parentSchemaPath: widget.slug,
-          permissions: true,
-          readOnly: false
-        }), /*#__PURE__*/_jsx(FormSubmit, {
-          children: t('fields:saveChanges')
-        })]
+          initialState: initialState,
+          onChange: [onChange],
+          onSubmit: (_, data) => {
+            onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields));
+            closeModal(drawerSlug);
+          },
+          uuid: formUUID,
+          children: [/*#__PURE__*/_jsx(RenderFields, {
+            fields: fields,
+            forceRender: true,
+            parentIndexPath: "",
+            parentPath: "",
+            parentSchemaPath: widget.slug,
+            permissions: true,
+            readOnly: false
+          }), /*#__PURE__*/_jsx(FormSubmit, {
+            children: t('fields:saveChanges')
+          })]
+        })
       })
     })
   });

package/dist/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetConfigDrawer.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","v4","uuid","Drawer","useModal","ShimmerEffect","Form","RenderFields","FormSubmit","useLocale","OperationProvider","useServerFunctions","useTranslation","abortAndIgnore","extractLocaleData","mergeLocaleData","EMPTY_WIDGET_PREFERENCES","fields","WidgetConfigDrawer","drawerSlug","onSave","widget","widgetData","closeModal","modalState","getFormState","t","locale","localeCode","code","onChangeAbortControllerRef","initialState","setInitialState","isOpen","Boolean","formUUID","widgetLabel","label","slug","length","controller","AbortController","loadInitialState","localeFilteredData","state","data","docPermissions","docPreferences","operation","renderAllFields","schemaPath","signal","widgetSlug","onChange","formState","prevFormState","current","_jsx","title","height","_jsxs","onSubmit","_","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientWidget, FormState } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport { Drawer } from '../../../../elements/Drawer/index.js'\nimport { useModal } from '../../../../elements/Modal/index.js'\nimport { ShimmerEffect } from '../../../../elements/ShimmerEffect/index.js'\nimport { Form } from '../../../../forms/Form/index.js'\nimport { RenderFields } from '../../../../forms/RenderFields/index.js'\nimport { FormSubmit } from '../../../../forms/Submit/index.js'\nimport { useLocale } from '../../../../providers/Locale/index.js'\nimport { OperationProvider } from '../../../../providers/Operation/index.js'\nimport { useServerFunctions } from '../../../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { abortAndIgnore } from '../../../../utilities/abortAndIgnore.js'\nimport { extractLocaleData, mergeLocaleData } from './utils/localeUtils.js'\n\ntype WidgetConfigDrawerProps = {\n  drawerSlug: string\n  onSave: (data: Record<string, unknown>) => void\n  widget: ClientWidget\n  widgetData?: Record<string, unknown>\n}\n\nconst EMPTY_WIDGET_PREFERENCES = {\n  fields: {},\n}\n\nexport function WidgetConfigDrawer({\n  drawerSlug,\n  onSave,\n  widget,\n  widgetData,\n}: WidgetConfigDrawerProps) {\n  const { closeModal, modalState } = useModal()\n  const { getFormState } = useServerFunctions()\n  const { t } = useTranslation()\n  const locale = useLocale()\n  const localeCode = locale?.code ?? 'en'\n  const onChangeAbortControllerRef = useRef<AbortController>(null)\n\n  const [initialState, setInitialState] = useState<false | FormState | undefined>(false)\n\n  const isOpen = Boolean(modalState?.[drawerSlug]?.isOpen)\n  const formUUID = useMemo(() => uuid(), [])\n  const widgetLabel = useMemo(\n    () => (typeof widget.label === 'string' ? widget.label : widget.slug),\n    [widget.label, widget.slug],\n  )\n  const fields = useMemo(() => widget.fields ?? [], [widget.fields])\n\n  useEffect(() => {\n    if (!isOpen || fields.length === 0) {\n      setInitialState(false)\n      return\n    }\n\n    const controller = new AbortController()\n\n    const loadInitialState = async () => {\n      const localeFilteredData = extractLocaleData(widgetData ?? {}, localeCode, fields)\n\n      const { state } = await getFormState({\n        data: localeFilteredData,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: EMPTY_WIDGET_PREFERENCES,\n        locale: localeCode,\n        operation: 'update',\n        renderAllFields: true,\n        schemaPath: widget.slug,\n        signal: controller.signal,\n        widgetSlug: widget.slug,\n      })\n\n      if (state) {\n        setInitialState(state)\n      }\n    }\n\n    void loadInitialState()\n\n    return () => {\n      abortAndIgnore(controller)\n    }\n  }, [fields, getFormState, isOpen, localeCode, widget.slug, widgetData])\n\n  const onChange = useCallback(\n    async ({ formState: prevFormState }: { formState: FormState }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state } = await getFormState({\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: EMPTY_WIDGET_PREFERENCES,\n        formState: prevFormState,\n        operation: 'update',\n        schemaPath: widget.slug,\n        signal: controller.signal,\n        widgetSlug: widget.slug,\n      })\n\n      if (!state) {\n        return prevFormState\n      }\n\n      return state\n    },\n    [getFormState, widget.slug],\n  )\n\n  useEffect(() => {\n    return () => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [])\n\n  return (\n    <Drawer slug={drawerSlug} title={`${t('general:edit')} ${widgetLabel}`}>\n      {initialState === false ? (\n        <ShimmerEffect height=\"250px\" />\n      ) : (\n        <OperationProvider operation=\"update\">\n          <Form\n            fields={fields}\n            initialState={initialState}\n            onChange={[onChange]}\n            onSubmit={(_, data) => {\n              onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields))\n              closeModal(drawerSlug)\n            }}\n            uuid={formUUID}\n          >\n            <RenderFields\n              fields={fields}\n              forceRender\n              parentIndexPath=\"\"\n              parentPath=\"\"\n              parentSchemaPath={widget.slug}\n              permissions={true}\n              readOnly={false}\n            />\n            <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n          </Form>\n        </OperationProvider>\n      )}\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"WidgetConfigDrawer.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","v4","uuid","Drawer","Gutter","useModal","ShimmerEffect","Form","RenderFields","FormSubmit","useLocale","OperationProvider","useServerFunctions","useTranslation","abortAndIgnore","extractLocaleData","mergeLocaleData","EMPTY_WIDGET_PREFERENCES","fields","WidgetConfigDrawer","drawerSlug","onSave","widget","widgetData","closeModal","modalState","getFormState","t","locale","localeCode","code","onChangeAbortControllerRef","initialState","setInitialState","isOpen","Boolean","formUUID","widgetLabel","label","slug","length","controller","AbortController","loadInitialState","localeFilteredData","state","data","docPermissions","docPreferences","operation","renderAllFields","schemaPath","signal","widgetSlug","onChange","formState","prevFormState","current","_jsx","title","className","height","_jsxs","onSubmit","_","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientWidget, FormState } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport { Drawer } from '../../../../elements/Drawer/index.js'\nimport { Gutter } from '../../../../elements/Gutter/index.js'\nimport { useModal } from '../../../../elements/Modal/index.js'\nimport { ShimmerEffect } from '../../../../elements/ShimmerEffect/index.js'\nimport { Form } from '../../../../forms/Form/index.js'\nimport { RenderFields } from '../../../../forms/RenderFields/index.js'\nimport { FormSubmit } from '../../../../forms/Submit/index.js'\nimport { useLocale } from '../../../../providers/Locale/index.js'\nimport { OperationProvider } from '../../../../providers/Operation/index.js'\nimport { useServerFunctions } from '../../../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { abortAndIgnore } from '../../../../utilities/abortAndIgnore.js'\nimport { extractLocaleData, mergeLocaleData } from './utils/localeUtils.js'\n\ntype WidgetConfigDrawerProps = {\n  drawerSlug: string\n  onSave: (data: Record<string, unknown>) => void\n  widget: ClientWidget\n  widgetData?: Record<string, unknown>\n}\n\nconst EMPTY_WIDGET_PREFERENCES = {\n  fields: {},\n}\n\nexport function WidgetConfigDrawer({\n  drawerSlug,\n  onSave,\n  widget,\n  widgetData,\n}: WidgetConfigDrawerProps) {\n  const { closeModal, modalState } = useModal()\n  const { getFormState } = useServerFunctions()\n  const { t } = useTranslation()\n  const locale = useLocale()\n  const localeCode = locale?.code ?? 'en'\n  const onChangeAbortControllerRef = useRef<AbortController>(null)\n\n  const [initialState, setInitialState] = useState<false | FormState | undefined>(false)\n\n  const isOpen = Boolean(modalState?.[drawerSlug]?.isOpen)\n  const formUUID = useMemo(() => uuid(), [])\n  const widgetLabel = useMemo(\n    () => (typeof widget.label === 'string' ? widget.label : widget.slug),\n    [widget.label, widget.slug],\n  )\n  const fields = useMemo(() => widget.fields ?? [], [widget.fields])\n\n  useEffect(() => {\n    if (!isOpen || fields.length === 0) {\n      setInitialState(false)\n      return\n    }\n\n    const controller = new AbortController()\n\n    const loadInitialState = async () => {\n      const localeFilteredData = extractLocaleData(widgetData ?? {}, localeCode, fields)\n\n      const { state } = await getFormState({\n        data: localeFilteredData,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: EMPTY_WIDGET_PREFERENCES,\n        locale: localeCode,\n        operation: 'update',\n        renderAllFields: true,\n        schemaPath: widget.slug,\n        signal: controller.signal,\n        widgetSlug: widget.slug,\n      })\n\n      if (state) {\n        setInitialState(state)\n      }\n    }\n\n    void loadInitialState()\n\n    return () => {\n      abortAndIgnore(controller)\n    }\n  }, [fields, getFormState, isOpen, localeCode, widget.slug, widgetData])\n\n  const onChange = useCallback(\n    async ({ formState: prevFormState }: { formState: FormState }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state } = await getFormState({\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: EMPTY_WIDGET_PREFERENCES,\n        formState: prevFormState,\n        operation: 'update',\n        schemaPath: widget.slug,\n        signal: controller.signal,\n        widgetSlug: widget.slug,\n      })\n\n      if (!state) {\n        return prevFormState\n      }\n\n      return state\n    },\n    [getFormState, widget.slug],\n  )\n\n  useEffect(() => {\n    return () => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [])\n\n  return (\n    <Drawer slug={drawerSlug} title={`${t('general:edit')} ${widgetLabel}`}>\n      <Gutter className=\"widget-config-drawer__content\">\n        {initialState === false ? (\n          <ShimmerEffect height=\"250px\" />\n        ) : (\n          <OperationProvider operation=\"update\">\n            <Form\n              fields={fields}\n              initialState={initialState}\n              onChange={[onChange]}\n              onSubmit={(_, data) => {\n                onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields))\n                closeModal(drawerSlug)\n              }}\n              uuid={formUUID}\n            >\n              <RenderFields\n                fields={fields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\"\n                parentSchemaPath={widget.slug}\n                permissions={true}\n                readOnly={false}\n              />\n              <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n            </Form>\n          </OperationProvider>\n        )}\n      </Gutter>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/index.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","names":["c","_c","DndContext","DragOverlay","useDraggable","useDroppable","snapCenterToCursor","React","useMemo","useState","Popup","PopupList","ChevronIcon","XIcon","useTranslation","DashboardStepNav","useDashboardLayout","closestInXAxis","useDashboardSensors","WidgetEditControl","snapCenterToCursorOnlyForPointer","args","activatorEvent","transform","WIDTH_TO_PERCENTAGE","small","medium","large","full","ModularDashboardClient","t0","$","clientLayout","initialLayout","widgets","t","addWidget","cancel","cancelModal","currentLayout","deleteWidget","isEditing","moveWidget","resetLayout","resizeWidget","saveLayout","setIsEditing","updateWidgetData","activeDragId","setActiveDragId","sensors","t1","t2","Symbol","for","t3","event","over","droppableId","id","i","lastIndexOf","slug","slice","position","active","moveFromIndex","findIndex","widget","item","moveToIndex","widget_0","t4","event_0","_jsxs","children","_jsx","autoScroll","enabled","threshold","x","y","collisionDetection","onDragCancel","onDragEnd","onDragStart","className","style","display","flexWrap","length","map","widget_1","_index","Fragment","DraggableItem","disabled","width","inert","component","onPointerDown","_temp","onSave","data","widgetData","widgetID","WidgetWidthDropdown","currentWidth","maxWidth","minWidth","onResize","onClick","type","dropAnimation","duration","modifiers","draggedWidget","find","widget_2","e","stopPropagation","validOptions","minPercentage","maxPercentage","Object","entries","key","value","percentage","filter","option","isDisabled","button","buttonType","render","close","ButtonGroup","isSelected","Button","toFixed","size","verticalAlign","props","attributes","isDragging","listeners","setNodeRef","mergedStyles","opacity","draggableProps","DroppableItem","ref","height","isOver","t5","t6","t7","t8","left","right","top","bottom","borderRadius","backgroundColor","marginBottom","marginTop","pointerEvents","zIndex"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { Modifier } from '@dnd-kit/core'\nimport type { ClientWidget, WidgetWidth } from 'payload'\n\nimport { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core'\nimport { snapCenterToCursor } from '@dnd-kit/modifiers'\nimport React, { useMemo, useState } from 'react'\n\nimport { Popup } from '../../../../elements/Popup/index.js'\nimport * as PopupList from '../../../../elements/Popup/PopupButtonList/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../../icons/X/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DashboardStepNav } from './DashboardStepNav.js'\nimport { useDashboardLayout } from './useDashboardLayout.js'\nimport { closestInXAxis } from './utils/collisionDetection.js'\nimport { useDashboardSensors } from './utils/sensors.js'\nimport { WidgetEditControl } from './WidgetEditControl.js'\n\n/**\n * Custom modifier that only applies snapCenterToCursor for pointer events.\n * During keyboard navigation, we handle positioning ourselves via the coordinate getter.\n */\nconst snapCenterToCursorOnlyForPointer: Modifier = (args) => {\n  const { activatorEvent } = args\n\n  // Only apply snap for pointer events (mouse/touch), not keyboard\n  // Check activatorEvent.type since KeyboardEvent may not exist on server\n  if (activatorEvent && 'key' in activatorEvent) {\n    return args.transform\n  }\n\n  return snapCenterToCursor(args)\n}\n\nexport type WidgetItem = {\n  data?: Record<string, unknown>\n  id: string\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  width: WidgetWidth\n}\n\nexport type WidgetInstanceClient = {\n  component: React.ReactNode\n  item: WidgetItem\n}\n\nexport type DropTargetWidget = {\n  position: 'after' | 'before'\n  widget: WidgetInstanceClient\n} | null\n\n/* eslint-disable perfectionist/sort-objects */\nconst WIDTH_TO_PERCENTAGE = {\n  'x-small': 25,\n  small: (1 / 3) * 100,\n  medium: 50,\n  large: (2 / 3) * 100,\n  'x-large': 75,\n  full: 100,\n} as const\n\nexport function ModularDashboardClient({\n  clientLayout: initialLayout,\n  widgets,\n}: {\n  clientLayout: WidgetInstanceClient[]\n  widgets: ClientWidget[]\n}) {\n  const { t } = useTranslation()\n  const {\n    addWidget,\n    cancel,\n    cancelModal,\n    currentLayout,\n    deleteWidget,\n    isEditing,\n    moveWidget,\n    resetLayout,\n    resizeWidget,\n    saveLayout,\n    setIsEditing,\n    updateWidgetData,\n  } = useDashboardLayout(initialLayout)\n\n  const [activeDragId, setActiveDragId] = useState<null | string>(null)\n  const sensors = useDashboardSensors()\n\n  return (\n    <div>\n      <DndContext\n        autoScroll={{\n          enabled: true,\n          threshold: {\n            x: 0, // No horizontal scroll\n            y: 0.2, // Allow vertical scroll at 20% from edge\n          },\n        }}\n        collisionDetection={closestInXAxis}\n        // https://github.com/clauderic/dnd-kit/issues/926#issuecomment-1640115665\n        id=\"dashboard-dnd-context\"\n        onDragCancel={() => {\n          setActiveDragId(null)\n        }}\n        onDragEnd={(event) => {\n          if (!event.over) {\n            setActiveDragId(null)\n            return\n          }\n          const droppableId = event.over.id as string\n          const i = droppableId.lastIndexOf('-')\n          const slug = droppableId.slice(0, i)\n          const position = droppableId.slice(i + 1)\n\n          if (slug === event.active.id) {\n            return\n          }\n\n          const moveFromIndex = currentLayout?.findIndex(\n            (widget) => widget.item.id === event.active.id,\n          )\n          let moveToIndex = currentLayout?.findIndex((widget) => widget.item.id === slug)\n          if (moveFromIndex < moveToIndex) {\n            moveToIndex--\n          }\n          if (position === 'after') {\n            moveToIndex++\n          }\n          moveWidget({ moveFromIndex, moveToIndex })\n          setActiveDragId(null)\n        }}\n        onDragStart={(event) => {\n          setActiveDragId(event.active.id as string)\n        }}\n        sensors={sensors}\n      >\n        <div\n          className={`modular-dashboard ${isEditing ? 'editing' : ''}`}\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            // Don't add gap here! We need to use padding on the widgets instead\n            // to make sure all rows have the same width always.\n          }}\n        >\n          {currentLayout?.length === 0 && (\n            <div className=\"modular-dashboard__empty\">\n              <p>{t('dashboard:noItems')}</p>\n            </div>\n          )}\n          {currentLayout?.map((widget, _index) => (\n            <React.Fragment key={widget.item.id}>\n              <DraggableItem\n                disabled={!isEditing}\n                id={widget.item.id}\n                style={{\n                  width: `${WIDTH_TO_PERCENTAGE[widget.item.width]}%`,\n                }}\n                width={widget.item.width}\n              >\n                <div className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}>\n                  <div aria-hidden={isEditing} className=\"widget-content\" inert={isEditing}>\n                    {widget.component}\n                  </div>\n                  {isEditing && (\n                    <div\n                      className=\"widget-wrapper__controls\"\n                      onPointerDown={(e) => e.stopPropagation()}\n                    >\n                      <WidgetEditControl\n                        onSave={(data) => {\n                          updateWidgetData(widget.item.id, data)\n                        }}\n                        widgetData={widget.item.data}\n                        widgetID={widget.item.id}\n                      />\n                      <WidgetWidthDropdown\n                        currentWidth={widget.item.width}\n                        maxWidth={widget.item.maxWidth}\n                        minWidth={widget.item.minWidth}\n                        onResize={(width) => resizeWidget(widget.item.id, width)}\n                      />\n                      <button\n                        className=\"widget-wrapper__delete-btn\"\n                        onClick={() => deleteWidget(widget.item.id)}\n                        type=\"button\"\n                      >\n                        <span className=\"sr-only\">\n                          {t('dashboard:deleteWidget', { id: widget.item.id })}\n                        </span>\n                        <XIcon />\n                      </button>\n                    </div>\n                  )}\n                </div>\n              </DraggableItem>\n            </React.Fragment>\n          ))}\n          <DragOverlay\n            className=\"drag-overlay\"\n            dropAnimation={{\n              duration: 100,\n            }}\n            // Uses custom modifier that only applies for pointer, not keyboard navigation.\n            modifiers={[snapCenterToCursorOnlyForPointer]}\n          >\n            {activeDragId\n              ? (() => {\n                  const draggedWidget = currentLayout?.find(\n                    (widget) => widget.item.id === activeDragId,\n                  )\n                  return draggedWidget ? (\n                    <div\n                      style={{\n                        transform: 'scale(0.25)',\n                      }}\n                    >\n                      <div\n                        className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}\n                      >\n                        <div className=\"widget-content\">{draggedWidget.component}</div>\n                      </div>\n                    </div>\n                  ) : null\n                })()\n              : null}\n          </DragOverlay>\n        </div>\n      </DndContext>\n      <DashboardStepNav\n        addWidget={addWidget}\n        cancel={cancel}\n        isEditing={isEditing}\n        resetLayout={resetLayout}\n        saveLayout={saveLayout}\n        setIsEditing={setIsEditing}\n        widgets={widgets}\n      />\n      {cancelModal}\n    </div>\n  )\n}\n\nfunction WidgetWidthDropdown({\n  currentWidth,\n  maxWidth,\n  minWidth,\n  onResize,\n}: {\n  currentWidth: WidgetWidth\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  onResize: (width: WidgetWidth) => void\n}) {\n  // Filter options based on minWidth and maxWidth\n  const validOptions = useMemo(() => {\n    const minPercentage = WIDTH_TO_PERCENTAGE[minWidth]\n    const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth]\n\n    return Object.entries(WIDTH_TO_PERCENTAGE)\n      .map(([key, value]) => ({\n        width: key as WidgetWidth,\n        percentage: value,\n      }))\n      .filter((option) => option.percentage >= minPercentage && option.percentage <= maxPercentage)\n  }, [minWidth, maxWidth])\n\n  const isDisabled = validOptions.length <= 1\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={\n        <button\n          className=\"widget-wrapper__size-btn\"\n          onPointerDown={(e) => e.stopPropagation()}\n          type=\"button\"\n        >\n          <span className=\"widget-wrapper__size-btn-text\">{currentWidth}</span>\n          <ChevronIcon className=\"widget-wrapper__size-btn-icon\" />\n        </button>\n      }\n      buttonType=\"custom\"\n      render={({ close }) => (\n        <PopupList.ButtonGroup>\n          {validOptions.map((option) => {\n            const isSelected = option.width === currentWidth\n            return (\n              <PopupList.Button\n                active={isSelected}\n                key={option.width}\n                onClick={() => {\n                  onResize(option.width)\n                  close()\n                }}\n              >\n                <span className=\"widget-wrapper__size-btn-label\">{option.width}</span>\n                <span className=\"widget-wrapper__size-btn-percentage\">\n                  {option.percentage.toFixed(0)}%\n                </span>\n              </PopupList.Button>\n            )\n          })}\n        </PopupList.ButtonGroup>\n      )}\n      size=\"small\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n\nfunction DraggableItem(props: {\n  children: React.ReactNode\n  disabled?: boolean\n  id: string\n  style?: React.CSSProperties\n  width: WidgetWidth\n}) {\n  const { attributes, isDragging, listeners, setNodeRef } = useDraggable({\n    id: props.id,\n    disabled: props.disabled,\n  })\n\n  const mergedStyles: React.CSSProperties = {\n    ...props.style,\n    opacity: isDragging ? 0.3 : 1,\n    position: 'relative',\n  }\n\n  // Only apply draggable attributes and listeners when not disabled\n  // to prevent disabling interactive elements inside the widget\n  const draggableProps = props.disabled ? {} : { ...listeners, ...attributes }\n\n  return (\n    <div className=\"widget\" data-slug={props.id} data-width={props.width} style={mergedStyles}>\n      <DroppableItem id={props.id} position=\"before\" />\n      <div\n        className=\"draggable\"\n        id={props.id}\n        ref={setNodeRef}\n        {...draggableProps}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n      >\n        {props.children}\n      </div>\n      <DroppableItem id={props.id} position=\"after\" />\n    </div>\n  )\n}\n\nfunction DroppableItem({ id, position }: { id: string; position: 'after' | 'before' }) {\n  const { setNodeRef, isOver } = useDroppable({ id: `${id}-${position}`, data: { position } })\n\n  return (\n    <div\n      className=\"droppable-widget\"\n      data-testid={`${id}-${position}`}\n      ref={setNodeRef}\n      style={{\n        position: 'absolute',\n        left: position === 'before' ? -2 : 'auto',\n        right: position === 'after' ? -2 : 'auto',\n        top: 0,\n        bottom: 0,\n        borderRadius: '1000px',\n        width: '4px',\n        backgroundColor: isOver ? 'var(--color-bg-success)' : 'transparent',\n        marginBottom: '10px',\n        marginTop: '10px',\n        pointerEvents: 'none',\n        zIndex: 1000,\n      }}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAKA,SAASC,UAAU,EAAEC,WAAW,EAAEC,YAAY,EAAEC,YAAY,QAAQ;AACpE,SAASC,kBAAkB,QAAQ;AACnC,OAAOC,KAAA,IAASC,OAAO,EAAEC,QAAQ,QAAQ;AAEzC,SAASC,KAAK,QAAQ;AACtB,YAAYC,SAAA,MAAe;AAC3B,SAASC,WAAW,QAAQ;AAC5B,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,cAAc,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,iBAAiB,QAAQ;AAElC;;;;AAIA,MAAMC,gCAAA,GAA8CC,IAAA;EAClD,MAAM;IAAEC;EAAc,CAAE,GAAGD,IAAA;EAE3B;EACA;EACA,IAAIC,cAAA,IAAkB,SAASA,cAAA,EAAgB;IAC7C,OAAOD,IAAA,CAAKE,SAAS;EACvB;EAEA,OAAOjB,kBAAA,CAAmBe,IAAA;AAC5B;AAoBA;AACA,MAAMG,mBAAA,GAAsB;EAC1B,WAAW;EACXC,KAAA,EAAO,CAAC,GAAI,IAAK;EACjBC,MAAA,EAAQ;EACRC,KAAA,EAAO,CAAC,GAAI,IAAK;EACjB,WAAW;EACXC,IAAA,EAAM;AACR;AAEA,OAAO,SAAAC,uBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAA9B,EAAA;EAAgC;IAAA+B,YAAA,EAAAC,aAAA;IAAAC;EAAA,IAAAJ,EAMtC;EACC;IAAAK;EAAA,IAAcrB,cAAA;EACd;IAAAsB,SAAA;IAAAC,MAAA;IAAAC,WAAA;IAAAC,aAAA;IAAAC,YAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC,YAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC;EAAA,IAaI/B,kBAAA,CAAmBiB,aAAA;EAEvB,OAAAe,YAAA,EAAAC,eAAA,IAAwCxC,QAAA,KAAwB;EAChE,MAAAyC,OAAA,GAAgBhC,mBAAA;EAAA,IAAAiC,EAAA;EAAA,IAAApB,CAAA,QAAAiB,YAAA,IAAAjB,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAM,MAAA,IAAAN,CAAA,QAAAO,WAAA,IAAAP,CAAA,QAAAQ,aAAA,IAAAR,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAU,SAAA,IAAAV,CAAA,QAAAW,UAAA,IAAAX,CAAA,QAAAY,WAAA,IAAAZ,CAAA,QAAAa,YAAA,IAAAb,CAAA,SAAAc,UAAA,IAAAd,CAAA,SAAAmB,OAAA,IAAAnB,CAAA,SAAAe,YAAA,IAAAf,CAAA,SAAAI,CAAA,IAAAJ,CAAA,SAAAgB,gBAAA,IAAAhB,CAAA,SAAAG,OAAA;IAAA,IAAAkB,EAAA;IAAA,IAAArB,CAAA,SAAAsB,MAAA,CAAAC,GAAA;MAeIF,EAAA,GAAAA,CAAA;QACZH,eAAA,KAAgB;MAAA;MAClBlB,CAAA,OAAAqB,EAAA;IAAA;MAAAA,EAAA,GAAArB,CAAA;IAAA;IAAA,IAAAwB,EAAA;IAAA,IAAAxB,CAAA,SAAAQ,aAAA,IAAAR,CAAA,SAAAW,UAAA;MACWa,EAAA,GAAAC,KAAA;QAAA,KACJA,KAAA,CAAAC,IAAA;UACHR,eAAA,KAAgB;UAAA;QAAA;QAGlB,MAAAS,WAAA,GAAoBF,KAAA,CAAAC,IAAA,CAAAE,EAAA;QACpB,MAAAC,CAAA,GAAUF,WAAA,CAAAG,WAAA,CAAwB;QAClC,MAAAC,IAAA,GAAaJ,WAAA,CAAAK,KAAA,IAAqBH,CAAA;QAClC,MAAAI,QAAA,GAAiBN,WAAA,CAAAK,KAAA,CAAkBH,CAAA,IAAI;QAAA,IAEnCE,IAAA,KAASN,KAAA,CAAAS,MAAA,CAAAN,EAAe;UAAA;QAAA;QAI5B,MAAAO,aAAA,GAAsB3B,aAAA,EAAA4B,SAAA,CAAAC,MAAA,IACRA,MAAA,CAAAC,IAAA,CAAAV,EAAA,KAAmBH,KAAA,CAAAS,MAAA,CAAAN,EAAe;QAEhD,IAAAW,WAAA,GAAkB/B,aAAA,EAAA4B,SAAA,CAAAI,QAAA,IAAqCH,QAAA,CAAAC,IAAA,CAAAV,EAAA,KAAmBG,IAAA;QAAA,IACtEI,aAAA,GAAgBI,WAAA;UAClBA,WAAA;QAAA;QAAA,IAEEN,QAAA,KAAa;UACfM,WAAA;QAAA;QAEF5B,UAAA;UAAAwB,aAAA;UAAAI;QAAA,CAAwC;QACxCrB,eAAA,KAAgB;MAAA;MAClBlB,CAAA,OAAAQ,aAAA;MAAAR,CAAA,OAAAW,UAAA;MAAAX,CAAA,OAAAwB,EAAA;IAAA;MAAAA,EAAA,GAAAxB,CAAA;IAAA;IAAA,IAAAyC,EAAA;IAAA,IAAAzC,CAAA,SAAAsB,MAAA,CAAAC,GAAA;MACakB,EAAA,GAAAC,OAAA;QACXxB,eAAA,CAAgBO,OAAA,CAAAS,MAAA,CAAAN,EAAe;MAAA;MACjC5B,CAAA,OAAAyC,EAAA;IAAA;MAAAA,EAAA,GAAAzC,CAAA;IAAA;IA5CJoB,EAAA,GAAAuB,KAAA,CAAC;MAAAC,QAAA,GACCC,IAAA,CAAA1E,UAAA;QAAA2E,UAAA;UAAAC,OAAA;UAAAC,SAAA;YAAAC,CAAA;YAAAC,CAAA;UAAA;QAAA;QAAAC,kBAAA,EAAAjE,cAAA;QAAA0C,EAAA,EAUK;QAAAwB,YAAA,EACW/B,EAEd;QAAAgC,SAAA,EACW7B,EA0BX;QAAA8B,WAAA,EACab,EAEb;QAAAtB,OAAA;QAAAyB,QAAA,EAGAD,KAAA,CAAC;UAAAY,SAAA,EACY,qBAAqB7C,SAAA,GAAY,YAAY,IAAI;UAAA8C,KAAA;YAAAC,OAAA,EAEjD;YAAAC,QAAA,EACC;UAAA;UAAAd,QAAA,GAKXpC,aAAA,EAAAmD,MAAA,MAA0B,IACzBd,IAAA,CAAC;YAAAU,SAAA,EAAc;YAAAX,QAAA,EACbC,IAAA,CAAC;cAAAD,QAAA,EAAGxC,CAAA,CAAE;YAAA,C;cAGTI,aAAA,EAAAoD,GAAA,EAAAC,QAAA,EAAAC,MAAA,KACCjB,IAAA,CAAArE,KAAA,CAAAuF,QAAA;YAAAnB,QAAA,EACEC,IAAA,CAAAmB,aAAA;cAAAC,QAAA,GACavD,SAAA;cAAAkB,EAAA,EACPS,QAAA,CAAAC,IAAA,CAAAV,EAAA;cAAA4B,KAAA;gBAAAU,KAAA,EAEK,GAAAzE,mBAAA,CAAuB4C,QAAA,CAAAC,IAAA,CAAA4B,KAAA;cAAqB;cAAAA,KAAA,EAE9C7B,QAAA,CAAAC,IAAA,CAAA4B,KAAA;cAAAtB,QAAA,EAEPD,KAAA,CAAC;gBAAAY,SAAA,EAAe,kBAAkB7C,SAAA,GAAY,4BAA4B,IAAI;gBAAAkC,QAAA,GAC5EC,IAAA,CAAC;kBAAA,eAAiBnC,SAAA;kBAAA6C,SAAA,EAAqB;kBAAAY,KAAA,EAAwBzD,SAAA;kBAAAkC,QAAA,EAC5DP,QAAA,CAAA+B;gBAAA,C,GAEF1D,SAAA,IACCiC,KAAA,CAAC;kBAAAY,SAAA,EACW;kBAAAc,aAAA,EAAAC,KAAA;kBAAA1B,QAAA,GAGVC,IAAA,CAAAzD,iBAAA;oBAAAmF,MAAA,EAAAC,IAAA;sBAEIxD,gBAAA,CAAiBqB,QAAA,CAAAC,IAAA,CAAAV,EAAA,EAAgB4C,IAAA;oBAAA;oBAAAC,UAAA,EAEvBpC,QAAA,CAAAC,IAAA,CAAAkC,IAAA;oBAAAE,QAAA,EACFrC,QAAA,CAAAC,IAAA,CAAAV;kBAAA,C,GAEZiB,IAAA,CAAA8B,mBAAA;oBAAAC,YAAA,EACgBvC,QAAA,CAAAC,IAAA,CAAA4B,KAAA;oBAAAW,QAAA,EACJxC,QAAA,CAAAC,IAAA,CAAAuC,QAAA;oBAAAC,QAAA,EACAzC,QAAA,CAAAC,IAAA,CAAAwC,QAAA;oBAAAC,QAAA,EAAAb,KAAA,IACWrD,YAAA,CAAawB,QAAA,CAAAC,IAAA,CAAAV,EAAA,EAAgBsC,KAAA;kBAAA,C,GAEpDvB,KAAA,CAAC;oBAAAY,SAAA,EACW;oBAAAyB,OAAA,EAAAA,CAAA,KACKvE,YAAA,CAAa4B,QAAA,CAAAC,IAAA,CAAAV,EAAc;oBAAAqD,IAAA,EACrC;oBAAArC,QAAA,GAELC,IAAA,CAAC;sBAAAU,SAAA,EAAe;sBAAAX,QAAA,EACbxC,CAAA,CAAE;wBAAAwB,EAAA,EAAgCS,QAAA,CAAAC,IAAA,CAAAV;sBAAA,CAAe;oBAAA,C,GAEpDiB,IAAA,CAAA/D,KAAA,IAAC;kBAAA,C;;;;aAvCQuD,QAAA,CAAAC,IAAA,CAAAV,EAAc,IA+CrCiB,IAAA,CAAAzE,WAAA;YAAAmF,SAAA,EACY;YAAA2B,aAAA;cAAAC,QAAA;YAAA;YAAAC,SAAA,GAAA/F,gCAAA;YAAAuD,QAAA,EAOT3B,YAAA,GACG;cACE,MAAAoE,aAAA,GAAsB7E,aAAA,EAAA8E,IAAA,CAAAC,QAAA,IACRlD,QAAA,CAAAC,IAAA,CAAAV,EAAA,KAAmBX,YAAA;cAAA,OAE1BoE,aAAA,GACLxC,IAAA,CAAC;gBAAAW,KAAA;kBAAAhE,SAAA,EAEc;gBAAA;gBAAAoD,QAAA,EAGbC,IAAA,CAAC;kBAAAU,SAAA,EACY,kBAAkB7C,SAAA,GAAY,4BAA4B,IAAI;kBAAAkC,QAAA,EAEzEC,IAAA,CAAC;oBAAAU,SAAA,EAAc;oBAAAX,QAAA,EAAkByC,aAAA,CAAAjB;kBAAA,C;;uBAGnC;YAAA,GACN;UACA,C;;UAIVvB,IAAA,CAAA7D,gBAAA;QAAAqB,SAAA;QAAAC,MAAA;QAAAI,SAAA;QAAAE,WAAA;QAAAE,UAAA;QAAAC,YAAA;QAAAZ;MAAA,C,GASCI,WAAA;IAAA,C;;;;;;;;;;;;;;;;;;;;;SArJHa,E;;AA3BG,SAAAkD,MAAAkB,CAAA;EAAA,OAyGqCA,CAAA,CAAAC,eAAA,CAAiB;AAAA;AA4E7D,SAASd,oBAAoB;EAC3BC,YAAY;EACZC,QAAQ;EACRC,QAAQ;EACRC;AAAQ,CAMT;EACC;EACA,MAAMW,YAAA,GAAejH,OAAA,CAAQ;IAC3B,MAAMkH,aAAA,GAAgBlG,mBAAmB,CAACqF,QAAA,CAAS;IACnD,MAAMc,aAAA,GAAgBnG,mBAAmB,CAACoF,QAAA,CAAS;IAEnD,OAAOgB,MAAA,CAAOC,OAAO,CAACrG,mBAAA,EACnBmE,GAAG,CAAC,CAAC,CAACmC,GAAA,EAAKC,KAAA,CAAM,MAAM;MACtB9B,KAAA,EAAO6B,GAAA;MACPE,UAAA,EAAYD;IACd,IACCE,MAAM,CAAEC,MAAA,IAAWA,MAAA,CAAOF,UAAU,IAAIN,aAAA,IAAiBQ,MAAA,CAAOF,UAAU,IAAIL,aAAA;EACnF,GAAG,CAACd,QAAA,EAAUD,QAAA,CAAS;EAEvB,MAAMuB,UAAA,GAAaV,YAAA,CAAa/B,MAAM,IAAI;EAE1C,IAAIyC,UAAA,EAAY;IACd,OAAO;EACT;EAEA,oBACEvD,IAAA,CAAClE,KAAA;IACC0H,MAAA,eACE1D,KAAA,CAAC;MACCY,SAAA,EAAU;MACVc,aAAA,EAAgBmB,CAAA,IAAMA,CAAA,CAAEC,eAAe;MACvCR,IAAA,EAAK;8BAELpC,IAAA,CAAC;QAAKU,SAAA,EAAU;kBAAiCqB;uBACjD/B,IAAA,CAAChE,WAAA;QAAY0E,SAAA,EAAU;;;IAG3B+C,UAAA,EAAW;IACXC,MAAA,EAAQA,CAAC;MAAEC;IAAK,CAAE,kBAChB3D,IAAA,CAACjE,SAAA,CAAU6H,WAAW;gBACnBf,YAAA,CAAa9B,GAAG,CAAEuC,QAAA;QACjB,MAAMO,UAAA,GAAaP,QAAA,CAAOjC,KAAK,KAAKU,YAAA;QACpC,oBACEjC,KAAA,CAAC/D,SAAA,CAAU+H,MAAM;UACfzE,MAAA,EAAQwE,UAAA;UAER1B,OAAA,EAASA,CAAA;YACPD,QAAA,CAASoB,QAAA,CAAOjC,KAAK;YACrBsC,KAAA;UACF;kCAEA3D,IAAA,CAAC;YAAKU,SAAA,EAAU;sBAAkC4C,QAAA,CAAOjC;2BACzDvB,KAAA,CAAC;YAAKY,SAAA,EAAU;uBACb4C,QAAA,CAAOF,UAAU,CAACW,OAAO,CAAC,IAAG;;WAR3BT,QAAA,CAAOjC,KAAK;MAYvB;;IAGJ2C,IAAA,EAAK;IACLC,aAAA,EAAc;;AAGpB;AAEA,SAAA9C,cAAA+C,KAAA;EAAA,MAAA/G,CAAA,GAAA9B,EAAA;EAAA,IAAA6B,EAAA;EAAA,IAAAC,CAAA,QAAA+G,KAAA,CAAA9C,QAAA,IAAAjE,CAAA,QAAA+G,KAAA,CAAAnF,EAAA;IAOyE7B,EAAA;MAAA6B,EAAA,EACjEmF,KAAA,CAAAnF,EAAA;MAAAqC,QAAA,EACM8C,KAAA,CAAA9C;IAAA;IACZjE,CAAA,MAAA+G,KAAA,CAAA9C,QAAA;IAAAjE,CAAA,MAAA+G,KAAA,CAAAnF,EAAA;IAAA5B,CAAA,MAAAD,EAAA;EAAA;IAAAA,EAAA,GAAAC,CAAA;EAAA;EAHA;IAAAgH,UAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC;EAAA,IAA0D9I,YAAA,CAAa0B,EAGvE;EAIW,MAAAqB,EAAA,GAAA6F,UAAA,UAAmB;EAAA,IAAA5F,EAAA;EAAA,IAAArB,CAAA,QAAAgH,UAAA,IAAAhH,CAAA,QAAAkH,SAAA,IAAAlH,CAAA,QAAA+G,KAAA,CAAAnE,QAAA,IAAA5C,CAAA,QAAA+G,KAAA,CAAA9C,QAAA,IAAAjE,CAAA,QAAA+G,KAAA,CAAAnF,EAAA,IAAA5B,CAAA,QAAA+G,KAAA,CAAAvD,KAAA,IAAAxD,CAAA,QAAA+G,KAAA,CAAA7C,KAAA,IAAAlE,CAAA,SAAAmH,UAAA,IAAAnH,CAAA,SAAAoB,EAAA;IAF9B,MAAAgG,YAAA;MAAA,GACKL,KAAA,CAAAvD,KAAA;MAAA6D,OAAA,EACMjG,EAAmB;MAAAa,QAAA,EAClB;IAAA;IAKZ,MAAAqF,cAAA,GAAuBP,KAAA,CAAA9C,QAAA;MAAA,GAA2BiD,SAAS;MAAA,GAAKF;IAAU,CAAC;IAGzE3F,EAAA,GAAAsB,KAAA,CAAC;MAAAY,SAAA,EAAc;MAAA,aAAoBwD,KAAA,CAAAnF,EAAA;MAAA,cAAsBmF,KAAA,CAAA7C,KAAA;MAAAV,KAAA,EAAoB4D,YAAA;MAAAxE,QAAA,GAC3EC,IAAA,CAAA0E,aAAA;QAAA3F,EAAA,EAAmBmF,KAAA,CAAAnF,EAAA;QAAAK,QAAA,EAAmB;MAAA,C,GACtCY,IAAA,CAAC;QAAAU,SAAA,EACW;QAAA3B,EAAA,EACNmF,KAAA,CAAAnF,EAAA;QAAA4F,GAAA,EACCL,UAAA;QAAA,GACDG,cAAc;QAAA9D,KAAA;UAAAU,KAAA,EAET;UAAAuD,MAAA,EACC;QAAA;QAAA7E,QAAA,EAGTmE,KAAA,CAAAnE;MAAA,C,GAEHC,IAAA,CAAA0E,aAAA;QAAA3F,EAAA,EAAmBmF,KAAA,CAAAnF,EAAA;QAAAK,QAAA,EAAmB;MAAA,C;;;;;;;;;;;;;;;SAdxCZ,E;;AAmBJ,SAAAkG,cAAAxH,EAAA;EAAA,MAAAC,CAAA,GAAA9B,EAAA;EAAuB;IAAA0D,EAAA;IAAAK;EAAA,IAAAlC,EAA8D;EACjC,MAAAqB,EAAA,MAAGQ,EAAA,IAAMK,QAAA,EAAU;EAAA,IAAAZ,EAAA;EAAA,IAAArB,CAAA,QAAAiC,QAAA;IAAQZ,EAAA;MAAAY;IAAA;IAAWjC,CAAA,MAAAiC,QAAA;IAAAjC,CAAA,MAAAqB,EAAA;EAAA;IAAAA,EAAA,GAAArB,CAAA;EAAA;EAAA,IAAAwB,EAAA;EAAA,IAAAxB,CAAA,QAAAoB,EAAA,IAAApB,CAAA,QAAAqB,EAAA;IAA5CG,EAAA;MAAAI,EAAA,EAAMR,EAAmB;MAAAoD,IAAA,EAAQnD;IAAW;IAAErB,CAAA,MAAAoB,EAAA;IAAApB,CAAA,MAAAqB,EAAA;IAAArB,CAAA,MAAAwB,EAAA;EAAA;IAAAA,EAAA,GAAAxB,CAAA;EAAA;EAA1F;IAAAmH,UAAA;IAAAO;EAAA,IAA+BpJ,YAAA,CAAakD,EAA8C;EAKzE,MAAAiB,EAAA,MAAGb,EAAA,IAAMK,QAAA,EAAU;EAIxB,MAAA0F,EAAA,GAAA1F,QAAA,KAAa,gBAAgB;EAC5B,MAAA2F,EAAA,GAAA3F,QAAA,KAAa,eAAe;EAKlB,MAAA4F,EAAA,GAAAH,MAAA,GAAS,4BAA4B;EAAA,IAAAI,EAAA;EAAA,IAAA9H,CAAA,QAAAmH,UAAA,IAAAnH,CAAA,QAAAyC,EAAA,IAAAzC,CAAA,QAAA2H,EAAA,IAAA3H,CAAA,QAAA4H,EAAA,IAAA5H,CAAA,QAAA6H,EAAA;IAZ1DC,EAAA,GAAAjF,IAAA,CAAC;MAAAU,SAAA,EACW;MAAA,eACGd,EAAmB;MAAA+E,GAAA,EAC3BL,UAAA;MAAA3D,KAAA;QAAAvB,QAAA,EAEO;QAAA8F,IAAA,EACJJ,EAA6B;QAAAK,KAAA,EAC5BJ,EAA4B;QAAAK,GAAA;QAAAC,MAAA;QAAAC,YAAA,EAGrB;QAAAjE,KAAA,EACP;QAAAkE,eAAA,EACUP,EAAqC;QAAAQ,YAAA,EACxC;QAAAC,SAAA,EACH;QAAAC,aAAA,EACI;QAAAC,MAAA;MAAA;IAAA,C;;;;;;;;;;SAfnBV,E","ignoreList":[]}
+{"version":3,"file":"index.client.js","names":["c","_c","DndContext","DragOverlay","useDraggable","useDroppable","snapCenterToCursor","React","useMemo","useState","Popup","PopupList","ChevronIcon","XIcon","useTranslation","DashboardStepNav","useDashboardLayout","closestInXAxis","useDashboardSensors","WidgetEditControl","snapCenterToCursorOnlyForPointer","args","activatorEvent","transform","WIDTH_TO_PERCENTAGE","small","medium","large","full","ModularDashboardClient","t0","$","clientLayout","initialLayout","widgets","t","addWidget","cancel","cancelModal","currentLayout","deleteWidget","isEditing","moveWidget","resetLayout","resizeWidget","saveLayout","setIsEditing","updateWidgetData","activeDragId","setActiveDragId","sensors","t1","t2","Symbol","for","t3","event","over","droppableId","id","i","lastIndexOf","slug","slice","position","active","moveFromIndex","findIndex","widget","item","moveToIndex","widget_0","t4","event_0","_jsxs","children","_jsx","autoScroll","enabled","threshold","x","y","collisionDetection","onDragCancel","onDragEnd","onDragStart","className","style","display","flexWrap","length","map","widget_1","_index","Fragment","DraggableItem","disabled","width","inert","component","onPointerDown","_temp","onSave","data","widgetData","widgetID","WidgetWidthDropdown","currentWidth","maxWidth","minWidth","onResize","onClick","type","dropAnimation","duration","modifiers","draggedWidget","find","widget_2","e","stopPropagation","validOptions","minPercentage","maxPercentage","Object","entries","key","value","percentage","filter","option","isDisabled","button","buttonType","render","close","ButtonGroup","isSelected","Button","toFixed","size","verticalAlign","props","attributes","isDragging","listeners","setNodeRef","mergedStyles","opacity","draggableProps","DroppableItem","ref","height","isOver","t5","t6","t7","t8","left","right","top","bottom","borderRadius","backgroundColor","marginBottom","marginTop","pointerEvents","zIndex"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { Modifier } from '@dnd-kit/core'\nimport type { ClientWidget, WidgetWidth } from 'payload'\n\nimport { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core'\nimport { snapCenterToCursor } from '@dnd-kit/modifiers'\nimport React, { useMemo, useState } from 'react'\n\nimport { Popup } from '../../../../elements/Popup/index.js'\nimport * as PopupList from '../../../../elements/Popup/PopupButtonList/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../../icons/X/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DashboardStepNav } from './DashboardStepNav.js'\nimport { useDashboardLayout } from './useDashboardLayout.js'\nimport { closestInXAxis } from './utils/collisionDetection.js'\nimport { useDashboardSensors } from './utils/sensors.js'\nimport { WidgetEditControl } from './WidgetEditControl.js'\n\n/**\n * Custom modifier that only applies snapCenterToCursor for pointer events.\n * During keyboard navigation, we handle positioning ourselves via the coordinate getter.\n */\nconst snapCenterToCursorOnlyForPointer: Modifier = (args) => {\n  const { activatorEvent } = args\n\n  // Only apply snap for pointer events (mouse/touch), not keyboard\n  // Check activatorEvent.type since KeyboardEvent may not exist on server\n  if (activatorEvent && 'key' in activatorEvent) {\n    return args.transform\n  }\n\n  return snapCenterToCursor(args)\n}\n\nexport type WidgetItem = {\n  data?: Record<string, unknown>\n  id: string\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  width: WidgetWidth\n}\n\nexport type WidgetInstanceClient = {\n  component: React.ReactNode\n  item: WidgetItem\n}\n\nexport type DropTargetWidget = {\n  position: 'after' | 'before'\n  widget: WidgetInstanceClient\n} | null\n\n/* eslint-disable perfectionist/sort-objects */\nconst WIDTH_TO_PERCENTAGE = {\n  'x-small': 25,\n  small: (1 / 3) * 100,\n  medium: 50,\n  large: (2 / 3) * 100,\n  'x-large': 75,\n  full: 100,\n} as const\n\nexport function ModularDashboardClient({\n  clientLayout: initialLayout,\n  widgets,\n}: {\n  clientLayout: WidgetInstanceClient[]\n  widgets: ClientWidget[]\n}) {\n  const { t } = useTranslation()\n  const {\n    addWidget,\n    cancel,\n    cancelModal,\n    currentLayout,\n    deleteWidget,\n    isEditing,\n    moveWidget,\n    resetLayout,\n    resizeWidget,\n    saveLayout,\n    setIsEditing,\n    updateWidgetData,\n  } = useDashboardLayout(initialLayout)\n\n  const [activeDragId, setActiveDragId] = useState<null | string>(null)\n  const sensors = useDashboardSensors()\n\n  return (\n    <div>\n      <DndContext\n        autoScroll={{\n          enabled: true,\n          threshold: {\n            x: 0, // No horizontal scroll\n            y: 0.2, // Allow vertical scroll at 20% from edge\n          },\n        }}\n        collisionDetection={closestInXAxis}\n        // https://github.com/clauderic/dnd-kit/issues/926#issuecomment-1640115665\n        id=\"dashboard-dnd-context\"\n        onDragCancel={() => {\n          setActiveDragId(null)\n        }}\n        onDragEnd={(event) => {\n          if (!event.over) {\n            setActiveDragId(null)\n            return\n          }\n          const droppableId = event.over.id as string\n          const i = droppableId.lastIndexOf('-')\n          const slug = droppableId.slice(0, i)\n          const position = droppableId.slice(i + 1)\n\n          if (slug === event.active.id) {\n            return\n          }\n\n          const moveFromIndex = currentLayout?.findIndex(\n            (widget) => widget.item.id === event.active.id,\n          )\n          let moveToIndex = currentLayout?.findIndex((widget) => widget.item.id === slug)\n          if (moveFromIndex < moveToIndex) {\n            moveToIndex--\n          }\n          if (position === 'after') {\n            moveToIndex++\n          }\n          moveWidget({ moveFromIndex, moveToIndex })\n          setActiveDragId(null)\n        }}\n        onDragStart={(event) => {\n          setActiveDragId(event.active.id as string)\n        }}\n        sensors={sensors}\n      >\n        <div\n          className={`modular-dashboard ${isEditing ? 'editing' : ''}`}\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            // Don't add gap here! We need to use padding on the widgets instead\n            // to make sure all rows have the same width always.\n          }}\n        >\n          {currentLayout?.length === 0 && (\n            <div className=\"modular-dashboard__empty\">\n              <p>{t('dashboard:noItems')}</p>\n            </div>\n          )}\n          {currentLayout?.map((widget, _index) => (\n            <React.Fragment key={widget.item.id}>\n              <DraggableItem\n                disabled={!isEditing}\n                id={widget.item.id}\n                style={{\n                  width: `${WIDTH_TO_PERCENTAGE[widget.item.width]}%`,\n                }}\n                width={widget.item.width}\n              >\n                <div className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}>\n                  <div aria-hidden={isEditing} className=\"widget-content\" inert={isEditing}>\n                    {widget.component}\n                  </div>\n                  {isEditing && (\n                    <div\n                      className=\"widget-wrapper__controls\"\n                      onPointerDown={(e) => e.stopPropagation()}\n                    >\n                      <WidgetEditControl\n                        onSave={(data) => {\n                          updateWidgetData(widget.item.id, data)\n                        }}\n                        widgetData={widget.item.data}\n                        widgetID={widget.item.id}\n                      />\n                      <WidgetWidthDropdown\n                        currentWidth={widget.item.width}\n                        maxWidth={widget.item.maxWidth}\n                        minWidth={widget.item.minWidth}\n                        onResize={(width) => resizeWidget(widget.item.id, width)}\n                      />\n                      <button\n                        className=\"widget-wrapper__delete-btn\"\n                        onClick={() => deleteWidget(widget.item.id)}\n                        type=\"button\"\n                      >\n                        <span className=\"sr-only\">\n                          {t('dashboard:deleteWidget', { id: widget.item.id })}\n                        </span>\n                        <XIcon />\n                      </button>\n                    </div>\n                  )}\n                </div>\n              </DraggableItem>\n            </React.Fragment>\n          ))}\n          <DragOverlay\n            className=\"drag-overlay\"\n            dropAnimation={{\n              duration: 100,\n            }}\n            // Uses custom modifier that only applies for pointer, not keyboard navigation.\n            modifiers={[snapCenterToCursorOnlyForPointer]}\n          >\n            {activeDragId\n              ? (() => {\n                  const draggedWidget = currentLayout?.find(\n                    (widget) => widget.item.id === activeDragId,\n                  )\n                  return draggedWidget ? (\n                    <div\n                      style={{\n                        transform: 'scale(0.25)',\n                      }}\n                    >\n                      <div\n                        className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}\n                      >\n                        <div className=\"widget-content\">{draggedWidget.component}</div>\n                      </div>\n                    </div>\n                  ) : null\n                })()\n              : null}\n          </DragOverlay>\n        </div>\n      </DndContext>\n      <DashboardStepNav\n        addWidget={addWidget}\n        cancel={cancel}\n        isEditing={isEditing}\n        resetLayout={resetLayout}\n        saveLayout={saveLayout}\n        setIsEditing={setIsEditing}\n        widgets={widgets}\n      />\n      {cancelModal}\n    </div>\n  )\n}\n\nfunction WidgetWidthDropdown({\n  currentWidth,\n  maxWidth,\n  minWidth,\n  onResize,\n}: {\n  currentWidth: WidgetWidth\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  onResize: (width: WidgetWidth) => void\n}) {\n  // Filter options based on minWidth and maxWidth\n  const validOptions = useMemo(() => {\n    const minPercentage = WIDTH_TO_PERCENTAGE[minWidth]\n    const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth]\n\n    return Object.entries(WIDTH_TO_PERCENTAGE)\n      .map(([key, value]) => ({\n        width: key as WidgetWidth,\n        percentage: value,\n      }))\n      .filter((option) => option.percentage >= minPercentage && option.percentage <= maxPercentage)\n  }, [minWidth, maxWidth])\n\n  const isDisabled = validOptions.length <= 1\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={\n        <button\n          className=\"widget-wrapper__size-btn\"\n          onPointerDown={(e) => e.stopPropagation()}\n          type=\"button\"\n        >\n          <span className=\"widget-wrapper__size-btn-text\">{currentWidth}</span>\n          <ChevronIcon className=\"widget-wrapper__size-btn-icon\" />\n        </button>\n      }\n      buttonType=\"custom\"\n      render={({ close }) => (\n        <PopupList.ButtonGroup>\n          {validOptions.map((option) => {\n            const isSelected = option.width === currentWidth\n            return (\n              <PopupList.Button\n                active={isSelected}\n                key={option.width}\n                onClick={() => {\n                  onResize(option.width)\n                  close()\n                }}\n              >\n                <span className=\"widget-wrapper__size-btn-label\">{option.width}</span>\n                <span className=\"widget-wrapper__size-btn-percentage\">\n                  {option.percentage.toFixed(0)}%\n                </span>\n              </PopupList.Button>\n            )\n          })}\n        </PopupList.ButtonGroup>\n      )}\n      size=\"small\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n\nfunction DraggableItem(props: {\n  children: React.ReactNode\n  disabled?: boolean\n  id: string\n  style?: React.CSSProperties\n  width: WidgetWidth\n}) {\n  const { attributes, isDragging, listeners, setNodeRef } = useDraggable({\n    id: props.id,\n    disabled: props.disabled,\n  })\n\n  const mergedStyles: React.CSSProperties = {\n    ...props.style,\n    opacity: isDragging ? 0.3 : 1,\n    position: 'relative',\n  }\n\n  // Only apply draggable attributes and listeners when not disabled\n  // to prevent disabling interactive elements inside the widget\n  const draggableProps = props.disabled ? {} : { ...listeners, ...attributes }\n\n  return (\n    <div className=\"widget\" data-slug={props.id} data-width={props.width} style={mergedStyles}>\n      <DroppableItem id={props.id} position=\"before\" />\n      <div\n        className=\"draggable\"\n        id={props.id}\n        ref={setNodeRef}\n        {...draggableProps}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n      >\n        {props.children}\n      </div>\n      <DroppableItem id={props.id} position=\"after\" />\n    </div>\n  )\n}\n\nfunction DroppableItem({ id, position }: { id: string; position: 'after' | 'before' }) {\n  const { setNodeRef, isOver } = useDroppable({ id: `${id}-${position}`, data: { position } })\n\n  return (\n    <div\n      className=\"droppable-widget\"\n      data-testid={`${id}-${position}`}\n      ref={setNodeRef}\n      style={{\n        position: 'absolute',\n        left: position === 'before' ? -2 : 'auto',\n        right: position === 'after' ? -2 : 'auto',\n        top: 0,\n        bottom: 0,\n        borderRadius: '1000px',\n        width: '4px',\n        backgroundColor: isOver ? 'var(--color-bg-success)' : 'transparent',\n        marginBottom: '10px',\n        marginTop: '10px',\n        pointerEvents: 'none',\n        zIndex: 1000,\n      }}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/index.css

@@ -14,6 +14,8 @@
 
   .widget-config-drawer__content {
     height: 100%;
+    padding-top: var(--gutter-v);
+    padding-bottom: var(--gutter-v);
 
     .form-submit {
       margin-top: var(--spacer-2-5);

package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.js

@@ -46,9 +46,9 @@ export const RenderWidget = t0 => {
           setComponent(React.createElement("div", {
             style: {
               background: "var(--theme-error-50)",
-              border: "1px solid var(--theme-error-200)",
+              border: "var(--stroke-width-small) solid var(--theme-error-200)",
               borderRadius: "4px",
-              color: "var(--theme-error-text)",
+              color: "var(--color-text-danger)",
               padding: "20px",
               textAlign: "center"
             }