@payloadcms/ui 4.0.0-canary.3 → 4.0.0-internal.011fd46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/dist/elements/ColumnSelection/Popup.d.ts +12 -0
  2. package/dist/elements/ColumnSelection/Popup.d.ts.map +1 -0
  3. package/dist/elements/{ColumnSelector/index.js → ColumnSelection/Popup.js} +23 -12
  4. package/dist/elements/ColumnSelection/Popup.js.map +1 -0
  5. package/dist/elements/ColumnSelection/index.d.ts +10 -0
  6. package/dist/elements/ColumnSelection/index.d.ts.map +1 -0
  7. package/dist/elements/{ColumnsButton → ColumnSelection}/index.js +23 -17
  8. package/dist/elements/ColumnSelection/index.js.map +1 -0
  9. package/dist/elements/DocumentControls/index.d.ts.map +1 -1
  10. package/dist/elements/DocumentControls/index.js +2 -2
  11. package/dist/elements/DocumentControls/index.js.map +1 -1
  12. package/dist/elements/DocumentDrawer/DrawerHeader/index.d.ts.map +1 -1
  13. package/dist/elements/DocumentDrawer/DrawerHeader/index.js +5 -3
  14. package/dist/elements/DocumentDrawer/DrawerHeader/index.js.map +1 -1
  15. package/dist/elements/GroupBy/Popup.d.ts +21 -0
  16. package/dist/elements/GroupBy/Popup.d.ts.map +1 -0
  17. package/dist/elements/GroupBy/Popup.js +269 -0
  18. package/dist/elements/GroupBy/Popup.js.map +1 -0
  19. package/dist/elements/GroupBy/index.d.ts +12 -0
  20. package/dist/elements/GroupBy/index.d.ts.map +1 -0
  21. package/dist/elements/GroupBy/index.js +91 -0
  22. package/dist/elements/GroupBy/index.js.map +1 -0
  23. package/dist/elements/ListColumnSelectionButton/index.d.ts +11 -0
  24. package/dist/elements/ListColumnSelectionButton/index.d.ts.map +1 -0
  25. package/dist/elements/ListColumnSelectionButton/index.js +37 -0
  26. package/dist/elements/ListColumnSelectionButton/index.js.map +1 -0
  27. package/dist/elements/ListControls/index.d.ts.map +1 -1
  28. package/dist/elements/ListControls/index.js +7 -7
  29. package/dist/elements/ListControls/index.js.map +1 -1
  30. package/dist/elements/ListGroupByButton/index.d.ts +12 -0
  31. package/dist/elements/ListGroupByButton/index.d.ts.map +1 -0
  32. package/dist/elements/ListGroupByButton/index.js +55 -0
  33. package/dist/elements/ListGroupByButton/index.js.map +1 -0
  34. package/dist/elements/ListWhereBuilder/index.d.ts +16 -0
  35. package/dist/elements/ListWhereBuilder/index.d.ts.map +1 -0
  36. package/dist/elements/ListWhereBuilder/index.js +62 -0
  37. package/dist/elements/ListWhereBuilder/index.js.map +1 -0
  38. package/dist/elements/Popup/index.d.ts.map +1 -1
  39. package/dist/elements/Popup/index.js +42 -11
  40. package/dist/elements/Popup/index.js.map +1 -1
  41. package/dist/elements/QueryPresets/cells/ColumnsCell/{index.scss → index.css} +1 -3
  42. package/dist/elements/QueryPresets/cells/ColumnsCell/index.d.ts +1 -1
  43. package/dist/elements/QueryPresets/cells/ColumnsCell/index.d.ts.map +1 -1
  44. package/dist/elements/QueryPresets/cells/ColumnsCell/index.js +1 -1
  45. package/dist/elements/QueryPresets/cells/ColumnsCell/index.js.map +1 -1
  46. package/dist/elements/QueryPresets/fields/ColumnsField/index.d.ts +1 -1
  47. package/dist/elements/QueryPresets/fields/ColumnsField/index.d.ts.map +1 -1
  48. package/dist/elements/QueryPresets/fields/ColumnsField/index.js +77 -48
  49. package/dist/elements/QueryPresets/fields/ColumnsField/index.js.map +1 -1
  50. package/dist/elements/QueryPresets/fields/GroupByField/index.d.ts +1 -1
  51. package/dist/elements/QueryPresets/fields/GroupByField/index.d.ts.map +1 -1
  52. package/dist/elements/QueryPresets/fields/GroupByField/index.js +12 -21
  53. package/dist/elements/QueryPresets/fields/GroupByField/index.js.map +1 -1
  54. package/dist/elements/QueryPresets/fields/Heading/index.css +52 -0
  55. package/dist/elements/QueryPresets/fields/Heading/index.d.ts +7 -0
  56. package/dist/elements/QueryPresets/fields/Heading/index.d.ts.map +1 -0
  57. package/dist/elements/QueryPresets/fields/Heading/index.js +31 -0
  58. package/dist/elements/QueryPresets/fields/Heading/index.js.map +1 -0
  59. package/dist/elements/QueryPresets/fields/WhereField/index.d.ts +1 -1
  60. package/dist/elements/QueryPresets/fields/WhereField/index.d.ts.map +1 -1
  61. package/dist/elements/QueryPresets/fields/WhereField/index.js +24 -23
  62. package/dist/elements/QueryPresets/fields/WhereField/index.js.map +1 -1
  63. package/dist/elements/QueryPresets/fields/fields.css +23 -0
  64. package/dist/elements/RelationshipTable/index.js +2 -2
  65. package/dist/elements/RelationshipTable/index.js.map +1 -1
  66. package/dist/elements/SortColumn/index.css +1 -1
  67. package/dist/elements/Table/index.css +24 -2
  68. package/dist/elements/WhereBuilder/Condition/index.d.ts +1 -0
  69. package/dist/elements/WhereBuilder/Condition/index.d.ts.map +1 -1
  70. package/dist/elements/WhereBuilder/Condition/index.js +17 -2
  71. package/dist/elements/WhereBuilder/Condition/index.js.map +1 -1
  72. package/dist/elements/WhereBuilder/index.d.ts +4 -3
  73. package/dist/elements/WhereBuilder/index.d.ts.map +1 -1
  74. package/dist/elements/WhereBuilder/index.js +71 -62
  75. package/dist/elements/WhereBuilder/index.js.map +1 -1
  76. package/dist/elements/WhereBuilder/types.d.ts +6 -5
  77. package/dist/elements/WhereBuilder/types.d.ts.map +1 -1
  78. package/dist/elements/WhereBuilder/types.js.map +1 -1
  79. package/dist/exports/client/index.d.ts +1 -0
  80. package/dist/exports/client/index.d.ts.map +1 -1
  81. package/dist/exports/client/index.js +13 -13
  82. package/dist/exports/client/index.js.map +4 -4
  83. package/dist/scss/app.scss +6 -0
  84. package/dist/styles.css +1 -1
  85. package/dist/utilities/reduceFieldsToOptions.js +1 -1
  86. package/dist/utilities/reduceFieldsToOptions.js.map +1 -1
  87. package/dist/views/List/index.client.d.ts.map +1 -1
  88. package/dist/views/List/index.client.js +3 -3
  89. package/dist/views/List/index.client.js.map +1 -1
  90. package/dist/views/Versions/index.css +0 -4
  91. package/package.json +5 -5
  92. package/dist/elements/ColumnSelector/index.d.ts +0 -9
  93. package/dist/elements/ColumnSelector/index.d.ts.map +0 -1
  94. package/dist/elements/ColumnSelector/index.js.map +0 -1
  95. package/dist/elements/ColumnsButton/index.d.ts +0 -7
  96. package/dist/elements/ColumnsButton/index.d.ts.map +0 -1
  97. package/dist/elements/ColumnsButton/index.js.map +0 -1
  98. package/dist/elements/GroupByBuilder/index.d.ts +0 -12
  99. package/dist/elements/GroupByBuilder/index.d.ts.map +0 -1
  100. package/dist/elements/GroupByBuilder/index.js +0 -164
  101. package/dist/elements/GroupByBuilder/index.js.map +0 -1
  102. package/dist/elements/GroupByBuilder/index.scss +0 -39
  103. package/dist/elements/GroupByControl/index.d.ts +0 -9
  104. package/dist/elements/GroupByControl/index.d.ts.map +0 -1
  105. package/dist/elements/GroupByControl/index.js +0 -254
  106. package/dist/elements/GroupByControl/index.js.map +0 -1
  107. package/dist/elements/QueryPresets/fields/ColumnsField/index.scss +0 -17
  108. package/dist/elements/QueryPresets/fields/GroupByField/index.scss +0 -17
  109. package/dist/elements/QueryPresets/fields/WhereField/index.scss +0 -23
  110. /package/dist/elements/{ColumnSelector/index.css → ColumnSelection/Popup.css} +0 -0
  111. /package/dist/elements/{GroupByControl/index.css → GroupBy/Popup.css} +0 -0
@@ -1,39 +0,0 @@
1
- @import '../../scss/styles.scss';
2
-
3
- @layer payload-default {
4
- .group-by-builder {
5
- background: var(--theme-elevation-50);
6
- padding: var(--base);
7
- display: flex;
8
- flex-direction: column;
9
- gap: calc(var(--base) / 2);
10
-
11
- &__header {
12
- width: 100%;
13
- display: flex;
14
- justify-content: space-between;
15
- }
16
-
17
- &__clear-button {
18
- background: transparent;
19
- border: none;
20
- color: var(--theme-elevation-500);
21
- line-height: inherit;
22
- cursor: pointer;
23
- font-size: inherit;
24
- padding: 0;
25
- text-decoration: underline;
26
- }
27
-
28
- &__inputs {
29
- width: 100%;
30
- display: flex;
31
- gap: base(1);
32
-
33
- & > * {
34
- flex-grow: 1;
35
- width: 50%;
36
- }
37
- }
38
- }
39
- }
@@ -1,9 +0,0 @@
1
- import type { ClientField, SanitizedCollectionConfig } from 'payload';
2
- import React from 'react';
3
- import './index.css';
4
- export type GroupByControlProps = {
5
- readonly collectionSlug: SanitizedCollectionConfig['slug'];
6
- readonly fields: ClientField[];
7
- };
8
- export declare const GroupByControl: React.FC<GroupByControlProps>;
9
- //# sourceMappingURL=index.d.ts.map
@@ -1 +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;AAW3D,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,CAoPxD,CAAA"}
@@ -1,254 +0,0 @@
1
- 'use client';
2
-
3
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- import { isFieldDisabled } from 'payload/shared';
5
- import React, { useCallback, useMemo, useRef } from 'react';
6
- import { ChevronIcon } from '../../icons/Chevron/index.js';
7
- import { TrashIcon } from '../../icons/Trash/index.js';
8
- import { XIcon } from '../../icons/X/index.js';
9
- import { useAuth } from '../../providers/Auth/index.js';
10
- import { useListQuery } from '../../providers/ListQuery/index.js';
11
- import { useTranslation } from '../../providers/Translation/index.js';
12
- import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
13
- import { Button } from '../Button/index.js';
14
- import { Popup, PopupList } from '../Popup/index.js';
15
- import './index.css';
16
- const baseClass = 'group-by-control';
17
- /**
18
- * Supported field types for group by functionality.
19
- */
20
- const supportedFieldTypes = ['text', 'textarea', 'number', 'select', 'relationship', 'date', 'checkbox', 'radio', 'email', 'upload'];
21
- export const GroupByControl = ({
22
- collectionSlug,
23
- fields
24
- }) => {
25
- const {
26
- i18n,
27
- t
28
- } = useTranslation();
29
- const {
30
- permissions
31
- } = useAuth();
32
- const listQuery = useListQuery();
33
- const closeRef = useRef(null);
34
- const groupByRaw = listQuery.query?.groupBy;
35
- const groupByFieldName = groupByRaw?.replace(/^-/, '');
36
- const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
37
- const reducedFields = useMemo(() => reduceFieldsToOptions({
38
- fieldPermissions,
39
- fields,
40
- i18n
41
- }), [fields, fieldPermissions, i18n]);
42
- const filteredFields = useMemo(() => reducedFields.filter(field => !isFieldDisabled(field.field, 'groupBy') && field.fieldPath !== 'id' && supportedFieldTypes.includes(field.field.type)), [reducedFields]);
43
- const groupByField = reducedFields.find(field_0 => field_0.fieldPath === groupByFieldName);
44
- const isActive = Boolean(groupByFieldName && groupByField);
45
- const handleFieldSelect = useCallback(value => {
46
- void (async () => {
47
- if (typeof listQuery.refineListData !== 'function') {
48
- return;
49
- }
50
- await listQuery.refineListData({
51
- groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,
52
- page: 1
53
- });
54
- })();
55
- }, [listQuery]);
56
- const handleClear = useCallback(() => {
57
- void (async () => {
58
- if (typeof listQuery.refineListData === 'function') {
59
- await listQuery.refineListData({
60
- groupBy: ''
61
- });
62
- }
63
- closeRef.current?.();
64
- })();
65
- }, [listQuery]);
66
- const handleDirectionSelect = useCallback(value_0 => {
67
- void (async () => {
68
- if (!groupByFieldName || typeof listQuery.refineListData !== 'function') {
69
- return;
70
- }
71
- await listQuery.refineListData({
72
- groupBy: value_0 === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
73
- page: 1
74
- });
75
- })();
76
- }, [groupByFieldName, listQuery]);
77
- if (filteredFields.length === 0) {
78
- return null;
79
- }
80
- const directionValue = !groupByRaw || typeof groupByRaw !== 'string' ? 'asc' : groupByRaw.startsWith('-') ? 'desc' : 'asc';
81
- // Build the trigger button label
82
- const triggerLabel = isActive ? t('general:groupByLabel', {
83
- label: groupByField?.label || ''
84
- }) : t('general:groupByLabel', {
85
- label: ''
86
- });
87
- return /*#__PURE__*/_jsx(Popup, {
88
- className: baseClass,
89
- horizontalAlign: "right",
90
- portalClassName: `${baseClass}__popup`,
91
- render: ({
92
- close
93
- }) => {
94
- closeRef.current = close;
95
- return /*#__PURE__*/_jsxs("div", {
96
- className: `${baseClass}__content`,
97
- children: [/*#__PURE__*/_jsxs("div", {
98
- className: `${baseClass}__header`,
99
- children: [/*#__PURE__*/_jsx("span", {
100
- className: `${baseClass}__title`,
101
- children: t('general:groupByLabel', {
102
- label: ''
103
- })
104
- }), /*#__PURE__*/_jsxs("div", {
105
- className: `${baseClass}__header-actions`,
106
- children: [isActive && /*#__PURE__*/_jsx(Button, {
107
- "aria-label": t('general:clear'),
108
- buttonStyle: "ghost",
109
- icon: /*#__PURE__*/_jsx(TrashIcon, {}),
110
- onClick: handleClear,
111
- round: true,
112
- size: "medium"
113
- }), /*#__PURE__*/_jsx(Button, {
114
- "aria-label": t('general:close'),
115
- buttonStyle: "ghost",
116
- icon: /*#__PURE__*/_jsx(XIcon, {
117
- size: 24
118
- }),
119
- onClick: close,
120
- round: true,
121
- size: "medium"
122
- })]
123
- })]
124
- }), /*#__PURE__*/_jsxs("div", {
125
- className: `${baseClass}__body`,
126
- children: [/*#__PURE__*/_jsxs("div", {
127
- className: `${baseClass}__row`,
128
- children: [/*#__PURE__*/_jsx("label", {
129
- className: `${baseClass}__label`,
130
- children: t('general:field')
131
- }), /*#__PURE__*/_jsx("div", {
132
- className: `${baseClass}__input`,
133
- "data-popup-prevent-close": true,
134
- children: /*#__PURE__*/_jsx(Popup, {
135
- className: `${baseClass}__select-popup`,
136
- horizontalAlign: "right",
137
- render: ({
138
- close: closeFieldPopup
139
- }) => /*#__PURE__*/_jsx(PopupList.RadioGroup, {
140
- children: filteredFields.map((field_1, i) => /*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
141
- active: field_1.fieldPath === groupByFieldName,
142
- onClick: () => {
143
- handleFieldSelect(field_1.fieldPath);
144
- closeFieldPopup();
145
- },
146
- children: field_1.label
147
- }, i))
148
- }),
149
- renderButton: ({
150
- active,
151
- onClick,
152
- onKeyDown
153
- }) => /*#__PURE__*/_jsxs("button", {
154
- className: `${baseClass}__select-trigger`,
155
- onClick: onClick,
156
- onKeyDown: onKeyDown,
157
- type: "button",
158
- children: [/*#__PURE__*/_jsx("span", {
159
- className: `${baseClass}__select-value`,
160
- children: groupByField?.label || t('general:selectValue')
161
- }), /*#__PURE__*/_jsx(ChevronIcon, {
162
- direction: active ? 'up' : 'down',
163
- size: 16
164
- })]
165
- }),
166
- size: "medium",
167
- verticalAlign: "bottom"
168
- })
169
- })]
170
- }), /*#__PURE__*/_jsxs("div", {
171
- className: `${baseClass}__row`,
172
- children: [/*#__PURE__*/_jsx("label", {
173
- className: `${baseClass}__label`,
174
- children: t('general:sort')
175
- }), /*#__PURE__*/_jsx("div", {
176
- className: `${baseClass}__input`,
177
- "data-popup-prevent-close": true,
178
- children: /*#__PURE__*/_jsx(Popup, {
179
- className: `${baseClass}__select-popup`,
180
- disabled: !groupByFieldName,
181
- horizontalAlign: "right",
182
- render: ({
183
- close: closeSortPopup
184
- }) => /*#__PURE__*/_jsxs(PopupList.RadioGroup, {
185
- children: [/*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
186
- active: directionValue === 'desc',
187
- onClick: () => {
188
- handleDirectionSelect('desc');
189
- closeSortPopup();
190
- },
191
- children: t('general:descending')
192
- }), /*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
193
- active: directionValue === 'asc',
194
- onClick: () => {
195
- handleDirectionSelect('asc');
196
- closeSortPopup();
197
- },
198
- children: t('general:ascending')
199
- })]
200
- }),
201
- renderButton: ({
202
- active: active_0,
203
- onClick: onClick_0,
204
- onKeyDown: onKeyDown_0
205
- }) => /*#__PURE__*/_jsxs("button", {
206
- className: [`${baseClass}__select-trigger`, !groupByFieldName && `${baseClass}__select-trigger--disabled`].filter(Boolean).join(' '),
207
- disabled: !groupByFieldName,
208
- onClick: onClick_0,
209
- onKeyDown: onKeyDown_0,
210
- type: "button",
211
- children: [/*#__PURE__*/_jsx("span", {
212
- className: `${baseClass}__select-value`,
213
- children: directionValue === 'desc' ? t('general:descending') : t('general:ascending')
214
- }), /*#__PURE__*/_jsx(ChevronIcon, {
215
- direction: active_0 ? 'up' : 'down',
216
- size: 16
217
- })]
218
- }),
219
- size: "small",
220
- verticalAlign: "bottom"
221
- })
222
- })]
223
- })]
224
- })]
225
- });
226
- },
227
- renderButton: ({
228
- active: active_1,
229
- onClick: onClick_1,
230
- onKeyDown: onKeyDown_1,
231
- ...ariaProps
232
- }) => /*#__PURE__*/_jsx(Button, {
233
- buttonStyle: "secondary",
234
- className: `${baseClass}__trigger`,
235
- extraButtonProps: {
236
- onKeyDown: onKeyDown_1
237
- },
238
- icon: /*#__PURE__*/_jsx(ChevronIcon, {
239
- direction: active_1 ? 'up' : 'down',
240
- size: 16
241
- }),
242
- id: "toggle-group-by",
243
- onClick: onClick_1,
244
- selected: active_1 || isActive,
245
- size: "medium",
246
- ...ariaProps,
247
- children: triggerLabel
248
- }),
249
- size: "large",
250
- theme: "auto",
251
- verticalAlign: "bottom"
252
- });
253
- };
254
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["isFieldDisabled","React","useCallback","useMemo","useRef","ChevronIcon","TrashIcon","XIcon","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","Button","Popup","PopupList","baseClass","supportedFieldTypes","GroupByControl","collectionSlug","fields","i18n","t","permissions","listQuery","closeRef","groupByRaw","query","groupBy","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","handleFieldSelect","value","refineListData","startsWith","page","handleClear","current","handleDirectionSelect","length","directionValue","triggerLabel","label","_jsx","className","horizontalAlign","portalClassName","render","close","_jsxs","buttonStyle","icon","onClick","round","size","closeFieldPopup","RadioGroup","map","i","RadioGroupItem","active","renderButton","onKeyDown","direction","verticalAlign","disabled","closeSortPopup","join","ariaProps","extraButtonProps","id","selected","theme"],"sources":["../../../src/elements/GroupByControl/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useMemo, useRef } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.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 { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nexport type GroupByControlProps = {\n readonly collectionSlug: SanitizedCollectionConfig['slug']\n readonly fields: ClientField[]\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 GroupByControl: React.FC<GroupByControlProps> = ({ collectionSlug, fields }) => {\n const { i18n, t } = useTranslation()\n const { permissions } = useAuth()\n const listQuery = useListQuery()\n const closeRef = useRef<(() => void) | null>(null)\n\n const groupByRaw = 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 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 const handleFieldSelect = useCallback(\n (value: string) => {\n void (async () => {\n if (typeof listQuery.refineListData !== 'function') {\n return\n }\n await listQuery.refineListData({\n groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,\n page: 1,\n })\n })()\n },\n [listQuery],\n )\n\n const handleClear = useCallback(() => {\n void (async () => {\n if (typeof listQuery.refineListData === 'function') {\n await listQuery.refineListData({ groupBy: '' })\n }\n closeRef.current?.()\n })()\n }, [listQuery])\n\n const handleDirectionSelect = useCallback(\n (value: 'asc' | 'desc') => {\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, listQuery],\n )\n\n if (filteredFields.length === 0) {\n return null\n }\n\n const directionValue =\n !groupByRaw || typeof groupByRaw !== 'string'\n ? 'asc'\n : groupByRaw.startsWith('-')\n ? 'desc'\n : 'asc'\n\n // Build the trigger button label\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 closeRef.current = close\n return (\n <div className={`${baseClass}__content`}>\n <div className={`${baseClass}__header`}>\n <span className={`${baseClass}__title`}>\n {t('general:groupByLabel', { label: '' })}\n </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'\n ? t('general:descending')\n : 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 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":[]}
@@ -1,17 +0,0 @@
1
- @import '../../../../scss/styles';
2
-
3
- @layer payload-default {
4
- .query-preset-columns-field {
5
- .field-label {
6
- margin-bottom: calc(var(--base) / 2);
7
- }
8
-
9
- .value-wrapper {
10
- background-color: var(--theme-elevation-50);
11
- padding: var(--base);
12
- display: flex;
13
- flex-wrap: wrap;
14
- gap: calc(var(--base) / 2);
15
- }
16
- }
17
- }
@@ -1,17 +0,0 @@
1
- @import '../../../../scss/styles';
2
-
3
- @layer payload-default {
4
- .query-preset-group-by-field {
5
- .field-label {
6
- margin-bottom: calc(var(--base) / 2);
7
- }
8
-
9
- .value-wrapper {
10
- background-color: var(--theme-elevation-50);
11
- padding: var(--base);
12
- display: flex;
13
- flex-wrap: wrap;
14
- gap: calc(var(--base) / 2);
15
- }
16
- }
17
- }
@@ -1,23 +0,0 @@
1
- @import '../../../../scss/styles';
2
-
3
- @layer payload-default {
4
- .query-preset-where-field {
5
- .field-label {
6
- margin-bottom: calc(var(--base) / 2);
7
- }
8
-
9
- .value-wrapper {
10
- background-color: var(--theme-elevation-50);
11
- padding: var(--base);
12
- }
13
- }
14
-
15
- .query-preset-where-field {
16
- .pill {
17
- &--style-always-white {
18
- background: var(--theme-elevation-250);
19
- color: var(--theme-elevation-1000);
20
- }
21
- }
22
- }
23
- }