@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal-debug.654e4ad

package/dist/elements/FolderView/SortByPill/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FolderView/SortByPill/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\nimport type { FolderSortKeys } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { SortDownIcon, SortUpIcon } from '../../../icons/Sort/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-by-pill'\n\nconst sortOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: FolderSortKeys\n}[] = [\n  { label: (t) => t('general:name'), value: 'name' },\n  { label: (t) => t('general:createdAt'), value: 'createdAt' },\n  { label: (t) => t('general:updatedAt'), value: 'updatedAt' },\n]\nconst orderOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: 'asc' | 'desc'\n}[] = [\n  {\n    label: (t) => (\n      <>\n        <SortUpIcon />\n        {t('general:ascending')}\n      </>\n    ),\n    value: 'asc',\n  },\n  {\n    label: (t) => (\n      <>\n        <SortDownIcon />\n        {t('general:descending')}\n      </>\n    ),\n    value: 'desc',\n  },\n]\nexport function SortByPill() {\n  const { refineFolderData, sort } = useFolder()\n  const { t } = useTranslation()\n  const sortDirection = sort.startsWith('-') ? 'desc' : 'asc'\n  const [selectedSortOption] =\n    sortOnOptions.filter(({ value }) => value === (sort.startsWith('-') ? sort.slice(1) : sort)) ||\n    sortOnOptions\n  const [selectedOrderOption] = orderOnOptions.filter(({ value }) => value === sortDirection)\n\n  return (\n    <Popup\n      button={\n        <Pill className={`${baseClass}__trigger`} icon={<ChevronIcon />} size=\"small\">\n          {sortDirection === 'asc' ? (\n            <SortUpIcon className={`${baseClass}__sort-icon`} />\n          ) : (\n            <SortDownIcon className={`${baseClass}__sort-icon`} />\n          )}\n          {selectedSortOption?.label(t)}\n        </Pill>\n      }\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <>\n          <PopupList.GroupLabel label=\"Sort by\" />\n          <PopupList.ButtonGroup>\n            {sortOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedSortOption?.value === value}\n                key={value}\n                onClick={() => {\n                  refineFolderData({\n                    query: {\n                      page: '1',\n                      sort: sortDirection === 'desc' ? `-${value}` : value,\n                    },\n                    updateURL: true,\n                  })\n                  close()\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n          <PopupList.Divider />\n          <PopupList.GroupLabel label=\"Order\" />\n          <PopupList.ButtonGroup>\n            {orderOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedOrderOption?.value === value}\n                className={`${baseClass}__order-option`}\n                key={value}\n                onClick={() => {\n                  if (sortDirection !== value) {\n                    refineFolderData({\n                      query: {\n                        page: '1',\n                        sort:\n                          value === 'desc'\n                            ? `-${selectedSortOption?.value}`\n                            : selectedSortOption?.value,\n                      },\n                      updateURL: true,\n                    })\n                    close()\n                  }\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n        </>\n      )}\n      showScrollbar\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"names":["ChevronIcon","SortDownIcon","SortUpIcon","useFolder","useTranslation","Pill","Popup","PopupList","baseClass","sortOnOptions","label","t","value","orderOnOptions","SortByPill","refineFolderData","sort","sortDirection","startsWith","selectedSortOption","filter","slice","selectedOrderOption","button","className","icon","size","horizontalAlign","render","close","GroupLabel","ButtonGroup","map","Button","active","key","onClick","query","page","updateURL","Divider","showScrollbar","verticalAlign"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/elements/FolderView/SortByPill/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\nimport type { FolderSortKeys } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { SortDownIcon, SortUpIcon } from '../../../icons/Sort/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-by-pill'\n\nconst sortOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: FolderSortKeys\n}[] = [\n  { label: (t) => t('general:name'), value: 'name' },\n  { label: (t) => t('general:createdAt'), value: 'createdAt' },\n  { label: (t) => t('general:updatedAt'), value: 'updatedAt' },\n]\nconst orderOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: 'asc' | 'desc'\n}[] = [\n  {\n    label: (t) => (\n      <>\n        <SortUpIcon />\n        {t('general:ascending')}\n      </>\n    ),\n    value: 'asc',\n  },\n  {\n    label: (t) => (\n      <>\n        <SortDownIcon />\n        {t('general:descending')}\n      </>\n    ),\n    value: 'desc',\n  },\n]\nexport function SortByPill() {\n  const { refineFolderData, sort } = useFolder()\n  const { t } = useTranslation()\n  const sortDirection = sort.startsWith('-') ? 'desc' : 'asc'\n  const [selectedSortOption] =\n    sortOnOptions.filter(({ value }) => value === (sort.startsWith('-') ? sort.slice(1) : sort)) ||\n    sortOnOptions\n  const [selectedOrderOption] = orderOnOptions.filter(({ value }) => value === sortDirection)\n\n  return (\n    <Popup\n      button={\n        <Pill className={`${baseClass}__trigger`} icon={<ChevronIcon />} size=\"small\">\n          {sortDirection === 'asc' ? (\n            <SortUpIcon className={`${baseClass}__sort-icon`} />\n          ) : (\n            <SortDownIcon className={`${baseClass}__sort-icon`} />\n          )}\n          {selectedSortOption?.label(t)}\n        </Pill>\n      }\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <>\n          <PopupList.GroupLabel label=\"Sort by\" />\n          <PopupList.ButtonGroup>\n            {sortOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedSortOption?.value === value}\n                key={value}\n                onClick={() => {\n                  refineFolderData({\n                    query: {\n                      page: '1',\n                      sort: sortDirection === 'desc' ? `-${value}` : value,\n                    },\n                    updateURL: true,\n                  })\n                  close()\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n          <PopupList.Divider />\n          <PopupList.GroupLabel label=\"Order\" />\n          <PopupList.ButtonGroup>\n            {orderOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedOrderOption?.value === value}\n                className={`${baseClass}__order-option`}\n                key={value}\n                onClick={() => {\n                  if (sortDirection !== value) {\n                    refineFolderData({\n                      query: {\n                        page: '1',\n                        sort:\n                          value === 'desc'\n                            ? `-${selectedSortOption?.value}`\n                            : selectedSortOption?.value,\n                      },\n                      updateURL: true,\n                    })\n                    close()\n                  }\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n        </>\n      )}\n      showScrollbar\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"names":["React","ChevronIcon","SortDownIcon","SortUpIcon","useFolder","useTranslation","Pill","Popup","PopupList","baseClass","sortOnOptions","label","t","value","orderOnOptions","SortByPill","refineFolderData","sort","sortDirection","startsWith","selectedSortOption","filter","slice","selectedOrderOption","button","className","icon","size","horizontalAlign","render","close","GroupLabel","ButtonGroup","map","Button","active","onClick","query","page","updateURL","Divider","showScrollbar","verticalAlign"],"mappings":"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"}

package/dist/elements/FolderView/ToggleViewButtons/index.js

@@ -1,23 +1,54 @@
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 import { GridViewIcon } from '../../../icons/GridView/index.js';
 import { ListViewIcon } from '../../../icons/ListView/index.js';
 import { Button } from '../../Button/index.js';
 import './index.scss';
 const baseClass = 'folder-view-toggle-button';
 export function ToggleViewButtons({ activeView, setActiveView }) {
-    return <>
-      <Button buttonStyle="pill" className={[
-        baseClass,
-        activeView === 'grid' && `${baseClass}--active`
-    ].filter(Boolean).join(' ')} icon={<GridViewIcon/>} margin={false} onClick={()=>{
-        setActiveView('grid');
-    }}/>
-      <Button buttonStyle="pill" className={[
-        baseClass,
-        activeView === 'list' && `${baseClass}--active`
-    ].filter(Boolean).join(' ')} icon={<ListViewIcon/>} margin={false} onClick={()=>{
-        setActiveView('list');
-    }}/>
-    </>;
+    return /*#__PURE__*/ _jsxDEV(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxDEV(Button, {
+                buttonStyle: "pill",
+                className: [
+                    baseClass,
+                    activeView === 'grid' && `${baseClass}--active`
+                ].filter(Boolean).join(' '),
+                icon: /*#__PURE__*/ _jsxDEV(GridViewIcon, {}, void 0, false, {
+                    fileName: "src/elements/FolderView/ToggleViewButtons/index.tsx",
+                    lineNumber: 20,
+                    columnNumber: 15
+                }, void 0),
+                margin: false,
+                onClick: ()=>{
+                    setActiveView('grid');
+                }
+            }, void 0, false, {
+                fileName: "src/elements/FolderView/ToggleViewButtons/index.tsx",
+                lineNumber: 15,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(Button, {
+                buttonStyle: "pill",
+                className: [
+                    baseClass,
+                    activeView === 'list' && `${baseClass}--active`
+                ].filter(Boolean).join(' '),
+                icon: /*#__PURE__*/ _jsxDEV(ListViewIcon, {}, void 0, false, {
+                    fileName: "src/elements/FolderView/ToggleViewButtons/index.tsx",
+                    lineNumber: 31,
+                    columnNumber: 15
+                }, void 0),
+                margin: false,
+                onClick: ()=>{
+                    setActiveView('list');
+                }
+            }, void 0, false, {
+                fileName: "src/elements/FolderView/ToggleViewButtons/index.tsx",
+                lineNumber: 26,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true);
 }
 
 //# sourceMappingURL=index.js.map

package/dist/elements/FolderView/ToggleViewButtons/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FolderView/ToggleViewButtons/index.tsx"],"sourcesContent":["import { GridViewIcon } from '../../../icons/GridView/index.js'\nimport { ListViewIcon } from '../../../icons/ListView/index.js'\nimport { Button } from '../../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'folder-view-toggle-button'\n\ntype Props = {\n  activeView: 'grid' | 'list'\n  setActiveView: (view: 'grid' | 'list') => void\n}\nexport function ToggleViewButtons({ activeView, setActiveView }: Props) {\n  return (\n    <>\n      <Button\n        buttonStyle=\"pill\"\n        className={[baseClass, activeView === 'grid' && `${baseClass}--active`]\n          .filter(Boolean)\n          .join(' ')}\n        icon={<GridViewIcon />}\n        margin={false}\n        onClick={() => {\n          setActiveView('grid')\n        }}\n      />\n      <Button\n        buttonStyle=\"pill\"\n        className={[baseClass, activeView === 'list' && `${baseClass}--active`]\n          .filter(Boolean)\n          .join(' ')}\n        icon={<ListViewIcon />}\n        margin={false}\n        onClick={() => {\n          setActiveView('list')\n        }}\n      />\n    </>\n  )\n}\n"],"names":["GridViewIcon","ListViewIcon","Button","baseClass","ToggleViewButtons","activeView","setActiveView","buttonStyle","className","filter","Boolean","join","icon","margin","onClick"],"mappings":"AAAA,SAASA,YAAY,QAAQ,mCAAkC;AAC/D,SAASC,YAAY,QAAQ,mCAAkC;AAC/D,SAASC,MAAM,QAAQ,wBAAuB;AAC9C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAMlB,OAAO,SAASC,kBAAkB,EAAEC,UAAU,EAAEC,aAAa,EAAS;IACpE,SACI;MACA,CAACJ,OACCK,YAAY,OACZC,WAAW;QAACL;QAAWE,eAAe,UAAU,GAAGF,UAAU,QAAQ,CAAC;KAAC,CACpEM,MAAM,CAACC,SACPC,IAAI,CAAC,MACRC,OAAOZ,gBACPa,QAAQ,OACRC,SAAS;QACPR,cAAc;IAChB,IACA;MACF,CAACJ,OACCK,YAAY,OACZC,WAAW;QAACL;QAAWE,eAAe,UAAU,GAAGF,UAAU,QAAQ,CAAC;KAAC,CACpEM,MAAM,CAACC,SACPC,IAAI,CAAC,MACRC,OAAOX,gBACPY,QAAQ,OACRC,SAAS;QACPR,cAAc;IAChB,IACA;IACJ;AAEJ"}
+{"version":3,"sources":["../../../../src/elements/FolderView/ToggleViewButtons/index.tsx"],"sourcesContent":["import { GridViewIcon } from '../../../icons/GridView/index.js'\nimport { ListViewIcon } from '../../../icons/ListView/index.js'\nimport { Button } from '../../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'folder-view-toggle-button'\n\ntype Props = {\n  activeView: 'grid' | 'list'\n  setActiveView: (view: 'grid' | 'list') => void\n}\nexport function ToggleViewButtons({ activeView, setActiveView }: Props) {\n  return (\n    <>\n      <Button\n        buttonStyle=\"pill\"\n        className={[baseClass, activeView === 'grid' && `${baseClass}--active`]\n          .filter(Boolean)\n          .join(' ')}\n        icon={<GridViewIcon />}\n        margin={false}\n        onClick={() => {\n          setActiveView('grid')\n        }}\n      />\n      <Button\n        buttonStyle=\"pill\"\n        className={[baseClass, activeView === 'list' && `${baseClass}--active`]\n          .filter(Boolean)\n          .join(' ')}\n        icon={<ListViewIcon />}\n        margin={false}\n        onClick={() => {\n          setActiveView('list')\n        }}\n      />\n    </>\n  )\n}\n"],"names":["GridViewIcon","ListViewIcon","Button","baseClass","ToggleViewButtons","activeView","setActiveView","buttonStyle","className","filter","Boolean","join","icon","margin","onClick"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mCAAkC;AAC/D,SAASC,YAAY,QAAQ,mCAAkC;AAC/D,SAASC,MAAM,QAAQ,wBAAuB;AAC9C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAMlB,OAAO,SAASC,kBAAkB,EAAEC,UAAU,EAAEC,aAAa,EAAS;IACpE,qBACE;;0BACE,QAACJ;gBACCK,aAAY;gBACZC,WAAW;oBAACL;oBAAWE,eAAe,UAAU,GAAGF,UAAU,QAAQ,CAAC;iBAAC,CACpEM,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRC,oBAAM,QAACZ;;;;;gBACPa,QAAQ;gBACRC,SAAS;oBACPR,cAAc;gBAChB;;;;;;0BAEF,QAACJ;gBACCK,aAAY;gBACZC,WAAW;oBAACL;oBAAWE,eAAe,UAAU,GAAGF,UAAU,QAAQ,CAAC;iBAAC,CACpEM,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRC,oBAAM,QAACX;;;;;gBACPY,QAAQ;gBACRC,SAAS;oBACPR,cAAc;gBAChB;;;;;;;;AAIR"}

package/dist/elements/FullscreenModal/index.js

@@ -1,13 +1,23 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { Modal } from '@faceless-ui/modal';
+import React from 'react';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 export function FullscreenModal(props) {
     const currentDepth = useEditDepth();
-    return <Modal // Fixes https://github.com/payloadcms/payload/issues/13778
-    closeOnBlur={false} {...props} style={{
-        ...props.style || {},
-        zIndex: `calc(100 + ${currentDepth || 0} + 1)`
-    }}/>;
+    return /*#__PURE__*/ _jsxDEV(Modal, {
+        // Fixes https://github.com/payloadcms/payload/issues/13778
+        closeOnBlur: false,
+        ...props,
+        style: {
+            ...props.style || {},
+            zIndex: `calc(100 + ${currentDepth || 0} + 1)`
+        }
+    }, void 0, false, {
+        fileName: "src/elements/FullscreenModal/index.tsx",
+        lineNumber: 13,
+        columnNumber: 5
+    }, this);
 }
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FullscreenModal/index.tsx"],"sourcesContent":["'use client'\nimport type { Modal as ModalType } from '@faceless-ui/modal'\n\nimport { Modal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\n\nexport function FullscreenModal(props: Parameters<typeof ModalType>[0]) {\n  const currentDepth = useEditDepth()\n\n  return (\n    <Modal\n      // Fixes https://github.com/payloadcms/payload/issues/13778\n      closeOnBlur={false}\n      {...props}\n      style={{\n        ...(props.style || {}),\n        zIndex: `calc(100 + ${currentDepth || 0} + 1)`,\n      }}\n    />\n  )\n}\n"],"names":["Modal","useEditDepth","FullscreenModal","props","currentDepth","closeOnBlur","style","zIndex"],"mappings":"AAAA;AAGA,SAASA,KAAK,QAAQ,qBAAoB;AAG1C,SAASC,YAAY,QAAQ,qCAAoC;AAEjE,OAAO,SAASC,gBAAgBC,KAAsC;IACpE,MAAMC,eAAeH;IAErB,QACGD,MACC,2DAA2D;IAC3DK,aAAa,QACZ,GAAGF,KAAK,EACTG,OAAO;QACL,GAAIH,MAAMG,KAAK,IAAI,CAAC,CAAC;QACrBC,QAAQ,CAAC,WAAW,EAAEH,gBAAgB,EAAE,KAAK,CAAC;IAChD;AAGN"}
+{"version":3,"sources":["../../../src/elements/FullscreenModal/index.tsx"],"sourcesContent":["'use client'\nimport type { Modal as ModalType } from '@faceless-ui/modal'\n\nimport { Modal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\n\nexport function FullscreenModal(props: Parameters<typeof ModalType>[0]) {\n  const currentDepth = useEditDepth()\n\n  return (\n    <Modal\n      // Fixes https://github.com/payloadcms/payload/issues/13778\n      closeOnBlur={false}\n      {...props}\n      style={{\n        ...(props.style || {}),\n        zIndex: `calc(100 + ${currentDepth || 0} + 1)`,\n      }}\n    />\n  )\n}\n"],"names":["Modal","React","useEditDepth","FullscreenModal","props","currentDepth","closeOnBlur","style","zIndex"],"mappings":"AAAA;;AAGA,SAASA,KAAK,QAAQ,qBAAoB;AAC1C,OAAOC,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,qCAAoC;AAEjE,OAAO,SAASC,gBAAgBC,KAAsC;IACpE,MAAMC,eAAeH;IAErB,qBACE,QAACF;QACC,2DAA2D;QAC3DM,aAAa;QACZ,GAAGF,KAAK;QACTG,OAAO;YACL,GAAIH,MAAMG,KAAK,IAAI,CAAC,CAAC;YACrBC,QAAQ,CAAC,WAAW,EAAEH,gBAAgB,EAAE,KAAK,CAAC;QAChD;;;;;;AAGN"}

package/dist/elements/GenerateConfirmation/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useModal } from '@faceless-ui/modal';
 import React, { useCallback } from 'react';
 import { toast } from 'sonner';
@@ -22,16 +23,53 @@ export function GenerateConfirmation(props) {
         setKey,
         t
     ]);
-    return <React.Fragment>
-      <Button buttonStyle="secondary" onClick={()=>{
-        toggleModal(modalSlug);
-    }} size="small">
-        {t('authentication:generateNewAPIKey')}
-      </Button>
-      <ConfirmationModal body={<Translation elements={{
-        1: ({ children })=><strong>{children}</strong>
-    }} i18nKey="authentication:generatingNewAPIKeyWillInvalidate" t={t}/>} confirmLabel={t('authentication:generate')} heading={t('authentication:confirmGeneration')} modalSlug={modalSlug} onConfirm={handleGenerate}/>
-    </React.Fragment>;
+    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxDEV(Button, {
+                buttonStyle: "secondary",
+                onClick: ()=>{
+                    toggleModal(modalSlug);
+                },
+                size: "small",
+                children: t('authentication:generateNewAPIKey')
+            }, void 0, false, {
+                fileName: "src/elements/GenerateConfirmation/index.tsx",
+                lineNumber: 34,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(ConfirmationModal, {
+                body: /*#__PURE__*/ _jsxDEV(Translation, {
+                    elements: {
+                        1: ({ children })=>/*#__PURE__*/ _jsxDEV("strong", {
+                                children: children
+                            }, void 0, false, {
+                                fileName: "src/elements/GenerateConfirmation/index.tsx",
+                                lineNumber: 47,
+                                columnNumber: 36
+                            }, void 0)
+                    },
+                    i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
+                    t: t
+                }, void 0, false, {
+                    fileName: "src/elements/GenerateConfirmation/index.tsx",
+                    lineNumber: 45,
+                    columnNumber: 11
+                }, void 0),
+                confirmLabel: t('authentication:generate'),
+                heading: t('authentication:confirmGeneration'),
+                modalSlug: modalSlug,
+                onConfirm: handleGenerate
+            }, void 0, false, {
+                fileName: "src/elements/GenerateConfirmation/index.tsx",
+                lineNumber: 43,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/GenerateConfirmation/index.tsx",
+        lineNumber: 33,
+        columnNumber: 5
+    }, this);
 }
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { Translation } from '../Translation/index.js'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport function GenerateConfirmation(props: GenerateConfirmationProps) {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = useCallback(() => {\n    setKey()\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }, [highlightField, setKey, t])\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              1: ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n            t={t}\n          />\n        }\n        confirmLabel={t('authentication:generate')}\n        heading={t('authentication:confirmGeneration')}\n        modalSlug={modalSlug}\n        onConfirm={handleGenerate}\n      />\n    </React.Fragment>\n  )\n}\n"],"names":["useModal","React","useCallback","toast","useDocumentInfo","useTranslation","Button","ConfirmationModal","Translation","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","Fragment","buttonStyle","onClick","size","body","elements","children","strong","i18nKey","confirmLabel","heading","onConfirm"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAC1C,SAASC,KAAK,QAAQ,SAAQ;AAE9B,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,WAAW,QAAQ,0BAAyB;AAOrD,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,cAAc,EAAEC,MAAM,EAAE,GAAGF;IAEnC,MAAM,EAAEG,EAAE,EAAE,GAAGT;IACf,MAAM,EAAEU,WAAW,EAAE,GAAGd;IACxB,MAAM,EAAEe,CAAC,EAAE,GAAGV;IAEd,MAAMW,YAAY,CAAC,sBAAsB,EAAEH,IAAI;IAE/C,MAAMI,iBAAiBf,YAAY;QACjCU;QACAT,MAAMe,OAAO,CAACH,EAAE;QAChBJ,eAAe;IACjB,GAAG;QAACA;QAAgBC;QAAQG;KAAE;IAE9B,QACGd,MAAMkB,SAAS;MACd,CAACb,OACCc,YAAY,YACZC,SAAS;QACPP,YAAYE;IACd,GACAM,KAAK,QACN;QACC,CAACP,EAAE,oCAAoC;MACzC,EAAET,OAAO;MACT,CAACC,kBACCgB,OACGf,YACCgB,UAAU;QACR,GAAG,CAAC,EAAEC,QAAQ,EAAE,IAAMC,QAAQD,WAAWC;IAC3C,GACAC,QAAQ,mDACRZ,GAAGA,MAGPa,cAAcb,EAAE,4BAChBc,SAASd,EAAE,qCACXC,WAAWA,WACXc,WAAWb,iBACX;IACJ,EAAEhB,MAAMkB;AAEZ"}
+{"version":3,"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { Translation } from '../Translation/index.js'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport function GenerateConfirmation(props: GenerateConfirmationProps) {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = useCallback(() => {\n    setKey()\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }, [highlightField, setKey, t])\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              1: ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n            t={t}\n          />\n        }\n        confirmLabel={t('authentication:generate')}\n        heading={t('authentication:confirmGeneration')}\n        modalSlug={modalSlug}\n        onConfirm={handleGenerate}\n      />\n    </React.Fragment>\n  )\n}\n"],"names":["useModal","React","useCallback","toast","useDocumentInfo","useTranslation","Button","ConfirmationModal","Translation","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","Fragment","buttonStyle","onClick","size","body","elements","children","strong","i18nKey","confirmLabel","heading","onConfirm"],"mappings":"AAAA;;AACA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAC1C,SAASC,KAAK,QAAQ,SAAQ;AAE9B,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,WAAW,QAAQ,0BAAyB;AAOrD,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,cAAc,EAAEC,MAAM,EAAE,GAAGF;IAEnC,MAAM,EAAEG,EAAE,EAAE,GAAGT;IACf,MAAM,EAAEU,WAAW,EAAE,GAAGd;IACxB,MAAM,EAAEe,CAAC,EAAE,GAAGV;IAEd,MAAMW,YAAY,CAAC,sBAAsB,EAAEH,IAAI;IAE/C,MAAMI,iBAAiBf,YAAY;QACjCU;QACAT,MAAMe,OAAO,CAACH,EAAE;QAChBJ,eAAe;IACjB,GAAG;QAACA;QAAgBC;QAAQG;KAAE;IAE9B,qBACE,QAACd,MAAMkB,QAAQ;;0BACb,QAACb;gBACCc,aAAY;gBACZC,SAAS;oBACPP,YAAYE;gBACd;gBACAM,MAAK;0BAEJP,EAAE;;;;;;0BAEL,QAACR;gBACCgB,oBACE,QAACf;oBACCgB,UAAU;wBACR,GAAG,CAAC,EAAEC,QAAQ,EAAE,iBAAK,QAACC;0CAAQD;;;;;;oBAChC;oBACAE,SAAQ;oBACRZ,GAAGA;;;;;;gBAGPa,cAAcb,EAAE;gBAChBc,SAASd,EAAE;gBACXC,WAAWA;gBACXc,WAAWb;;;;;;;;;;;;AAInB"}

package/dist/elements/GroupByBuilder/index.js

@@ -1,6 +1,7 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import './index.scss';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { SelectInput } from '../../fields/Select/Input.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
@@ -43,59 +44,117 @@ export const GroupByBuilder = ({ collectionSlug, fields })=>{
     const { query, refineListData } = useListQuery();
     const groupByFieldName = query.groupBy?.replace(/^-/, '');
     const groupByField = reducedFields.find((field)=>field.value === groupByFieldName);
-    return <div className={baseClass}>
-      <div className={`${baseClass}__header`}>
-        <p>
-          {t('general:groupByLabel', {
-        label: ''
-    })}
-        </p>
-        {query.groupBy && <button className={`${baseClass}__clear-button`} id="group-by--reset" onClick={async ()=>{
-        await refineListData({
-            groupBy: ''
-        });
-    }} type="button">
-            {t('general:clear')}
-          </button>}
-      </div>
-      <div className={`${baseClass}__inputs`}>
-        <ReactSelect filterOption={(option, inputValue)=>(option?.data?.plainTextLabel || option.label).toLowerCase().includes(inputValue.toLowerCase())} id="group-by--field-select" isClearable isMulti={false} onChange={async (v)=>{
-        const value = v === null ? undefined : v.value;
-        // value is being cleared
-        if (v === null) {
-            await refineListData({
-                groupBy: '',
-                page: 1
-            });
-        }
-        await refineListData({
-            groupBy: value ? query.groupBy?.startsWith('-') ? `-${value}` : value : undefined,
-            page: 1
-        });
-    }} options={reducedFields.filter((field)=>!field.field.admin.disableGroupBy && field.value !== 'id' && supportedFieldTypes.includes(field.field.type))} value={{
-        label: groupByField?.label || t('general:selectValue'),
-        value: groupByFieldName || ''
-    }}/>
-        <SelectInput id="group-by--sort" isClearable={false} name="direction" onChange={async ({ value })=>{
-        if (!groupByFieldName) {
-            return;
-        }
-        await refineListData({
-            groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
-            page: 1
-        });
-    }} options={[
-        {
-            label: t('general:ascending'),
-            value: 'asc'
-        },
-        {
-            label: t('general:descending'),
-            value: 'desc'
-        }
-    ]} path="direction" readOnly={!groupByFieldName} value={!query.groupBy ? 'asc' : typeof query.groupBy === 'string' ? `${query.groupBy.startsWith('-') ? 'desc' : 'asc'}` : ''}/>
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__header`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("p", {
+                        children: t('general:groupByLabel', {
+                            label: ''
+                        })
+                    }, void 0, false, {
+                        fileName: "src/elements/GroupByBuilder/index.tsx",
+                        lineNumber: 68,
+                        columnNumber: 9
+                    }, this),
+                    query.groupBy && /*#__PURE__*/ _jsxDEV("button", {
+                        className: `${baseClass}__clear-button`,
+                        id: "group-by--reset",
+                        onClick: async ()=>{
+                            await refineListData({
+                                groupBy: ''
+                            });
+                        },
+                        type: "button",
+                        children: t('general:clear')
+                    }, void 0, false, {
+                        fileName: "src/elements/GroupByBuilder/index.tsx",
+                        lineNumber: 74,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/GroupByBuilder/index.tsx",
+                lineNumber: 67,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__inputs`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV(ReactSelect, {
+                        filterOption: (option, inputValue)=>(option?.data?.plainTextLabel || option.label).toLowerCase().includes(inputValue.toLowerCase()),
+                        id: "group-by--field-select",
+                        isClearable: true,
+                        isMulti: false,
+                        onChange: async (v)=>{
+                            const value = v === null ? undefined : v.value;
+                            // value is being cleared
+                            if (v === null) {
+                                await refineListData({
+                                    groupBy: '',
+                                    page: 1
+                                });
+                            }
+                            await refineListData({
+                                groupBy: value ? query.groupBy?.startsWith('-') ? `-${value}` : value : undefined,
+                                page: 1
+                            });
+                        },
+                        options: reducedFields.filter((field)=>!field.field.admin.disableGroupBy && field.value !== 'id' && supportedFieldTypes.includes(field.field.type)),
+                        value: {
+                            label: groupByField?.label || t('general:selectValue'),
+                            value: groupByFieldName || ''
+                        }
+                    }, void 0, false, {
+                        fileName: "src/elements/GroupByBuilder/index.tsx",
+                        lineNumber: 89,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(SelectInput, {
+                        id: "group-by--sort",
+                        isClearable: false,
+                        name: "direction",
+                        onChange: async ({ value })=>{
+                            if (!groupByFieldName) {
+                                return;
+                            }
+                            await refineListData({
+                                groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
+                                page: 1
+                            });
+                        },
+                        options: [
+                            {
+                                label: t('general:ascending'),
+                                value: 'asc'
+                            },
+                            {
+                                label: t('general:descending'),
+                                value: 'desc'
+                            }
+                        ],
+                        path: "direction",
+                        readOnly: !groupByFieldName,
+                        value: !query.groupBy ? 'asc' : typeof query.groupBy === 'string' ? `${query.groupBy.startsWith('-') ? 'desc' : 'asc'}` : ''
+                    }, void 0, false, {
+                        fileName: "src/elements/GroupByBuilder/index.tsx",
+                        lineNumber: 125,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/GroupByBuilder/index.tsx",
+                lineNumber: 88,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/GroupByBuilder/index.tsx",
+        lineNumber: 66,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/GroupByBuilder/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport './index.scss'\n\nimport React, { useMemo } from 'react'\n\nimport { SelectInput } from '../../fields/Select/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  fields: ClientField[]\n}\n\nconst baseClass = 'group-by-builder'\n\n/**\n * Note: Some fields are already omitted from the list of fields:\n * - fields with nested field, e.g. `tabs`, `groups`, etc.\n * - fields that don't affect data, i.e. `row`, `collapsible`, `ui`, etc.\n * So we don't technically need to omit them here, but do anyway.\n * But some remaining fields still need an additional check, e.g. `richText`, etc.\n */\nconst supportedFieldTypes: Field['type'][] = [\n  'text',\n  'textarea',\n  'number',\n  'select',\n  'relationship',\n  'date',\n  'checkbox',\n  'radio',\n  'email',\n  'number',\n  'upload',\n]\n\nexport const GroupByBuilder: React.FC<Props> = ({ collectionSlug, fields }) => {\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n\n  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields\n\n  const reducedFields = useMemo(\n    () =>\n      reduceFieldsToOptions({\n        fieldPermissions,\n        fields,\n        i18n,\n      }),\n    [fields, fieldPermissions, i18n],\n  )\n\n  const { query, refineListData } = useListQuery()\n\n  const groupByFieldName = query.groupBy?.replace(/^-/, '')\n\n  const groupByField = reducedFields.find((field) => field.value === groupByFieldName)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <p>\n          {t('general:groupByLabel', {\n            label: '',\n          })}\n        </p>\n        {query.groupBy && (\n          <button\n            className={`${baseClass}__clear-button`}\n            id=\"group-by--reset\"\n            onClick={async () => {\n              await refineListData({\n                groupBy: '',\n              })\n            }}\n            type=\"button\"\n          >\n            {t('general:clear')}\n          </button>\n        )}\n      </div>\n      <div className={`${baseClass}__inputs`}>\n        <ReactSelect\n          filterOption={(option, inputValue) =>\n            ((option?.data?.plainTextLabel as string) || option.label)\n              .toLowerCase()\n              .includes(inputValue.toLowerCase())\n          }\n          id=\"group-by--field-select\"\n          isClearable\n          isMulti={false}\n          onChange={async (v: { value: string } | null) => {\n            const value = v === null ? undefined : v.value\n\n            // value is being cleared\n            if (v === null) {\n              await refineListData({\n                groupBy: '',\n                page: 1,\n              })\n            }\n\n            await refineListData({\n              groupBy: value ? (query.groupBy?.startsWith('-') ? `-${value}` : value) : undefined,\n              page: 1,\n            })\n          }}\n          options={reducedFields.filter(\n            (field) =>\n              !field.field.admin.disableGroupBy &&\n              field.value !== 'id' &&\n              supportedFieldTypes.includes(field.field.type),\n          )}\n          value={{\n            label: groupByField?.label || t('general:selectValue'),\n            value: groupByFieldName || '',\n          }}\n        />\n        <SelectInput\n          id=\"group-by--sort\"\n          isClearable={false}\n          name=\"direction\"\n          onChange={async ({ value }: { value: string }) => {\n            if (!groupByFieldName) {\n              return\n            }\n\n            await refineListData({\n              groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n              page: 1,\n            })\n          }}\n          options={[\n            { label: t('general:ascending'), value: 'asc' },\n            { label: t('general:descending'), value: 'desc' },\n          ]}\n          path=\"direction\"\n          readOnly={!groupByFieldName}\n          value={\n            !query.groupBy\n              ? 'asc'\n              : typeof query.groupBy === 'string'\n                ? `${query.groupBy.startsWith('-') ? 'desc' : 'asc'}`\n                : ''\n          }\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["useMemo","SelectInput","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","ReactSelect","baseClass","supportedFieldTypes","GroupByBuilder","collectionSlug","fields","i18n","t","permissions","fieldPermissions","collections","reducedFields","query","refineListData","groupByFieldName","groupBy","replace","groupByField","find","field","value","div","className","p","label","button","id","onClick","type","filterOption","option","inputValue","data","plainTextLabel","toLowerCase","includes","isClearable","isMulti","onChange","v","undefined","page","startsWith","options","filter","admin","disableGroupBy","name","path","readOnly"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/GroupByBuilder/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport './index.scss'\n\nimport React, { useMemo } from 'react'\n\nimport { SelectInput } from '../../fields/Select/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  fields: ClientField[]\n}\n\nconst baseClass = 'group-by-builder'\n\n/**\n * Note: Some fields are already omitted from the list of fields:\n * - fields with nested field, e.g. `tabs`, `groups`, etc.\n * - fields that don't affect data, i.e. `row`, `collapsible`, `ui`, etc.\n * So we don't technically need to omit them here, but do anyway.\n * But some remaining fields still need an additional check, e.g. `richText`, etc.\n */\nconst supportedFieldTypes: Field['type'][] = [\n  'text',\n  'textarea',\n  'number',\n  'select',\n  'relationship',\n  'date',\n  'checkbox',\n  'radio',\n  'email',\n  'number',\n  'upload',\n]\n\nexport const GroupByBuilder: React.FC<Props> = ({ collectionSlug, fields }) => {\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n\n  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields\n\n  const reducedFields = useMemo(\n    () =>\n      reduceFieldsToOptions({\n        fieldPermissions,\n        fields,\n        i18n,\n      }),\n    [fields, fieldPermissions, i18n],\n  )\n\n  const { query, refineListData } = useListQuery()\n\n  const groupByFieldName = query.groupBy?.replace(/^-/, '')\n\n  const groupByField = reducedFields.find((field) => field.value === groupByFieldName)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <p>\n          {t('general:groupByLabel', {\n            label: '',\n          })}\n        </p>\n        {query.groupBy && (\n          <button\n            className={`${baseClass}__clear-button`}\n            id=\"group-by--reset\"\n            onClick={async () => {\n              await refineListData({\n                groupBy: '',\n              })\n            }}\n            type=\"button\"\n          >\n            {t('general:clear')}\n          </button>\n        )}\n      </div>\n      <div className={`${baseClass}__inputs`}>\n        <ReactSelect\n          filterOption={(option, inputValue) =>\n            ((option?.data?.plainTextLabel as string) || option.label)\n              .toLowerCase()\n              .includes(inputValue.toLowerCase())\n          }\n          id=\"group-by--field-select\"\n          isClearable\n          isMulti={false}\n          onChange={async (v: { value: string } | null) => {\n            const value = v === null ? undefined : v.value\n\n            // value is being cleared\n            if (v === null) {\n              await refineListData({\n                groupBy: '',\n                page: 1,\n              })\n            }\n\n            await refineListData({\n              groupBy: value ? (query.groupBy?.startsWith('-') ? `-${value}` : value) : undefined,\n              page: 1,\n            })\n          }}\n          options={reducedFields.filter(\n            (field) =>\n              !field.field.admin.disableGroupBy &&\n              field.value !== 'id' &&\n              supportedFieldTypes.includes(field.field.type),\n          )}\n          value={{\n            label: groupByField?.label || t('general:selectValue'),\n            value: groupByFieldName || '',\n          }}\n        />\n        <SelectInput\n          id=\"group-by--sort\"\n          isClearable={false}\n          name=\"direction\"\n          onChange={async ({ value }: { value: string }) => {\n            if (!groupByFieldName) {\n              return\n            }\n\n            await refineListData({\n              groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n              page: 1,\n            })\n          }}\n          options={[\n            { label: t('general:ascending'), value: 'asc' },\n            { label: t('general:descending'), value: 'desc' },\n          ]}\n          path=\"direction\"\n          readOnly={!groupByFieldName}\n          value={\n            !query.groupBy\n              ? 'asc'\n              : typeof query.groupBy === 'string'\n                ? `${query.groupBy.startsWith('-') ? 'desc' : 'asc'}`\n                : ''\n          }\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useMemo","SelectInput","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","ReactSelect","baseClass","supportedFieldTypes","GroupByBuilder","collectionSlug","fields","i18n","t","permissions","fieldPermissions","collections","reducedFields","query","refineListData","groupByFieldName","groupBy","replace","groupByField","find","field","value","div","className","p","label","button","id","onClick","type","filterOption","option","inputValue","data","plainTextLabel","toLowerCase","includes","isClearable","isMulti","onChange","v","undefined","page","startsWith","options","filter","admin","disableGroupBy","name","path","readOnly"],"mappings":"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"}

package/dist/elements/Gutter/index.js

@@ -1,20 +1,28 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import './index.scss';
 const baseClass = 'gutter';
 export const Gutter = (props)=>{
     const { children, className, left = true, negativeLeft = false, negativeRight = false, ref, right = true } = props;
     const shouldPadLeft = left && !negativeLeft;
     const shouldPadRight = right && !negativeRight;
-    return <div className={[
-        baseClass,
-        shouldPadLeft && `${baseClass}--left`,
-        shouldPadRight && `${baseClass}--right`,
-        negativeLeft && `${baseClass}--negative-left`,
-        negativeRight && `${baseClass}--negative-right`,
-        className
-    ].filter(Boolean).join(' ')} ref={ref}>
-      {children}
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            shouldPadLeft && `${baseClass}--left`,
+            shouldPadRight && `${baseClass}--right`,
+            negativeLeft && `${baseClass}--negative-left`,
+            negativeRight && `${baseClass}--negative-right`,
+            className
+        ].filter(Boolean).join(' '),
+        ref: ref,
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/Gutter/index.tsx",
+        lineNumber: 33,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","div","filter","Boolean","join"],"mappings":"AAAA;AAGA,OAAO,eAAc;AAYrB,MAAMA,YAAY;AAElB,OAAO,MAAMC,SAAgC,CAACC;IAC5C,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,IAAI,EACXC,eAAe,KAAK,EACpBC,gBAAgB,KAAK,EACrBC,GAAG,EACHC,QAAQ,IAAI,EACb,GAAGP;IAEJ,MAAMQ,gBAAgBL,QAAQ,CAACC;IAC/B,MAAMK,iBAAiBF,SAAS,CAACF;IAEjC,QACGK,IACCR,WAAW;QACTJ;QACAU,iBAAiB,GAAGV,UAAU,MAAM,CAAC;QACrCW,kBAAkB,GAAGX,UAAU,OAAO,CAAC;QACvCM,gBAAgB,GAAGN,UAAU,eAAe,CAAC;QAC7CO,iBAAiB,GAAGP,UAAU,gBAAgB,CAAC;QAC/CI;KACD,CACES,MAAM,CAACC,SACPC,IAAI,CAAC,MACRP,KAAKA,KACN;MACC,CAACL,SAAS;IACZ,EAAES;AAEN,EAAC"}
+{"version":3,"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","div","filter","Boolean","join"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAYrB,MAAMC,YAAY;AAElB,OAAO,MAAMC,SAAgC,CAACC;IAC5C,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,IAAI,EACXC,eAAe,KAAK,EACpBC,gBAAgB,KAAK,EACrBC,GAAG,EACHC,QAAQ,IAAI,EACb,GAAGP;IAEJ,MAAMQ,gBAAgBL,QAAQ,CAACC;IAC/B,MAAMK,iBAAiBF,SAAS,CAACF;IAEjC,qBACE,QAACK;QACCR,WAAW;YACTJ;YACAU,iBAAiB,GAAGV,UAAU,MAAM,CAAC;YACrCW,kBAAkB,GAAGX,UAAU,OAAO,CAAC;YACvCM,gBAAgB,GAAGN,UAAU,eAAe,CAAC;YAC7CO,iBAAiB,GAAGP,UAAU,gBAAgB,CAAC;YAC/CI;SACD,CACES,MAAM,CAACC,SACPC,IAAI,CAAC;QACRP,KAAKA;kBAEJL;;;;;;AAGP,EAAC"}

package/dist/elements/HTMLDiff/index.js

@@ -1,3 +1,5 @@
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { HtmlDiff } from './diff/index.js';
 import './index.scss';
 const baseClass = 'html-diff';
@@ -6,12 +8,26 @@ export const getHTMLDiffComponents = ({ fromHTML, toHTML, tokenizeByCharacter })
         tokenizeByCharacter
     });
     const [oldHTML, newHTML] = diffHTML.getSideBySideContents();
-    const From = oldHTML ? <div className={`${baseClass}__diff-old html-diff`} dangerouslySetInnerHTML={{
-        __html: oldHTML
-    }}/> : null;
-    const To = newHTML ? <div className={`${baseClass}__diff-new html-diff`} dangerouslySetInnerHTML={{
-        __html: newHTML
-    }}/> : null;
+    const From = oldHTML ? /*#__PURE__*/ _jsxDEV("div", {
+        className: `${baseClass}__diff-old html-diff`,
+        dangerouslySetInnerHTML: {
+            __html: oldHTML
+        }
+    }, void 0, false, {
+        fileName: "src/elements/HTMLDiff/index.tsx",
+        lineNumber: 27,
+        columnNumber: 5
+    }, this) : null;
+    const To = newHTML ? /*#__PURE__*/ _jsxDEV("div", {
+        className: `${baseClass}__diff-new html-diff`,
+        dangerouslySetInnerHTML: {
+            __html: newHTML
+        }
+    }, void 0, false, {
+        fileName: "src/elements/HTMLDiff/index.tsx",
+        lineNumber: 34,
+        columnNumber: 5
+    }, this) : null;
     return {
         From,
         To

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/HTMLDiff/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HtmlDiff } from './diff/index.js'\nimport './index.scss'\n\nconst baseClass = 'html-diff'\n\nexport const getHTMLDiffComponents = ({\n  fromHTML,\n  toHTML,\n  tokenizeByCharacter,\n}: {\n  fromHTML: string\n  toHTML: string\n  tokenizeByCharacter?: boolean\n}): {\n  From: React.ReactNode\n  To: React.ReactNode\n} => {\n  const diffHTML = new HtmlDiff(fromHTML, toHTML, {\n    tokenizeByCharacter,\n  })\n\n  const [oldHTML, newHTML] = diffHTML.getSideBySideContents()\n\n  const From = oldHTML ? (\n    <div\n      className={`${baseClass}__diff-old html-diff`}\n      dangerouslySetInnerHTML={{ __html: oldHTML }}\n    />\n  ) : null\n\n  const To = newHTML ? (\n    <div\n      className={`${baseClass}__diff-new html-diff`}\n      dangerouslySetInnerHTML={{ __html: newHTML }}\n    />\n  ) : null\n\n  return { From, To }\n}\n"],"names":["HtmlDiff","baseClass","getHTMLDiffComponents","fromHTML","toHTML","tokenizeByCharacter","diffHTML","oldHTML","newHTML","getSideBySideContents","From","div","className","dangerouslySetInnerHTML","__html","To"],"mappings":"AAEA,SAASA,QAAQ,QAAQ,kBAAiB;AAC1C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,QAAQ,EACRC,MAAM,EACNC,mBAAmB,EAKpB;IAIC,MAAMC,WAAW,IAAIN,SAASG,UAAUC,QAAQ;QAC9CC;IACF;IAEA,MAAM,CAACE,SAASC,QAAQ,GAAGF,SAASG,qBAAqB;IAEzD,MAAMC,OAAOH,WACVI,IACCC,WAAW,GAAGX,UAAU,oBAAoB,CAAC,EAC7CY,yBAAyB;QAAEC,QAAQP;IAAQ,OAE3C;IAEJ,MAAMQ,KAAKP,WACRG,IACCC,WAAW,GAAGX,UAAU,oBAAoB,CAAC,EAC7CY,yBAAyB;QAAEC,QAAQN;IAAQ,OAE3C;IAEJ,OAAO;QAAEE;QAAMK;IAAG;AACpB,EAAC"}
+{"version":3,"sources":["../../../src/elements/HTMLDiff/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HtmlDiff } from './diff/index.js'\nimport './index.scss'\n\nconst baseClass = 'html-diff'\n\nexport const getHTMLDiffComponents = ({\n  fromHTML,\n  toHTML,\n  tokenizeByCharacter,\n}: {\n  fromHTML: string\n  toHTML: string\n  tokenizeByCharacter?: boolean\n}): {\n  From: React.ReactNode\n  To: React.ReactNode\n} => {\n  const diffHTML = new HtmlDiff(fromHTML, toHTML, {\n    tokenizeByCharacter,\n  })\n\n  const [oldHTML, newHTML] = diffHTML.getSideBySideContents()\n\n  const From = oldHTML ? (\n    <div\n      className={`${baseClass}__diff-old html-diff`}\n      dangerouslySetInnerHTML={{ __html: oldHTML }}\n    />\n  ) : null\n\n  const To = newHTML ? (\n    <div\n      className={`${baseClass}__diff-new html-diff`}\n      dangerouslySetInnerHTML={{ __html: newHTML }}\n    />\n  ) : null\n\n  return { From, To }\n}\n"],"names":["React","HtmlDiff","baseClass","getHTMLDiffComponents","fromHTML","toHTML","tokenizeByCharacter","diffHTML","oldHTML","newHTML","getSideBySideContents","From","div","className","dangerouslySetInnerHTML","__html","To"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,QAAQ,QAAQ,kBAAiB;AAC1C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,QAAQ,EACRC,MAAM,EACNC,mBAAmB,EAKpB;IAIC,MAAMC,WAAW,IAAIN,SAASG,UAAUC,QAAQ;QAC9CC;IACF;IAEA,MAAM,CAACE,SAASC,QAAQ,GAAGF,SAASG,qBAAqB;IAEzD,MAAMC,OAAOH,wBACX,QAACI;QACCC,WAAW,GAAGX,UAAU,oBAAoB,CAAC;QAC7CY,yBAAyB;YAAEC,QAAQP;QAAQ;;;;;eAE3C;IAEJ,MAAMQ,KAAKP,wBACT,QAACG;QACCC,WAAW,GAAGX,UAAU,oBAAoB,CAAC;QAC7CY,yBAAyB;YAAEC,QAAQN;QAAQ;;;;;eAE3C;IAEJ,OAAO;QAAEE;QAAMK;IAAG;AACpB,EAAC"}