@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/GroupBy/Popup.js

@@ -0,0 +1,297 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useId } from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { TrashIcon } from '../../icons/Trash/index.js';
+import { XIcon } from '../../icons/X/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
+import './Popup.css';
+const baseClass = 'group-by-control';
+export const GroupByPopup = t0 => {
+  const $ = _c(39);
+  const {
+    close,
+    filteredFields,
+    groupByField,
+    groupByFieldName,
+    isActive,
+    onChange,
+    value
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const generatedId = useId();
+  const fieldTriggerId = `group-by-field-trigger-${generatedId}`;
+  const sortTriggerId = `group-by-sort-trigger-${generatedId}`;
+  const directionValue = !value || typeof value !== "string" ? "asc" : value.startsWith("-") ? "desc" : "asc";
+  let t1;
+  if ($[0] !== onChange || $[1] !== value) {
+    t1 = fieldPath => {
+      onChange(value?.startsWith("-") ? `-${fieldPath}` : fieldPath);
+    };
+    $[0] = onChange;
+    $[1] = value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const handleFieldSelect = t1;
+  let t2;
+  if ($[3] !== close || $[4] !== onChange) {
+    t2 = () => {
+      onChange("");
+      close();
+    };
+    $[3] = close;
+    $[4] = onChange;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const handleClear = t2;
+  let t3;
+  if ($[6] !== groupByFieldName || $[7] !== onChange) {
+    t3 = direction => {
+      if (!groupByFieldName) {
+        return;
+      }
+      onChange(direction === "asc" ? groupByFieldName : `-${groupByFieldName}`);
+    };
+    $[6] = groupByFieldName;
+    $[7] = onChange;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const handleDirectionSelect = t3;
+  let t4;
+  if ($[9] !== close || $[10] !== directionValue || $[11] !== fieldTriggerId || $[12] !== filteredFields || $[13] !== groupByField?.label || $[14] !== groupByFieldName || $[15] !== handleClear || $[16] !== handleDirectionSelect || $[17] !== handleFieldSelect || $[18] !== isActive || $[19] !== sortTriggerId || $[20] !== t) {
+    let t5;
+    if ($[22] !== filteredFields || $[23] !== groupByFieldName || $[24] !== handleFieldSelect) {
+      t5 = t6 => {
+        const {
+          close: closeFieldPopup
+        } = t6;
+        return _jsx(PopupList.RadioGroup, {
+          children: filteredFields.map((field, i) => _jsx(PopupList.RadioGroupItem, {
+            active: field.fieldPath === groupByFieldName,
+            onClick: () => {
+              handleFieldSelect(field.fieldPath);
+              closeFieldPopup();
+            },
+            children: field.label
+          }, i))
+        });
+      };
+      $[22] = filteredFields;
+      $[23] = groupByFieldName;
+      $[24] = handleFieldSelect;
+      $[25] = t5;
+    } else {
+      t5 = $[25];
+    }
+    let t6;
+    if ($[26] !== fieldTriggerId || $[27] !== groupByField?.label || $[28] !== t) {
+      t6 = t7 => {
+        const {
+          active,
+          ...buttonProps
+        } = t7;
+        return _jsxs("button", {
+          ...buttonProps,
+          "aria-label": t("general:field"),
+          className: `${baseClass}__select-trigger`,
+          id: fieldTriggerId,
+          type: "button",
+          children: [_jsx("span", {
+            className: `${baseClass}__select-value`,
+            children: groupByField?.label || t("general:selectValue")
+          }), _jsx(ChevronIcon, {
+            direction: active ? "up" : "down",
+            size: 16
+          })]
+        });
+      };
+      $[26] = fieldTriggerId;
+      $[27] = groupByField?.label;
+      $[28] = t;
+      $[29] = t6;
+    } else {
+      t6 = $[29];
+    }
+    let t7;
+    if ($[30] !== directionValue || $[31] !== handleDirectionSelect || $[32] !== t) {
+      t7 = t8 => {
+        const {
+          close: closeSortPopup
+        } = t8;
+        return _jsxs(PopupList.RadioGroup, {
+          children: [_jsx(PopupList.RadioGroupItem, {
+            active: directionValue === "desc",
+            onClick: () => {
+              handleDirectionSelect("desc");
+              closeSortPopup();
+            },
+            children: t("general:descending")
+          }), _jsx(PopupList.RadioGroupItem, {
+            active: directionValue === "asc",
+            onClick: () => {
+              handleDirectionSelect("asc");
+              closeSortPopup();
+            },
+            children: t("general:ascending")
+          })]
+        });
+      };
+      $[30] = directionValue;
+      $[31] = handleDirectionSelect;
+      $[32] = t;
+      $[33] = t7;
+    } else {
+      t7 = $[33];
+    }
+    let t8;
+    if ($[34] !== directionValue || $[35] !== groupByFieldName || $[36] !== sortTriggerId || $[37] !== t) {
+      t8 = t9 => {
+        const {
+          active: active_0,
+          onClick,
+          onKeyDown,
+          ...ariaProps
+        } = t9;
+        return _jsxs("button", {
+          ...ariaProps,
+          "aria-disabled": !groupByFieldName,
+          "aria-label": t("general:sort"),
+          className: [`${baseClass}__select-trigger`, !groupByFieldName && `${baseClass}__select-trigger--disabled`].filter(Boolean).join(" "),
+          id: sortTriggerId,
+          onClick: event => {
+            if (!groupByFieldName) {
+              event.preventDefault();
+              return;
+            }
+            onClick(event);
+          },
+          onKeyDown: event_0 => {
+            if (!groupByFieldName) {
+              if (event_0.key === "Enter" || event_0.key === " ") {
+                event_0.preventDefault();
+              }
+              return;
+            }
+            onKeyDown(event_0);
+          },
+          type: "button",
+          children: [_jsx("span", {
+            className: `${baseClass}__select-value`,
+            children: directionValue === "desc" ? t("general:descending") : t("general:ascending")
+          }), _jsx(ChevronIcon, {
+            direction: active_0 ? "up" : "down",
+            size: 16
+          })]
+        });
+      };
+      $[34] = directionValue;
+      $[35] = groupByFieldName;
+      $[36] = sortTriggerId;
+      $[37] = t;
+      $[38] = t8;
+    } else {
+      t8 = $[38];
+    }
+    t4 = _jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [_jsxs("div", {
+        className: `${baseClass}__header`,
+        children: [_jsx("span", {
+          className: `${baseClass}__title`,
+          children: t("general:groupByLabel", {
+            label: ""
+          })
+        }), _jsxs("div", {
+          className: `${baseClass}__header-actions`,
+          children: [isActive && _jsx(Button, {
+            "aria-label": t("general:clear"),
+            buttonStyle: "ghost",
+            icon: _jsx(TrashIcon, {}),
+            onClick: handleClear,
+            round: true,
+            size: "medium"
+          }), _jsx(Button, {
+            "aria-label": t("general:close"),
+            buttonStyle: "ghost",
+            icon: _jsx(XIcon, {
+              size: 24
+            }),
+            onClick: close,
+            round: true,
+            size: "medium"
+          })]
+        })]
+      }), _jsxs("div", {
+        className: `${baseClass}__body`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__row`,
+          children: [_jsx("label", {
+            className: `${baseClass}__label`,
+            htmlFor: fieldTriggerId,
+            children: t("general:field")
+          }), _jsx("div", {
+            className: `${baseClass}__input`,
+            "data-popup-prevent-close": true,
+            children: _jsx(Popup, {
+              className: `${baseClass}__select-popup`,
+              horizontalAlign: "right",
+              popupType: "menu",
+              render: t5,
+              renderButton: t6,
+              verticalAlign: "bottom"
+            })
+          })]
+        }), _jsxs("div", {
+          className: `${baseClass}__row`,
+          children: [_jsx("label", {
+            className: `${baseClass}__label`,
+            htmlFor: sortTriggerId,
+            children: t("general:sort")
+          }), _jsx("div", {
+            className: `${baseClass}__input`,
+            "data-popup-prevent-close": true,
+            children: _jsx(Popup, {
+              className: `${baseClass}__select-popup`,
+              disabled: !groupByFieldName,
+              horizontalAlign: "right",
+              popupType: "menu",
+              render: t7,
+              renderButton: t8,
+              size: "small",
+              verticalAlign: "bottom"
+            })
+          })]
+        })]
+      })]
+    });
+    $[9] = close;
+    $[10] = directionValue;
+    $[11] = fieldTriggerId;
+    $[12] = filteredFields;
+    $[13] = groupByField?.label;
+    $[14] = groupByFieldName;
+    $[15] = handleClear;
+    $[16] = handleDirectionSelect;
+    $[17] = handleFieldSelect;
+    $[18] = isActive;
+    $[19] = sortTriggerId;
+    $[20] = t;
+    $[21] = t4;
+  } else {
+    t4 = $[21];
+  }
+  return t4;
+};
+//# sourceMappingURL=Popup.js.map

package/dist/elements/GroupBy/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["c","_c","React","useCallback","useId","ChevronIcon","TrashIcon","XIcon","useTranslation","Button","Popup","PopupList","baseClass","GroupByPopup","t0","$","close","filteredFields","groupByField","groupByFieldName","isActive","onChange","value","t","generatedId","fieldTriggerId","sortTriggerId","directionValue","startsWith","t1","fieldPath","handleFieldSelect","t2","handleClear","t3","direction","handleDirectionSelect","t4","label","t5","t6","closeFieldPopup","_jsx","RadioGroup","children","map","field","i","RadioGroupItem","active","onClick","t7","buttonProps","_jsxs","className","id","type","size","t8","closeSortPopup","t9","active_0","onKeyDown","ariaProps","filter","Boolean","join","event","preventDefault","event_0","key","buttonStyle","icon","round","htmlFor","horizontalAlign","popupType","render","disabled","verticalAlign"],"sources":["../../../src/elements/GroupBy/Popup.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useId } from 'react'\n\nimport type { ReducedField } from '../WhereBuilder/types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './Popup.css'\n\nexport type GroupByPopupProps = {\n  /** Closes the parent popup. */\n  readonly close: () => void\n  /** The selectable, permission-filtered fields. */\n  readonly filteredFields: ReducedField[]\n  /** The currently selected field, if any. */\n  readonly groupByField?: ReducedField\n  /** The selected field path with any leading `-` stripped. */\n  readonly groupByFieldName?: string\n  /** Whether a field is currently selected. */\n  readonly isActive: boolean\n  /** Called with the next `groupBy` value (prefixed with `-` for descending). */\n  readonly onChange: (groupBy: string) => void\n  /** The current `groupBy` value (prefixed with `-` for descending). */\n  readonly value: string\n}\n\nconst baseClass = 'group-by-control'\n\nexport const GroupByPopup: React.FC<GroupByPopupProps> = ({\n  close,\n  filteredFields,\n  groupByField,\n  groupByFieldName,\n  isActive,\n  onChange,\n  value,\n}) => {\n  const { t } = useTranslation()\n  const generatedId = useId()\n  const fieldTriggerId = `group-by-field-trigger-${generatedId}`\n  const sortTriggerId = `group-by-sort-trigger-${generatedId}`\n\n  const directionValue =\n    !value || typeof value !== 'string' ? 'asc' : value.startsWith('-') ? 'desc' : 'asc'\n\n  const handleFieldSelect = useCallback(\n    (fieldPath: string) => {\n      onChange(value?.startsWith('-') ? `-${fieldPath}` : fieldPath)\n    },\n    [onChange, value],\n  )\n\n  const handleClear = useCallback(() => {\n    onChange('')\n    close()\n  }, [onChange, close])\n\n  const handleDirectionSelect = useCallback(\n    (direction: 'asc' | 'desc') => {\n      if (!groupByFieldName) {\n        return\n      }\n      onChange(direction === 'asc' ? groupByFieldName : `-${groupByFieldName}`)\n    },\n    [groupByFieldName, onChange],\n  )\n\n  return (\n    <div className={`${baseClass}__content`}>\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__title`}>{t('general:groupByLabel', { label: '' })}</span>\n        <div className={`${baseClass}__header-actions`}>\n          {isActive && (\n            <Button\n              aria-label={t('general:clear')}\n              buttonStyle=\"ghost\"\n              icon={<TrashIcon />}\n              onClick={handleClear}\n              round\n              size=\"medium\"\n            />\n          )}\n          <Button\n            aria-label={t('general:close')}\n            buttonStyle=\"ghost\"\n            icon={<XIcon size={24} />}\n            onClick={close}\n            round\n            size=\"medium\"\n          />\n        </div>\n      </div>\n      <div className={`${baseClass}__body`}>\n        <div className={`${baseClass}__row`}>\n          <label className={`${baseClass}__label`} htmlFor={fieldTriggerId}>\n            {t('general:field')}\n          </label>\n          <div className={`${baseClass}__input`} data-popup-prevent-close>\n            <Popup\n              className={`${baseClass}__select-popup`}\n              horizontalAlign=\"right\"\n              popupType=\"menu\"\n              render={({ close: closeFieldPopup }) => (\n                <PopupList.RadioGroup>\n                  {filteredFields.map((field, i) => (\n                    <PopupList.RadioGroupItem\n                      active={field.fieldPath === groupByFieldName}\n                      key={i}\n                      onClick={() => {\n                        handleFieldSelect(field.fieldPath)\n                        closeFieldPopup()\n                      }}\n                    >\n                      {field.label}\n                    </PopupList.RadioGroupItem>\n                  ))}\n                </PopupList.RadioGroup>\n              )}\n              renderButton={({ active, ...buttonProps }) => (\n                <button\n                  {...buttonProps}\n                  aria-label={t('general:field')}\n                  className={`${baseClass}__select-trigger`}\n                  id={fieldTriggerId}\n                  type=\"button\"\n                >\n                  <span className={`${baseClass}__select-value`}>\n                    {groupByField?.label || t('general:selectValue')}\n                  </span>\n                  <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                </button>\n              )}\n              verticalAlign=\"bottom\"\n            />\n          </div>\n        </div>\n        <div className={`${baseClass}__row`}>\n          <label className={`${baseClass}__label`} htmlFor={sortTriggerId}>\n            {t('general:sort')}\n          </label>\n          <div className={`${baseClass}__input`} data-popup-prevent-close>\n            <Popup\n              className={`${baseClass}__select-popup`}\n              disabled={!groupByFieldName}\n              horizontalAlign=\"right\"\n              popupType=\"menu\"\n              render={({ close: closeSortPopup }) => (\n                <PopupList.RadioGroup>\n                  <PopupList.RadioGroupItem\n                    active={directionValue === 'desc'}\n                    onClick={() => {\n                      handleDirectionSelect('desc')\n                      closeSortPopup()\n                    }}\n                  >\n                    {t('general:descending')}\n                  </PopupList.RadioGroupItem>\n                  <PopupList.RadioGroupItem\n                    active={directionValue === 'asc'}\n                    onClick={() => {\n                      handleDirectionSelect('asc')\n                      closeSortPopup()\n                    }}\n                  >\n                    {t('general:ascending')}\n                  </PopupList.RadioGroupItem>\n                </PopupList.RadioGroup>\n              )}\n              renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n                <button\n                  {...ariaProps}\n                  aria-disabled={!groupByFieldName}\n                  aria-label={t('general:sort')}\n                  className={[\n                    `${baseClass}__select-trigger`,\n                    !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  id={sortTriggerId}\n                  onClick={(event) => {\n                    if (!groupByFieldName) {\n                      event.preventDefault()\n                      return\n                    }\n                    onClick(event)\n                  }}\n                  onKeyDown={(event) => {\n                    if (!groupByFieldName) {\n                      if (event.key === 'Enter' || event.key === ' ') {\n                        event.preventDefault()\n                      }\n                      return\n                    }\n                    onKeyDown(event)\n                  }}\n                  type=\"button\"\n                >\n                  <span className={`${baseClass}__select-value`}>\n                    {directionValue === 'desc' ? t('general:descending') : t('general:ascending')}\n                  </span>\n                  <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                </button>\n              )}\n              size=\"small\"\n              verticalAlign=\"bottom\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/GroupBy/index.d.ts

@@ -0,0 +1,12 @@
+import type { ClientField, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+export type GroupByButtonProps = {
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly fields: ClientField[];
+    /** Called with the next `groupBy` value (prefixed with `-` for descending). */
+    readonly onChange: (groupBy: string) => void;
+    /** The current `groupBy` value (prefixed with `-` for descending). */
+    readonly value: string;
+};
+export declare const GroupByButton: React.FC<GroupByButtonProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/GroupBy/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupBy/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAS,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAkB,MAAM,OAAO,CAAA;AAUtC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,sEAAsE;IACtE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AAoBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmFtD,CAAA"}

package/dist/elements/GroupBy/index.js

@@ -0,0 +1,147 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isFieldDisabled } from 'payload/shared';
+import React, { useMemo } from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
+import { Button } from '../Button/index.js';
+import { Popup } from '../Popup/index.js';
+import { GroupByPopup } from './Popup.js';
+const baseClass = 'group-by-control';
+/**
+ * Supported field types for group by functionality.
+ */
+const supportedFieldTypes = ['text', 'textarea', 'number', 'select', 'relationship', 'date', 'checkbox', 'radio', 'email', 'upload'];
+export const GroupByButton = t0 => {
+  const $ = _c(15);
+  const {
+    collectionSlug,
+    fields,
+    onChange,
+    value
+  } = t0;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  let t1;
+  let t2;
+  if ($[0] !== collectionSlug || $[1] !== fields || $[2] !== i18n || $[3] !== onChange || $[4] !== permissions?.collections || $[5] !== t || $[6] !== value) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const groupByFieldName = value?.replace(/^-/, "");
+      const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
+      let t3;
+      if ($[9] !== fieldPermissions || $[10] !== fields || $[11] !== i18n) {
+        t3 = reduceFieldsToOptions({
+          fieldPermissions,
+          fields,
+          i18n
+        });
+        $[9] = fieldPermissions;
+        $[10] = fields;
+        $[11] = i18n;
+        $[12] = t3;
+      } else {
+        t3 = $[12];
+      }
+      const reducedFields = t3;
+      let t4;
+      if ($[13] !== reducedFields) {
+        t4 = reducedFields.filter(_temp);
+        $[13] = reducedFields;
+        $[14] = t4;
+      } else {
+        t4 = $[14];
+      }
+      const filteredFields = t4;
+      const groupByField = reducedFields.find(field_0 => field_0.fieldPath === groupByFieldName);
+      const isActive = Boolean(groupByFieldName && groupByField);
+      if (filteredFields.length === 0) {
+        t2 = null;
+        break bb0;
+      }
+      const triggerLabel = isActive ? t("general:groupByLabel", {
+        label: groupByField?.label || ""
+      }) : t("general:groupByLabel", {
+        label: ""
+      });
+      t1 = _jsx(Popup, {
+        className: baseClass,
+        horizontalAlign: "right",
+        popupAriaLabel: triggerLabel,
+        popupType: "dialog",
+        portalClassName: `${baseClass}__popup`,
+        render: t5 => {
+          const {
+            close
+          } = t5;
+          return _jsx(GroupByPopup, {
+            close,
+            filteredFields,
+            groupByField,
+            groupByFieldName,
+            isActive,
+            onChange,
+            value
+          });
+        },
+        renderButton: t6 => {
+          const {
+            active,
+            onClick,
+            onKeyDown,
+            ...ariaProps
+          } = t6;
+          return _jsx(Button, {
+            buttonStyle: "secondary",
+            className: `${baseClass}__trigger`,
+            extraButtonProps: {
+              onKeyDown
+            },
+            icon: _jsx(ChevronIcon, {
+              direction: active ? "up" : "down",
+              size: 16
+            }),
+            id: "toggle-group-by",
+            onClick,
+            selected: active || isActive,
+            size: "medium",
+            ...ariaProps,
+            children: triggerLabel
+          });
+        },
+        size: "large",
+        theme: "auto",
+        verticalAlign: "bottom"
+      });
+    }
+    $[0] = collectionSlug;
+    $[1] = fields;
+    $[2] = i18n;
+    $[3] = onChange;
+    $[4] = permissions?.collections;
+    $[5] = t;
+    $[6] = value;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t1 = $[7];
+    t2 = $[8];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  return t1;
+};
+function _temp(field) {
+  return !isFieldDisabled(field.field, "groupBy") && field.fieldPath !== "id" && supportedFieldTypes.includes(field.field.type);
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","isFieldDisabled","React","useMemo","ChevronIcon","useAuth","useTranslation","reduceFieldsToOptions","Button","Popup","GroupByPopup","baseClass","supportedFieldTypes","GroupByButton","t0","$","collectionSlug","fields","onChange","value","i18n","t","permissions","t1","t2","collections","Symbol","for","bb0","groupByFieldName","replace","fieldPermissions","t3","reducedFields","t4","filter","_temp","filteredFields","groupByField","find","field_0","field","fieldPath","isActive","Boolean","length","triggerLabel","label","_jsx","className","horizontalAlign","popupAriaLabel","popupType","portalClassName","render","t5","close","t6","active","onClick","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","direction","size","selected","children","theme","verticalAlign","includes","type"],"sources":["../../../src/elements/GroupBy/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { Button } from '../Button/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { GroupByPopup } from './Popup.js'\n\nexport type GroupByButtonProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly fields: ClientField[]\n  /** Called with the next `groupBy` value (prefixed with `-` for descending). */\n  readonly onChange: (groupBy: string) => void\n  /** The current `groupBy` value (prefixed with `-` for descending). */\n  readonly value: string\n}\n\nconst baseClass = 'group-by-control'\n\n/**\n * Supported field types for group by functionality.\n */\nconst supportedFieldTypes: Field['type'][] = [\n  'text',\n  'textarea',\n  'number',\n  'select',\n  'relationship',\n  'date',\n  'checkbox',\n  'radio',\n  'email',\n  'upload',\n]\n\nexport const GroupByButton: React.FC<GroupByButtonProps> = ({\n  collectionSlug,\n  fields,\n  onChange,\n  value,\n}) => {\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n\n  const groupByFieldName = value?.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 filteredFields = useMemo(\n    () =>\n      reducedFields.filter(\n        (field) =>\n          !isFieldDisabled(field.field, 'groupBy') &&\n          field.fieldPath !== 'id' &&\n          supportedFieldTypes.includes(field.field.type),\n      ),\n    [reducedFields],\n  )\n\n  const groupByField = reducedFields.find((field) => field.fieldPath === groupByFieldName)\n  const isActive = Boolean(groupByFieldName && groupByField)\n\n  if (filteredFields.length === 0) {\n    return null\n  }\n\n  const triggerLabel = isActive\n    ? t('general:groupByLabel', { label: groupByField?.label || '' })\n    : t('general:groupByLabel', { label: '' })\n\n  return (\n    <Popup\n      className={baseClass}\n      horizontalAlign=\"right\"\n      popupAriaLabel={triggerLabel}\n      popupType=\"dialog\"\n      portalClassName={`${baseClass}__popup`}\n      render={({ close }) => (\n        <GroupByPopup\n          close={close}\n          filteredFields={filteredFields}\n          groupByField={groupByField}\n          groupByFieldName={groupByFieldName}\n          isActive={isActive}\n          onChange={onChange}\n          value={value}\n        />\n      )}\n      renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n        <Button\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__trigger`}\n          extraButtonProps={{ onKeyDown }}\n          icon={<ChevronIcon direction={active ? 'up' : 'down'} size={16} />}\n          id=\"toggle-group-by\"\n          onClick={onClick}\n          selected={active || isActive}\n          size=\"medium\"\n          {...ariaProps}\n        >\n          {triggerLabel}\n        </Button>\n      )}\n      size=\"large\"\n      theme=\"auto\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Gutter/index.css

@@ -0,0 +1,17 @@
+@layer payload-default {
+  .gutter--left {
+    padding-left: var(--gutter-h);
+  }
+
+  .gutter--right {
+    padding-right: var(--gutter-h);
+  }
+
+  .gutter--negative-left {
+    margin-left: calc(-1 * var(--gutter-h));
+  }
+
+  .gutter--negative-right {
+    margin-right: calc(-1 * var(--gutter-h));
+  }
+}

package/dist/elements/Gutter/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type GutterProps = {
     children: React.ReactNode;
     className?: string;

package/dist/elements/Gutter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Gutter/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+BxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Gutter/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+BxC,CAAA"}

package/dist/elements/Gutter/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'gutter';
 export const Gutter = props => {
   const {

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,"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.css'\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":[]}

package/dist/elements/HTMLDiff/colors.css

@@ -0,0 +1,24 @@
+@layer payload-default {
+  :root {
+    --diff-delete-pill-bg: var(--color-bg-danger-tertiary-hover);
+    --diff-delete-pill-color: var(--color-text-danger);
+    --diff-delete-pill-border: var(--color-border-danger);
+    --diff-delete-parent-bg: var(--color-bg-danger-tertiary);
+    --diff-delete-parent-color: var(--color-text-danger);
+    --diff-delete-link-color: var(--color-text-danger);
+
+    --diff-create-pill-bg: var(--color-bg-brand-tertiary-hover);
+    --diff-create-pill-color: var(--color-text-brand);
+    --diff-create-pill-border: var(--color-border-brand);
+    --diff-create-parent-bg: var(--color-bg-brand-tertiary);
+    --diff-create-parent-color: var(--color-text-brand);
+    --diff-create-link-color: var(--color-text-brand);
+  }
+
+  html[data-enhanced-contrast],
+  html[data-enhanced-contrast] [data-theme] {
+    --diff-create-pill-color: var(--color-text-selected);
+    --diff-delete-pill-color: var(--color-text);
+    --diff-delete-parent-color: var(--color-text);
+  }
+}

package/dist/elements/HTMLDiff/diff/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/HTMLDiff/diff/index.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAWD,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAC,CAAkB;IAC7C,OAAO,CAAC,cAAc,CAAC,CAAQ;gBAG7B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,EACE,UAKC,EACD,cAAqB,EACrB,WAAkB,EAClB,cAAkB,EAClB,mBAA2B,GAC5B,GAAE,eAAoB;IA4CzB,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,uBAAuB;IAmC/B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAwD1B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAcnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA+D3B,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,qBAAqB;IA0B7B;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IASf,qBAAqB,IAAI,MAAM,EAAE;IAkEjC,iBAAiB,IAAI,MAAM;CA6HnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/HTMLDiff/diff/index.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAWD,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAC,CAAkB;IAC7C,OAAO,CAAC,cAAc,CAAC,CAAQ;IAE/B,YACE,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,EACE,UAKC,EACD,cAAqB,EACrB,WAAkB,EAClB,cAAkB,EAClB,mBAA2B,GAC5B,GAAE,eAAoB,EAyCxB;IAGD,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,uBAAuB;IAmC/B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAwD1B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAcnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA+D3B,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,qBAAqB;IA0B7B;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IASf,qBAAqB,IAAI,MAAM,EAAE,CAgEvC;IAEM,iBAAiB,IAAI,MAAM,CA4HjC;CACF"}