@payloadcms/ui 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

package/dist/elements/SearchFilter/index.js

@@ -1,6 +1,5 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDebounce } from '../../hooks/useDebounce.js';
 import './index.scss';
 const baseClass = 'search-filter';
@@ -40,29 +39,12 @@ export function SearchFilter(props) {
         debouncedSearch,
         handleChange
     ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: baseClass,
-        children: /*#__PURE__*/ _jsxDEV("input", {
-            "aria-label": label,
-            className: `${baseClass}__input`,
-            id: "search-filter-input",
-            onChange: (e)=>{
-                shouldUpdateState.current = true;
-                setSearch(e.target.value);
-            },
-            placeholder: label,
-            type: "text",
-            value: search || ''
-        }, void 0, false, {
-            fileName: "src/elements/SearchFilter/index.tsx",
-            lineNumber: 55,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/elements/SearchFilter/index.tsx",
-        lineNumber: 54,
-        columnNumber: 5
-    }, this);
+    return <div className={baseClass}>
+      <input aria-label={label} className={`${baseClass}__input`} id="search-filter-input" onChange={(e)=>{
+        shouldUpdateState.current = true;
+        setSearch(e.target.value);
+    }} placeholder={label} type="text" value={search || ''}/>
+    </div>;
 }
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SearchFilter/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { SearchFilterProps } from './types.js'\n\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport './index.scss'\n\nconst baseClass = 'search-filter'\n\nexport function SearchFilter(props: SearchFilterProps) {\n  const { handleChange, initialParams, label, searchQueryParam } = props\n  const searchParam = initialParams?.search || searchQueryParam\n  const [search, setSearch] = useState(typeof searchParam === 'string' ? searchParam : undefined)\n\n  /**\n   * Tracks whether the state should be updated based on the search value.\n   * If the value is updated from the URL, we don't want to update the state as it causes additional renders.\n   */\n  const shouldUpdateState = useRef(true)\n\n  /**\n   * Tracks the previous search value to compare with the current debounced search value.\n   */\n  const previousSearch = useRef(typeof searchParam === 'string' ? searchParam : undefined)\n\n  const debouncedSearch = useDebounce(search, 300)\n\n  useEffect(() => {\n    if (searchParam !== previousSearch.current) {\n      shouldUpdateState.current = false\n      setSearch(searchParam as string)\n      previousSearch.current = searchParam as string\n    }\n\n    return () => {\n      shouldUpdateState.current = true\n      previousSearch.current = undefined\n    }\n  }, [searchParam])\n\n  useEffect(() => {\n    if (debouncedSearch !== previousSearch.current && shouldUpdateState.current) {\n      if (handleChange) {\n        handleChange(debouncedSearch)\n      }\n\n      previousSearch.current = debouncedSearch\n    }\n  }, [debouncedSearch, handleChange])\n\n  return (\n    <div className={baseClass}>\n      <input\n        aria-label={label}\n        className={`${baseClass}__input`}\n        id=\"search-filter-input\"\n        onChange={(e) => {\n          shouldUpdateState.current = true\n          setSearch(e.target.value)\n        }}\n        placeholder={label}\n        type=\"text\"\n        value={search || ''}\n      />\n    </div>\n  )\n}\n"],"names":["React","useEffect","useRef","useState","useDebounce","baseClass","SearchFilter","props","handleChange","initialParams","label","searchQueryParam","searchParam","search","setSearch","undefined","shouldUpdateState","previousSearch","debouncedSearch","current","div","className","input","aria-label","id","onChange","e","target","value","placeholder","type"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAI1D,SAASC,WAAW,QAAQ,6BAA4B;AACxD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,YAAY,EAAEC,aAAa,EAAEC,KAAK,EAAEC,gBAAgB,EAAE,GAAGJ;IACjE,MAAMK,cAAcH,eAAeI,UAAUF;IAC7C,MAAM,CAACE,QAAQC,UAAU,GAAGX,SAAS,OAAOS,gBAAgB,WAAWA,cAAcG;IAErF;;;GAGC,GACD,MAAMC,oBAAoBd,OAAO;IAEjC;;GAEC,GACD,MAAMe,iBAAiBf,OAAO,OAAOU,gBAAgB,WAAWA,cAAcG;IAE9E,MAAMG,kBAAkBd,YAAYS,QAAQ;IAE5CZ,UAAU;QACR,IAAIW,gBAAgBK,eAAeE,OAAO,EAAE;YAC1CH,kBAAkBG,OAAO,GAAG;YAC5BL,UAAUF;YACVK,eAAeE,OAAO,GAAGP;QAC3B;QAEA,OAAO;YACLI,kBAAkBG,OAAO,GAAG;YAC5BF,eAAeE,OAAO,GAAGJ;QAC3B;IACF,GAAG;QAACH;KAAY;IAEhBX,UAAU;QACR,IAAIiB,oBAAoBD,eAAeE,OAAO,IAAIH,kBAAkBG,OAAO,EAAE;YAC3E,IAAIX,cAAc;gBAChBA,aAAaU;YACf;YAEAD,eAAeE,OAAO,GAAGD;QAC3B;IACF,GAAG;QAACA;QAAiBV;KAAa;IAElC,qBACE,QAACY;QAAIC,WAAWhB;kBACd,cAAA,QAACiB;YACCC,cAAYb;YACZW,WAAW,GAAGhB,UAAU,OAAO,CAAC;YAChCmB,IAAG;YACHC,UAAU,CAACC;gBACTV,kBAAkBG,OAAO,GAAG;gBAC5BL,UAAUY,EAAEC,MAAM,CAACC,KAAK;YAC1B;YACAC,aAAanB;YACboB,MAAK;YACLF,OAAOf,UAAU;;;;;;;;;;;AAIzB"}
+{"version":3,"sources":["../../../src/elements/SearchFilter/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { SearchFilterProps } from './types.js'\n\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport './index.scss'\n\nconst baseClass = 'search-filter'\n\nexport function SearchFilter(props: SearchFilterProps) {\n  const { handleChange, initialParams, label, searchQueryParam } = props\n  const searchParam = initialParams?.search || searchQueryParam\n  const [search, setSearch] = useState(typeof searchParam === 'string' ? searchParam : undefined)\n\n  /**\n   * Tracks whether the state should be updated based on the search value.\n   * If the value is updated from the URL, we don't want to update the state as it causes additional renders.\n   */\n  const shouldUpdateState = useRef(true)\n\n  /**\n   * Tracks the previous search value to compare with the current debounced search value.\n   */\n  const previousSearch = useRef(typeof searchParam === 'string' ? searchParam : undefined)\n\n  const debouncedSearch = useDebounce(search, 300)\n\n  useEffect(() => {\n    if (searchParam !== previousSearch.current) {\n      shouldUpdateState.current = false\n      setSearch(searchParam as string)\n      previousSearch.current = searchParam as string\n    }\n\n    return () => {\n      shouldUpdateState.current = true\n      previousSearch.current = undefined\n    }\n  }, [searchParam])\n\n  useEffect(() => {\n    if (debouncedSearch !== previousSearch.current && shouldUpdateState.current) {\n      if (handleChange) {\n        handleChange(debouncedSearch)\n      }\n\n      previousSearch.current = debouncedSearch\n    }\n  }, [debouncedSearch, handleChange])\n\n  return (\n    <div className={baseClass}>\n      <input\n        aria-label={label}\n        className={`${baseClass}__input`}\n        id=\"search-filter-input\"\n        onChange={(e) => {\n          shouldUpdateState.current = true\n          setSearch(e.target.value)\n        }}\n        placeholder={label}\n        type=\"text\"\n        value={search || ''}\n      />\n    </div>\n  )\n}\n"],"names":["useEffect","useRef","useState","useDebounce","baseClass","SearchFilter","props","handleChange","initialParams","label","searchQueryParam","searchParam","search","setSearch","undefined","shouldUpdateState","previousSearch","debouncedSearch","current","div","className","input","aria-label","id","onChange","e","target","value","placeholder","type"],"mappings":"AAAA;AAEA,SAAgBA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAI1D,SAASC,WAAW,QAAQ,6BAA4B;AACxD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,YAAY,EAAEC,aAAa,EAAEC,KAAK,EAAEC,gBAAgB,EAAE,GAAGJ;IACjE,MAAMK,cAAcH,eAAeI,UAAUF;IAC7C,MAAM,CAACE,QAAQC,UAAU,GAAGX,SAAS,OAAOS,gBAAgB,WAAWA,cAAcG;IAErF;;;GAGC,GACD,MAAMC,oBAAoBd,OAAO;IAEjC;;GAEC,GACD,MAAMe,iBAAiBf,OAAO,OAAOU,gBAAgB,WAAWA,cAAcG;IAE9E,MAAMG,kBAAkBd,YAAYS,QAAQ;IAE5CZ,UAAU;QACR,IAAIW,gBAAgBK,eAAeE,OAAO,EAAE;YAC1CH,kBAAkBG,OAAO,GAAG;YAC5BL,UAAUF;YACVK,eAAeE,OAAO,GAAGP;QAC3B;QAEA,OAAO;YACLI,kBAAkBG,OAAO,GAAG;YAC5BF,eAAeE,OAAO,GAAGJ;QAC3B;IACF,GAAG;QAACH;KAAY;IAEhBX,UAAU;QACR,IAAIiB,oBAAoBD,eAAeE,OAAO,IAAIH,kBAAkBG,OAAO,EAAE;YAC3E,IAAIX,cAAc;gBAChBA,aAAaU;YACf;YAEAD,eAAeE,OAAO,GAAGD;QAC3B;IACF,GAAG;QAACA;QAAiBV;KAAa;IAElC,QACGY,IAAIC,WAAWhB,WAAW;MACzB,CAACiB,MACCC,YAAYb,OACZW,WAAW,GAAGhB,UAAU,OAAO,CAAC,EAChCmB,GAAG,sBACHC,UAAU,CAACC;QACTV,kBAAkBG,OAAO,GAAG;QAC5BL,UAAUY,EAAEC,MAAM,CAACC,KAAK;IAC1B,GACAC,aAAanB,OACboB,KAAK,OACLF,OAAOf,UAAU,KACjB;IACJ,EAAEO;AAEN"}

package/dist/elements/SelectAll/index.js

@@ -1,6 +1,4 @@
 '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';
@@ -9,22 +7,10 @@ const baseClass = 'select-all';
 export const SelectAll = ()=>{
     const { selectAll, toggleAll } = useSelection();
     const { i18n } = useTranslation();
-    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);
+    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}/>;
 };
 
 //# 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":["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"}
+{"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"}

package/dist/elements/SelectMany/index.js

@@ -1,5 +1,3 @@
-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';
@@ -10,24 +8,13 @@ export const SelectMany = (props)=>{
     if (!selected || !count) {
         return null;
     }
-    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);
+    return <Pill onClick={()=>{
+        if (typeof onClick === 'function') {
+            onClick(selected);
+        }
+    }} pillStyle="white" size="small">
+      {t('general:select')} {count}
+    </Pill>;
 };
 
 //# 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":["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"}
+{"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"}

package/dist/elements/SelectRow/index.js

@@ -1,6 +1,4 @@
 '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';
@@ -13,26 +11,12 @@ export const SelectRow = ({ rowData })=>{
     const { _isLocked, _userEditing } = rowData || {};
     const documentIsLocked = _isLocked && _userEditing;
     if (documentIsLocked && _userEditing.id !== user?.id) {
-        return /*#__PURE__*/ _jsxDEV(Locked, {
-            user: _userEditing
-        }, void 0, false, {
-            fileName: "src/elements/SelectRow/index.tsx",
-            lineNumber: 28,
-            columnNumber: 12
-        }, this);
+        return <Locked user={_userEditing}/>;
     }
-    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);
+    return <CheckboxInput checked={Boolean(selected.get(rowData.id))} className={[
+        baseClass,
+        `${baseClass}__checkbox`
+    ].join(' ')} onToggle={()=>setSelection(rowData.id)}/>;
 };
 
 //# 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":["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"}
+{"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"}

package/dist/elements/ShimmerEffect/index.js

@@ -1,33 +1,18 @@
 '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 /*#__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);
+    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>;
 };
 export const StaggeredShimmers = ({ className, count, height, renderDelay = 500, shimmerDelay = 25, shimmerItemClassName, width })=>{
     const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay;
@@ -35,31 +20,13 @@ export const StaggeredShimmers = ({ className, count, height, renderDelay = 500,
     if (!hasDelayed) {
         return null;
     }
-    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);
+    return <div className={className}>
+      {[
+        ...Array(count)
+    ].map((_, i)=><div className={shimmerItemClassName} key={i}>
+          <ShimmerEffect animationDelay={`calc(${i} * ${shimmerDelayToPass})`} height={height} width={width}/>
+        </div>)}
+    </div>;
 };
 
 //# 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":["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"}
+{"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"}

package/dist/elements/SortColumn/index.js

@@ -1,6 +1,4 @@
 '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';
@@ -26,87 +24,34 @@ export const SortColumn = (props)=>{
     if (sort === desc) {
         descClasses.push(`${baseClass}--active`);
     }
-    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);
+    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>;
 };
 
 //# 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":["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"}
+{"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"}

package/dist/elements/SortComplex/index.js

@@ -1,5 +1,4 @@
 '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';
@@ -76,82 +75,22 @@ export const SortComplex = (props)=>{
         i18n,
         t
     ]);
-    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);
+    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>;
 };
 
 //# 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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"}