@payloadcms/ui 3.0.0-beta.35 → 3.0.0-beta.36

package/dist/elements/WhereBuilder/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { useEffect, useState } from 'react';
 import { useListQuery } from '../../providers/ListQuery/index.js';
@@ -138,75 +139,102 @@ const baseClass = 'where-builder';
         handleWhereChange,
         shouldUpdateQuery
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, conditions.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__label`
-    }, t('general:filterWhere', {
-        label: getTranslation(collectionPluralLabel, i18n)
-    })), /*#__PURE__*/ React.createElement("ul", {
-        className: `${baseClass}__or-filters`
-    }, conditions.map((or, orIndex)=>/*#__PURE__*/ React.createElement("li", {
-            key: orIndex
-        }, orIndex !== 0 && /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__label`
-        }, t('general:or')), /*#__PURE__*/ React.createElement("ul", {
-            className: `${baseClass}__and-filters`
-        }, Array.isArray(or?.and) && or.and.map((_, andIndex)=>{
-            const initialFieldName = Object.keys(conditions[orIndex].and[andIndex])[0];
-            const initialOperator = Object.keys(conditions[orIndex].and[andIndex]?.[initialFieldName] || {})?.[0] || undefined;
-            const initialValue = conditions[orIndex].and[andIndex]?.[initialFieldName]?.[initialOperator] || '';
-            return /*#__PURE__*/ React.createElement("li", {
-                key: andIndex
-            }, andIndex !== 0 && /*#__PURE__*/ React.createElement("div", {
-                className: `${baseClass}__label`
-            }, t('general:and')), /*#__PURE__*/ React.createElement(Condition, {
-                addCondition: addCondition,
-                andIndex: andIndex,
-                fieldName: initialFieldName,
-                fields: reducedFields,
-                initialValue: initialValue,
-                key: andIndex,
-                operator: initialOperator,
-                orIndex: orIndex,
-                removeCondition: removeCondition,
-                updateCondition: updateCondition
-            }));
-        }))))), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__add-or`,
-        icon: "plus",
-        iconPosition: "left",
-        iconStyle: "with-border",
-        onClick: ()=>{
-            addCondition({
-                andIndex: 0,
-                fieldName: reducedFields[0].value,
-                orIndex: conditions.length,
-                relation: 'or'
-            });
-        }
-    }, t('general:or'))), conditions.length === 0 && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__no-filters`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__label`
-    }, t('general:noFiltersSet')), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__add-first-filter`,
-        icon: "plus",
-        iconPosition: "left",
-        iconStyle: "with-border",
-        onClick: ()=>{
-            if (reducedFields.length > 0) {
-                addCondition({
-                    andIndex: 0,
-                    fieldName: reducedFields[0].value,
-                    orIndex: conditions.length,
-                    relation: 'or'
-                });
-            }
-        }
-    }, t('general:addFilter'))));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            conditions.length > 0 && /*#__PURE__*/ _jsxs(React.Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__label`,
+                        children: t('general:filterWhere', {
+                            label: getTranslation(collectionPluralLabel, i18n)
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("ul", {
+                        className: `${baseClass}__or-filters`,
+                        children: conditions.map((or, orIndex)=>/*#__PURE__*/ _jsxs("li", {
+                                children: [
+                                    orIndex !== 0 && /*#__PURE__*/ _jsx("div", {
+                                        className: `${baseClass}__label`,
+                                        children: t('general:or')
+                                    }),
+                                    /*#__PURE__*/ _jsx("ul", {
+                                        className: `${baseClass}__and-filters`,
+                                        children: Array.isArray(or?.and) && or.and.map((_, andIndex)=>{
+                                            const initialFieldName = Object.keys(conditions[orIndex].and[andIndex])[0];
+                                            const initialOperator = Object.keys(conditions[orIndex].and[andIndex]?.[initialFieldName] || {})?.[0] || undefined;
+                                            const initialValue = conditions[orIndex].and[andIndex]?.[initialFieldName]?.[initialOperator] || '';
+                                            return /*#__PURE__*/ _jsxs("li", {
+                                                children: [
+                                                    andIndex !== 0 && /*#__PURE__*/ _jsx("div", {
+                                                        className: `${baseClass}__label`,
+                                                        children: t('general:and')
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Condition, {
+                                                        addCondition: addCondition,
+                                                        andIndex: andIndex,
+                                                        fieldName: initialFieldName,
+                                                        fields: reducedFields,
+                                                        initialValue: initialValue,
+                                                        operator: initialOperator,
+                                                        orIndex: orIndex,
+                                                        removeCondition: removeCondition,
+                                                        updateCondition: updateCondition
+                                                    }, andIndex)
+                                                ]
+                                            }, andIndex);
+                                        })
+                                    })
+                                ]
+                            }, orIndex))
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        className: `${baseClass}__add-or`,
+                        icon: "plus",
+                        iconPosition: "left",
+                        iconStyle: "with-border",
+                        onClick: ()=>{
+                            addCondition({
+                                andIndex: 0,
+                                fieldName: reducedFields[0].value,
+                                orIndex: conditions.length,
+                                relation: 'or'
+                            });
+                        },
+                        children: t('general:or')
+                    })
+                ]
+            }),
+            conditions.length === 0 && /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__no-filters`,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__label`,
+                        children: t('general:noFiltersSet')
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        className: `${baseClass}__add-first-filter`,
+                        icon: "plus",
+                        iconPosition: "left",
+                        iconStyle: "with-border",
+                        onClick: ()=>{
+                            if (reducedFields.length > 0) {
+                                addCondition({
+                                    andIndex: 0,
+                                    fieldName: reducedFields[0].value,
+                                    orIndex: conditions.length,
+                                    relation: 'or'
+                                });
+                            }
+                        },
+                        children: t('general:addFilter')
+                    })
+                ]
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/WhereBuilder/index.tsx"],"sourcesContent":["import { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useState } from 'react'\n\nimport type { WhereBuilderProps } from './types.js'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport { Condition } from './Condition/index.js'\nimport './index.scss'\nimport { reduceFieldMap } from './reduceFieldMap.js'\nimport { transformWhereQuery } from './transformWhereQuery.js'\nimport validateWhereQuery from './validateWhereQuery.js'\n\nconst baseClass = 'where-builder'\n\nexport { WhereBuilderProps }\n\n/**\n * The WhereBuilder component is used to render the filter controls for a collection's list view.\n * It is part of the {@link ListControls} component which is used to render the controls (search, filter, where).\n */\nexport const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {\n  const { collectionPluralLabel } = props\n  const { i18n, t } = useTranslation()\n  const { columns } = useTableColumns()\n\n  const [reducedFields, setReducedColumns] = useState(() => reduceFieldMap(columns, i18n))\n\n  useEffect(() => {\n    setReducedColumns(reduceFieldMap(columns, i18n))\n  }, [columns, i18n])\n\n  const { searchParams } = useSearchParams()\n  const { handleWhereChange } = useListQuery()\n  const [shouldUpdateQuery, setShouldUpdateQuery] = React.useState(false)\n\n  // This handles initializing the where conditions from the search query (URL). That way, if you pass in\n  // query params to the URL, the where conditions will be initialized from those and displayed in the UI.\n  // Example: /admin/collections/posts?where[or][0][and][0][text][equals]=example%20post\n  /*\n    stored conditions look like this:\n    [\n      _or_ & _and_ queries have the same shape:\n      {\n        and: [{\n          category: {\n            equals: 'category-a'\n          }\n        }]\n      },\n\n      {\n        and:[{\n          category: {\n            equals: 'category-b'\n          },\n          text: {\n            not_equals: 'oranges'\n          },\n        }]\n      }\n    ]\n  */\n\n  const [conditions, setConditions] = React.useState(() => {\n    const whereFromSearch = searchParams.where\n    if (whereFromSearch) {\n      if (validateWhereQuery(whereFromSearch)) {\n        return whereFromSearch.or\n      }\n\n      // Transform the where query to be in the right format. This will transform something simple like [text][equals]=example%20post to the right format\n      const transformedWhere = transformWhereQuery(whereFromSearch)\n\n      if (validateWhereQuery(transformedWhere)) {\n        return transformedWhere.or\n      }\n\n      console.warn(`Invalid where query in URL: ${JSON.stringify(whereFromSearch)}`)\n    }\n\n    return []\n  })\n\n  const addCondition = React.useCallback(({ andIndex, fieldName, orIndex, relation }) => {\n    setConditions((prevConditions) => {\n      const newConditions = [...prevConditions]\n      if (relation === 'and') {\n        newConditions[orIndex].and.splice(andIndex, 0, { [fieldName]: {} })\n      } else {\n        newConditions.push({\n          and: [\n            {\n              [fieldName]: {},\n            },\n          ],\n        })\n      }\n\n      return newConditions\n    })\n  }, [])\n\n  const updateCondition = React.useCallback(\n    ({ andIndex, fieldName: fieldNameArg, operator: operatorArg, orIndex, value: valueArg }) => {\n      setConditions((prevConditions) => {\n        const newConditions = [...prevConditions]\n        if (typeof newConditions[orIndex].and[andIndex] === 'object') {\n          const fieldName = fieldNameArg\n          const operator = operatorArg\n          const value = valueArg ?? (operator ? newConditions[orIndex].and[andIndex][operator] : '')\n\n          if (fieldName && operator && ![null, undefined].includes(value)) {\n            newConditions[orIndex].and[andIndex] = {\n              [fieldName]: operator ? { [operator]: value } : {},\n            }\n            setShouldUpdateQuery(true)\n          }\n        }\n\n        return newConditions\n      })\n    },\n    [],\n  )\n\n  const removeCondition = React.useCallback(({ andIndex, orIndex }) => {\n    setConditions((prevConditions) => {\n      const newConditions = [...prevConditions]\n      newConditions[orIndex].and.splice(andIndex, 1)\n\n      if (newConditions[orIndex].and.length === 0) {\n        newConditions.splice(orIndex, 1)\n      }\n\n      return newConditions\n    })\n    setShouldUpdateQuery(true)\n  }, [])\n\n  React.useEffect(() => {\n    if (shouldUpdateQuery) {\n      handleWhereChange({ or: conditions })\n      setShouldUpdateQuery(false)\n    }\n  }, [conditions, handleWhereChange, shouldUpdateQuery])\n\n  return (\n    <div className={baseClass}>\n      {conditions.length > 0 && (\n        <React.Fragment>\n          <div className={`${baseClass}__label`}>\n            {t('general:filterWhere', { label: getTranslation(collectionPluralLabel, i18n) })}\n          </div>\n          <ul className={`${baseClass}__or-filters`}>\n            {conditions.map((or, orIndex) => (\n              <li key={orIndex}>\n                {orIndex !== 0 && <div className={`${baseClass}__label`}>{t('general:or')}</div>}\n                <ul className={`${baseClass}__and-filters`}>\n                  {Array.isArray(or?.and) &&\n                    or.and.map((_, andIndex) => {\n                      const initialFieldName = Object.keys(conditions[orIndex].and[andIndex])[0]\n                      const initialOperator =\n                        Object.keys(\n                          conditions[orIndex].and[andIndex]?.[initialFieldName] || {},\n                        )?.[0] || undefined\n                      const initialValue =\n                        conditions[orIndex].and[andIndex]?.[initialFieldName]?.[initialOperator] ||\n                        ''\n\n                      return (\n                        <li key={andIndex}>\n                          {andIndex !== 0 && (\n                            <div className={`${baseClass}__label`}>{t('general:and')}</div>\n                          )}\n                          <Condition\n                            addCondition={addCondition}\n                            andIndex={andIndex}\n                            fieldName={initialFieldName}\n                            fields={reducedFields}\n                            initialValue={initialValue}\n                            key={andIndex}\n                            operator={initialOperator}\n                            orIndex={orIndex}\n                            removeCondition={removeCondition}\n                            updateCondition={updateCondition}\n                          />\n                        </li>\n                      )\n                    })}\n                </ul>\n              </li>\n            ))}\n          </ul>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__add-or`}\n            icon=\"plus\"\n            iconPosition=\"left\"\n            iconStyle=\"with-border\"\n            onClick={() => {\n              addCondition({\n                andIndex: 0,\n                fieldName: reducedFields[0].value,\n                orIndex: conditions.length,\n                relation: 'or',\n              })\n            }}\n          >\n            {t('general:or')}\n          </Button>\n        </React.Fragment>\n      )}\n      {conditions.length === 0 && (\n        <div className={`${baseClass}__no-filters`}>\n          <div className={`${baseClass}__label`}>{t('general:noFiltersSet')}</div>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__add-first-filter`}\n            icon=\"plus\"\n            iconPosition=\"left\"\n            iconStyle=\"with-border\"\n            onClick={() => {\n              if (reducedFields.length > 0) {\n                addCondition({\n                  andIndex: 0,\n                  fieldName: reducedFields[0].value,\n                  orIndex: conditions.length,\n                  relation: 'or',\n                })\n              }\n            }}\n          >\n            {t('general:addFilter')}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","React","useEffect","useState","useListQuery","useSearchParams","useTranslation","Button","useTableColumns","Condition","reduceFieldMap","transformWhereQuery","validateWhereQuery","baseClass","WhereBuilder","props","collectionPluralLabel","i18n","t","columns","reducedFields","setReducedColumns","searchParams","handleWhereChange","shouldUpdateQuery","setShouldUpdateQuery","conditions","setConditions","whereFromSearch","where","or","transformedWhere","console","warn","JSON","stringify","addCondition","useCallback","andIndex","fieldName","orIndex","relation","prevConditions","newConditions","and","splice","push","updateCondition","fieldNameArg","operator","operatorArg","value","valueArg","undefined","includes","removeCondition","length","div","className","Fragment","label","ul","map","li","key","Array","isArray","_","initialFieldName","Object","keys","initialOperator","initialValue","fields","buttonStyle","icon","iconPosition","iconStyle","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/WhereBuilder/index.tsx"],"sourcesContent":["import { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useState } from 'react'\n\nimport type { WhereBuilderProps } from './types.js'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport { Condition } from './Condition/index.js'\nimport './index.scss'\nimport { reduceFieldMap } from './reduceFieldMap.js'\nimport { transformWhereQuery } from './transformWhereQuery.js'\nimport validateWhereQuery from './validateWhereQuery.js'\n\nconst baseClass = 'where-builder'\n\nexport { WhereBuilderProps }\n\n/**\n * The WhereBuilder component is used to render the filter controls for a collection's list view.\n * It is part of the {@link ListControls} component which is used to render the controls (search, filter, where).\n */\nexport const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {\n  const { collectionPluralLabel } = props\n  const { i18n, t } = useTranslation()\n  const { columns } = useTableColumns()\n\n  const [reducedFields, setReducedColumns] = useState(() => reduceFieldMap(columns, i18n))\n\n  useEffect(() => {\n    setReducedColumns(reduceFieldMap(columns, i18n))\n  }, [columns, i18n])\n\n  const { searchParams } = useSearchParams()\n  const { handleWhereChange } = useListQuery()\n  const [shouldUpdateQuery, setShouldUpdateQuery] = React.useState(false)\n\n  // This handles initializing the where conditions from the search query (URL). That way, if you pass in\n  // query params to the URL, the where conditions will be initialized from those and displayed in the UI.\n  // Example: /admin/collections/posts?where[or][0][and][0][text][equals]=example%20post\n  /*\n    stored conditions look like this:\n    [\n      _or_ & _and_ queries have the same shape:\n      {\n        and: [{\n          category: {\n            equals: 'category-a'\n          }\n        }]\n      },\n\n      {\n        and:[{\n          category: {\n            equals: 'category-b'\n          },\n          text: {\n            not_equals: 'oranges'\n          },\n        }]\n      }\n    ]\n  */\n\n  const [conditions, setConditions] = React.useState(() => {\n    const whereFromSearch = searchParams.where\n    if (whereFromSearch) {\n      if (validateWhereQuery(whereFromSearch)) {\n        return whereFromSearch.or\n      }\n\n      // Transform the where query to be in the right format. This will transform something simple like [text][equals]=example%20post to the right format\n      const transformedWhere = transformWhereQuery(whereFromSearch)\n\n      if (validateWhereQuery(transformedWhere)) {\n        return transformedWhere.or\n      }\n\n      console.warn(`Invalid where query in URL: ${JSON.stringify(whereFromSearch)}`)\n    }\n\n    return []\n  })\n\n  const addCondition = React.useCallback(({ andIndex, fieldName, orIndex, relation }) => {\n    setConditions((prevConditions) => {\n      const newConditions = [...prevConditions]\n      if (relation === 'and') {\n        newConditions[orIndex].and.splice(andIndex, 0, { [fieldName]: {} })\n      } else {\n        newConditions.push({\n          and: [\n            {\n              [fieldName]: {},\n            },\n          ],\n        })\n      }\n\n      return newConditions\n    })\n  }, [])\n\n  const updateCondition = React.useCallback(\n    ({ andIndex, fieldName: fieldNameArg, operator: operatorArg, orIndex, value: valueArg }) => {\n      setConditions((prevConditions) => {\n        const newConditions = [...prevConditions]\n        if (typeof newConditions[orIndex].and[andIndex] === 'object') {\n          const fieldName = fieldNameArg\n          const operator = operatorArg\n          const value = valueArg ?? (operator ? newConditions[orIndex].and[andIndex][operator] : '')\n\n          if (fieldName && operator && ![null, undefined].includes(value)) {\n            newConditions[orIndex].and[andIndex] = {\n              [fieldName]: operator ? { [operator]: value } : {},\n            }\n            setShouldUpdateQuery(true)\n          }\n        }\n\n        return newConditions\n      })\n    },\n    [],\n  )\n\n  const removeCondition = React.useCallback(({ andIndex, orIndex }) => {\n    setConditions((prevConditions) => {\n      const newConditions = [...prevConditions]\n      newConditions[orIndex].and.splice(andIndex, 1)\n\n      if (newConditions[orIndex].and.length === 0) {\n        newConditions.splice(orIndex, 1)\n      }\n\n      return newConditions\n    })\n    setShouldUpdateQuery(true)\n  }, [])\n\n  React.useEffect(() => {\n    if (shouldUpdateQuery) {\n      handleWhereChange({ or: conditions })\n      setShouldUpdateQuery(false)\n    }\n  }, [conditions, handleWhereChange, shouldUpdateQuery])\n\n  return (\n    <div className={baseClass}>\n      {conditions.length > 0 && (\n        <React.Fragment>\n          <div className={`${baseClass}__label`}>\n            {t('general:filterWhere', { label: getTranslation(collectionPluralLabel, i18n) })}\n          </div>\n          <ul className={`${baseClass}__or-filters`}>\n            {conditions.map((or, orIndex) => (\n              <li key={orIndex}>\n                {orIndex !== 0 && <div className={`${baseClass}__label`}>{t('general:or')}</div>}\n                <ul className={`${baseClass}__and-filters`}>\n                  {Array.isArray(or?.and) &&\n                    or.and.map((_, andIndex) => {\n                      const initialFieldName = Object.keys(conditions[orIndex].and[andIndex])[0]\n                      const initialOperator =\n                        Object.keys(\n                          conditions[orIndex].and[andIndex]?.[initialFieldName] || {},\n                        )?.[0] || undefined\n                      const initialValue =\n                        conditions[orIndex].and[andIndex]?.[initialFieldName]?.[initialOperator] ||\n                        ''\n\n                      return (\n                        <li key={andIndex}>\n                          {andIndex !== 0 && (\n                            <div className={`${baseClass}__label`}>{t('general:and')}</div>\n                          )}\n                          <Condition\n                            addCondition={addCondition}\n                            andIndex={andIndex}\n                            fieldName={initialFieldName}\n                            fields={reducedFields}\n                            initialValue={initialValue}\n                            key={andIndex}\n                            operator={initialOperator}\n                            orIndex={orIndex}\n                            removeCondition={removeCondition}\n                            updateCondition={updateCondition}\n                          />\n                        </li>\n                      )\n                    })}\n                </ul>\n              </li>\n            ))}\n          </ul>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__add-or`}\n            icon=\"plus\"\n            iconPosition=\"left\"\n            iconStyle=\"with-border\"\n            onClick={() => {\n              addCondition({\n                andIndex: 0,\n                fieldName: reducedFields[0].value,\n                orIndex: conditions.length,\n                relation: 'or',\n              })\n            }}\n          >\n            {t('general:or')}\n          </Button>\n        </React.Fragment>\n      )}\n      {conditions.length === 0 && (\n        <div className={`${baseClass}__no-filters`}>\n          <div className={`${baseClass}__label`}>{t('general:noFiltersSet')}</div>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__add-first-filter`}\n            icon=\"plus\"\n            iconPosition=\"left\"\n            iconStyle=\"with-border\"\n            onClick={() => {\n              if (reducedFields.length > 0) {\n                addCondition({\n                  andIndex: 0,\n                  fieldName: reducedFields[0].value,\n                  orIndex: conditions.length,\n                  relation: 'or',\n                })\n              }\n            }}\n          >\n            {t('general:addFilter')}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","React","useEffect","useState","useListQuery","useSearchParams","useTranslation","Button","useTableColumns","Condition","reduceFieldMap","transformWhereQuery","validateWhereQuery","baseClass","WhereBuilder","props","collectionPluralLabel","i18n","t","columns","reducedFields","setReducedColumns","searchParams","handleWhereChange","shouldUpdateQuery","setShouldUpdateQuery","conditions","setConditions","whereFromSearch","where","or","transformedWhere","console","warn","JSON","stringify","addCondition","useCallback","andIndex","fieldName","orIndex","relation","prevConditions","newConditions","and","splice","push","updateCondition","fieldNameArg","operator","operatorArg","value","valueArg","undefined","includes","removeCondition","length","div","className","Fragment","label","ul","map","li","Array","isArray","_","initialFieldName","Object","keys","initialOperator","initialValue","fields","buttonStyle","icon","iconPosition","iconStyle","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/elements/WithServerSideProps/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { isReactServerComponentOrFunction } from 'payload/utilities';
 import React from 'react';
 export const WithServerSideProps = ({ Component, serverOnlyProps, ...rest })=>{
@@ -7,9 +8,13 @@ export const WithServerSideProps = ({ Component, serverOnlyProps, ...rest })=>{
                 ...passedProps,
                 ...isReactServerComponentOrFunction(Component) ? serverOnlyProps ?? {} : {}
             };
-            return /*#__PURE__*/ React.createElement(Component, propsWithServerOnlyProps);
+            return /*#__PURE__*/ _jsx(Component, {
+                ...propsWithServerOnlyProps
+            });
         };
-        return /*#__PURE__*/ React.createElement(WithServerSideProps, rest);
+        return /*#__PURE__*/ _jsx(WithServerSideProps, {
+            ...rest
+        });
     }
     return null;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/WithServerSideProps/index.tsx"],"sourcesContent":["import type { WithServerSidePropsComponent } from 'payload/types'\n\nimport { isReactServerComponentOrFunction } from 'payload/utilities'\nimport React from 'react'\n\nexport const WithServerSideProps: WithServerSidePropsComponent = ({\n  Component,\n  serverOnlyProps,\n  ...rest\n}) => {\n  if (Component) {\n    const WithServerSideProps: React.FC = (passedProps) => {\n      const propsWithServerOnlyProps = {\n        ...passedProps,\n        ...(isReactServerComponentOrFunction(Component) ? serverOnlyProps ?? {} : {}),\n      }\n\n      return <Component {...propsWithServerOnlyProps} />\n    }\n\n    return <WithServerSideProps {...rest} />\n  }\n\n  return null\n}\n"],"names":["isReactServerComponentOrFunction","React","WithServerSideProps","Component","serverOnlyProps","rest","passedProps","propsWithServerOnlyProps"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAEA,SAASA,gCAAgC,QAAQ,oBAAmB;AACpE,OAAOC,WAAW,QAAO;AAEzB,OAAO,MAAMC,sBAAoD,CAAC,EAChEC,SAAS,EACTC,eAAe,EACf,GAAGC,MACJ;IACC,IAAIF,WAAW;QACb,MAAMD,sBAAgC,CAACI;YACrC,MAAMC,2BAA2B;gBAC/B,GAAGD,WAAW;gBACd,GAAIN,iCAAiCG,aAAaC,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC9E;YAEA,qBAAO,oBAACD,WAAcI;QACxB;QAEA,qBAAO,oBAACL,qBAAwBG;IAClC;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../src/elements/WithServerSideProps/index.tsx"],"sourcesContent":["import type { WithServerSidePropsComponent } from 'payload/types'\n\nimport { isReactServerComponentOrFunction } from 'payload/utilities'\nimport React from 'react'\n\nexport const WithServerSideProps: WithServerSidePropsComponent = ({\n  Component,\n  serverOnlyProps,\n  ...rest\n}) => {\n  if (Component) {\n    const WithServerSideProps: React.FC = (passedProps) => {\n      const propsWithServerOnlyProps = {\n        ...passedProps,\n        ...(isReactServerComponentOrFunction(Component) ? serverOnlyProps ?? {} : {}),\n      }\n\n      return <Component {...propsWithServerOnlyProps} />\n    }\n\n    return <WithServerSideProps {...rest} />\n  }\n\n  return null\n}\n"],"names":["isReactServerComponentOrFunction","React","WithServerSideProps","Component","serverOnlyProps","rest","passedProps","propsWithServerOnlyProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";AAEA,SAASA,gCAAgC,QAAQ,oBAAmB;AACpE,OAAOC,WAAW,QAAO;AAEzB,OAAO,MAAMC,sBAAoD,CAAC,EAChEC,SAAS,EACTC,eAAe,EACf,GAAGC,MACJ;IACC,IAAIF,WAAW;QACb,MAAMD,sBAAgC,CAACI;YACrC,MAAMC,2BAA2B;gBAC/B,GAAGD,WAAW;gBACd,GAAIN,iCAAiCG,aAAaC,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC9E;YAEA,qBAAO,KAACD;gBAAW,GAAGI,wBAAwB;;QAChD;QAEA,qBAAO,KAACL;YAAqB,GAAGG,IAAI;;IACtC;IAEA,OAAO;AACT,EAAC"}

package/dist/elements/withMergedProps/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { serverProps } from 'payload/config';
 import { deepMerge } from 'payload/utilities';
 import React from 'react';
@@ -27,7 +28,9 @@ import React from 'react';
                 delete mergedProps[prop];
             });
         }
-        return /*#__PURE__*/ React.createElement(Component, mergedProps);
+        return /*#__PURE__*/ _jsx(Component, {
+            ...mergedProps
+        });
     };
     return MergedPropsComponent;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/withMergedProps/index.tsx"],"sourcesContent":["import { serverProps } from 'payload/config'\nimport { deepMerge } from 'payload/utilities'\nimport React from 'react'\n\n/**\n * Creates a higher-order component (HOC) that merges predefined properties (`toMergeIntoProps`)\n * with any properties passed to the resulting component.\n *\n * Use this when you want to pre-specify some props for a component, while also allowing users to\n * pass in their own props. The HOC ensures the passed props and predefined props are combined before\n * rendering the original component.\n *\n * @example\n * const PredefinedComponent = getMergedPropsComponent({\n *   Component: OriginalComponent,\n *   toMergeIntoProps: { someExtraValue: 5 }\n * });\n * // Using <PredefinedComponent customProp=\"value\" /> will result in\n * // <OriginalComponent customProp=\"value\" someExtraValue={5} />\n *\n * @returns A higher-order component with combined properties.\n */\nexport function withMergedProps<ToMergeIntoProps, CompleteReturnProps>({\n  Component,\n  sanitizeServerOnlyProps = true,\n  toMergeIntoProps,\n}: {\n  Component: React.FC<CompleteReturnProps>\n  sanitizeServerOnlyProps?: boolean\n  toMergeIntoProps: ToMergeIntoProps\n}): React.FC<CompleteReturnProps> {\n  // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props\n  const MergedPropsComponent: React.FC<CompleteReturnProps> = (passedProps) => {\n    const mergedProps = deepMerge(passedProps, toMergeIntoProps)\n\n    if (sanitizeServerOnlyProps) {\n      serverProps.forEach((prop) => {\n        delete (mergedProps)[prop]\n      })\n    }\n\n    return <Component {...mergedProps} />\n  }\n\n  return MergedPropsComponent\n}\n"],"names":["serverProps","deepMerge","React","withMergedProps","Component","sanitizeServerOnlyProps","toMergeIntoProps","MergedPropsComponent","passedProps","mergedProps","forEach","prop"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,WAAW,QAAQ,iBAAgB;AAC5C,SAASC,SAAS,QAAQ,oBAAmB;AAC7C,OAAOC,WAAW,QAAO;AAEzB;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC,gBAAuD,EACrEC,SAAS,EACTC,0BAA0B,IAAI,EAC9BC,gBAAgB,EAKjB;IACC,sHAAsH;IACtH,MAAMC,uBAAsD,CAACC;QAC3D,MAAMC,cAAcR,UAAUO,aAAaF;QAE3C,IAAID,yBAAyB;YAC3BL,YAAYU,OAAO,CAAC,CAACC;gBACnB,OAAO,AAACF,WAAY,CAACE,KAAK;YAC5B;QACF;QAEA,qBAAO,oBAACP,WAAcK;IACxB;IAEA,OAAOF;AACT"}
+{"version":3,"sources":["../../../src/elements/withMergedProps/index.tsx"],"sourcesContent":["import { serverProps } from 'payload/config'\nimport { deepMerge } from 'payload/utilities'\nimport React from 'react'\n\n/**\n * Creates a higher-order component (HOC) that merges predefined properties (`toMergeIntoProps`)\n * with any properties passed to the resulting component.\n *\n * Use this when you want to pre-specify some props for a component, while also allowing users to\n * pass in their own props. The HOC ensures the passed props and predefined props are combined before\n * rendering the original component.\n *\n * @example\n * const PredefinedComponent = getMergedPropsComponent({\n *   Component: OriginalComponent,\n *   toMergeIntoProps: { someExtraValue: 5 }\n * });\n * // Using <PredefinedComponent customProp=\"value\" /> will result in\n * // <OriginalComponent customProp=\"value\" someExtraValue={5} />\n *\n * @returns A higher-order component with combined properties.\n */\nexport function withMergedProps<ToMergeIntoProps, CompleteReturnProps>({\n  Component,\n  sanitizeServerOnlyProps = true,\n  toMergeIntoProps,\n}: {\n  Component: React.FC<CompleteReturnProps>\n  sanitizeServerOnlyProps?: boolean\n  toMergeIntoProps: ToMergeIntoProps\n}): React.FC<CompleteReturnProps> {\n  // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props\n  const MergedPropsComponent: React.FC<CompleteReturnProps> = (passedProps) => {\n    const mergedProps = deepMerge(passedProps, toMergeIntoProps)\n\n    if (sanitizeServerOnlyProps) {\n      serverProps.forEach((prop) => {\n        delete (mergedProps)[prop]\n      })\n    }\n\n    return <Component {...mergedProps} />\n  }\n\n  return MergedPropsComponent\n}\n"],"names":["serverProps","deepMerge","React","withMergedProps","Component","sanitizeServerOnlyProps","toMergeIntoProps","MergedPropsComponent","passedProps","mergedProps","forEach","prop"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,WAAW,QAAQ,iBAAgB;AAC5C,SAASC,SAAS,QAAQ,oBAAmB;AAC7C,OAAOC,WAAW,QAAO;AAEzB;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC,gBAAuD,EACrEC,SAAS,EACTC,0BAA0B,IAAI,EAC9BC,gBAAgB,EAKjB;IACC,sHAAsH;IACtH,MAAMC,uBAAsD,CAACC;QAC3D,MAAMC,cAAcR,UAAUO,aAAaF;QAE3C,IAAID,yBAAyB;YAC3BL,YAAYU,OAAO,CAAC,CAACC;gBACnB,OAAO,AAACF,WAAY,CAACE,KAAK;YAC5B;QACF;QAEA,qBAAO,KAACP;YAAW,GAAGK,WAAW;;IACnC;IAEA,OAAOF;AACT"}

package/dist/fields/Array/ArrayRow.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { ArrayAction } from '../../elements/ArrayAction/index.js';
@@ -18,57 +19,62 @@ export const ArrayRow = ({ CustomRowLabel, addRow, attributes, duplicateRow, err
         `${baseClass}__row`,
         fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`
     ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("div", {
         id: `${parentPath.split('.').join('-')}-row-${rowIndex}`,
-        key: `${parentPath}-row-${row.id}`,
         ref: setNodeRef,
         style: {
             transform
-        }
-    }, /*#__PURE__*/ React.createElement(Collapsible, {
-        actions: !readOnly ? /*#__PURE__*/ React.createElement(ArrayAction, {
-            addRow: addRow,
-            duplicateRow: duplicateRow,
-            hasMaxRows: hasMaxRows,
-            index: rowIndex,
-            isSortable: isSortable,
-            moveRow: moveRow,
-            removeRow: removeRow,
-            rowCount: rowCount
-        }) : undefined,
-        className: classNames,
-        collapsibleStyle: fieldHasErrors ? 'error' : 'default',
-        dragHandleProps: isSortable ? {
-            id: row.id,
-            attributes,
-            listeners
-        } : undefined,
-        header: /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__row-header`
-        }, /*#__PURE__*/ React.createElement(RowLabel, {
-            RowLabelComponent: CustomRowLabel,
-            i18n: i18n,
-            path: path,
-            rowLabel: fallbackLabel,
-            rowNumber: rowIndex + 1
-        }), fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
-            count: errorCount,
-            i18n: i18n,
-            withMessage: true
-        })),
-        isCollapsed: row.collapsed,
-        onToggle: (collapsed)=>setCollapse(row.id, collapsed)
-    }, /*#__PURE__*/ React.createElement(RenderFields, {
-        className: `${baseClass}__fields`,
-        fieldMap: fieldMap,
-        forceRender: forceRender,
-        indexPath: indexPath,
-        margins: "small",
-        path: path,
-        permissions: permissions?.fields,
-        readOnly: readOnly,
-        schemaPath: schemaPath
-    })));
+        },
+        children: /*#__PURE__*/ _jsx(Collapsible, {
+            actions: !readOnly ? /*#__PURE__*/ _jsx(ArrayAction, {
+                addRow: addRow,
+                duplicateRow: duplicateRow,
+                hasMaxRows: hasMaxRows,
+                index: rowIndex,
+                isSortable: isSortable,
+                moveRow: moveRow,
+                removeRow: removeRow,
+                rowCount: rowCount
+            }) : undefined,
+            className: classNames,
+            collapsibleStyle: fieldHasErrors ? 'error' : 'default',
+            dragHandleProps: isSortable ? {
+                id: row.id,
+                attributes,
+                listeners
+            } : undefined,
+            header: /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__row-header`,
+                children: [
+                    /*#__PURE__*/ _jsx(RowLabel, {
+                        RowLabelComponent: CustomRowLabel,
+                        i18n: i18n,
+                        path: path,
+                        rowLabel: fallbackLabel,
+                        rowNumber: rowIndex + 1
+                    }),
+                    fieldHasErrors && /*#__PURE__*/ _jsx(ErrorPill, {
+                        count: errorCount,
+                        i18n: i18n,
+                        withMessage: true
+                    })
+                ]
+            }),
+            isCollapsed: row.collapsed,
+            onToggle: (collapsed)=>setCollapse(row.id, collapsed),
+            children: /*#__PURE__*/ _jsx(RenderFields, {
+                className: `${baseClass}__fields`,
+                fieldMap: fieldMap,
+                forceRender: forceRender,
+                indexPath: indexPath,
+                margins: "small",
+                path: path,
+                permissions: permissions?.fields,
+                readOnly: readOnly,
+                schemaPath: schemaPath
+            })
+        })
+    }, `${parentPath}-row-${row.id}`);
 };
 
 //# sourceMappingURL=ArrayRow.js.map

package/dist/fields/Array/ArrayRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Array/ArrayRow.tsx"],"sourcesContent":["import type { FieldPermissions } from 'payload/auth'\nimport type { ArrayField, Row } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { ArrayAction } from '../../elements/ArrayAction/index.js'\nimport { Collapsible } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'array-field'\n\ntype ArrayRowProps = UseDraggableSortableReturn & {\n  CustomRowLabel?: React.ReactNode\n  addRow: (rowIndex: number) => void\n  duplicateRow: (rowIndex: number) => void\n  errorCount: number\n  fieldMap: FieldMap\n  forceRender?: boolean\n  hasMaxRows?: boolean\n  indexPath: string\n  isSortable?: boolean\n  labels: ArrayField['labels']\n  moveRow: (fromIndex: number, toIndex: number) => void\n  path: string\n  permissions: FieldPermissions\n  readOnly?: boolean\n  removeRow: (rowIndex: number) => void\n  row: Row\n  rowCount: number\n  rowIndex: number\n  schemaPath: string\n  setCollapse: (rowID: string, collapsed: boolean) => void\n}\n\nexport const ArrayRow: React.FC<ArrayRowProps> = ({\n  CustomRowLabel,\n  addRow,\n  attributes,\n  duplicateRow,\n  errorCount,\n  fieldMap,\n  forceRender = false,\n  hasMaxRows,\n  indexPath,\n  isSortable,\n  labels,\n  listeners,\n  moveRow,\n  path: parentPath,\n  permissions,\n  readOnly,\n  removeRow,\n  row,\n  rowCount,\n  rowIndex,\n  schemaPath,\n  setCollapse,\n  setNodeRef,\n  transform,\n}) => {\n  const path = `${parentPath}.${rowIndex}`\n  const { i18n } = useTranslation()\n  const hasSubmitted = useFormSubmitted()\n\n  const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(\n    2,\n    '0',\n  )}`\n\n  const fieldHasErrors = errorCount > 0 && hasSubmitted\n\n  const classNames = [\n    `${baseClass}__row`,\n    fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}\n      key={`${parentPath}-row-${row.id}`}\n      ref={setNodeRef}\n      style={{\n        transform,\n      }}\n    >\n      <Collapsible\n        actions={\n          !readOnly ? (\n            <ArrayAction\n              addRow={addRow}\n              duplicateRow={duplicateRow}\n              hasMaxRows={hasMaxRows}\n              index={rowIndex}\n              isSortable={isSortable}\n              moveRow={moveRow}\n              removeRow={removeRow}\n              rowCount={rowCount}\n            />\n          ) : undefined\n        }\n        className={classNames}\n        collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n        dragHandleProps={\n          isSortable\n            ? {\n                id: row.id,\n                attributes,\n                listeners,\n              }\n            : undefined\n        }\n        header={\n          <div className={`${baseClass}__row-header`}>\n            <RowLabel\n              RowLabelComponent={CustomRowLabel}\n              i18n={i18n}\n              path={path}\n              rowLabel={fallbackLabel}\n              rowNumber={rowIndex + 1}\n            />\n            {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n          </div>\n        }\n        isCollapsed={row.collapsed}\n        onToggle={(collapsed) => setCollapse(row.id, collapsed)}\n      >\n        <RenderFields\n          className={`${baseClass}__fields`}\n          fieldMap={fieldMap}\n          forceRender={forceRender}\n          indexPath={indexPath}\n          margins=\"small\"\n          path={path}\n          permissions={permissions?.fields}\n          readOnly={readOnly}\n          schemaPath={schemaPath}\n        />\n      </Collapsible>\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ArrayAction","Collapsible","ErrorPill","useFormSubmitted","RenderFields","RowLabel","useTranslation","baseClass","ArrayRow","CustomRowLabel","addRow","attributes","duplicateRow","errorCount","fieldMap","forceRender","hasMaxRows","indexPath","isSortable","labels","listeners","moveRow","path","parentPath","permissions","readOnly","removeRow","row","rowCount","rowIndex","schemaPath","setCollapse","setNodeRef","transform","i18n","hasSubmitted","fallbackLabel","singular","String","padStart","fieldHasErrors","classNames","filter","Boolean","join","div","id","split","key","ref","style","actions","index","undefined","className","collapsibleStyle","dragHandleProps","header","RowLabelComponent","rowLabel","rowNumber","count","withMessage","isCollapsed","collapsed","onToggle","margins","fields"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAKzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,SAAS,QAAQ,oCAAmC;AAC7D,SAASC,gBAAgB,QAAQ,8BAA6B;AAC9D,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAyBlB,OAAO,MAAMC,WAAoC,CAAC,EAChDC,cAAc,EACdC,MAAM,EACNC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,OAAO,EACPC,MAAMC,UAAU,EAChBC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,GAAG,EACHC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACV;IACC,MAAMX,OAAO,CAAC,EAAEC,WAAW,CAAC,EAAEM,SAAS,CAAC;IACxC,MAAM,EAAEK,IAAI,EAAE,GAAG5B;IACjB,MAAM6B,eAAehC;IAErB,MAAMiC,gBAAgB,CAAC,EAAEtC,eAAeqB,OAAOkB,QAAQ,EAAEH,MAAM,CAAC,EAAEI,OAAOT,WAAW,GAAGU,QAAQ,CAC7F,GACA,KACA,CAAC;IAEH,MAAMC,iBAAiB3B,aAAa,KAAKsB;IAEzC,MAAMM,aAAa;QACjB,CAAC,EAAElC,UAAU,KAAK,CAAC;QACnBiC,iBAAiB,CAAC,EAAEjC,UAAU,iBAAiB,CAAC,GAAG,CAAC,EAAEA,UAAU,gBAAgB,CAAC;KAClF,CACEmC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,oBAACC;QACCC,IAAI,CAAC,EAAEvB,WAAWwB,KAAK,CAAC,KAAKH,IAAI,CAAC,KAAK,KAAK,EAAEf,SAAS,CAAC;QACxDmB,KAAK,CAAC,EAAEzB,WAAW,KAAK,EAAEI,IAAImB,EAAE,CAAC,CAAC;QAClCG,KAAKjB;QACLkB,OAAO;YACLjB;QACF;qBAEA,oBAAChC;QACCkD,SACE,CAAC1B,yBACC,oBAACzB;YACCU,QAAQA;YACRE,cAAcA;YACdI,YAAYA;YACZoC,OAAOvB;YACPX,YAAYA;YACZG,SAASA;YACTK,WAAWA;YACXE,UAAUA;aAEVyB;QAENC,WAAWb;QACXc,kBAAkBf,iBAAiB,UAAU;QAC7CgB,iBACEtC,aACI;YACE4B,IAAInB,IAAImB,EAAE;YACVnC;YACAS;QACF,IACAiC;QAENI,sBACE,oBAACZ;YAAIS,WAAW,CAAC,EAAE/C,UAAU,YAAY,CAAC;yBACxC,oBAACF;YACCqD,mBAAmBjD;YACnByB,MAAMA;YACNZ,MAAMA;YACNqC,UAAUvB;YACVwB,WAAW/B,WAAW;YAEvBW,gCAAkB,oBAACtC;YAAU2D,OAAOhD;YAAYqB,MAAMA;YAAM4B,aAAAA;;QAGjEC,aAAapC,IAAIqC,SAAS;QAC1BC,UAAU,CAACD,YAAcjC,YAAYJ,IAAImB,EAAE,EAAEkB;qBAE7C,oBAAC5D;QACCkD,WAAW,CAAC,EAAE/C,UAAU,QAAQ,CAAC;QACjCO,UAAUA;QACVC,aAAaA;QACbE,WAAWA;QACXiD,SAAQ;QACR5C,MAAMA;QACNE,aAAaA,aAAa2C;QAC1B1C,UAAUA;QACVK,YAAYA;;AAKtB,EAAC"}
+{"version":3,"sources":["../../../src/fields/Array/ArrayRow.tsx"],"sourcesContent":["import type { FieldPermissions } from 'payload/auth'\nimport type { ArrayField, Row } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { ArrayAction } from '../../elements/ArrayAction/index.js'\nimport { Collapsible } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'array-field'\n\ntype ArrayRowProps = UseDraggableSortableReturn & {\n  CustomRowLabel?: React.ReactNode\n  addRow: (rowIndex: number) => void\n  duplicateRow: (rowIndex: number) => void\n  errorCount: number\n  fieldMap: FieldMap\n  forceRender?: boolean\n  hasMaxRows?: boolean\n  indexPath: string\n  isSortable?: boolean\n  labels: ArrayField['labels']\n  moveRow: (fromIndex: number, toIndex: number) => void\n  path: string\n  permissions: FieldPermissions\n  readOnly?: boolean\n  removeRow: (rowIndex: number) => void\n  row: Row\n  rowCount: number\n  rowIndex: number\n  schemaPath: string\n  setCollapse: (rowID: string, collapsed: boolean) => void\n}\n\nexport const ArrayRow: React.FC<ArrayRowProps> = ({\n  CustomRowLabel,\n  addRow,\n  attributes,\n  duplicateRow,\n  errorCount,\n  fieldMap,\n  forceRender = false,\n  hasMaxRows,\n  indexPath,\n  isSortable,\n  labels,\n  listeners,\n  moveRow,\n  path: parentPath,\n  permissions,\n  readOnly,\n  removeRow,\n  row,\n  rowCount,\n  rowIndex,\n  schemaPath,\n  setCollapse,\n  setNodeRef,\n  transform,\n}) => {\n  const path = `${parentPath}.${rowIndex}`\n  const { i18n } = useTranslation()\n  const hasSubmitted = useFormSubmitted()\n\n  const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(\n    2,\n    '0',\n  )}`\n\n  const fieldHasErrors = errorCount > 0 && hasSubmitted\n\n  const classNames = [\n    `${baseClass}__row`,\n    fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}\n      key={`${parentPath}-row-${row.id}`}\n      ref={setNodeRef}\n      style={{\n        transform,\n      }}\n    >\n      <Collapsible\n        actions={\n          !readOnly ? (\n            <ArrayAction\n              addRow={addRow}\n              duplicateRow={duplicateRow}\n              hasMaxRows={hasMaxRows}\n              index={rowIndex}\n              isSortable={isSortable}\n              moveRow={moveRow}\n              removeRow={removeRow}\n              rowCount={rowCount}\n            />\n          ) : undefined\n        }\n        className={classNames}\n        collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n        dragHandleProps={\n          isSortable\n            ? {\n                id: row.id,\n                attributes,\n                listeners,\n              }\n            : undefined\n        }\n        header={\n          <div className={`${baseClass}__row-header`}>\n            <RowLabel\n              RowLabelComponent={CustomRowLabel}\n              i18n={i18n}\n              path={path}\n              rowLabel={fallbackLabel}\n              rowNumber={rowIndex + 1}\n            />\n            {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n          </div>\n        }\n        isCollapsed={row.collapsed}\n        onToggle={(collapsed) => setCollapse(row.id, collapsed)}\n      >\n        <RenderFields\n          className={`${baseClass}__fields`}\n          fieldMap={fieldMap}\n          forceRender={forceRender}\n          indexPath={indexPath}\n          margins=\"small\"\n          path={path}\n          permissions={permissions?.fields}\n          readOnly={readOnly}\n          schemaPath={schemaPath}\n        />\n      </Collapsible>\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ArrayAction","Collapsible","ErrorPill","useFormSubmitted","RenderFields","RowLabel","useTranslation","baseClass","ArrayRow","CustomRowLabel","addRow","attributes","duplicateRow","errorCount","fieldMap","forceRender","hasMaxRows","indexPath","isSortable","labels","listeners","moveRow","path","parentPath","permissions","readOnly","removeRow","row","rowCount","rowIndex","schemaPath","setCollapse","setNodeRef","transform","i18n","hasSubmitted","fallbackLabel","singular","String","padStart","fieldHasErrors","classNames","filter","Boolean","join","div","id","split","ref","style","actions","index","undefined","className","collapsibleStyle","dragHandleProps","header","RowLabelComponent","rowLabel","rowNumber","count","withMessage","isCollapsed","collapsed","onToggle","margins","fields"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAKzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,SAAS,QAAQ,oCAAmC;AAC7D,SAASC,gBAAgB,QAAQ,8BAA6B;AAC9D,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAyBlB,OAAO,MAAMC,WAAoC,CAAC,EAChDC,cAAc,EACdC,MAAM,EACNC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,OAAO,EACPC,MAAMC,UAAU,EAChBC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,GAAG,EACHC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACV;IACC,MAAMX,OAAO,CAAC,EAAEC,WAAW,CAAC,EAAEM,SAAS,CAAC;IACxC,MAAM,EAAEK,IAAI,EAAE,GAAG5B;IACjB,MAAM6B,eAAehC;IAErB,MAAMiC,gBAAgB,CAAC,EAAEtC,eAAeqB,OAAOkB,QAAQ,EAAEH,MAAM,CAAC,EAAEI,OAAOT,WAAW,GAAGU,QAAQ,CAC7F,GACA,KACA,CAAC;IAEH,MAAMC,iBAAiB3B,aAAa,KAAKsB;IAEzC,MAAMM,aAAa;QACjB,CAAC,EAAElC,UAAU,KAAK,CAAC;QACnBiC,iBAAiB,CAAC,EAAEjC,UAAU,iBAAiB,CAAC,GAAG,CAAC,EAAEA,UAAU,gBAAgB,CAAC;KAClF,CACEmC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,KAACC;QACCC,IAAI,CAAC,EAAEvB,WAAWwB,KAAK,CAAC,KAAKH,IAAI,CAAC,KAAK,KAAK,EAAEf,SAAS,CAAC;QAExDmB,KAAKhB;QACLiB,OAAO;YACLhB;QACF;kBAEA,cAAA,KAAChC;YACCiD,SACE,CAACzB,yBACC,KAACzB;gBACCU,QAAQA;gBACRE,cAAcA;gBACdI,YAAYA;gBACZmC,OAAOtB;gBACPX,YAAYA;gBACZG,SAASA;gBACTK,WAAWA;gBACXE,UAAUA;iBAEVwB;YAENC,WAAWZ;YACXa,kBAAkBd,iBAAiB,UAAU;YAC7Ce,iBACErC,aACI;gBACE4B,IAAInB,IAAImB,EAAE;gBACVnC;gBACAS;YACF,IACAgC;YAENI,sBACE,MAACX;gBAAIQ,WAAW,CAAC,EAAE9C,UAAU,YAAY,CAAC;;kCACxC,KAACF;wBACCoD,mBAAmBhD;wBACnByB,MAAMA;wBACNZ,MAAMA;wBACNoC,UAAUtB;wBACVuB,WAAW9B,WAAW;;oBAEvBW,gCAAkB,KAACtC;wBAAU0D,OAAO/C;wBAAYqB,MAAMA;wBAAM2B,WAAW;;;;YAG5EC,aAAanC,IAAIoC,SAAS;YAC1BC,UAAU,CAACD,YAAchC,YAAYJ,IAAImB,EAAE,EAAEiB;sBAE7C,cAAA,KAAC3D;gBACCiD,WAAW,CAAC,EAAE9C,UAAU,QAAQ,CAAC;gBACjCO,UAAUA;gBACVC,aAAaA;gBACbE,WAAWA;gBACXgD,SAAQ;gBACR3C,MAAMA;gBACNE,aAAaA,aAAa0C;gBAC1BzC,UAAUA;gBACVK,YAAYA;;;OAxDX,CAAC,EAAEP,WAAW,KAAK,EAAEI,IAAImB,EAAE,CAAC,CAAC;AA6DxC,EAAC"}