@payloadcms/ui 3.80.0-canary.3 → 3.80.0-internal-debug.daef79f

package/dist/elements/GroupByBuilder/index.js

@@ -1,6 +1,5 @@
 'use client';
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import './index.scss';
 import React, { useMemo } from 'react';
 import { SelectInput } from '../../fields/Select/Input.js';
@@ -9,152 +8,208 @@ import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
 import { ReactSelect } from '../ReactSelect/index.js';
-const baseClass = 'group-by-builder';
+/** When set, GroupByBuilder is controlled by the form (value + onChange) instead of list query. */ const baseClass = 'group-by-builder';
 /**
  * Note: Some fields are already omitted from the list of fields:
  * - fields with nested field, e.g. `tabs`, `groups`, etc.
  * - fields that don't affect data, i.e. `row`, `collapsible`, `ui`, etc.
  * So we don't technically need to omit them here, but do anyway.
  * But some remaining fields still need an additional check, e.g. `richText`, etc.
- */
-const supportedFieldTypes = ['text', 'textarea', 'number', 'select', 'relationship', 'date', 'checkbox', 'radio', 'email', 'number', 'upload'];
-export const GroupByBuilder = ({
-  collectionSlug,
-  fields,
-  onChange,
-  value: valueProp
-}) => {
-  const {
-    i18n,
-    t
-  } = useTranslation();
-  const {
-    permissions
-  } = useAuth();
-  const listQuery = useListQuery();
-  const isFormMode = typeof onChange === 'function';
-  const groupByRaw = isFormMode ? valueProp : listQuery.query?.groupBy;
-  const groupByFieldName = groupByRaw?.replace(/^-/, '');
-  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
-  const reducedFields = useMemo(() => reduceFieldsToOptions({
-    fieldPermissions,
-    fields,
-    i18n
-  }), [fields, fieldPermissions, i18n]);
-  const groupByField = reducedFields.find(field => field.value === groupByFieldName);
-  const handleFieldChange = useMemo(() => {
-    if (isFormMode) {
-      return v => {
-        const value = v === null ? undefined : v.value;
-        const newGroupBy = value ? groupByRaw?.startsWith('-') ? `-${value}` : value : '';
-        onChange?.(newGroupBy);
-      };
-    }
-    return v_0 => {
-      void (async () => {
-        if (typeof listQuery.refineListData !== 'function') {
-          return;
-        }
-        const value_0 = v_0 === null ? undefined : v_0.value;
-        if (v_0 === null) {
-          await listQuery.refineListData({
-            groupBy: '',
-            page: 1
-          });
-        } else {
-          await listQuery.refineListData({
-            groupBy: value_0 ? listQuery.query?.groupBy?.startsWith('-') ? `-${value_0}` : value_0 : undefined,
-            page: 1
-          });
-        }
-      })();
-    };
-  }, [isFormMode, groupByRaw, listQuery, onChange]);
-  const handleClear = useMemo(() => {
-    if (isFormMode) {
-      return () => onChange?.('');
-    }
-    return () => {
-      void (async () => {
-        if (typeof listQuery.refineListData === 'function') {
-          await listQuery.refineListData({
-            groupBy: ''
-          });
+ */ const supportedFieldTypes = [
+    'text',
+    'textarea',
+    'number',
+    'select',
+    'relationship',
+    'date',
+    'checkbox',
+    'radio',
+    'email',
+    'number',
+    'upload'
+];
+export const GroupByBuilder = ({ collectionSlug, fields, onChange, value: valueProp })=>{
+    const { i18n, t } = useTranslation();
+    const { permissions } = useAuth();
+    const listQuery = useListQuery();
+    const isFormMode = typeof onChange === 'function';
+    const groupByRaw = isFormMode ? valueProp : listQuery.query?.groupBy;
+    const groupByFieldName = groupByRaw?.replace(/^-/, '');
+    const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
+    const reducedFields = useMemo(()=>reduceFieldsToOptions({
+            fieldPermissions,
+            fields,
+            i18n
+        }), [
+        fields,
+        fieldPermissions,
+        i18n
+    ]);
+    const groupByField = reducedFields.find((field)=>field.value === groupByFieldName);
+    const handleFieldChange = useMemo(()=>{
+        if (isFormMode) {
+            return (v)=>{
+                const value = v === null ? undefined : v.value;
+                const newGroupBy = value ? groupByRaw?.startsWith('-') ? `-${value}` : value : '';
+                onChange?.(newGroupBy);
+            };
         }
-      })();
-    };
-  }, [isFormMode, listQuery, onChange]);
-  const handleDirectionChange = useMemo(() => {
-    if (isFormMode) {
-      return ({
-        value: value_1
-      }) => {
-        if (!groupByFieldName) {
-          return;
+        return (v)=>{
+            void (async ()=>{
+                if (typeof listQuery.refineListData !== 'function') {
+                    return;
+                }
+                const value = v === null ? undefined : v.value;
+                if (v === null) {
+                    await listQuery.refineListData({
+                        groupBy: '',
+                        page: 1
+                    });
+                } else {
+                    await listQuery.refineListData({
+                        groupBy: value ? listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value : undefined,
+                        page: 1
+                    });
+                }
+            })();
+        };
+    }, [
+        isFormMode,
+        groupByRaw,
+        listQuery,
+        onChange
+    ]);
+    const handleClear = useMemo(()=>{
+        if (isFormMode) {
+            return ()=>onChange?.('');
         }
-        onChange?.(value_1 === 'asc' ? groupByFieldName : `-${groupByFieldName}`);
-      };
-    }
-    return ({
-      value: value_2
-    }) => {
-      void (async () => {
-        if (!groupByFieldName || typeof listQuery.refineListData !== 'function') {
-          return;
+        return ()=>{
+            void (async ()=>{
+                if (typeof listQuery.refineListData === 'function') {
+                    await listQuery.refineListData({
+                        groupBy: ''
+                    });
+                }
+            })();
+        };
+    }, [
+        isFormMode,
+        listQuery,
+        onChange
+    ]);
+    const handleDirectionChange = useMemo(()=>{
+        if (isFormMode) {
+            return ({ value })=>{
+                if (!groupByFieldName) {
+                    return;
+                }
+                onChange?.(value === 'asc' ? groupByFieldName : `-${groupByFieldName}`);
+            };
         }
-        await listQuery.refineListData({
-          groupBy: value_2 === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
-          page: 1
-        });
-      })();
-    };
-  }, [groupByFieldName, isFormMode, listQuery, onChange]);
-  const directionValue = !groupByRaw || typeof groupByRaw !== 'string' ? 'asc' : groupByRaw.startsWith('-') ? 'desc' : 'asc';
-  return /*#__PURE__*/_jsxs("div", {
-    className: baseClass,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__header`,
-      children: [/*#__PURE__*/_jsx("p", {
-        children: t('general:groupByLabel', {
-          label: ''
-        })
-      }), groupByRaw && /*#__PURE__*/_jsx("button", {
-        className: `${baseClass}__clear-button`,
-        id: "group-by--reset",
-        onClick: () => void handleClear(),
-        type: "button",
-        children: t('general:clear')
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__inputs`,
-      children: [/*#__PURE__*/_jsx(ReactSelect, {
-        filterOption: (option, inputValue) => (option?.data?.plainTextLabel || option.label).toLowerCase().includes(inputValue.toLowerCase()),
-        id: "group-by--field-select",
-        isClearable: true,
-        isMulti: false,
-        onChange: handleFieldChange,
-        options: reducedFields.filter(field_0 => !field_0.field.admin?.disableGroupBy && field_0.value !== 'id' && supportedFieldTypes.includes(field_0.field.type)),
-        value: {
-          label: groupByField?.label || t('general:selectValue'),
-          value: groupByFieldName || ''
-        }
-      }), /*#__PURE__*/_jsx(SelectInput, {
-        id: "group-by--sort",
-        isClearable: false,
-        name: "direction",
-        onChange: handleDirectionChange,
-        options: [{
-          label: t('general:ascending'),
-          value: 'asc'
-        }, {
-          label: t('general:descending'),
-          value: 'desc'
-        }],
-        path: "direction",
-        readOnly: !groupByFieldName,
-        value: directionValue
-      })]
-    })]
-  });
+        return ({ value })=>{
+            void (async ()=>{
+                if (!groupByFieldName || typeof listQuery.refineListData !== 'function') {
+                    return;
+                }
+                await listQuery.refineListData({
+                    groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
+                    page: 1
+                });
+            })();
+        };
+    }, [
+        groupByFieldName,
+        isFormMode,
+        listQuery,
+        onChange
+    ]);
+    const directionValue = !groupByRaw || typeof groupByRaw !== 'string' ? 'asc' : groupByRaw.startsWith('-') ? 'desc' : 'asc';
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__header`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("p", {
+                        children: t('general:groupByLabel', {
+                            label: ''
+                        })
+                    }, void 0, false, {
+                        fileName: "src/elements/GroupByBuilder/index.tsx",
+                        lineNumber: 149,
+                        columnNumber: 9
+                    }, this),
+                    groupByRaw && /*#__PURE__*/ _jsxDEV("button", {
+                        className: `${baseClass}__clear-button`,
+                        id: "group-by--reset",
+                        onClick: ()=>void handleClear(),
+                        type: "button",
+                        children: t('general:clear')
+                    }, void 0, false, {
+                        fileName: "src/elements/GroupByBuilder/index.tsx",
+                        lineNumber: 155,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/GroupByBuilder/index.tsx",
+                lineNumber: 148,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__inputs`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV(ReactSelect, {
+                        filterOption: (option, inputValue)=>(option?.data?.plainTextLabel || option.label).toLowerCase().includes(inputValue.toLowerCase()),
+                        id: "group-by--field-select",
+                        isClearable: true,
+                        isMulti: false,
+                        onChange: handleFieldChange,
+                        options: reducedFields.filter((field)=>!field.field.admin?.disableGroupBy && field.value !== 'id' && supportedFieldTypes.includes(field.field.type)),
+                        value: {
+                            label: groupByField?.label || t('general:selectValue'),
+                            value: groupByFieldName || ''
+                        }
+                    }, void 0, false, {
+                        fileName: "src/elements/GroupByBuilder/index.tsx",
+                        lineNumber: 166,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(SelectInput, {
+                        id: "group-by--sort",
+                        isClearable: false,
+                        name: "direction",
+                        onChange: handleDirectionChange,
+                        options: [
+                            {
+                                label: t('general:ascending'),
+                                value: 'asc'
+                            },
+                            {
+                                label: t('general:descending'),
+                                value: 'desc'
+                            }
+                        ],
+                        path: "direction",
+                        readOnly: !groupByFieldName,
+                        value: directionValue
+                    }, void 0, false, {
+                        fileName: "src/elements/GroupByBuilder/index.tsx",
+                        lineNumber: 187,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/GroupByBuilder/index.tsx",
+                lineNumber: 165,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/GroupByBuilder/index.tsx",
+        lineNumber: 147,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

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

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

package/dist/elements/Gutter/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","_jsx","filter","Boolean","join"],"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAYP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAiCC,KAAA;EAC5C,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,IAAA,GAAO,IAAI;IACXC,YAAA,GAAe,KAAK;IACpBC,aAAA,GAAgB,KAAK;IACrBC,GAAG;IACHC,KAAA,GAAQ;EAAI,CACb,GAAGP,KAAA;EAEJ,MAAMQ,aAAA,GAAgBL,IAAA,IAAQ,CAACC,YAAA;EAC/B,MAAMK,cAAA,GAAiBF,KAAA,IAAS,CAACF,aAAA;EAEjC,oBACEK,IAAA,CAAC;IACCR,SAAA,EAAW,CACTJ,SAAA,EACAU,aAAA,IAAiB,GAAGV,SAAA,QAAiB,EACrCW,cAAA,IAAkB,GAAGX,SAAA,SAAkB,EACvCM,YAAA,IAAgB,GAAGN,SAAA,iBAA0B,EAC7CO,aAAA,IAAiB,GAAGP,SAAA,kBAA2B,EAC/CI,SAAA,CACD,CACES,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,GAAA,EAAKA,GAAA;cAEJL;;AAGP","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: React.RefObject<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = (props) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    ref,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        baseClass,\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","baseClass","Gutter","props","children","className","left","negativeLeft","negativeRight","ref","right","shouldPadLeft","shouldPadRight","div","filter","Boolean","join"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAYrB,MAAMC,YAAY;AAElB,OAAO,MAAMC,SAAgC,CAACC;IAC5C,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,IAAI,EACXC,eAAe,KAAK,EACpBC,gBAAgB,KAAK,EACrBC,GAAG,EACHC,QAAQ,IAAI,EACb,GAAGP;IAEJ,MAAMQ,gBAAgBL,QAAQ,CAACC;IAC/B,MAAMK,iBAAiBF,SAAS,CAACF;IAEjC,qBACE,QAACK;QACCR,WAAW;YACTJ;YACAU,iBAAiB,GAAGV,UAAU,MAAM,CAAC;YACrCW,kBAAkB,GAAGX,UAAU,OAAO,CAAC;YACvCM,gBAAgB,GAAGN,UAAU,eAAe,CAAC;YAC7CO,iBAAiB,GAAGP,UAAU,gBAAgB,CAAC;YAC/CI;SACD,CACES,MAAM,CAACC,SACPC,IAAI,CAAC;QACRP,KAAKA;kBAEJL;;;;;;AAGP,EAAC"}