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

package/dist/elements/SelectAll/index.js

@@ -1,4 +1,6 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { CheckboxInput } from '../../fields/Checkbox/Input.js';
 import { SelectAllStatus, useSelection } from '../../providers/Selection/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -7,10 +9,22 @@ const baseClass = 'select-all';
 export const SelectAll = ()=>{
     const { selectAll, toggleAll } = useSelection();
     const { i18n } = useTranslation();
-    return <CheckboxInput aria-label={selectAll === SelectAllStatus.None ? i18n.t('general:selectAllRows') : i18n.t('general:deselectAllRows')} checked={selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable} className={[
-        baseClass,
-        `${baseClass}__checkbox`
-    ].join(' ')} id="select-all" name="select-all" onToggle={()=>toggleAll()} partialChecked={selectAll === SelectAllStatus.Some}/>;
+    return /*#__PURE__*/ _jsxDEV(CheckboxInput, {
+        "aria-label": selectAll === SelectAllStatus.None ? i18n.t('general:selectAllRows') : i18n.t('general:deselectAllRows'),
+        checked: selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable,
+        className: [
+            baseClass,
+            `${baseClass}__checkbox`
+        ].join(' '),
+        id: "select-all",
+        name: "select-all",
+        onToggle: ()=>toggleAll(),
+        partialChecked: selectAll === SelectAllStatus.Some
+    }, void 0, false, {
+        fileName: "src/elements/SelectAll/index.tsx",
+        lineNumber: 17,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SelectAll/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-all'\n\nexport const SelectAll: React.FC = () => {\n  const { selectAll, toggleAll } = useSelection()\n  const { i18n } = useTranslation()\n\n  return (\n    <CheckboxInput\n      aria-label={\n        selectAll === SelectAllStatus.None\n          ? i18n.t('general:selectAllRows')\n          : i18n.t('general:deselectAllRows')\n      }\n      checked={\n        selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable\n      }\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      id=\"select-all\"\n      name=\"select-all\"\n      onToggle={() => toggleAll()}\n      partialChecked={selectAll === SelectAllStatus.Some}\n    />\n  )\n}\n"],"names":["CheckboxInput","SelectAllStatus","useSelection","useTranslation","baseClass","SelectAll","selectAll","toggleAll","i18n","aria-label","None","t","checked","AllInPage","AllAvailable","className","join","id","name","onToggle","partialChecked","Some"],"mappings":"AAAA;AAIA,SAASA,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAAsB;IACjC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGL;IACjC,MAAM,EAAEM,IAAI,EAAE,GAAGL;IAEjB,QACGH,cACCS,YACEH,cAAcL,gBAAgBS,IAAI,GAC9BF,KAAKG,CAAC,CAAC,2BACPH,KAAKG,CAAC,CAAC,4BAEbC,SACEN,cAAcL,gBAAgBY,SAAS,IAAIP,cAAcL,gBAAgBa,YAAY,EAEvFC,WAAW;QAACX;QAAW,GAAGA,UAAU,UAAU,CAAC;KAAC,CAACY,IAAI,CAAC,MACtDC,GAAG,aACHC,KAAK,aACLC,UAAU,IAAMZ,aAChBa,gBAAgBd,cAAcL,gBAAgBoB,IAAI;AAGxD,EAAC"}
+{"version":3,"sources":["../../../src/elements/SelectAll/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-all'\n\nexport const SelectAll: React.FC = () => {\n  const { selectAll, toggleAll } = useSelection()\n  const { i18n } = useTranslation()\n\n  return (\n    <CheckboxInput\n      aria-label={\n        selectAll === SelectAllStatus.None\n          ? i18n.t('general:selectAllRows')\n          : i18n.t('general:deselectAllRows')\n      }\n      checked={\n        selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable\n      }\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      id=\"select-all\"\n      name=\"select-all\"\n      onToggle={() => toggleAll()}\n      partialChecked={selectAll === SelectAllStatus.Some}\n    />\n  )\n}\n"],"names":["React","CheckboxInput","SelectAllStatus","useSelection","useTranslation","baseClass","SelectAll","selectAll","toggleAll","i18n","aria-label","None","t","checked","AllInPage","AllAvailable","className","join","id","name","onToggle","partialChecked","Some"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAAsB;IACjC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGL;IACjC,MAAM,EAAEM,IAAI,EAAE,GAAGL;IAEjB,qBACE,QAACH;QACCS,cACEH,cAAcL,gBAAgBS,IAAI,GAC9BF,KAAKG,CAAC,CAAC,2BACPH,KAAKG,CAAC,CAAC;QAEbC,SACEN,cAAcL,gBAAgBY,SAAS,IAAIP,cAAcL,gBAAgBa,YAAY;QAEvFC,WAAW;YAACX;YAAW,GAAGA,UAAU,UAAU,CAAC;SAAC,CAACY,IAAI,CAAC;QACtDC,IAAG;QACHC,MAAK;QACLC,UAAU,IAAMZ;QAChBa,gBAAgBd,cAAcL,gBAAgBoB,IAAI;;;;;;AAGxD,EAAC"}

package/dist/elements/SelectMany/index.js

@@ -1,3 +1,5 @@
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { useSelection } from '../../providers/Selection/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Pill } from '../Pill/index.js';
@@ -8,13 +10,24 @@ export const SelectMany = (props)=>{
     if (!selected || !count) {
         return null;
     }
-    return <Pill onClick={()=>{
-        if (typeof onClick === 'function') {
-            onClick(selected);
-        }
-    }} pillStyle="white" size="small">
-      {t('general:select')} {count}
-    </Pill>;
+    return /*#__PURE__*/ _jsxDEV(Pill, {
+        onClick: ()=>{
+            if (typeof onClick === 'function') {
+                onClick(selected);
+            }
+        },
+        pillStyle: "white",
+        size: "small",
+        children: [
+            t('general:select'),
+            " ",
+            count
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/SelectMany/index.tsx",
+        lineNumber: 20,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SelectMany/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Pill } from '../Pill/index.js'\n\nexport const SelectMany: React.FC<{\n  onClick?: (ids: ReturnType<typeof useSelection>['selected']) => void\n}> = (props) => {\n  const { onClick } = props\n\n  const { count, selected } = useSelection()\n  const { t } = useTranslation()\n\n  if (!selected || !count) {\n    return null\n  }\n\n  return (\n    <Pill\n      onClick={() => {\n        if (typeof onClick === 'function') {\n          onClick(selected)\n        }\n      }}\n      pillStyle=\"white\"\n      size=\"small\"\n    >\n      {t('general:select')} {count}\n    </Pill>\n  )\n}\n"],"names":["useSelection","useTranslation","Pill","SelectMany","props","onClick","count","selected","t","pillStyle","size"],"mappings":"AAEA,SAASA,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,IAAI,QAAQ,mBAAkB;AAEvC,OAAO,MAAMC,aAER,CAACC;IACJ,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,MAAM,EAAEE,KAAK,EAAEC,QAAQ,EAAE,GAAGP;IAC5B,MAAM,EAAEQ,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,YAAY,CAACD,OAAO;QACvB,OAAO;IACT;IAEA,QACGJ,KACCG,SAAS;QACP,IAAI,OAAOA,YAAY,YAAY;YACjCA,QAAQE;QACV;IACF,GACAE,UAAU,QACVC,KAAK,QACN;MACC,CAACF,EAAE,kBAAkB,CAAC,CAACF,MAAM;IAC/B,EAAEJ;AAEN,EAAC"}
+{"version":3,"sources":["../../../src/elements/SelectMany/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Pill } from '../Pill/index.js'\n\nexport const SelectMany: React.FC<{\n  onClick?: (ids: ReturnType<typeof useSelection>['selected']) => void\n}> = (props) => {\n  const { onClick } = props\n\n  const { count, selected } = useSelection()\n  const { t } = useTranslation()\n\n  if (!selected || !count) {\n    return null\n  }\n\n  return (\n    <Pill\n      onClick={() => {\n        if (typeof onClick === 'function') {\n          onClick(selected)\n        }\n      }}\n      pillStyle=\"white\"\n      size=\"small\"\n    >\n      {t('general:select')} {count}\n    </Pill>\n  )\n}\n"],"names":["React","useSelection","useTranslation","Pill","SelectMany","props","onClick","count","selected","t","pillStyle","size"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,IAAI,QAAQ,mBAAkB;AAEvC,OAAO,MAAMC,aAER,CAACC;IACJ,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,MAAM,EAAEE,KAAK,EAAEC,QAAQ,EAAE,GAAGP;IAC5B,MAAM,EAAEQ,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,YAAY,CAACD,OAAO;QACvB,OAAO;IACT;IAEA,qBACE,QAACJ;QACCG,SAAS;YACP,IAAI,OAAOA,YAAY,YAAY;gBACjCA,QAAQE;YACV;QACF;QACAE,WAAU;QACVC,MAAK;;YAEJF,EAAE;YAAkB;YAAEF;;;;;;;AAG7B,EAAC"}

package/dist/elements/SelectRow/index.js

@@ -1,4 +1,6 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { CheckboxInput } from '../../fields/Checkbox/Input.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useSelection } from '../../providers/Selection/index.js';
@@ -11,12 +13,26 @@ export const SelectRow = ({ rowData })=>{
     const { _isLocked, _userEditing } = rowData || {};
     const documentIsLocked = _isLocked && _userEditing;
     if (documentIsLocked && _userEditing.id !== user?.id) {
-        return <Locked user={_userEditing}/>;
+        return /*#__PURE__*/ _jsxDEV(Locked, {
+            user: _userEditing
+        }, void 0, false, {
+            fileName: "src/elements/SelectRow/index.tsx",
+            lineNumber: 28,
+            columnNumber: 12
+        }, this);
     }
-    return <CheckboxInput checked={Boolean(selected.get(rowData.id))} className={[
-        baseClass,
-        `${baseClass}__checkbox`
-    ].join(' ')} onToggle={()=>setSelection(rowData.id)}/>;
+    return /*#__PURE__*/ _jsxDEV(CheckboxInput, {
+        checked: Boolean(selected.get(rowData.id)),
+        className: [
+            baseClass,
+            `${baseClass}__checkbox`
+        ].join(' '),
+        onToggle: ()=>setSelection(rowData.id)
+    }, void 0, false, {
+        fileName: "src/elements/SelectRow/index.tsx",
+        lineNumber: 32,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientUser } from 'payload'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { Locked } from '../Locked/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC<{\n  rowData: {\n    _isLocked: boolean\n    _userEditing: ClientUser\n    id: string\n  }\n}> = ({ rowData }) => {\n  const { user } = useAuth()\n  const { selected, setSelection } = useSelection()\n  const { _isLocked, _userEditing } = rowData || {}\n\n  const documentIsLocked = _isLocked && _userEditing\n\n  if (documentIsLocked && _userEditing.id !== user?.id) {\n    return <Locked user={_userEditing} />\n  }\n\n  return (\n    <CheckboxInput\n      checked={Boolean(selected.get(rowData.id))}\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      onToggle={() => setSelection(rowData.id)}\n    />\n  )\n}\n"],"names":["CheckboxInput","useAuth","useSelection","Locked","baseClass","SelectRow","rowData","user","selected","setSelection","_isLocked","_userEditing","documentIsLocked","id","checked","Boolean","get","className","join","onToggle"],"mappings":"AAAA;AAKA,SAASA,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,OAAO,QAAQ,gCAA+B;AACvD,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAMR,CAAC,EAAEC,OAAO,EAAE;IACf,MAAM,EAAEC,IAAI,EAAE,GAAGN;IACjB,MAAM,EAAEO,QAAQ,EAAEC,YAAY,EAAE,GAAGP;IACnC,MAAM,EAAEQ,SAAS,EAAEC,YAAY,EAAE,GAAGL,WAAW,CAAC;IAEhD,MAAMM,mBAAmBF,aAAaC;IAEtC,IAAIC,oBAAoBD,aAAaE,EAAE,KAAKN,MAAMM,IAAI;QACpD,QAAQV,OAAOI,MAAMI;IACvB;IAEA,QACGX,cACCc,SAASC,QAAQP,SAASQ,GAAG,CAACV,QAAQO,EAAE,IACxCI,WAAW;QAACb;QAAW,GAAGA,UAAU,UAAU,CAAC;KAAC,CAACc,IAAI,CAAC,MACtDC,UAAU,IAAMV,aAAaH,QAAQO,EAAE;AAG7C,EAAC"}
+{"version":3,"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientUser } from 'payload'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { Locked } from '../Locked/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC<{\n  rowData: {\n    _isLocked: boolean\n    _userEditing: ClientUser\n    id: string\n  }\n}> = ({ rowData }) => {\n  const { user } = useAuth()\n  const { selected, setSelection } = useSelection()\n  const { _isLocked, _userEditing } = rowData || {}\n\n  const documentIsLocked = _isLocked && _userEditing\n\n  if (documentIsLocked && _userEditing.id !== user?.id) {\n    return <Locked user={_userEditing} />\n  }\n\n  return (\n    <CheckboxInput\n      checked={Boolean(selected.get(rowData.id))}\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      onToggle={() => setSelection(rowData.id)}\n    />\n  )\n}\n"],"names":["React","CheckboxInput","useAuth","useSelection","Locked","baseClass","SelectRow","rowData","user","selected","setSelection","_isLocked","_userEditing","documentIsLocked","id","checked","Boolean","get","className","join","onToggle"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,OAAO,QAAQ,gCAA+B;AACvD,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAMR,CAAC,EAAEC,OAAO,EAAE;IACf,MAAM,EAAEC,IAAI,EAAE,GAAGN;IACjB,MAAM,EAAEO,QAAQ,EAAEC,YAAY,EAAE,GAAGP;IACnC,MAAM,EAAEQ,SAAS,EAAEC,YAAY,EAAE,GAAGL,WAAW,CAAC;IAEhD,MAAMM,mBAAmBF,aAAaC;IAEtC,IAAIC,oBAAoBD,aAAaE,EAAE,KAAKN,MAAMM,IAAI;QACpD,qBAAO,QAACV;YAAOI,MAAMI;;;;;;IACvB;IAEA,qBACE,QAACX;QACCc,SAASC,QAAQP,SAASQ,GAAG,CAACV,QAAQO,EAAE;QACxCI,WAAW;YAACb;YAAW,GAAGA,UAAU,UAAU,CAAC;SAAC,CAACc,IAAI,CAAC;QACtDC,UAAU,IAAMV,aAAaH,QAAQO,EAAE;;;;;;AAG7C,EAAC"}

package/dist/elements/ShimmerEffect/index.js

@@ -1,18 +1,33 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import * as React from 'react';
 import { useDelay } from '../../hooks/useDelay.js';
 import './index.scss';
 export const ShimmerEffect = ({ animationDelay = '0ms', className, disableInlineStyles = false, height = '60px', width = '100%' })=>{
-    return <div className={[
-        'shimmer-effect',
-        className
-    ].filter(Boolean).join(' ')} style={{
-        height: !disableInlineStyles && (typeof height === 'number' ? `${height}px` : height),
-        width: !disableInlineStyles && (typeof width === 'number' ? `${width}px` : width)
-    }}>
-      <div className="shimmer-effect__shine" style={{
-        animationDelay
-    }}/>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            'shimmer-effect',
+            className
+        ].filter(Boolean).join(' '),
+        style: {
+            height: !disableInlineStyles && (typeof height === 'number' ? `${height}px` : height),
+            width: !disableInlineStyles && (typeof width === 'number' ? `${width}px` : width)
+        },
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            className: "shimmer-effect__shine",
+            style: {
+                animationDelay
+            }
+        }, void 0, false, {
+            fileName: "src/elements/ShimmerEffect/index.tsx",
+            lineNumber: 30,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/ShimmerEffect/index.tsx",
+        lineNumber: 23,
+        columnNumber: 5
+    }, this);
 };
 export const StaggeredShimmers = ({ className, count, height, renderDelay = 500, shimmerDelay = 25, shimmerItemClassName, width })=>{
     const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay;
@@ -20,13 +35,31 @@ export const StaggeredShimmers = ({ className, count, height, renderDelay = 500,
     if (!hasDelayed) {
         return null;
     }
-    return <div className={className}>
-      {[
-        ...Array(count)
-    ].map((_, i)=><div className={shimmerItemClassName} key={i}>
-          <ShimmerEffect animationDelay={`calc(${i} * ${shimmerDelayToPass})`} height={height} width={width}/>
-        </div>)}
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: className,
+        children: [
+            ...Array(count)
+        ].map((_, i)=>/*#__PURE__*/ _jsxDEV("div", {
+                className: shimmerItemClassName,
+                children: /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
+                    animationDelay: `calc(${i} * ${shimmerDelayToPass})`,
+                    height: height,
+                    width: width
+                }, void 0, false, {
+                    fileName: "src/elements/ShimmerEffect/index.tsx",
+                    lineNumber: 70,
+                    columnNumber: 11
+                }, this)
+            }, i, false, {
+                fileName: "src/elements/ShimmerEffect/index.tsx",
+                lineNumber: 69,
+                columnNumber: 9
+            }, this))
+    }, void 0, false, {
+        fileName: "src/elements/ShimmerEffect/index.tsx",
+        lineNumber: 67,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n  readonly animationDelay?: string\n  readonly className?: string\n  readonly disableInlineStyles?: boolean\n  readonly height?: number | string\n  readonly width?: number | string\n}\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n  animationDelay = '0ms',\n  className,\n  disableInlineStyles = false,\n  height = '60px',\n  width = '100%',\n}) => {\n  return (\n    <div\n      className={['shimmer-effect', className].filter(Boolean).join(' ')}\n      style={{\n        height: !disableInlineStyles && (typeof height === 'number' ? `${height}px` : height),\n        width: !disableInlineStyles && (typeof width === 'number' ? `${width}px` : width),\n      }}\n    >\n      <div\n        className=\"shimmer-effect__shine\"\n        style={{\n          animationDelay,\n        }}\n      />\n    </div>\n  )\n}\n\nexport type StaggeredShimmersProps = {\n  className?: string\n  count: number\n  height?: number | string\n  renderDelay?: number\n  shimmerDelay?: number | string\n  shimmerItemClassName?: string\n  width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n  className,\n  count,\n  height,\n  renderDelay = 500,\n  shimmerDelay = 25,\n  shimmerItemClassName,\n  width,\n}) => {\n  const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n  const [hasDelayed] = useDelay(renderDelay, true)\n\n  if (!hasDelayed) {\n    return null\n  }\n\n  return (\n    <div className={className}>\n      {[...Array(count)].map((_, i) => (\n        <div className={shimmerItemClassName} key={i}>\n          <ShimmerEffect\n            animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n            height={height}\n            width={width}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["useDelay","ShimmerEffect","animationDelay","className","disableInlineStyles","height","width","div","filter","Boolean","join","style","StaggeredShimmers","count","renderDelay","shimmerDelay","shimmerItemClassName","shimmerDelayToPass","hasDelayed","Array","map","_","i","key"],"mappings":"AAAA;AAGA,SAASA,QAAQ,QAAQ,0BAAyB;AAClD,OAAO,eAAc;AAUrB,OAAO,MAAMC,gBAA8C,CAAC,EAC1DC,iBAAiB,KAAK,EACtBC,SAAS,EACTC,sBAAsB,KAAK,EAC3BC,SAAS,MAAM,EACfC,QAAQ,MAAM,EACf;IACC,QACGC,IACCJ,WAAW;QAAC;QAAkBA;KAAU,CAACK,MAAM,CAACC,SAASC,IAAI,CAAC,MAC9DC,OAAO;QACLN,QAAQ,CAACD,uBAAwB,CAAA,OAAOC,WAAW,WAAW,GAAGA,OAAO,EAAE,CAAC,GAAGA,MAAK;QACnFC,OAAO,CAACF,uBAAwB,CAAA,OAAOE,UAAU,WAAW,GAAGA,MAAM,EAAE,CAAC,GAAGA,KAAI;IACjF,GACD;MACC,CAACC,IACCJ,UAAU,wBACVQ,OAAO;QACLT;IACF,IACA;IACJ,EAAEK;AAEN,EAAC;AAYD,OAAO,MAAMK,oBAAsD,CAAC,EAClET,SAAS,EACTU,KAAK,EACLR,MAAM,EACNS,cAAc,GAAG,EACjBC,eAAe,EAAE,EACjBC,oBAAoB,EACpBV,KAAK,EACN;IACC,MAAMW,qBAAqB,OAAOF,iBAAiB,WAAW,GAAGA,aAAa,EAAE,CAAC,GAAGA;IACpF,MAAM,CAACG,WAAW,GAAGlB,SAASc,aAAa;IAE3C,IAAI,CAACI,YAAY;QACf,OAAO;IACT;IAEA,QACGX,IAAIJ,WAAWA,WAAW;MACzB,CAAC;WAAIgB,MAAMN;KAAO,CAACO,GAAG,CAAC,CAACC,GAAGC,KACxBf,IAAIJ,WAAWa,sBAAsBO,KAAKD,GAAG;UAC5C,CAACrB,cACCC,gBAAgB,CAAC,KAAK,EAAEoB,EAAE,GAAG,EAAEL,mBAAmB,CAAC,CAAC,EACpDZ,QAAQA,QACRC,OAAOA,QACP;QACJ,EAAEC,MACD;IACL,EAAEA;AAEN,EAAC"}
+{"version":3,"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n  readonly animationDelay?: string\n  readonly className?: string\n  readonly disableInlineStyles?: boolean\n  readonly height?: number | string\n  readonly width?: number | string\n}\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n  animationDelay = '0ms',\n  className,\n  disableInlineStyles = false,\n  height = '60px',\n  width = '100%',\n}) => {\n  return (\n    <div\n      className={['shimmer-effect', className].filter(Boolean).join(' ')}\n      style={{\n        height: !disableInlineStyles && (typeof height === 'number' ? `${height}px` : height),\n        width: !disableInlineStyles && (typeof width === 'number' ? `${width}px` : width),\n      }}\n    >\n      <div\n        className=\"shimmer-effect__shine\"\n        style={{\n          animationDelay,\n        }}\n      />\n    </div>\n  )\n}\n\nexport type StaggeredShimmersProps = {\n  className?: string\n  count: number\n  height?: number | string\n  renderDelay?: number\n  shimmerDelay?: number | string\n  shimmerItemClassName?: string\n  width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n  className,\n  count,\n  height,\n  renderDelay = 500,\n  shimmerDelay = 25,\n  shimmerItemClassName,\n  width,\n}) => {\n  const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n  const [hasDelayed] = useDelay(renderDelay, true)\n\n  if (!hasDelayed) {\n    return null\n  }\n\n  return (\n    <div className={className}>\n      {[...Array(count)].map((_, i) => (\n        <div className={shimmerItemClassName} key={i}>\n          <ShimmerEffect\n            animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n            height={height}\n            width={width}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["React","useDelay","ShimmerEffect","animationDelay","className","disableInlineStyles","height","width","div","filter","Boolean","join","style","StaggeredShimmers","count","renderDelay","shimmerDelay","shimmerItemClassName","shimmerDelayToPass","hasDelayed","Array","map","_","i"],"mappings":"AAAA;;AACA,YAAYA,WAAW,QAAO;AAE9B,SAASC,QAAQ,QAAQ,0BAAyB;AAClD,OAAO,eAAc;AAUrB,OAAO,MAAMC,gBAA8C,CAAC,EAC1DC,iBAAiB,KAAK,EACtBC,SAAS,EACTC,sBAAsB,KAAK,EAC3BC,SAAS,MAAM,EACfC,QAAQ,MAAM,EACf;IACC,qBACE,QAACC;QACCJ,WAAW;YAAC;YAAkBA;SAAU,CAACK,MAAM,CAACC,SAASC,IAAI,CAAC;QAC9DC,OAAO;YACLN,QAAQ,CAACD,uBAAwB,CAAA,OAAOC,WAAW,WAAW,GAAGA,OAAO,EAAE,CAAC,GAAGA,MAAK;YACnFC,OAAO,CAACF,uBAAwB,CAAA,OAAOE,UAAU,WAAW,GAAGA,MAAM,EAAE,CAAC,GAAGA,KAAI;QACjF;kBAEA,cAAA,QAACC;YACCJ,WAAU;YACVQ,OAAO;gBACLT;YACF;;;;;;;;;;;AAIR,EAAC;AAYD,OAAO,MAAMU,oBAAsD,CAAC,EAClET,SAAS,EACTU,KAAK,EACLR,MAAM,EACNS,cAAc,GAAG,EACjBC,eAAe,EAAE,EACjBC,oBAAoB,EACpBV,KAAK,EACN;IACC,MAAMW,qBAAqB,OAAOF,iBAAiB,WAAW,GAAGA,aAAa,EAAE,CAAC,GAAGA;IACpF,MAAM,CAACG,WAAW,GAAGlB,SAASc,aAAa;IAE3C,IAAI,CAACI,YAAY;QACf,OAAO;IACT;IAEA,qBACE,QAACX;QAAIJ,WAAWA;kBACb;eAAIgB,MAAMN;SAAO,CAACO,GAAG,CAAC,CAACC,GAAGC,kBACzB,QAACf;gBAAIJ,WAAWa;0BACd,cAAA,QAACf;oBACCC,gBAAgB,CAAC,KAAK,EAAEoB,EAAE,GAAG,EAAEL,mBAAmB,CAAC,CAAC;oBACpDZ,QAAQA;oBACRC,OAAOA;;;;;;eAJgCgB;;;;;;;;;;AAUnD,EAAC"}

package/dist/elements/SortColumn/index.js

@@ -1,4 +1,6 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
@@ -24,34 +26,87 @@ export const SortColumn = (props)=>{
     if (sort === desc) {
         descClasses.push(`${baseClass}--active`);
     }
-    return <div className={[
-        baseClass,
-        appearance && `${baseClass}--appearance-${appearance}`
-    ].filter(Boolean).join(' ')}>
-      <span className={`${baseClass}__label`}>
-        {Label ?? <FieldLabel hideLocale label={label} unstyled/>}
-      </span>
-      {!disable && <div className={`${baseClass}__buttons`}>
-          <button aria-label={t('general:sortByLabelDirection', {
-        direction: t('general:ascending'),
-        label
-    })} className={[
-        ...ascClasses,
-        `${baseClass}__button`
-    ].filter(Boolean).join(' ')} onClick={()=>void handleSortChange(asc)} type="button">
-            <ChevronIcon direction="up"/>
-          </button>
-          <button aria-label={t('general:sortByLabelDirection', {
-        direction: t('general:descending'),
-        label
-    })} className={[
-        ...descClasses,
-        `${baseClass}__button`
-    ].filter(Boolean).join(' ')} onClick={()=>void handleSortChange(desc)} type="button">
-            <ChevronIcon/>
-          </button>
-        </div>}
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            appearance && `${baseClass}--appearance-${appearance}`
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ _jsxDEV("span", {
+                className: `${baseClass}__label`,
+                children: Label ?? /*#__PURE__*/ _jsxDEV(FieldLabel, {
+                    hideLocale: true,
+                    label: label,
+                    unstyled: true
+                }, void 0, false, {
+                    fileName: "src/elements/SortColumn/index.tsx",
+                    lineNumber: 49,
+                    columnNumber: 19
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/SortColumn/index.tsx",
+                lineNumber: 48,
+                columnNumber: 7
+            }, this),
+            !disable && /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__buttons`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("button", {
+                        "aria-label": t('general:sortByLabelDirection', {
+                            direction: t('general:ascending'),
+                            label
+                        }),
+                        className: [
+                            ...ascClasses,
+                            `${baseClass}__button`
+                        ].filter(Boolean).join(' '),
+                        onClick: ()=>void handleSortChange(asc),
+                        type: "button",
+                        children: /*#__PURE__*/ _jsxDEV(ChevronIcon, {
+                            direction: "up"
+                        }, void 0, false, {
+                            fileName: "src/elements/SortColumn/index.tsx",
+                            lineNumber: 62,
+                            columnNumber: 13
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/elements/SortColumn/index.tsx",
+                        lineNumber: 53,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("button", {
+                        "aria-label": t('general:sortByLabelDirection', {
+                            direction: t('general:descending'),
+                            label
+                        }),
+                        className: [
+                            ...descClasses,
+                            `${baseClass}__button`
+                        ].filter(Boolean).join(' '),
+                        onClick: ()=>void handleSortChange(desc),
+                        type: "button",
+                        children: /*#__PURE__*/ _jsxDEV(ChevronIcon, {}, void 0, false, {
+                            fileName: "src/elements/SortColumn/index.tsx",
+                            lineNumber: 73,
+                            columnNumber: 13
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/elements/SortColumn/index.tsx",
+                        lineNumber: 64,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/SortColumn/index.tsx",
+                lineNumber: 52,
+                columnNumber: 9
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/SortColumn/index.tsx",
+        lineNumber: 43,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SortColumn/index.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type SortColumnProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n  readonly Label: React.ReactNode\n  readonly label?: StaticLabel\n  readonly name: string\n}\n\nconst baseClass = 'sort-column'\n\nexport const SortColumn: React.FC<SortColumnProps> = (props) => {\n  const { name, appearance, disable = false, Label, label } = props\n  const { handleSortChange, query } = useListQuery()\n  const { t } = useTranslation()\n\n  const { sort } = query\n\n  const desc = `-${name}`\n  const asc = name\n\n  const ascClasses = [`${baseClass}__asc`]\n  if (sort === asc) {\n    ascClasses.push(`${baseClass}--active`)\n  }\n\n  const descClasses = [`${baseClass}__desc`]\n  if (sort === desc) {\n    descClasses.push(`${baseClass}--active`)\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span className={`${baseClass}__label`}>\n        {Label ?? <FieldLabel hideLocale label={label} unstyled />}\n      </span>\n      {!disable && (\n        <div className={`${baseClass}__buttons`}>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:ascending'),\n              label,\n            })}\n            className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(asc)}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"up\" />\n          </button>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:descending'),\n              label,\n            })}\n            className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(desc)}\n            type=\"button\"\n          >\n            <ChevronIcon />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["FieldLabel","ChevronIcon","useListQuery","useTranslation","baseClass","SortColumn","props","name","appearance","disable","Label","label","handleSortChange","query","t","sort","desc","asc","ascClasses","push","descClasses","div","className","filter","Boolean","join","span","hideLocale","unstyled","button","aria-label","direction","onClick","type"],"mappings":"AAAA;AAKA,SAASA,UAAU,QAAQ,mCAAkC;AAC7D,SAASC,WAAW,QAAQ,+BAA8B;AAC1D,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAUrB,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAAwC,CAACC;IACpD,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,UAAU,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGL;IAC5D,MAAM,EAAEM,gBAAgB,EAAEC,KAAK,EAAE,GAAGX;IACpC,MAAM,EAAEY,CAAC,EAAE,GAAGX;IAEd,MAAM,EAAEY,IAAI,EAAE,GAAGF;IAEjB,MAAMG,OAAO,CAAC,CAAC,EAAET,MAAM;IACvB,MAAMU,MAAMV;IAEZ,MAAMW,aAAa;QAAC,GAAGd,UAAU,KAAK,CAAC;KAAC;IACxC,IAAIW,SAASE,KAAK;QAChBC,WAAWC,IAAI,CAAC,GAAGf,UAAU,QAAQ,CAAC;IACxC;IAEA,MAAMgB,cAAc;QAAC,GAAGhB,UAAU,MAAM,CAAC;KAAC;IAC1C,IAAIW,SAASC,MAAM;QACjBI,YAAYD,IAAI,CAAC,GAAGf,UAAU,QAAQ,CAAC;IACzC;IAEA,QACGiB,IACCC,WAAW;QAAClB;QAAWI,cAAc,GAAGJ,UAAU,aAAa,EAAEI,YAAY;KAAC,CAC3Ee,MAAM,CAACC,SACPC,IAAI,CAAC,MACT;MACC,CAACC,KAAKJ,WAAW,GAAGlB,UAAU,OAAO,CAAC,EAAE;QACtC,CAACM,UAAUV,WAAW2B,WAAWhB,OAAOA,OAAOiB,WAAY;MAC7D,EAAEF,KAAK;MACP,CAAC,CAACjB,YACCY,IAAIC,WAAW,GAAGlB,UAAU,SAAS,CAAC,EAAE;UACvC,CAACyB,OACCC,YAAYhB,EAAE,gCAAgC;QAC5CiB,WAAWjB,EAAE;QACbH;IACF,IACAW,WAAW;WAAIJ;QAAY,GAAGd,UAAU,QAAQ,CAAC;KAAC,CAACmB,MAAM,CAACC,SAASC,IAAI,CAAC,MACxEO,SAAS,IAAM,KAAKpB,iBAAiBK,MACrCgB,KAAK,SACN;YACC,CAAChC,YAAY8B,UAAU,MAAO;UAChC,EAAEF,OAAO;UACT,CAACA,OACCC,YAAYhB,EAAE,gCAAgC;QAC5CiB,WAAWjB,EAAE;QACbH;IACF,IACAW,WAAW;WAAIF;QAAa,GAAGhB,UAAU,QAAQ,CAAC;KAAC,CAACmB,MAAM,CAACC,SAASC,IAAI,CAAC,MACzEO,SAAS,IAAM,KAAKpB,iBAAiBI,OACrCiB,KAAK,SACN;YACC,CAAChC,aAAc;UACjB,EAAE4B,OAAO;QACX,EAAER,KACF;IACJ,EAAEA;AAEN,EAAC"}
+{"version":3,"sources":["../../../src/elements/SortColumn/index.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type SortColumnProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n  readonly Label: React.ReactNode\n  readonly label?: StaticLabel\n  readonly name: string\n}\n\nconst baseClass = 'sort-column'\n\nexport const SortColumn: React.FC<SortColumnProps> = (props) => {\n  const { name, appearance, disable = false, Label, label } = props\n  const { handleSortChange, query } = useListQuery()\n  const { t } = useTranslation()\n\n  const { sort } = query\n\n  const desc = `-${name}`\n  const asc = name\n\n  const ascClasses = [`${baseClass}__asc`]\n  if (sort === asc) {\n    ascClasses.push(`${baseClass}--active`)\n  }\n\n  const descClasses = [`${baseClass}__desc`]\n  if (sort === desc) {\n    descClasses.push(`${baseClass}--active`)\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span className={`${baseClass}__label`}>\n        {Label ?? <FieldLabel hideLocale label={label} unstyled />}\n      </span>\n      {!disable && (\n        <div className={`${baseClass}__buttons`}>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:ascending'),\n              label,\n            })}\n            className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(asc)}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"up\" />\n          </button>\n          <button\n            aria-label={t('general:sortByLabelDirection', {\n              direction: t('general:descending'),\n              label,\n            })}\n            className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}\n            onClick={() => void handleSortChange(desc)}\n            type=\"button\"\n          >\n            <ChevronIcon />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["React","FieldLabel","ChevronIcon","useListQuery","useTranslation","baseClass","SortColumn","props","name","appearance","disable","Label","label","handleSortChange","query","t","sort","desc","asc","ascClasses","push","descClasses","div","className","filter","Boolean","join","span","hideLocale","unstyled","button","aria-label","direction","onClick","type"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,UAAU,QAAQ,mCAAkC;AAC7D,SAASC,WAAW,QAAQ,+BAA8B;AAC1D,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAUrB,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAAwC,CAACC;IACpD,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,UAAU,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGL;IAC5D,MAAM,EAAEM,gBAAgB,EAAEC,KAAK,EAAE,GAAGX;IACpC,MAAM,EAAEY,CAAC,EAAE,GAAGX;IAEd,MAAM,EAAEY,IAAI,EAAE,GAAGF;IAEjB,MAAMG,OAAO,CAAC,CAAC,EAAET,MAAM;IACvB,MAAMU,MAAMV;IAEZ,MAAMW,aAAa;QAAC,GAAGd,UAAU,KAAK,CAAC;KAAC;IACxC,IAAIW,SAASE,KAAK;QAChBC,WAAWC,IAAI,CAAC,GAAGf,UAAU,QAAQ,CAAC;IACxC;IAEA,MAAMgB,cAAc;QAAC,GAAGhB,UAAU,MAAM,CAAC;KAAC;IAC1C,IAAIW,SAASC,MAAM;QACjBI,YAAYD,IAAI,CAAC,GAAGf,UAAU,QAAQ,CAAC;IACzC;IAEA,qBACE,QAACiB;QACCC,WAAW;YAAClB;YAAWI,cAAc,GAAGJ,UAAU,aAAa,EAAEI,YAAY;SAAC,CAC3Ee,MAAM,CAACC,SACPC,IAAI,CAAC;;0BAER,QAACC;gBAAKJ,WAAW,GAAGlB,UAAU,OAAO,CAAC;0BACnCM,uBAAS,QAACV;oBAAW2B,UAAU;oBAAChB,OAAOA;oBAAOiB,QAAQ;;;;;;;;;;;YAExD,CAACnB,yBACA,QAACY;gBAAIC,WAAW,GAAGlB,UAAU,SAAS,CAAC;;kCACrC,QAACyB;wBACCC,cAAYhB,EAAE,gCAAgC;4BAC5CiB,WAAWjB,EAAE;4BACbH;wBACF;wBACAW,WAAW;+BAAIJ;4BAAY,GAAGd,UAAU,QAAQ,CAAC;yBAAC,CAACmB,MAAM,CAACC,SAASC,IAAI,CAAC;wBACxEO,SAAS,IAAM,KAAKpB,iBAAiBK;wBACrCgB,MAAK;kCAEL,cAAA,QAAChC;4BAAY8B,WAAU;;;;;;;;;;;kCAEzB,QAACF;wBACCC,cAAYhB,EAAE,gCAAgC;4BAC5CiB,WAAWjB,EAAE;4BACbH;wBACF;wBACAW,WAAW;+BAAIF;4BAAa,GAAGhB,UAAU,QAAQ,CAAC;yBAAC,CAACmB,MAAM,CAACC,SAASC,IAAI,CAAC;wBACzEO,SAAS,IAAM,KAAKpB,iBAAiBI;wBACrCiB,MAAK;kCAEL,cAAA,QAAChC;;;;;;;;;;;;;;;;;;;;;;AAMb,EAAC"}

package/dist/elements/SortComplex/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
 // TODO: abstract the `next/navigation` dependency out from this component
 import { usePathname, useRouter, useSearchParams } from 'next/navigation.js';
@@ -75,22 +76,82 @@ export const SortComplex = (props)=>{
         i18n,
         t
     ]);
-    return <div className={baseClass}>
-      <React.Fragment>
-        <div className={`${baseClass}__wrap`}>
-          <div className={`${baseClass}__select`}>
-            <div className={`${baseClass}__label`}>{t('general:columnToSort')}</div>
-            <ReactSelect onChange={setSortField} options={sortFields} value={sortField}/>
-          </div>
-          <div className={`${baseClass}__select`}>
-            <div className={`${baseClass}__label`}>{t('general:order')}</div>
-            <ReactSelect onChange={(incomingSort)=>{
-        setSortOrder(incomingSort || initialSort);
-    }} options={sortOptions} value={sortOrder}/>
-          </div>
-        </div>
-      </React.Fragment>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: /*#__PURE__*/ _jsxDEV(React.Fragment, {
+            children: /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__wrap`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__select`,
+                        children: [
+                            /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__label`,
+                                children: t('general:columnToSort')
+                            }, void 0, false, {
+                                fileName: "src/elements/SortComplex/index.tsx",
+                                lineNumber: 86,
+                                columnNumber: 13
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(ReactSelect, {
+                                onChange: setSortField,
+                                options: sortFields,
+                                value: sortField
+                            }, void 0, false, {
+                                fileName: "src/elements/SortComplex/index.tsx",
+                                lineNumber: 87,
+                                columnNumber: 13
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/SortComplex/index.tsx",
+                        lineNumber: 85,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__select`,
+                        children: [
+                            /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__label`,
+                                children: t('general:order')
+                            }, void 0, false, {
+                                fileName: "src/elements/SortComplex/index.tsx",
+                                lineNumber: 90,
+                                columnNumber: 13
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(ReactSelect, {
+                                onChange: (incomingSort)=>{
+                                    setSortOrder(incomingSort || initialSort);
+                                },
+                                options: sortOptions,
+                                value: sortOrder
+                            }, void 0, false, {
+                                fileName: "src/elements/SortComplex/index.tsx",
+                                lineNumber: 91,
+                                columnNumber: 13
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/SortComplex/index.tsx",
+                        lineNumber: 89,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/SortComplex/index.tsx",
+                lineNumber: 84,
+                columnNumber: 9
+            }, this)
+        }, void 0, false, {
+            fileName: "src/elements/SortComplex/index.tsx",
+            lineNumber: 83,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/SortComplex/index.tsx",
+        lineNumber: 82,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SortComplex/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionObject, SanitizedCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport { sortableFieldTypes } from 'payload'\nimport { fieldAffectsData } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useEffect, useState } from 'react'\n\nexport type SortComplexProps = {\n  collection: SanitizedCollectionConfig\n  handleChange?: (sort: string) => void\n  modifySearchQuery?: boolean\n  sort?: string\n}\n\nimport type { Option } from '../ReactSelect/index.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-complex'\n\nexport const SortComplex: React.FC<SortComplexProps> = (props) => {\n  const { collection, handleChange, modifySearchQuery = true } = props\n\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const { i18n, t } = useTranslation()\n  const [sortOptions, setSortOptions] = useState<OptionObject[]>()\n\n  const [sortFields] = useState(() =>\n    collection.fields.reduce((fields, field) => {\n      if (fieldAffectsData(field) && sortableFieldTypes.indexOf(field.type) > -1) {\n        return [\n          ...fields,\n          { label: getTranslation(field.label || field.name, i18n), value: field.name },\n        ]\n      }\n      return fields\n    }, []),\n  )\n\n  const [sortField, setSortField] = useState(sortFields[0])\n  const [initialSort] = useState<Option>(() => ({ label: t('general:descending'), value: '-' }))\n  const [sortOrder, setSortOrder] = useState(initialSort)\n\n  useEffect(() => {\n    if (sortField?.value) {\n      const newSortValue = `${sortOrder.value}${sortField.value}`\n\n      if (handleChange) {\n        handleChange(newSortValue)\n      }\n\n      if (searchParams.get('sort') !== newSortValue && modifySearchQuery) {\n        const search = qs.stringify(\n          {\n            ...searchParams,\n            sort: newSortValue,\n          },\n          { addQueryPrefix: true },\n        )\n\n        router.replace(`${pathname}${search}`)\n      }\n    }\n  }, [pathname, router, searchParams, sortField, sortOrder, modifySearchQuery, handleChange])\n\n  useEffect(() => {\n    setSortOptions([\n      { label: t('general:ascending'), value: '' },\n      { label: t('general:descending'), value: '-' },\n    ])\n  }, [i18n, t])\n\n  return (\n    <div className={baseClass}>\n      <React.Fragment>\n        <div className={`${baseClass}__wrap`}>\n          <div className={`${baseClass}__select`}>\n            <div className={`${baseClass}__label`}>{t('general:columnToSort')}</div>\n            <ReactSelect onChange={setSortField} options={sortFields} value={sortField} />\n          </div>\n          <div className={`${baseClass}__select`}>\n            <div className={`${baseClass}__label`}>{t('general:order')}</div>\n            <ReactSelect\n              onChange={(incomingSort: Option) => {\n                setSortOrder(incomingSort || initialSort)\n              }}\n              options={sortOptions}\n              value={sortOrder}\n            />\n          </div>\n        </div>\n      </React.Fragment>\n    </div>\n  )\n}\n"],"names":["getTranslation","usePathname","useRouter","useSearchParams","sortableFieldTypes","fieldAffectsData","qs","React","useEffect","useState","useTranslation","ReactSelect","baseClass","SortComplex","props","collection","handleChange","modifySearchQuery","router","pathname","searchParams","i18n","t","sortOptions","setSortOptions","sortFields","fields","reduce","field","indexOf","type","label","name","value","sortField","setSortField","initialSort","sortOrder","setSortOrder","newSortValue","get","search","stringify","sort","addQueryPrefix","replace","div","className","Fragment","onChange","options","incomingSort"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/SortComplex/index.tsx"],"sourcesContent":["'use client'\nimport type { OptionObject, SanitizedCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport { sortableFieldTypes } from 'payload'\nimport { fieldAffectsData } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useEffect, useState } from 'react'\n\nexport type SortComplexProps = {\n  collection: SanitizedCollectionConfig\n  handleChange?: (sort: string) => void\n  modifySearchQuery?: boolean\n  sort?: string\n}\n\nimport type { Option } from '../ReactSelect/index.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-complex'\n\nexport const SortComplex: React.FC<SortComplexProps> = (props) => {\n  const { collection, handleChange, modifySearchQuery = true } = props\n\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const { i18n, t } = useTranslation()\n  const [sortOptions, setSortOptions] = useState<OptionObject[]>()\n\n  const [sortFields] = useState(() =>\n    collection.fields.reduce((fields, field) => {\n      if (fieldAffectsData(field) && sortableFieldTypes.indexOf(field.type) > -1) {\n        return [\n          ...fields,\n          { label: getTranslation(field.label || field.name, i18n), value: field.name },\n        ]\n      }\n      return fields\n    }, []),\n  )\n\n  const [sortField, setSortField] = useState(sortFields[0])\n  const [initialSort] = useState<Option>(() => ({ label: t('general:descending'), value: '-' }))\n  const [sortOrder, setSortOrder] = useState(initialSort)\n\n  useEffect(() => {\n    if (sortField?.value) {\n      const newSortValue = `${sortOrder.value}${sortField.value}`\n\n      if (handleChange) {\n        handleChange(newSortValue)\n      }\n\n      if (searchParams.get('sort') !== newSortValue && modifySearchQuery) {\n        const search = qs.stringify(\n          {\n            ...searchParams,\n            sort: newSortValue,\n          },\n          { addQueryPrefix: true },\n        )\n\n        router.replace(`${pathname}${search}`)\n      }\n    }\n  }, [pathname, router, searchParams, sortField, sortOrder, modifySearchQuery, handleChange])\n\n  useEffect(() => {\n    setSortOptions([\n      { label: t('general:ascending'), value: '' },\n      { label: t('general:descending'), value: '-' },\n    ])\n  }, [i18n, t])\n\n  return (\n    <div className={baseClass}>\n      <React.Fragment>\n        <div className={`${baseClass}__wrap`}>\n          <div className={`${baseClass}__select`}>\n            <div className={`${baseClass}__label`}>{t('general:columnToSort')}</div>\n            <ReactSelect onChange={setSortField} options={sortFields} value={sortField} />\n          </div>\n          <div className={`${baseClass}__select`}>\n            <div className={`${baseClass}__label`}>{t('general:order')}</div>\n            <ReactSelect\n              onChange={(incomingSort: Option) => {\n                setSortOrder(incomingSort || initialSort)\n              }}\n              options={sortOptions}\n              value={sortOrder}\n            />\n          </div>\n        </div>\n      </React.Fragment>\n    </div>\n  )\n}\n"],"names":["getTranslation","usePathname","useRouter","useSearchParams","sortableFieldTypes","fieldAffectsData","qs","React","useEffect","useState","useTranslation","ReactSelect","baseClass","SortComplex","props","collection","handleChange","modifySearchQuery","router","pathname","searchParams","i18n","t","sortOptions","setSortOptions","sortFields","fields","reduce","field","indexOf","type","label","name","value","sortField","setSortField","initialSort","sortOrder","setSortOrder","newSortValue","get","search","stringify","sort","addQueryPrefix","replace","div","className","Fragment","onChange","options","incomingSort"],"mappings":"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"}

package/dist/elements/SortHeader/index.js

@@ -1,4 +1,6 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { SortDownIcon } from '../../icons/Sort/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import './index.scss';
@@ -25,19 +27,41 @@ export const SortHeader = (props)=>{
     const { appearance } = props;
     const { handleSortPress, isActive } = useSort();
     const { t } = useTranslation();
-    return <div className={[
-        baseClass,
-        appearance && `${baseClass}--appearance-${appearance}`
-    ].filter(Boolean).join(' ')}>
-      <div className={`${baseClass}__buttons`}>
-        <button aria-label={t('general:sortByLabelDirection', {
-        direction: t('general:ascending'),
-        label: 'Order'
-    })} className={`${baseClass}__button ${isActive ? `${baseClass}--active` : ''}`} onClick={handleSortPress} type="button">
-          <SortDownIcon/>
-        </button>
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            appearance && `${baseClass}--appearance-${appearance}`
+        ].filter(Boolean).join(' '),
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            className: `${baseClass}__buttons`,
+            children: /*#__PURE__*/ _jsxDEV("button", {
+                "aria-label": t('general:sortByLabelDirection', {
+                    direction: t('general:ascending'),
+                    label: 'Order'
+                }),
+                className: `${baseClass}__button ${isActive ? `${baseClass}--active` : ''}`,
+                onClick: handleSortPress,
+                type: "button",
+                children: /*#__PURE__*/ _jsxDEV(SortDownIcon, {}, void 0, false, {
+                    fileName: "src/elements/SortHeader/index.tsx",
+                    lineNumber: 55,
+                    columnNumber: 11
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/SortHeader/index.tsx",
+                lineNumber: 46,
+                columnNumber: 9
+            }, this)
+        }, void 0, false, {
+            fileName: "src/elements/SortHeader/index.tsx",
+            lineNumber: 45,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/SortHeader/index.tsx",
+        lineNumber: 40,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map