@payloadcms/ui 4.0.0-internal.2fddfc0 → 4.0.0-internal.31ba7ee

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

@@ -1 +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={isActive || 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,EAAUjB,QAAA,IAAYI,WAAA;MACtBW,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":[]}
+{"version":3,"file":"index.js","names":["React","FilterIcon","XIcon","Button","baseClass","FilterTrigger","id","ariaControls","ariaExpanded","ariaHasPopup","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 type { AriaAttributes } from 'react'\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  'aria-controls'?: AriaAttributes['aria-controls']\n  'aria-expanded'?: AriaAttributes['aria-expanded']\n  'aria-haspopup'?: AriaAttributes['aria-haspopup']\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  'aria-controls': ariaControls,\n  'aria-expanded': ariaExpanded,\n  'aria-haspopup': ariaHasPopup,\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        aria-controls={ariaControls}\n        aria-expanded={ariaExpanded}\n        aria-haspopup={ariaHasPopup}\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={isActive || 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;;;AAIA,OAAOA,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,KAAK,QAAQ;AACtB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAmBlB,OAAO,SAASC,cAAc;EAC5BC,EAAE;EACF,iBAAiBC,YAAY;EAC7B,iBAAiBC,YAAY;EAC7B,iBAAiBC,YAAY;EAC7BC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,WAAW;EACXC;AAAS,CACU;EACnB,oBACEC,KAAA,CAAC;IAAIP,SAAA,EAAW,GAAGP,SAAA,QAAiB;4BAClCe,IAAA,CAAChB,MAAA;MACC,iBAAeI,YAAA;MACf,iBAAeC,YAAA;MACf,iBAAeC,YAAA;MACfW,WAAA,EAAY;MACZT,SAAA,EAAW,CAACP,SAAA,EAAWO,SAAA,CAAU,CAACU,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACvDC,gBAAA,EAAkB;QAAET;MAAU;MAC9BU,IAAA,eAAMN,IAAA,CAAClB,UAAA;QAAWyB,cAAA,EAAgBT,SAAA,IAAaL,QAAA;QAAUe,IAAA,EAAM;;MAC/DC,YAAA,EAAa;MACbtB,EAAA,EAAIA,EAAA;MACJQ,OAAA,EAASA,OAAA;MACTe,QAAA,EAAUjB,QAAA,IAAYI,WAAA;MACtBW,IAAA,EAAK;gBAEJjB;QAEFE,QAAA,IAAYC,OAAA,iBACXM,IAAA,CAAC;MAAOR,SAAA,EAAW,GAAGP,SAAA,SAAkB;MAAEU,OAAA,EAASD,OAAA;MAASiB,IAAA,EAAK;gBAC/D,aAAAX,IAAA,CAACjB,KAAA;QAAMyB,IAAA,EAAM;;;;AAKvB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FullscreenModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,qBAcrE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FullscreenModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,qBAcrE"}

package/dist/elements/FullscreenModal/index.js

@@ -2,9 +2,9 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Modal } from '@faceless-ui/modal';
 import React from 'react';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { Modal } from '../Modal/index.js';
 export function FullscreenModal(props) {
   const $ = _c(3);
   const currentDepth = useEditDepth();

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Modal","React","useEditDepth","FullscreenModal","props","$","currentDepth","t0","_jsx","closeOnBlur","style","zIndex"],"sources":["../../../src/elements/FullscreenModal/index.tsx"],"sourcesContent":["'use client'\nimport type { Modal as ModalType } from '@faceless-ui/modal'\n\nimport { Modal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\n\nexport function FullscreenModal(props: Parameters<typeof ModalType>[0]) {\n  const currentDepth = useEditDepth()\n\n  return (\n    <Modal\n      // Fixes https://github.com/payloadcms/payload/issues/13778\n      closeOnBlur={false}\n      {...props}\n      style={{\n        ...(props.style || {}),\n        zIndex: `calc(100 + ${currentDepth || 0} + 1)`,\n      }}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,KAAK,QAAQ;AACtB,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAE7B,OAAO,SAAAC,gBAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACL,MAAAO,YAAA,GAAqBJ,YAAA;EAAA,IAAAK,EAAA;EAAA,IAAAF,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAD,KAAA;IAGnBG,EAAA,GAAAC,IAAA,CAAAR,KAAA;MAAAS,WAAA;MAAA,GAGML,KAAK;MAAAM,KAAA;QAAA,IAEHN,KAAA,CAAAM,KAAA,MAAiB;QAAAC,MAAA,EACb,cAAcL,YAAA,KAAgB;MAAQ;IAAA,C;;;;;;;SANlDC,E","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useEditDepth","Modal","FullscreenModal","props","$","currentDepth","t0","_jsx","closeOnBlur","style","zIndex"],"sources":["../../../src/elements/FullscreenModal/index.tsx"],"sourcesContent":["'use client'\nimport type { Modal as ModalType } from '@faceless-ui/modal'\n\nimport React from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { Modal } from '../Modal/index.js'\n\nexport function FullscreenModal(props: Parameters<typeof ModalType>[0]) {\n  const currentDepth = useEditDepth()\n\n  return (\n    <Modal\n      // Fixes https://github.com/payloadcms/payload/issues/13778\n      closeOnBlur={false}\n      {...props}\n      style={{\n        ...(props.style || {}),\n        zIndex: `calc(100 + ${currentDepth || 0} + 1)`,\n      }}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,KAAK,QAAQ;AAEtB,OAAO,SAAAC,gBAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACL,MAAAO,YAAA,GAAqBL,YAAA;EAAA,IAAAM,EAAA;EAAA,IAAAF,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAD,KAAA;IAGnBG,EAAA,GAAAC,IAAA,CAAAN,KAAA;MAAAO,WAAA;MAAA,GAGML,KAAK;MAAAM,KAAA;QAAA,IAEHN,KAAA,CAAAM,KAAA,MAAiB;QAAAC,MAAA,EACb,cAAcL,YAAA,KAAgB;MAAQ;IAAA,C;;;;;;;SANlDC,E","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupBy/Popup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQ5D,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAA;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,cAAc,EAAE,YAAY,EAAE,CAAA;IACvC,4CAA4C;IAC5C,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAA;IACpC,6DAA6D;IAC7D,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAClC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,+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;AAID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8JpD,CAAA"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupBy/Popup.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQ5D,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAA;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,cAAc,EAAE,YAAY,EAAE,CAAA;IACvC,4CAA4C;IAC5C,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAA;IACpC,6DAA6D;IAC7D,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAClC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,+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;AAID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwLpD,CAAA"}

package/dist/elements/GroupBy/Popup.js

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
+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';
@@ -12,7 +12,7 @@ import { Popup, PopupList } from '../Popup/index.js';
 import './Popup.css';
 const baseClass = 'group-by-control';
 export const GroupByPopup = t0 => {
-  const $ = _c(35);
+  const $ = _c(39);
   const {
     close,
     filteredFields,
@@ -25,6 +25,9 @@ export const GroupByPopup = 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) {
@@ -67,9 +70,9 @@ export const GroupByPopup = t0 => {
   }
   const handleDirectionSelect = t3;
   let t4;
-  if ($[9] !== close || $[10] !== directionValue || $[11] !== filteredFields || $[12] !== groupByField?.label || $[13] !== groupByFieldName || $[14] !== handleClear || $[15] !== handleDirectionSelect || $[16] !== handleFieldSelect || $[17] !== isActive || $[18] !== t) {
+  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 ($[20] !== filteredFields || $[21] !== groupByFieldName || $[22] !== handleFieldSelect) {
+    if ($[22] !== filteredFields || $[23] !== groupByFieldName || $[24] !== handleFieldSelect) {
       t5 = t6 => {
         const {
           close: closeFieldPopup
@@ -85,25 +88,25 @@ export const GroupByPopup = t0 => {
           }, i))
         });
       };
-      $[20] = filteredFields;
-      $[21] = groupByFieldName;
-      $[22] = handleFieldSelect;
-      $[23] = t5;
+      $[22] = filteredFields;
+      $[23] = groupByFieldName;
+      $[24] = handleFieldSelect;
+      $[25] = t5;
     } else {
-      t5 = $[23];
+      t5 = $[25];
     }
     let t6;
-    if ($[24] !== groupByField?.label || $[25] !== t) {
+    if ($[26] !== fieldTriggerId || $[27] !== groupByField?.label || $[28] !== t) {
       t6 = t7 => {
         const {
           active,
-          onClick,
-          onKeyDown
+          ...buttonProps
         } = t7;
         return _jsxs("button", {
+          ...buttonProps,
+          "aria-label": t("general:field"),
           className: `${baseClass}__select-trigger`,
-          onClick,
-          onKeyDown,
+          id: fieldTriggerId,
           type: "button",
           children: [_jsx("span", {
             className: `${baseClass}__select-value`,
@@ -114,14 +117,15 @@ export const GroupByPopup = t0 => {
           })]
         });
       };
-      $[24] = groupByField?.label;
-      $[25] = t;
-      $[26] = t6;
+      $[26] = fieldTriggerId;
+      $[27] = groupByField?.label;
+      $[28] = t;
+      $[29] = t6;
     } else {
-      t6 = $[26];
+      t6 = $[29];
     }
     let t7;
-    if ($[27] !== directionValue || $[28] !== handleDirectionSelect || $[29] !== t) {
+    if ($[30] !== directionValue || $[31] !== handleDirectionSelect || $[32] !== t) {
       t7 = t8 => {
         const {
           close: closeSortPopup
@@ -144,26 +148,44 @@ export const GroupByPopup = t0 => {
           })]
         });
       };
-      $[27] = directionValue;
-      $[28] = handleDirectionSelect;
-      $[29] = t;
-      $[30] = t7;
+      $[30] = directionValue;
+      $[31] = handleDirectionSelect;
+      $[32] = t;
+      $[33] = t7;
     } else {
-      t7 = $[30];
+      t7 = $[33];
     }
     let t8;
-    if ($[31] !== directionValue || $[32] !== groupByFieldName || $[33] !== t) {
+    if ($[34] !== directionValue || $[35] !== groupByFieldName || $[36] !== sortTriggerId || $[37] !== t) {
       t8 = t9 => {
         const {
           active: active_0,
-          onClick: onClick_0,
-          onKeyDown: onKeyDown_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(" "),
-          disabled: !groupByFieldName,
-          onClick: onClick_0,
-          onKeyDown: onKeyDown_0,
+          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`,
@@ -174,12 +196,13 @@ export const GroupByPopup = t0 => {
           })]
         });
       };
-      $[31] = directionValue;
-      $[32] = groupByFieldName;
-      $[33] = t;
-      $[34] = t8;
+      $[34] = directionValue;
+      $[35] = groupByFieldName;
+      $[36] = sortTriggerId;
+      $[37] = t;
+      $[38] = t8;
     } else {
-      t8 = $[34];
+      t8 = $[38];
     }
     t4 = _jsxs("div", {
       className: `${baseClass}__content`,
@@ -216,6 +239,7 @@ export const GroupByPopup = t0 => {
           className: `${baseClass}__row`,
           children: [_jsx("label", {
             className: `${baseClass}__label`,
+            htmlFor: fieldTriggerId,
             children: t("general:field")
           }), _jsx("div", {
             className: `${baseClass}__input`,
@@ -223,9 +247,9 @@ export const GroupByPopup = t0 => {
             children: _jsx(Popup, {
               className: `${baseClass}__select-popup`,
               horizontalAlign: "right",
+              popupType: "menu",
               render: t5,
               renderButton: t6,
-              size: "medium",
               verticalAlign: "bottom"
             })
           })]
@@ -233,6 +257,7 @@ export const GroupByPopup = t0 => {
           className: `${baseClass}__row`,
           children: [_jsx("label", {
             className: `${baseClass}__label`,
+            htmlFor: sortTriggerId,
             children: t("general:sort")
           }), _jsx("div", {
             className: `${baseClass}__input`,
@@ -241,6 +266,7 @@ export const GroupByPopup = t0 => {
               className: `${baseClass}__select-popup`,
               disabled: !groupByFieldName,
               horizontalAlign: "right",
+              popupType: "menu",
               render: t7,
               renderButton: t8,
               size: "small",
@@ -252,17 +278,19 @@ export const GroupByPopup = t0 => {
     });
     $[9] = close;
     $[10] = directionValue;
-    $[11] = filteredFields;
-    $[12] = groupByField?.label;
-    $[13] = groupByFieldName;
-    $[14] = handleClear;
-    $[15] = handleDirectionSelect;
-    $[16] = handleFieldSelect;
-    $[17] = isActive;
-    $[18] = t;
-    $[19] = t4;
+    $[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 = $[19];
+    t4 = $[21];
   }
   return t4;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["c","_c","React","useCallback","ChevronIcon","TrashIcon","XIcon","useTranslation","Button","Popup","PopupList","baseClass","GroupByPopup","t0","$","close","filteredFields","groupByField","groupByFieldName","isActive","onChange","value","t","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","onKeyDown","_jsxs","className","type","size","t8","closeSortPopup","t9","active_0","onClick_0","onKeyDown_0","filter","Boolean","join","disabled","buttonStyle","icon","round","horizontalAlign","render","verticalAlign"],"sources":["../../../src/elements/GroupBy/Popup.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } 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\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`}>{t('general:field')}</label>\n          <div className={`${baseClass}__input`} data-popup-prevent-close>\n            <Popup\n              className={`${baseClass}__select-popup`}\n              horizontalAlign=\"right\"\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, onClick, onKeyDown }) => (\n                <button\n                  className={`${baseClass}__select-trigger`}\n                  onClick={onClick}\n                  onKeyDown={onKeyDown}\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              size=\"medium\"\n              verticalAlign=\"bottom\"\n            />\n          </div>\n        </div>\n        <div className={`${baseClass}__row`}>\n          <label className={`${baseClass}__label`}>{t('general:sort')}</label>\n          <div className={`${baseClass}__input`} data-popup-prevent-close>\n            <Popup\n              className={`${baseClass}__select-popup`}\n              disabled={!groupByFieldName}\n              horizontalAlign=\"right\"\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 }) => (\n                <button\n                  className={[\n                    `${baseClass}__select-trigger`,\n                    !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  disabled={!groupByFieldName}\n                  onClick={onClick}\n                  onKeyDown={onKeyDown}\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":[]}
+{"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":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,QAAQ;AAI1C,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,OAAO;AAmBP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,YAAA,GAA4CC,EAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EAAC;IAAAe,KAAA;IAAAC,cAAA;IAAAC,YAAA;IAAAC,gBAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAR,EAQzD;EACC;IAAAS;EAAA,IAAcf,cAAA;EACd,MAAAgB,WAAA,GAAoBpB,KAAA;EACpB,MAAAqB,cAAA,GAAuB,0BAA0BD,WAAA,EAAa;EAC9D,MAAAE,aAAA,GAAsB,yBAAyBF,WAAA,EAAa;EAE5D,MAAAG,cAAA,GACE,CAACL,KAAA,IAAS,OAAOA,KAAA,KAAU,WAAW,QAAQA,KAAA,CAAAM,UAAA,CAAiB,OAAO,SAAS;EAAA,IAAAC,EAAA;EAAA,IAAAd,CAAA,QAAAM,QAAA,IAAAN,CAAA,QAAAO,KAAA;IAG/EO,EAAA,GAAAC,SAAA;MACET,QAAA,CAASC,KAAA,EAAAM,UAAA,CAAkB,OAAO,IAAIE,SAAA,EAAW,GAAGA,SAAA;IAAA;IACtDf,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAO,KAAA;IAAAP,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAHF,MAAAgB,iBAAA,GAA0BF,EAIP;EAAA,IAAAG,EAAA;EAAA,IAAAjB,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAM,QAAA;IAGaW,EAAA,GAAAA,CAAA;MAC9BX,QAAA,CAAS;MACTL,KAAA;IAAA;IACFD,CAAA,MAAAC,KAAA;IAAAD,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EAHA,MAAAkB,WAAA,GAAoBD,EAGA;EAAA,IAAAE,EAAA;EAAA,IAAAnB,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAM,QAAA;IAGlBa,EAAA,GAAAC,SAAA;MAAA,KACOhB,gBAAA;QAAA;MAAA;MAGLE,QAAA,CAASc,SAAA,KAAc,QAAQhB,gBAAA,GAAmB,IAAIA,gBAAA,EAAkB;IAAA;IAC1EJ,CAAA,MAAAI,gBAAA;IAAAJ,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAmB,EAAA;EAAA;IAAAA,EAAA,GAAAnB,CAAA;EAAA;EANF,MAAAqB,qBAAA,GAA8BF,EAOA;EAAA,IAAAG,EAAA;EAAA,IAAAtB,CAAA,QAAAC,KAAA,IAAAD,CAAA,SAAAY,cAAA,IAAAZ,CAAA,SAAAU,cAAA,IAAAV,CAAA,SAAAE,cAAA,IAAAF,CAAA,SAAAG,YAAA,EAAAoB,KAAA,IAAAvB,CAAA,SAAAI,gBAAA,IAAAJ,CAAA,SAAAkB,WAAA,IAAAlB,CAAA,SAAAqB,qBAAA,IAAArB,CAAA,SAAAgB,iBAAA,IAAAhB,CAAA,SAAAK,QAAA,IAAAL,CAAA,SAAAW,aAAA,IAAAX,CAAA,SAAAQ,CAAA;IAAA,IAAAgB,EAAA;IAAA,IAAAxB,CAAA,SAAAE,cAAA,IAAAF,CAAA,SAAAI,gBAAA,IAAAJ,CAAA,SAAAgB,iBAAA;MAsCVQ,EAAA,GAAAC,EAAA;QAAC;UAAAxB,KAAA,EAAAyB;QAAA,IAAAD,EAA0B;QAAA,OACjCE,IAAA,CAAA/B,SAAA,CAAAgC,UAAA;UAAAC,QAAA,EACG3B,cAAA,CAAA4B,GAAA,EAAAC,KAAA,EAAAC,CAAA,KACCL,IAAA,CAAA/B,SAAA,CAAAqC,cAAA;YAAAC,MAAA,EACUH,KAAA,CAAAhB,SAAA,KAAoBX,gBAAA;YAAA+B,OAAA,EAAAA,CAAA;cAG1BnB,iBAAA,CAAkBe,KAAA,CAAAhB,SAAe;cACjCW,eAAA;YAAA;YAAAG,QAAA,EAGDE,KAAA,CAAAR;UAAA,GANIS,CAAA;QAAA,C;;;;;;;;;;;MAWCP,EAAA,GAAAW,EAAA;QAAC;UAAAF,MAAA;UAAA,GAAAG;QAAA,IAAAD,EAA0B;QAAA,OACvCE,KAAA,CAAC;UAAA,GACKD,WAAW;UAAA,cACH7B,CAAA,CAAE;UAAA+B,SAAA,EACH,GAAA1C,SAAA,kBAA8B;UAAA2C,EAAA,EACrC9B,cAAA;UAAA+B,IAAA,EACC;UAAAZ,QAAA,GAELF,IAAA,CAAC;YAAAY,SAAA,EAAgB,GAAA1C,SAAA,gBAA4B;YAAAgC,QAAA,EAC1C1B,YAAA,EAAAoB,KAAA,IAAuBf,CAAA,CAAE;UAAA,C,GAE5BmB,IAAA,CAAArC,WAAA;YAAA8B,SAAA,EAAwBc,MAAA,GAAS,OAAO;YAAAQ,IAAA;UAAA,C;;;;;;;;;;;;MAiBpCN,EAAA,GAAAO,EAAA;QAAC;UAAA1C,KAAA,EAAA2C;QAAA,IAAAD,EAAyB;QAAA,OAChCL,KAAA,CAAA1C,SAAA,CAAAgC,UAAA;UAAAC,QAAA,GACEF,IAAA,CAAA/B,SAAA,CAAAqC,cAAA;YAAAC,MAAA,EACUtB,cAAA,KAAmB;YAAAuB,OAAA,EAAAA,CAAA;cAEzBd,qBAAA,CAAsB;cACtBuB,cAAA;YAAA;YAAAf,QAAA,EAGDrB,CAAA,CAAE;UAAA,C,GAELmB,IAAA,CAAA/B,SAAA,CAAAqC,cAAA;YAAAC,MAAA,EACUtB,cAAA,KAAmB;YAAAuB,OAAA,EAAAA,CAAA;cAEzBd,qBAAA,CAAsB;cACtBuB,cAAA;YAAA;YAAAf,QAAA,EAGDrB,CAAA,CAAE;UAAA,C;;;;;;;;;;;;MAIKmC,EAAA,GAAAE,EAAA;QAAC;UAAAX,MAAA,EAAAY,QAAA;UAAAX,OAAA;UAAAY,SAAA;UAAA,GAAAC;QAAA,IAAAH,EAA4C;QAAA,OACzDP,KAAA,CAAC;UAAA,GACKU,SAAS;UAAA,kBACG5C,gBAAA;UAAA,cACJI,CAAA,CAAE;UAAA+B,SAAA,EACH,CACT,GAAA1C,SAAA,kBAA8B,EAC9B,CAACO,gBAAA,IAAoB,GAAAP,SAAA,4BAAwC,EAAAoD,MAAA,CAAAC,OAErD,EAAAC,IAAA,CACF;UAAAX,EAAA,EACJ7B,aAAA;UAAAwB,OAAA,EAAAiB,KAAA;YAAA,KAEGhD,gBAAA;cACHgD,KAAA,CAAAC,cAAA,CAAoB;cAAA;YAAA;YAGtBlB,OAAA,CAAQiB,KAAA;UAAA;UAAAL,SAAA,EAAAO,OAAA;YAAA,KAGHlD,gBAAA;cAAA,IACCgD,OAAA,CAAAG,GAAA,KAAc,WAAWH,OAAA,CAAAG,GAAA,KAAc;gBACzCH,OAAA,CAAAC,cAAA,CAAoB;cAAA;cAAA;YAAA;YAIxBN,SAAA,CAAUK,OAAA;UAAA;UAAAX,IAAA,EAEP;UAAAZ,QAAA,GAELF,IAAA,CAAC;YAAAY,SAAA,EAAgB,GAAA1C,SAAA,gBAA4B;YAAAgC,QAAA,EAC1CjB,cAAA,KAAmB,SAASJ,CAAA,CAAE,wBAAwBA,CAAA,CAAE;UAAA,C,GAE3DmB,IAAA,CAAArC,WAAA;YAAA8B,SAAA,EAAwBc,QAAA,GAAS,OAAO;YAAAQ,IAAA;UAAA,C;;;;;;;;;;;IArItDpB,EAAA,GAAAgB,KAAA,CAAC;MAAAC,SAAA,EAAe,GAAA1C,SAAA,WAAuB;MAAAgC,QAAA,GACrCS,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAA1C,SAAA,UAAsB;QAAAgC,QAAA,GACpCF,IAAA,CAAC;UAAAY,SAAA,EAAgB,GAAA1C,SAAA,SAAqB;UAAAgC,QAAA,EAAGrB,CAAA,CAAE;YAAAe,KAAA,EAAiC;UAAA,CAAG;QAAA,C,GAC/Ee,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAA1C,SAAA,kBAA8B;UAAAgC,QAAA,GAC3CxB,QAAA,IACCsB,IAAA,CAAAjC,MAAA;YAAA,cACcc,CAAA,CAAE;YAAAgD,WAAA,EACF;YAAAC,IAAA,EACN9B,IAAA,CAAApC,SAAA,IAAC;YAAA4C,OAAA,EACEjB,WAAA;YAAAwC,KAAA;YAAAhB,IAAA,EAEJ;UAAA,C,GAGTf,IAAA,CAAAjC,MAAA;YAAA,cACcc,CAAA,CAAE;YAAAgD,WAAA,EACF;YAAAC,IAAA,EACN9B,IAAA,CAAAnC,KAAA;cAAAkD,IAAA;YAAA,C;qBACGzC,KAAA;YAAAyD,KAAA;YAAAhB,IAAA,EAEJ;UAAA,C;;UAIXJ,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAA1C,SAAA,QAAoB;QAAAgC,QAAA,GAClCS,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAA1C,SAAA,OAAmB;UAAAgC,QAAA,GACjCF,IAAA,CAAC;YAAAY,SAAA,EAAiB,GAAA1C,SAAA,SAAqB;YAAA8D,OAAA,EAAWjD,cAAA;YAAAmB,QAAA,EAC/CrB,CAAA,CAAE;UAAA,C,GAELmB,IAAA,CAAC;YAAAY,SAAA,EAAe,GAAA1C,SAAA,SAAqB;YAAA;YAAAgC,QAAA,EACnCF,IAAA,CAAAhC,KAAA;cAAA4C,SAAA,EACa,GAAA1C,SAAA,gBAA4B;cAAA+D,eAAA,EACvB;cAAAC,SAAA,EACN;cAAAC,MAAA,EACFtC,E;4BAgBMC,E;6BAcA;YAAA,C;;YAIpBa,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAA1C,SAAA,OAAmB;UAAAgC,QAAA,GACjCF,IAAA,CAAC;YAAAY,SAAA,EAAiB,GAAA1C,SAAA,SAAqB;YAAA8D,OAAA,EAAWhD,aAAA;YAAAkB,QAAA,EAC/CrB,CAAA,CAAE;UAAA,C,GAELmB,IAAA,CAAC;YAAAY,SAAA,EAAe,GAAA1C,SAAA,SAAqB;YAAA;YAAAgC,QAAA,EACnCF,IAAA,CAAAhC,KAAA;cAAA4C,SAAA,EACa,GAAA1C,SAAA,gBAA4B;cAAAkE,QAAA,GAC5B3D,gBAAA;cAAAwD,eAAA,EACK;cAAAC,SAAA,EACN;cAAAC,MAAA,EACF1B,E;4BAsBMO,E;oBAoCT;cAAAqB,aAAA,EACS;YAAA,C;;;;;;;;;;;;;;;;;;;;;SAzIxB1C,E;CAgJJ","ignoreList":[]}

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

@@ -1 +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,CAiFtD,CAAA"}
+{"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

@@ -49,6 +49,8 @@ export const GroupByButton = ({
   return /*#__PURE__*/_jsx(Popup, {
     className: baseClass,
     horizontalAlign: "right",
+    popupAriaLabel: triggerLabel,
+    popupType: "dialog",
     portalClassName: `${baseClass}__popup`,
     render: ({
       close

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["isFieldDisabled","React","useMemo","ChevronIcon","useAuth","useTranslation","reduceFieldsToOptions","Button","Popup","GroupByPopup","baseClass","supportedFieldTypes","GroupByButton","collectionSlug","fields","onChange","value","i18n","t","permissions","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","length","triggerLabel","label","_jsx","className","horizontalAlign","portalClassName","render","close","renderButton","active","onClick","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","direction","size","id","selected","theme","verticalAlign"],"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      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":[]}
+{"version":3,"file":"index.js","names":["isFieldDisabled","React","useMemo","ChevronIcon","useAuth","useTranslation","reduceFieldsToOptions","Button","Popup","GroupByPopup","baseClass","supportedFieldTypes","GroupByButton","collectionSlug","fields","onChange","value","i18n","t","permissions","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","length","triggerLabel","label","_jsx","className","horizontalAlign","popupAriaLabel","popupType","portalClassName","render","close","renderButton","active","onClick","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","direction","size","id","selected","theme","verticalAlign"],"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/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"}

package/dist/elements/HTMLDiff/index.css

@@ -117,6 +117,7 @@
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .html-diff:has([data-match-type='create']),
     .html-diff:has([data-match-type='delete']) {

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

@@ -2,8 +2,9 @@ import React from 'react';
 import './colors.css';
 import './index.css';
 export { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js';
-export declare const getHTMLDiffComponents: ({ fromHTML, postProcess, toHTML, tokenizeByCharacter, }: {
+export declare const getHTMLDiffComponents: ({ fromHTML, fromLabel, postProcess, toHTML, tokenizeByCharacter, toLabel, }: {
     fromHTML: string;
+    fromLabel?: string;
     /**
      * Optional function to transform the HTML output after diffing.
      * Useful for converting escape sequences to HTML entities.
@@ -11,6 +12,7 @@ export declare const getHTMLDiffComponents: ({ fromHTML, postProcess, toHTML, to
     postProcess?: (html: string) => string;
     toHTML: string;
     tokenizeByCharacter?: boolean;
+    toLabel?: string;
 }) => {
     From: React.ReactNode;
     To: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HTMLDiff/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AACrB,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAIlE,eAAO,MAAM,qBAAqB,GAAI,yDAKnC;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,KAAG;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CA4BpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HTMLDiff/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AACrB,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAIlE,eAAO,MAAM,qBAAqB,gFAO/B;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,KAAG;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CAgCpB,CAAA"}

package/dist/elements/HTMLDiff/index.js

@@ -7,9 +7,11 @@ export { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js';
 const baseClass = 'html-diff';
 export const getHTMLDiffComponents = ({
   fromHTML,
+  fromLabel,
   postProcess,
   toHTML,
-  tokenizeByCharacter
+  tokenizeByCharacter,
+  toLabel
 }) => {
   const diffHTML = new HtmlDiff(fromHTML, toHTML, {
     tokenizeByCharacter
@@ -20,16 +22,20 @@ export const getHTMLDiffComponents = ({
     newHTML = postProcess(newHTML);
   }
   const From = oldHTML ? /*#__PURE__*/_jsx("div", {
+    "aria-label": fromLabel,
     className: `${baseClass}__diff-old html-diff`,
     dangerouslySetInnerHTML: {
       __html: oldHTML
-    }
+    },
+    role: fromLabel ? 'group' : undefined
   }) : null;
   const To = newHTML ? /*#__PURE__*/_jsx("div", {
+    "aria-label": toLabel,
     className: `${baseClass}__diff-new html-diff`,
     dangerouslySetInnerHTML: {
       __html: newHTML
-    }
+    },
+    role: toLabel ? 'group' : undefined
   }) : null;
   return {
     From,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","HtmlDiff","escapeDiffHTML","unescapeDiffHTML","baseClass","getHTMLDiffComponents","fromHTML","postProcess","toHTML","tokenizeByCharacter","diffHTML","oldHTML","newHTML","getSideBySideContents","From","_jsx","className","dangerouslySetInnerHTML","__html","To"],"sources":["../../../src/elements/HTMLDiff/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HtmlDiff } from './diff/index.js'\nimport './colors.css'\nimport './index.css'\n\nexport { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js'\n\nconst baseClass = 'html-diff'\n\nexport const getHTMLDiffComponents = ({\n  fromHTML,\n  postProcess,\n  toHTML,\n  tokenizeByCharacter,\n}: {\n  fromHTML: string\n  /**\n   * Optional function to transform the HTML output after diffing.\n   * Useful for converting escape sequences to HTML entities.\n   */\n  postProcess?: (html: string) => string\n  toHTML: string\n  tokenizeByCharacter?: boolean\n}): {\n  From: React.ReactNode\n  To: React.ReactNode\n} => {\n  const diffHTML = new HtmlDiff(fromHTML, toHTML, {\n    tokenizeByCharacter,\n  })\n\n  let [oldHTML, newHTML] = diffHTML.getSideBySideContents()\n\n  if (postProcess) {\n    oldHTML = postProcess(oldHTML)\n    newHTML = postProcess(newHTML)\n  }\n\n  const From = oldHTML ? (\n    <div\n      className={`${baseClass}__diff-old html-diff`}\n      dangerouslySetInnerHTML={{ __html: oldHTML }}\n    />\n  ) : null\n\n  const To = newHTML ? (\n    <div\n      className={`${baseClass}__diff-new html-diff`}\n      dangerouslySetInnerHTML={{ __html: newHTML }}\n    />\n  ) : null\n\n  return { From, To }\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AACP,OAAO;AAEP,SAASC,cAAc,EAAEC,gBAAgB,QAAQ;AAEjD,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC;AAAmB,CAUpB;EAIC,MAAMC,QAAA,GAAW,IAAIT,QAAA,CAASK,QAAA,EAAUE,MAAA,EAAQ;IAC9CC;EACF;EAEA,IAAI,CAACE,OAAA,EAASC,OAAA,CAAQ,GAAGF,QAAA,CAASG,qBAAqB;EAEvD,IAAIN,WAAA,EAAa;IACfI,OAAA,GAAUJ,WAAA,CAAYI,OAAA;IACtBC,OAAA,GAAUL,WAAA,CAAYK,OAAA;EACxB;EAEA,MAAME,IAAA,GAAOH,OAAA,gBACXI,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGZ,SAAA,sBAA+B;IAC7Ca,uBAAA,EAAyB;MAAEC,MAAA,EAAQP;IAAQ;OAE3C;EAEJ,MAAMQ,EAAA,GAAKP,OAAA,gBACTG,IAAA,CAAC;IACCC,SAAA,EAAW,GAAGZ,SAAA,sBAA+B;IAC7Ca,uBAAA,EAAyB;MAAEC,MAAA,EAAQN;IAAQ;OAE3C;EAEJ,OAAO;IAAEE,IAAA;IAAMK;EAAG;AACpB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","HtmlDiff","escapeDiffHTML","unescapeDiffHTML","baseClass","getHTMLDiffComponents","fromHTML","fromLabel","postProcess","toHTML","tokenizeByCharacter","toLabel","diffHTML","oldHTML","newHTML","getSideBySideContents","From","_jsx","className","dangerouslySetInnerHTML","__html","role","undefined","To"],"sources":["../../../src/elements/HTMLDiff/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { HtmlDiff } from './diff/index.js'\nimport './colors.css'\nimport './index.css'\n\nexport { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js'\n\nconst baseClass = 'html-diff'\n\nexport const getHTMLDiffComponents = ({\n  fromHTML,\n  fromLabel,\n  postProcess,\n  toHTML,\n  tokenizeByCharacter,\n  toLabel,\n}: {\n  fromHTML: string\n  fromLabel?: string\n  /**\n   * Optional function to transform the HTML output after diffing.\n   * Useful for converting escape sequences to HTML entities.\n   */\n  postProcess?: (html: string) => string\n  toHTML: string\n  tokenizeByCharacter?: boolean\n  toLabel?: string\n}): {\n  From: React.ReactNode\n  To: React.ReactNode\n} => {\n  const diffHTML = new HtmlDiff(fromHTML, toHTML, {\n    tokenizeByCharacter,\n  })\n\n  let [oldHTML, newHTML] = diffHTML.getSideBySideContents()\n\n  if (postProcess) {\n    oldHTML = postProcess(oldHTML)\n    newHTML = postProcess(newHTML)\n  }\n\n  const From = oldHTML ? (\n    <div\n      aria-label={fromLabel}\n      className={`${baseClass}__diff-old html-diff`}\n      dangerouslySetInnerHTML={{ __html: oldHTML }}\n      role={fromLabel ? 'group' : undefined}\n    />\n  ) : null\n\n  const To = newHTML ? (\n    <div\n      aria-label={toLabel}\n      className={`${baseClass}__diff-new html-diff`}\n      dangerouslySetInnerHTML={{ __html: newHTML }}\n      role={toLabel ? 'group' : undefined}\n    />\n  ) : null\n\n  return { From, To }\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AACP,OAAO;AAEP,SAASC,cAAc,EAAEC,gBAAgB,QAAQ;AAEjD,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,MAAM;EACNC,mBAAmB;EACnBC;AAAO,CAYR;EAIC,MAAMC,QAAA,GAAW,IAAIX,QAAA,CAASK,QAAA,EAAUG,MAAA,EAAQ;IAC9CC;EACF;EAEA,IAAI,CAACG,OAAA,EAASC,OAAA,CAAQ,GAAGF,QAAA,CAASG,qBAAqB;EAEvD,IAAIP,WAAA,EAAa;IACfK,OAAA,GAAUL,WAAA,CAAYK,OAAA;IACtBC,OAAA,GAAUN,WAAA,CAAYM,OAAA;EACxB;EAEA,MAAME,IAAA,GAAOH,OAAA,gBACXI,IAAA,CAAC;IACC,cAAYV,SAAA;IACZW,SAAA,EAAW,GAAGd,SAAA,sBAA+B;IAC7Ce,uBAAA,EAAyB;MAAEC,MAAA,EAAQP;IAAQ;IAC3CQ,IAAA,EAAMd,SAAA,GAAY,UAAUe;OAE5B;EAEJ,MAAMC,EAAA,GAAKT,OAAA,gBACTG,IAAA,CAAC;IACC,cAAYN,OAAA;IACZO,SAAA,EAAW,GAAGd,SAAA,sBAA+B;IAC7Ce,uBAAA,EAAyB;MAAEC,MAAA,EAAQN;IAAQ;IAC3CO,IAAA,EAAMV,OAAA,GAAU,UAAUW;OAE1B;EAEJ,OAAO;IAAEN,IAAA;IAAMO;EAAG;AACpB","ignoreList":[]}

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.css

@@ -5,7 +5,7 @@
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--color-border);
+    border-right: var(--stroke-width-small) solid var(--color-border);
     height: 100%;
     background: var(--color-bg);
   }
@@ -16,13 +16,15 @@
     justify-content: space-between;
     gap: var(--spacer-2);
     padding: var(--spacer-1) var(--spacer-3);
+    padding-inline-end: var(--spacer-2);
     flex-shrink: 0;
     margin-bottom: var(--spacer-2);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
   .hierarchy-column__add-button {
     flex-shrink: 0;
+    color: var(--color-text-secondary);
   }
 
   .hierarchy-column__header-checkbox {
@@ -30,6 +32,9 @@
   }
 
   .hierarchy-column__header-title {
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
     display: flex;
     align-items: center;
     gap: var(--spacer-2);
@@ -45,7 +50,7 @@
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    margin: 0 var(--spacer-2);
+    margin: 0 var(--spacer-1);
     gap: var(--spacer-1);
   }
 

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/Column/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAQ9C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2FxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/Column/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAQ9C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgGxC,CAAA"}