@payloadcms/ui 3.71.0-internal-debug.80dab4c → 3.71.0-internal.727c7a4

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,"file":"index.js","names":["c","_c","React","FieldLabel","ChevronIcon","useListQuery","useTranslation","baseClass","SortColumn","props","$","name","appearance","disable","t0","Label","label","undefined","handleSortChange","query","t","sort","desc","asc","ascClasses","push","descClasses","t1","t2","filter","Boolean","t3","join","t4","_jsxs","className","children","_jsx","hideLocale","unstyled","direction","onClick","type"],"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"],"mappings":"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","ignoreList":[]}

package/dist/elements/SortComplex/index.js

@@ -1,5 +1,7 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 // TODO: abstract the `next/navigation` dependency out from this component
 import { usePathname, useRouter, useSearchParams } from 'next/navigation.js';
@@ -11,147 +13,166 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
 import './index.scss';
 const baseClass = 'sort-complex';
-export const SortComplex = (props)=>{
-    const { collection, handleChange, modifySearchQuery = true } = props;
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const { i18n, t } = useTranslation();
-    const [sortOptions, setSortOptions] = useState();
-    const [sortFields] = useState(()=>collection.fields.reduce((fields, field)=>{
-            if (fieldAffectsData(field) && sortableFieldTypes.indexOf(field.type) > -1) {
-                return [
-                    ...fields,
-                    {
-                        label: getTranslation(field.label || field.name, i18n),
-                        value: field.name
-                    }
-                ];
-            }
-            return fields;
-        }, []));
-    const [sortField, setSortField] = useState(sortFields[0]);
-    const [initialSort] = useState(()=>({
-            label: t('general:descending'),
-            value: '-'
-        }));
-    const [sortOrder, setSortOrder] = useState(initialSort);
-    useEffect(()=>{
-        if (sortField?.value) {
-            const newSortValue = `${sortOrder.value}${sortField.value}`;
-            if (handleChange) {
-                handleChange(newSortValue);
-            }
-            if (searchParams.get('sort') !== newSortValue && modifySearchQuery) {
-                const search = qs.stringify({
-                    ...searchParams,
-                    sort: newSortValue
-                }, {
-                    addQueryPrefix: true
-                });
-                router.replace(`${pathname}${search}`);
-            }
+export const SortComplex = props => {
+  const $ = _c(28);
+  const {
+    collection,
+    handleChange,
+    modifySearchQuery: t0
+  } = props;
+  const modifySearchQuery = t0 === undefined ? true : t0;
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const [sortOptions, setSortOptions] = useState();
+  let t1;
+  if ($[0] !== collection.fields || $[1] !== i18n) {
+    t1 = () => collection.fields.reduce((fields, field) => {
+      if (fieldAffectsData(field) && sortableFieldTypes.indexOf(field.type) > -1) {
+        return [...fields, {
+          label: getTranslation(field.label || field.name, i18n),
+          value: field.name
+        }];
+      }
+      return fields;
+    }, []);
+    $[0] = collection.fields;
+    $[1] = i18n;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const [sortFields] = useState(t1);
+  const [sortField, setSortField] = useState(sortFields[0]);
+  let t2;
+  if ($[3] !== t) {
+    t2 = () => ({
+      label: t("general:descending"),
+      value: "-"
+    });
+    $[3] = t;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const [initialSort] = useState(t2);
+  const [sortOrder, setSortOrder] = useState(initialSort);
+  let t3;
+  let t4;
+  if ($[5] !== handleChange || $[6] !== modifySearchQuery || $[7] !== pathname || $[8] !== router || $[9] !== searchParams || $[10] !== sortField || $[11] !== sortOrder) {
+    t3 = () => {
+      if (sortField?.value) {
+        const newSortValue = `${sortOrder.value}${sortField.value}`;
+        if (handleChange) {
+          handleChange(newSortValue);
+        }
+        if (searchParams.get("sort") !== newSortValue && modifySearchQuery) {
+          const search = qs.stringify({
+            ...searchParams,
+            sort: newSortValue
+          }, {
+            addQueryPrefix: true
+          });
+          router.replace(`${pathname}${search}`);
         }
-    }, [
-        pathname,
-        router,
-        searchParams,
-        sortField,
-        sortOrder,
-        modifySearchQuery,
-        handleChange
-    ]);
-    useEffect(()=>{
-        setSortOptions([
-            {
-                label: t('general:ascending'),
-                value: ''
-            },
-            {
-                label: t('general:descending'),
-                value: '-'
-            }
-        ]);
-    }, [
-        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);
+      }
+    };
+    t4 = [pathname, router, searchParams, sortField, sortOrder, modifySearchQuery, handleChange];
+    $[5] = handleChange;
+    $[6] = modifySearchQuery;
+    $[7] = pathname;
+    $[8] = router;
+    $[9] = searchParams;
+    $[10] = sortField;
+    $[11] = sortOrder;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t3 = $[12];
+    t4 = $[13];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[14] !== t) {
+    t5 = () => {
+      setSortOptions([{
+        label: t("general:ascending"),
+        value: ""
+      }, {
+        label: t("general:descending"),
+        value: "-"
+      }]);
+    };
+    $[14] = t;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== i18n || $[17] !== t) {
+    t6 = [i18n, t];
+    $[16] = i18n;
+    $[17] = t;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[19] !== initialSort || $[20] !== sortField || $[21] !== sortFields || $[22] !== sortOptions || $[23] !== sortOrder || $[24] !== t) {
+    let t8;
+    if ($[26] !== initialSort) {
+      t8 = incomingSort => {
+        setSortOrder(incomingSort || initialSort);
+      };
+      $[26] = initialSort;
+      $[27] = t8;
+    } else {
+      t8 = $[27];
+    }
+    t7 = _jsx("div", {
+      className: baseClass,
+      children: _jsx(React.Fragment, {
+        children: _jsxs("div", {
+          className: `${baseClass}__wrap`,
+          children: [_jsxs("div", {
+            className: `${baseClass}__select`,
+            children: [_jsx("div", {
+              className: `${baseClass}__label`,
+              children: t("general:columnToSort")
+            }), _jsx(ReactSelect, {
+              onChange: setSortField,
+              options: sortFields,
+              value: sortField
+            })]
+          }), _jsxs("div", {
+            className: `${baseClass}__select`,
+            children: [_jsx("div", {
+              className: `${baseClass}__label`,
+              children: t("general:order")
+            }), _jsx(ReactSelect, {
+              onChange: t8,
+              options: sortOptions,
+              value: sortOrder
+            })]
+          })]
+        })
+      })
+    });
+    $[19] = initialSort;
+    $[20] = sortField;
+    $[21] = sortFields;
+    $[22] = sortOptions;
+    $[23] = sortOrder;
+    $[24] = t;
+    $[25] = t7;
+  } else {
+    t7 = $[25];
+  }
+  return t7;
 };
-
 //# 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,"file":"index.js","names":["c","_c","getTranslation","usePathname","useRouter","useSearchParams","sortableFieldTypes","fieldAffectsData","qs","React","useEffect","useState","useTranslation","ReactSelect","baseClass","SortComplex","props","$","collection","handleChange","modifySearchQuery","t0","undefined","router","pathname","searchParams","i18n","t","sortOptions","setSortOptions","t1","fields","reduce","field","indexOf","type","label","name","value","sortFields","sortField","setSortField","t2","initialSort","sortOrder","setSortOrder","t3","t4","newSortValue","get","search","stringify","sort","addQueryPrefix","replace","t5","t6","t7","t8","incomingSort","_jsx","className","children","Fragment","_jsxs","onChange","options"],"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"],"mappings":"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","ignoreList":[]}

package/dist/elements/SortHeader/index.js

@@ -1,5 +1,7 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { SortDownIcon } from '../../icons/Sort/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
@@ -7,61 +9,92 @@ import './index.scss';
 import { useTranslation } from '../../providers/Translation/index.js';
 const baseClass = 'sort-header';
 function useSort() {
-    const { handleSortChange, orderableFieldName, query } = useListQuery();
-    const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort;
-    const isActive = querySort === orderableFieldName;
-    const handleSortPress = ()=>{
-        // If it's already sorted by the "_order" field, do nothing
-        if (isActive) {
-            return;
-        }
-        // If NOT sorted by the "_order" field, sort by that field.
-        void handleSortChange(orderableFieldName);
+  const $ = _c(7);
+  const {
+    handleSortChange,
+    orderableFieldName,
+    query
+  } = useListQuery();
+  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort;
+  const isActive = querySort === orderableFieldName;
+  let t0;
+  if ($[0] !== handleSortChange || $[1] !== isActive || $[2] !== orderableFieldName) {
+    t0 = () => {
+      if (isActive) {
+        return;
+      }
+      handleSortChange(orderableFieldName);
     };
-    return {
-        handleSortPress,
-        isActive
+    $[0] = handleSortChange;
+    $[1] = isActive;
+    $[2] = orderableFieldName;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const handleSortPress = t0;
+  let t1;
+  if ($[4] !== handleSortPress || $[5] !== isActive) {
+    t1 = {
+      handleSortPress,
+      isActive
     };
+    $[4] = handleSortPress;
+    $[5] = isActive;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
 }
-export const SortHeader = (props)=>{
-    const { appearance } = props;
-    const { handleSortPress, isActive } = useSort();
-    const { t } = useTranslation();
-    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);
+export const SortHeader = props => {
+  const $ = _c(7);
+  const {
+    appearance
+  } = props;
+  const {
+    handleSortPress,
+    isActive
+  } = useSort();
+  const {
+    t
+  } = useTranslation();
+  const t0 = appearance && `${baseClass}--appearance-${appearance}`;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = [baseClass, t0].filter(Boolean);
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = t1.join(" ");
+  let t3;
+  if ($[2] !== handleSortPress || $[3] !== isActive || $[4] !== t || $[5] !== t2) {
+    t3 = _jsx("div", {
+      className: t2,
+      children: _jsx("div", {
+        className: `${baseClass}__buttons`,
+        children: _jsx("button", {
+          "aria-label": t("general:sortByLabelDirection", {
+            direction: t("general:ascending"),
+            label: "Order"
+          }),
+          className: `${baseClass}__button ${isActive ? `${baseClass}--active` : ""}`,
+          onClick: handleSortPress,
+          type: "button",
+          children: _jsx(SortDownIcon, {})
+        })
+      })
+    });
+    $[2] = handleSortPress;
+    $[3] = isActive;
+    $[4] = t;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { SortDownIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport './index.scss'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isActive = querySort === orderableFieldName\n\n  const handleSortPress = () => {\n    // If it's already sorted by the \"_order\" field, do nothing\n    if (isActive) {\n      return\n    }\n    // If NOT sorted by the \"_order\" field, sort by that field.\n    void handleSortChange(orderableFieldName)\n  }\n\n  return { handleSortPress, isActive }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive } = useSort()\n  const { t } = useTranslation()\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__buttons`}>\n        <button\n          aria-label={t('general:sortByLabelDirection', {\n            direction: t('general:ascending'),\n            label: 'Order',\n          })}\n          className={`${baseClass}__button ${isActive ? `${baseClass}--active` : ''}`}\n          onClick={handleSortPress}\n          type=\"button\"\n        >\n          <SortDownIcon />\n        </button>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","SortDownIcon","useListQuery","useTranslation","baseClass","useSort","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isActive","handleSortPress","SortHeader","props","appearance","t","div","className","filter","Boolean","join","button","aria-label","direction","label","onClick","type"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,4BAA2B;AACxD,SAASC,YAAY,QAAQ,qCAAoC;AACjE,OAAO,eAAc;AACrB,SAASC,cAAc,QAAQ,uCAAsC;AAOrE,MAAMC,YAAY;AAElB,SAASC;IACP,MAAM,EAAEC,gBAAgB,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGN;IACxD,MAAMO,YAAYC,MAAMC,OAAO,CAACH,MAAMI,IAAI,IAAIJ,MAAMI,IAAI,CAAC,EAAE,GAAGJ,MAAMI,IAAI;IACxE,MAAMC,WAAWJ,cAAcF;IAE/B,MAAMO,kBAAkB;QACtB,2DAA2D;QAC3D,IAAID,UAAU;YACZ;QACF;QACA,2DAA2D;QAC3D,KAAKP,iBAAiBC;IACxB;IAEA,OAAO;QAAEO;QAAiBD;IAAS;AACrC;AAEA,OAAO,MAAME,aAAwC,CAACC;IACpD,MAAM,EAAEC,UAAU,EAAE,GAAGD;IACvB,MAAM,EAAEF,eAAe,EAAED,QAAQ,EAAE,GAAGR;IACtC,MAAM,EAAEa,CAAC,EAAE,GAAGf;IAEd,qBACE,QAACgB;QACCC,WAAW;YAAChB;YAAWa,cAAc,GAAGb,UAAU,aAAa,EAAEa,YAAY;SAAC,CAC3EI,MAAM,CAACC,SACPC,IAAI,CAAC;kBAER,cAAA,QAACJ;YAAIC,WAAW,GAAGhB,UAAU,SAAS,CAAC;sBACrC,cAAA,QAACoB;gBACCC,cAAYP,EAAE,gCAAgC;oBAC5CQ,WAAWR,EAAE;oBACbS,OAAO;gBACT;gBACAP,WAAW,GAAGhB,UAAU,SAAS,EAAES,WAAW,GAAGT,UAAU,QAAQ,CAAC,GAAG,IAAI;gBAC3EwB,SAASd;gBACTe,MAAK;0BAEL,cAAA,QAAC5B;;;;;;;;;;;;;;;;;;;;AAKX,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","SortDownIcon","useListQuery","useTranslation","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","filter","Boolean","t2","join","t3","_jsx","className","children","direction","label","onClick","type"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { SortDownIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport './index.scss'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isActive = querySort === orderableFieldName\n\n  const handleSortPress = () => {\n    // If it's already sorted by the \"_order\" field, do nothing\n    if (isActive) {\n      return\n    }\n    // If NOT sorted by the \"_order\" field, sort by that field.\n    void handleSortChange(orderableFieldName)\n  }\n\n  return { handleSortPress, isActive }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive } = useSort()\n  const { t } = useTranslation()\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__buttons`}>\n        <button\n          aria-label={t('general:sortByLabelDirection', {\n            direction: t('general:ascending'),\n            label: 'Order',\n          })}\n          className={`${baseClass}__button ${isActive ? `${baseClass}--active` : ''}`}\n          onClick={handleSortPress}\n          type=\"button\"\n        >\n          <SortDownIcon />\n        </button>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,YAAY,QAAQ;AAC7B,OAAO;AACP,SAASC,cAAc,QAAQ;AAO/B,MAAMC,SAAA,GAAY;AAElB,SAAAC,QAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACE;IAAAQ,gBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAwDP,YAAA;EACxD,MAAAQ,SAAA,GAAkBC,KAAA,CAAAC,OAAA,CAAcH,KAAA,CAAAI,IAAU,IAAIJ,KAAA,CAAAI,IAAA,MAAgBJ,KAAA,CAAAI,IAAU;EACxE,MAAAC,QAAA,GAAiBJ,SAAA,KAAcF,kBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAT,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAE,kBAAA;IAEPO,EAAA,GAAAA,CAAA;MAAA,IAElBD,QAAA;QAAA;MAAA;MAICP,gBAAA,CAAiBC,kBAAA;IAAA;IACxBF,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAPA,MAAAU,eAAA,GAAwBD,EAOxB;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA;IAEOG,EAAA;MAAAD,eAAA;MAAAF;IAAA;IAA4BR,CAAA,MAAAU,eAAA;IAAAV,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAA,OAA5BW,EAA4B;AAAA;AAGrC,OAAO,MAAMC,UAAA,GAAwCC,KAAA;EAAA,MAAAb,CAAA,GAAAP,EAAA;EACnD;IAAAqB;EAAA,IAAuBD,KAAA;EACvB;IAAAH,eAAA;IAAAF;EAAA,IAAsCT,OAAA;EACtC;IAAAgB;EAAA,IAAclB,cAAA;EAIa,MAAAY,EAAA,GAAAK,UAAA,IAAc,GAAAhB,SAAA,gBAA4BgB,UAAA,EAAY;EAAA,IAAAH,EAAA;EAAA,IAAAX,CAAA,QAAAS,EAAA;IAAlEE,EAAA,IAAAb,SAAA,EAAYW,EAAsD,EAAAO,MAAA,CAAAC,OACnE;IAAAjB,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EADC,MAAAkB,EAAA,GAAAP,EACD,CAAAQ,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAe,CAAA,IAAAf,CAAA,QAAAkB,EAAA;IAHVE,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EACYJ,EAEH;MAAAK,QAAA,EAERF,IAAA,CAAC;QAAAC,SAAA,EAAe,GAAAxB,SAAA,WAAuB;QAAAyB,QAAA,EACrCF,IAAA,CAAC;UAAA,cACaN,CAAA,CAAE;YAAAS,SAAA,EACDT,CAAA,CAAE;YAAAU,KAAA,EACN;UAAA,CACT;UAAAH,SAAA,EACW,GAAAxB,SAAA,YAAwBU,QAAA,GAAW,GAAAV,SAAA,UAAsB,GAAG,IAAI;UAAA4B,OAAA,EAClEhB,eAAA;UAAAiB,IAAA,EACJ;UAAAJ,QAAA,EAELF,IAAA,CAAA1B,YAAA,IAAC;QAAA,C;;;;;;;;;;;SAfPyB,E;CAoBJ","ignoreList":[]}