@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.c2b57ce

package/dist/elements/FileDetails/StaticFileDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Button","Thumbnail","UploadActions","FileMeta","baseClass","StaticFileDetails","props","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","hideRemoveFile","imageCacheTag","uploadConfig","filename","filesize","height","mimeType","thumbnailURL","url","width","previewAllowed","displayPreview","_jsx","className","_jsxs","fileSrc","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type StaticFileDetailsProps = {\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {\n  const {\n    customUploadActions,\n    doc,\n    enableAdjustments,\n    handleRemove,\n    hasImageSizes,\n    hideRemoveFile,\n    imageCacheTag,\n    uploadConfig,\n  } = props\n\n  const { filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  const previewAllowed = uploadConfig.displayPreview ?? true\n\n  return (\n    <div className={baseClass}>\n      <header>\n        {previewAllowed && (\n          <Thumbnail\n            // size=\"small\"\n            className={`${baseClass}__thumbnail`}\n            doc={doc}\n            fileSrc={thumbnailURL || url}\n            imageCacheTag={imageCacheTag}\n            uploadConfig={uploadConfig}\n          />\n        )}\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {(enableAdjustments || (hasImageSizes && doc.filename) || customUploadActions) && (\n            <UploadActions\n              customActions={customUploadActions}\n              enableAdjustments={Boolean(enableAdjustments)}\n              enablePreviewSizes={hasImageSizes && doc.filename}\n              mimeType={mimeType}\n            />\n          )}\n        </div>\n        {!hideRemoveFile && handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB,OAAO,MAAMC,iBAAA,GAAuDC,KAAA;EAClE,MAAM;IACJC,mBAAmB;IACnBC,GAAG;IACHC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,aAAa;IACbC;EAAY,CACb,GAAGR,KAAA;EAEJ,MAAM;IAAES,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,GAAG;IAAEC;EAAK,CAAE,GAAGb,GAAA;EAE3E,MAAMc,cAAA,GAAiBR,YAAA,CAAaS,cAAc,IAAI;EAEtD,oBACEC,IAAA,CAAC;IAAIC,SAAA,EAAWrB,SAAA;cACd,aAAAsB,KAAA,CAAC;iBACEJ,cAAA,iBACCE,IAAA,CAACvB,SAAA;QACC;QACAwB,SAAA,EAAW,GAAGrB,SAAA,aAAsB;QACpCI,GAAA,EAAKA,GAAA;QACLmB,OAAA,EAASR,YAAA,IAAgBC,GAAA;QACzBP,aAAA,EAAeA,aAAA;QACfC,YAAA,EAAcA;uBAGlBY,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGrB,SAAA,eAAwB;gCACzCoB,IAAA,CAACrB,QAAA;UACCY,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVC,MAAA,EAAQA,MAAA;UACRC,QAAA,EAAUA,QAAA;UACVE,GAAA,EAAKA,GAAA;UACLC,KAAA,EAAOA;YAGP,CAAAZ,iBAAA,IAAsBE,aAAA,IAAiBH,GAAA,CAAIO,QAAQ,IAAKR,mBAAkB,kBAC1EiB,IAAA,CAACtB,aAAA;UACC0B,aAAA,EAAerB,mBAAA;UACfE,iBAAA,EAAmBoB,OAAA,CAAQpB,iBAAA;UAC3BqB,kBAAA,EAAoBnB,aAAA,IAAiBH,GAAA,CAAIO,QAAQ;UACjDG,QAAA,EAAUA;;UAIf,CAACN,cAAA,IAAkBF,YAAA,iBAClBc,IAAA,CAACxB,MAAA;QACC+B,WAAA,EAAY;QACZN,SAAA,EAAW,GAAGrB,SAAA,UAAmB;QACjC4B,IAAA,EAAK;QACLC,SAAA,EAAU;QACVC,OAAA,EAASxB,YAAA;QACTyB,KAAK;;;;AAMjB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","Button","Thumbnail","UploadActions","FileMeta","baseClass","StaticFileDetails","props","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","hideRemoveFile","imageCacheTag","uploadConfig","filename","filesize","height","mimeType","thumbnailURL","url","width","previewAllowed","displayPreview","_jsx","className","_jsxs","fileSrc","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","onClick","round"],"sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type StaticFileDetailsProps = {\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {\n  const {\n    customUploadActions,\n    doc,\n    enableAdjustments,\n    handleRemove,\n    hasImageSizes,\n    hideRemoveFile,\n    imageCacheTag,\n    uploadConfig,\n  } = props\n\n  const { filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  const previewAllowed = uploadConfig.displayPreview ?? true\n\n  return (\n    <div className={baseClass}>\n      <header>\n        {previewAllowed && (\n          <Thumbnail\n            // size=\"small\"\n            className={`${baseClass}__thumbnail`}\n            doc={doc}\n            fileSrc={thumbnailURL || url}\n            imageCacheTag={imageCacheTag}\n            uploadConfig={uploadConfig}\n          />\n        )}\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {(enableAdjustments || (hasImageSizes && doc.filename) || customUploadActions) && (\n            <UploadActions\n              customActions={customUploadActions}\n              enableAdjustments={Boolean(enableAdjustments)}\n              enablePreviewSizes={hasImageSizes && doc.filename}\n              mimeType={mimeType}\n            />\n          )}\n        </div>\n        {!hideRemoveFile && handleRemove && (\n          <Button\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB,OAAO,MAAMC,iBAAA,GAAuDC,KAAA;EAClE,MAAM;IACJC,mBAAmB;IACnBC,GAAG;IACHC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,aAAa;IACbC;EAAY,CACb,GAAGR,KAAA;EAEJ,MAAM;IAAES,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,GAAG;IAAEC;EAAK,CAAE,GAAGb,GAAA;EAE3E,MAAMc,cAAA,GAAiBR,YAAA,CAAaS,cAAc,IAAI;EAEtD,oBACEC,IAAA,CAAC;IAAIC,SAAA,EAAWrB,SAAA;cACd,aAAAsB,KAAA,CAAC;iBACEJ,cAAA,iBACCE,IAAA,CAACvB,SAAA;QACC;QACAwB,SAAA,EAAW,GAAGrB,SAAA,aAAsB;QACpCI,GAAA,EAAKA,GAAA;QACLmB,OAAA,EAASR,YAAA,IAAgBC,GAAA;QACzBP,aAAA,EAAeA,aAAA;QACfC,YAAA,EAAcA;uBAGlBY,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGrB,SAAA,eAAwB;gCACzCoB,IAAA,CAACrB,QAAA;UACCY,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVC,MAAA,EAAQA,MAAA;UACRC,QAAA,EAAUA,QAAA;UACVE,GAAA,EAAKA,GAAA;UACLC,KAAA,EAAOA;YAGP,CAAAZ,iBAAA,IAAsBE,aAAA,IAAiBH,GAAA,CAAIO,QAAQ,IAAKR,mBAAkB,kBAC1EiB,IAAA,CAACtB,aAAA;UACC0B,aAAA,EAAerB,mBAAA;UACfE,iBAAA,EAAmBoB,OAAA,CAAQpB,iBAAA;UAC3BqB,kBAAA,EAAoBnB,aAAA,IAAiBH,GAAA,CAAIO,QAAQ;UACjDG,QAAA,EAAUA;;UAIf,CAACN,cAAA,IAAkBF,YAAA,iBAClBc,IAAA,CAACxB,MAAA;QACC+B,WAAA,EAAY;QACZN,SAAA,EAAW,GAAGrB,SAAA,UAAmB;QACjC4B,IAAA,EAAK;QACLC,OAAA,EAASvB,YAAA;QACTwB,KAAK;;;;AAMjB","ignoreList":[]}

package/dist/elements/FileDetails/StaticFileDetails/index.scss

@@ -3,7 +3,7 @@
 @layer payload-default {
   .file-details {
     background: var(--theme-elevation-50);
-    border: 1px solid var(--theme-border-color);
+    border: var(--stroke-width-small) solid var(--theme-border-color);
     border-radius: var(--style-radius-m);
     @include inputShadow;
 
@@ -21,13 +21,13 @@
       right: $baseline;
 
       & .btn__icon {
-        border: 1px solid var(--theme-border-color);
+        border: var(--stroke-width-small) solid var(--theme-border-color);
         background: var(--theme-input-bg);
         @include inputShadow;
         transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
         &:hover {
-          border: 1px solid var(--theme-elevation-400);
+          border: var(--stroke-width-small) solid var(--theme-elevation-400);
         }
       }
     }

package/dist/elements/FilterTrigger/index.css

@@ -0,0 +1,57 @@
+@layer payload-default {
+  .filter-trigger__wrap {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+  }
+
+  .filter-trigger__wrap:has(.filter-trigger__clear) .filter-trigger {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+    padding-right: var(--spacer-1);
+  }
+
+  .filter-trigger__wrap:has(.filter-trigger__clear) .filter-trigger:focus-visible {
+    z-index: 1;
+  }
+
+  .filter-trigger {
+    gap: var(--spacer-1);
+  }
+
+  .filter-trigger__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--spacer-1);
+    border: var(--stroke-width-small) solid var(--special-border-translucent);
+    border-left: none;
+    border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+    background: var(--color-bg);
+    cursor: pointer;
+  }
+
+  .filter-trigger__clear:focus-visible {
+    border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+  }
+
+  .filter-trigger__clear:hover {
+    background: var(--color-bg-transparent-hover);
+  }
+
+  .filter-trigger__clear:active {
+    background: var(--color-bg-transparent-pressed);
+  }
+
+  /* Selected state for clear button when popup is open */
+  .filter-trigger__wrap:has(.btn--selected) .filter-trigger__clear {
+    background: var(--color-bg-selected);
+    color: var(--color-text-selected);
+    border-color: var(--color-border-selected-strong);
+  }
+
+  .filter-trigger__wrap:has(.btn--selected) .filter-trigger__clear:hover {
+    background: var(--color-bg-selected-hover);
+  }
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import './index.css';
+type FilterTriggerProps = {
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+    isActive?: boolean;
+    onClear?: (e: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Whether the popup is currently open */
+    popupActive?: boolean;
+    /** Whether to show the badge cutout on the filter icon. Defaults to `isActive`. */
+    showBadge?: boolean;
+};
+export declare function FilterTrigger({ id, children, className, isActive, onClear, onClick, onKeyDown, popupActive, showBadge, }: FilterTriggerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FilterTrigger/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAIpB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACvC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAA;IAC5C,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,WAAW,EACX,SAAS,GACV,EAAE,kBAAkB,qBAuBpB"}

package/dist/elements/FilterTrigger/index.js

@@ -0,0 +1,49 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { FilterIcon } from '../../icons/Filter/index.js';
+import { XIcon } from '../../icons/X/index.js';
+import { Button } from '../Button/index.js';
+import './index.css';
+const baseClass = 'filter-trigger';
+export function FilterTrigger({
+  id,
+  children,
+  className,
+  isActive,
+  onClear,
+  onClick,
+  onKeyDown,
+  popupActive,
+  showBadge
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: `${baseClass}__wrap`,
+    children: [/*#__PURE__*/_jsx(Button, {
+      buttonStyle: "secondary",
+      className: [baseClass, className].filter(Boolean).join(' '),
+      extraButtonProps: {
+        onKeyDown
+      },
+      icon: /*#__PURE__*/_jsx(FilterIcon, {
+        hasBadgeCutout: showBadge ?? isActive,
+        size: 24
+      }),
+      iconPosition: "left",
+      id: id,
+      onClick: onClick,
+      selected: popupActive,
+      size: "medium",
+      children: children
+    }), isActive && onClear && /*#__PURE__*/_jsx("button", {
+      className: `${baseClass}__clear`,
+      onClick: onClear,
+      type: "button",
+      children: /*#__PURE__*/_jsx(XIcon, {
+        size: 16
+      })
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","FilterIcon","XIcon","Button","baseClass","FilterTrigger","id","children","className","isActive","onClear","onClick","onKeyDown","popupActive","showBadge","_jsxs","_jsx","buttonStyle","filter","Boolean","join","extraButtonProps","icon","hasBadgeCutout","size","iconPosition","selected","type"],"sources":["../../../src/elements/FilterTrigger/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { FilterIcon } from '../../icons/Filter/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'filter-trigger'\n\ntype FilterTriggerProps = {\n  children: React.ReactNode\n  className?: string\n  id?: string\n  isActive?: boolean\n  onClear?: (e: React.MouseEvent) => void\n  onClick: (e: React.MouseEvent) => void\n  onKeyDown?: (e: React.KeyboardEvent) => void\n  /** Whether the popup is currently open */\n  popupActive?: boolean\n  /** Whether to show the badge cutout on the filter icon. Defaults to `isActive`. */\n  showBadge?: boolean\n}\n\nexport function FilterTrigger({\n  id,\n  children,\n  className,\n  isActive,\n  onClear,\n  onClick,\n  onKeyDown,\n  popupActive,\n  showBadge,\n}: FilterTriggerProps) {\n  return (\n    <div className={`${baseClass}__wrap`}>\n      <Button\n        buttonStyle=\"secondary\"\n        className={[baseClass, className].filter(Boolean).join(' ')}\n        extraButtonProps={{ onKeyDown }}\n        icon={<FilterIcon hasBadgeCutout={showBadge ?? isActive} size={24} />}\n        iconPosition=\"left\"\n        id={id}\n        onClick={onClick}\n        selected={popupActive}\n        size=\"medium\"\n      >\n        {children}\n      </Button>\n      {isActive && onClear && (\n        <button className={`${baseClass}__clear`} onClick={onClear} type=\"button\">\n          <XIcon size={16} />\n        </button>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,KAAK,QAAQ;AACtB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAgBlB,OAAO,SAASC,cAAc;EAC5BC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,WAAW;EACXC;AAAS,CACU;EACnB,oBACEC,KAAA,CAAC;IAAIP,SAAA,EAAW,GAAGJ,SAAA,QAAiB;4BAClCY,IAAA,CAACb,MAAA;MACCc,WAAA,EAAY;MACZT,SAAA,EAAW,CAACJ,SAAA,EAAWI,SAAA,CAAU,CAACU,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACvDC,gBAAA,EAAkB;QAAET;MAAU;MAC9BU,IAAA,eAAMN,IAAA,CAACf,UAAA;QAAWsB,cAAA,EAAgBT,SAAA,IAAaL,QAAA;QAAUe,IAAA,EAAM;;MAC/DC,YAAA,EAAa;MACbnB,EAAA,EAAIA,EAAA;MACJK,OAAA,EAASA,OAAA;MACTe,QAAA,EAAUb,WAAA;MACVW,IAAA,EAAK;gBAEJjB;QAEFE,QAAA,IAAYC,OAAA,iBACXM,IAAA,CAAC;MAAOR,SAAA,EAAW,GAAGJ,SAAA,SAAkB;MAAEO,OAAA,EAASD,OAAA;MAASiB,IAAA,EAAK;gBAC/D,aAAAX,IAAA,CAACd,KAAA;QAAMsB,IAAA,EAAM;;;;AAKvB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupByBuilder/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAS,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAI5E,OAAO,cAAc,CAAA;AAErB,OAAO,KAAkB,MAAM,OAAO,CAAA;AAStC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,mGAAmG;IACnG,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAyBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6J1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupByBuilder/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAS,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAI5E,OAAO,cAAc,CAAA;AAErB,OAAO,KAAkB,MAAM,OAAO,CAAA;AAStC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,mGAAmG;IACnG,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAyBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+J1C,CAAA"}

package/dist/elements/GroupByBuilder/index.js

@@ -42,7 +42,7 @@ export const GroupByBuilder = ({
     fields,
     i18n
   }), [fields, fieldPermissions, i18n]);
-  const groupByField = reducedFields.find(field => field.value === groupByFieldName);
+  const groupByField = reducedFields.find(field => field.fieldPath === groupByFieldName);
   const handleFieldChange = useMemo(() => {
     if (isFormMode) {
       return v => {
@@ -134,7 +134,10 @@ export const GroupByBuilder = ({
         isClearable: true,
         isMulti: false,
         onChange: handleFieldChange,
-        options: reducedFields.filter(field_0 => !isFieldDisabled(field_0.field, 'groupBy') && field_0.value !== 'id' && supportedFieldTypes.includes(field_0.field.type)),
+        options: reducedFields.filter(field_0 => !isFieldDisabled(field_0.field, 'groupBy') && field_0.fieldPath !== 'id' && supportedFieldTypes.includes(field_0.field.type)).map(f => ({
+          ...f,
+          value: f.fieldPath
+        })),
         value: {
           label: groupByField?.label || t('general:selectValue'),
           value: groupByFieldName || ''

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

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

package/dist/elements/GroupByControl/index.css

@@ -0,0 +1,106 @@
+@layer payload-default {
+  .group-by-control__popup .popup__scroll-container {
+    padding: 0;
+  }
+
+  .group-by-control__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--spacer-6);
+    padding-left: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-large) var(--radius-large) 0 0;
+  }
+
+  .group-by-control__title {
+    align-self: stretch;
+    align-items: center;
+    display: flex;
+    flex: 1;
+    padding: var(--spacer-2);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+  }
+
+  .group-by-control__header-actions {
+    display: flex;
+    gap: var(--spacer-1);
+    padding: var(--spacer-2);
+  }
+
+  .group-by-control__body {
+    padding: var(--spacer-2) 0;
+  }
+
+  .group-by-control__row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    gap: var(--spacer-2);
+    align-items: center;
+    padding: var(--spacer-1) var(--spacer-3);
+  }
+
+  .group-by-control__label {
+    display: flex;
+    align-items: center;
+    height: var(--spacer-4);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .group-by-control__input {
+    width: 100%;
+  }
+
+  .group-by-control__select-popup {
+    width: 100%;
+  }
+
+  .group-by-control__select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: var(--spacer-4);
+    padding: 0 var(--spacer-1) 0 var(--spacer-2);
+    background: var(--color-bg);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    cursor: pointer;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .group-by-control__select-trigger:hover:not(.group-by-control__select-trigger--disabled) {
+    border-color: var(--color-border-hover);
+  }
+
+  .group-by-control__select-trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .group-by-control__select-trigger svg {
+    flex-shrink: 0;
+    color: var(--color-text-secondary);
+  }
+
+  .group-by-control__select-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,9 @@
+import type { ClientField, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+import './index.css';
+export type GroupByControlProps = {
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly fields: ClientField[];
+};
+export declare const GroupByControl: React.FC<GroupByControlProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupByControl/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAS,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAuC,MAAM,OAAO,CAAA;AAY3D,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAC/B,CAAA;AAoBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqPxD,CAAA"}

package/dist/elements/GroupByControl/index.js

@@ -0,0 +1,255 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isFieldDisabled } from 'payload/shared';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { CheckIcon } from '../../icons/Check/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { TrashIcon } from '../../icons/Trash/index.js';
+import { XIcon } from '../../icons/X/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
+import { Button } from '../Button/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
+import './index.css';
+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 GroupByControl = ({
+  collectionSlug,
+  fields
+}) => {
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const listQuery = useListQuery();
+  const closeRef = useRef(null);
+  const groupByRaw = listQuery.query?.groupBy;
+  const groupByFieldName = groupByRaw?.replace(/^-/, '');
+  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
+  const reducedFields = useMemo(() => reduceFieldsToOptions({
+    fieldPermissions,
+    fields,
+    i18n
+  }), [fields, fieldPermissions, i18n]);
+  const filteredFields = useMemo(() => reducedFields.filter(field => !isFieldDisabled(field.field, 'groupBy') && field.fieldPath !== 'id' && supportedFieldTypes.includes(field.field.type)), [reducedFields]);
+  const groupByField = reducedFields.find(field_0 => field_0.fieldPath === groupByFieldName);
+  const isActive = Boolean(groupByFieldName && groupByField);
+  const handleFieldSelect = useCallback(value => {
+    void (async () => {
+      if (typeof listQuery.refineListData !== 'function') {
+        return;
+      }
+      await listQuery.refineListData({
+        groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,
+        page: 1
+      });
+    })();
+  }, [listQuery]);
+  const handleClear = useCallback(() => {
+    void (async () => {
+      if (typeof listQuery.refineListData === 'function') {
+        await listQuery.refineListData({
+          groupBy: ''
+        });
+      }
+      closeRef.current?.();
+    })();
+  }, [listQuery]);
+  const handleDirectionSelect = useCallback(value_0 => {
+    void (async () => {
+      if (!groupByFieldName || typeof listQuery.refineListData !== 'function') {
+        return;
+      }
+      await listQuery.refineListData({
+        groupBy: value_0 === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
+        page: 1
+      });
+    })();
+  }, [groupByFieldName, listQuery]);
+  const directionValue = !groupByRaw || typeof groupByRaw !== 'string' ? 'asc' : groupByRaw.startsWith('-') ? 'desc' : 'asc';
+  // Build the trigger button label
+  const triggerLabel = isActive ? t('general:groupByLabel', {
+    label: groupByField?.label || ''
+  }) : t('general:groupByLabel', {
+    label: ''
+  });
+  return /*#__PURE__*/_jsx(Popup, {
+    className: baseClass,
+    horizontalAlign: "right",
+    portalClassName: `${baseClass}__popup`,
+    render: ({
+      close
+    }) => {
+      closeRef.current = close;
+      return /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__content`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__header`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__title`,
+            children: t('general:groupByLabel', {
+              label: ''
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__header-actions`,
+            children: [isActive && /*#__PURE__*/_jsx(Button, {
+              "aria-label": t('general:clear'),
+              buttonStyle: "ghost",
+              icon: /*#__PURE__*/_jsx(TrashIcon, {}),
+              onClick: handleClear,
+              round: true,
+              size: "medium"
+            }), /*#__PURE__*/_jsx(Button, {
+              "aria-label": t('general:close'),
+              buttonStyle: "ghost",
+              icon: /*#__PURE__*/_jsx(XIcon, {
+                size: 24
+              }),
+              onClick: close,
+              round: true,
+              size: "medium"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__body`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__row`,
+            children: [/*#__PURE__*/_jsx("label", {
+              className: `${baseClass}__label`,
+              children: t('general:field')
+            }), /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__input`,
+              "data-popup-prevent-close": true,
+              children: /*#__PURE__*/_jsx(Popup, {
+                className: `${baseClass}__select-popup`,
+                horizontalAlign: "right",
+                render: ({
+                  close: closeFieldPopup
+                }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+                  children: filteredFields.map((field_1, i) => /*#__PURE__*/_jsx(PopupList.Button, {
+                    active: field_1.fieldPath === groupByFieldName,
+                    icon: field_1.fieldPath === groupByFieldName ? /*#__PURE__*/_jsx(CheckIcon, {
+                      size: 16
+                    }) : undefined,
+                    onClick: () => {
+                      handleFieldSelect(field_1.fieldPath);
+                      closeFieldPopup();
+                    },
+                    children: field_1.label
+                  }, i))
+                }),
+                renderButton: ({
+                  active,
+                  onClick,
+                  onKeyDown
+                }) => /*#__PURE__*/_jsxs("button", {
+                  className: `${baseClass}__select-trigger`,
+                  onClick: onClick,
+                  onKeyDown: onKeyDown,
+                  type: "button",
+                  children: [/*#__PURE__*/_jsx("span", {
+                    className: `${baseClass}__select-value`,
+                    children: groupByField?.label || t('general:selectValue')
+                  }), /*#__PURE__*/_jsx(ChevronIcon, {
+                    direction: active ? 'up' : 'down',
+                    size: 16
+                  })]
+                }),
+                size: "medium",
+                verticalAlign: "bottom"
+              })
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__row`,
+            children: [/*#__PURE__*/_jsx("label", {
+              className: `${baseClass}__label`,
+              children: t('general:sort')
+            }), /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__input`,
+              "data-popup-prevent-close": true,
+              children: /*#__PURE__*/_jsx(Popup, {
+                className: `${baseClass}__select-popup`,
+                disabled: !groupByFieldName,
+                horizontalAlign: "right",
+                render: ({
+                  close: closeSortPopup
+                }) => /*#__PURE__*/_jsxs(PopupList.RadioGroup, {
+                  children: [/*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
+                    active: directionValue === 'desc',
+                    onClick: () => {
+                      handleDirectionSelect('desc');
+                      closeSortPopup();
+                    },
+                    children: t('general:descending')
+                  }), /*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
+                    active: directionValue === 'asc',
+                    onClick: () => {
+                      handleDirectionSelect('asc');
+                      closeSortPopup();
+                    },
+                    children: t('general:ascending')
+                  })]
+                }),
+                renderButton: ({
+                  active: active_0,
+                  onClick: onClick_0,
+                  onKeyDown: onKeyDown_0
+                }) => /*#__PURE__*/_jsxs("button", {
+                  className: [`${baseClass}__select-trigger`, !groupByFieldName && `${baseClass}__select-trigger--disabled`].filter(Boolean).join(' '),
+                  disabled: !groupByFieldName,
+                  onClick: onClick_0,
+                  onKeyDown: onKeyDown_0,
+                  type: "button",
+                  children: [/*#__PURE__*/_jsx("span", {
+                    className: `${baseClass}__select-value`,
+                    children: directionValue === 'desc' ? t('general:descending') : t('general:ascending')
+                  }), /*#__PURE__*/_jsx(ChevronIcon, {
+                    direction: active_0 ? 'up' : 'down',
+                    size: 16
+                  })]
+                }),
+                size: "small",
+                verticalAlign: "bottom"
+              })
+            })]
+          })]
+        })]
+      });
+    },
+    renderButton: ({
+      active: active_1,
+      onClick: onClick_1,
+      onKeyDown: onKeyDown_1,
+      ...ariaProps
+    }) => /*#__PURE__*/_jsx(Button, {
+      buttonStyle: "secondary",
+      className: `${baseClass}__trigger`,
+      extraButtonProps: {
+        onKeyDown: onKeyDown_1
+      },
+      icon: /*#__PURE__*/_jsx(ChevronIcon, {
+        direction: active_1 ? 'up' : 'down',
+        size: 16
+      }),
+      id: "toggle-group-by",
+      onClick: onClick_1,
+      selected: active_1 || isActive,
+      size: "medium",
+      ...ariaProps,
+      children: triggerLabel
+    }),
+    size: "large",
+    theme: "auto",
+    verticalAlign: "bottom"
+  });
+};
+//# sourceMappingURL=index.js.map