@payloadcms/ui 4.0.0-canary.2 → 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 (194) hide show
  1. package/dist/css/colors.css +3 -0
  2. package/dist/css/design-tokens.css +5 -0
  3. package/dist/css/elevations.css +4 -0
  4. package/dist/elements/AppHeader/index.d.ts +3 -2
  5. package/dist/elements/AppHeader/index.d.ts.map +1 -1
  6. package/dist/elements/AppHeader/index.js +2 -2
  7. package/dist/elements/AppHeader/index.js.map +1 -1
  8. package/dist/elements/ColumnSelection/Popup.d.ts +12 -0
  9. package/dist/elements/ColumnSelection/Popup.d.ts.map +1 -0
  10. package/dist/elements/{ColumnSelector/index.js → ColumnSelection/Popup.js} +23 -12
  11. package/dist/elements/ColumnSelection/Popup.js.map +1 -0
  12. package/dist/elements/ColumnSelection/index.d.ts +10 -0
  13. package/dist/elements/ColumnSelection/index.d.ts.map +1 -0
  14. package/dist/elements/{ColumnsButton → ColumnSelection}/index.js +23 -17
  15. package/dist/elements/ColumnSelection/index.js.map +1 -0
  16. package/dist/elements/DocumentControls/index.css +7 -1
  17. package/dist/elements/DocumentControls/index.d.ts.map +1 -1
  18. package/dist/elements/DocumentControls/index.js +2 -2
  19. package/dist/elements/DocumentControls/index.js.map +1 -1
  20. package/dist/elements/DocumentDrawer/DrawerHeader/index.d.ts.map +1 -1
  21. package/dist/elements/DocumentDrawer/DrawerHeader/index.js +5 -3
  22. package/dist/elements/DocumentDrawer/DrawerHeader/index.js.map +1 -1
  23. package/dist/elements/GroupBy/Popup.d.ts +21 -0
  24. package/dist/elements/GroupBy/Popup.d.ts.map +1 -0
  25. package/dist/elements/GroupBy/Popup.js +269 -0
  26. package/dist/elements/GroupBy/Popup.js.map +1 -0
  27. package/dist/elements/GroupBy/index.d.ts +12 -0
  28. package/dist/elements/GroupBy/index.d.ts.map +1 -0
  29. package/dist/elements/GroupBy/index.js +91 -0
  30. package/dist/elements/GroupBy/index.js.map +1 -0
  31. package/dist/elements/ListColumnSelectionButton/index.d.ts +11 -0
  32. package/dist/elements/ListColumnSelectionButton/index.d.ts.map +1 -0
  33. package/dist/elements/ListColumnSelectionButton/index.js +37 -0
  34. package/dist/elements/ListColumnSelectionButton/index.js.map +1 -0
  35. package/dist/elements/ListControls/index.d.ts.map +1 -1
  36. package/dist/elements/ListControls/index.js +7 -7
  37. package/dist/elements/ListControls/index.js.map +1 -1
  38. package/dist/elements/ListGroupByButton/index.d.ts +12 -0
  39. package/dist/elements/ListGroupByButton/index.d.ts.map +1 -0
  40. package/dist/elements/ListGroupByButton/index.js +55 -0
  41. package/dist/elements/ListGroupByButton/index.js.map +1 -0
  42. package/dist/elements/ListWhereBuilder/index.d.ts +16 -0
  43. package/dist/elements/ListWhereBuilder/index.d.ts.map +1 -0
  44. package/dist/elements/ListWhereBuilder/index.js +62 -0
  45. package/dist/elements/ListWhereBuilder/index.js.map +1 -0
  46. package/dist/elements/Popup/PopupButtonList/index.css +5 -0
  47. package/dist/elements/Popup/PopupGroupLabel/index.css +8 -5
  48. package/dist/elements/Popup/index.d.ts.map +1 -1
  49. package/dist/elements/Popup/index.js +42 -11
  50. package/dist/elements/Popup/index.js.map +1 -1
  51. package/dist/elements/PublishMany/DrawerContent.d.ts +2 -1
  52. package/dist/elements/PublishMany/DrawerContent.d.ts.map +1 -1
  53. package/dist/elements/PublishMany/DrawerContent.js.map +1 -1
  54. package/dist/elements/PublishMany/index.d.ts +2 -6
  55. package/dist/elements/PublishMany/index.d.ts.map +1 -1
  56. package/dist/elements/PublishMany/index.js +0 -38
  57. package/dist/elements/PublishMany/index.js.map +1 -1
  58. package/dist/elements/QueryPresets/cells/ColumnsCell/{index.scss → index.css} +1 -3
  59. package/dist/elements/QueryPresets/cells/ColumnsCell/index.d.ts +1 -1
  60. package/dist/elements/QueryPresets/cells/ColumnsCell/index.d.ts.map +1 -1
  61. package/dist/elements/QueryPresets/cells/ColumnsCell/index.js +1 -1
  62. package/dist/elements/QueryPresets/cells/ColumnsCell/index.js.map +1 -1
  63. package/dist/elements/QueryPresets/fields/ColumnsField/index.d.ts +1 -1
  64. package/dist/elements/QueryPresets/fields/ColumnsField/index.d.ts.map +1 -1
  65. package/dist/elements/QueryPresets/fields/ColumnsField/index.js +77 -48
  66. package/dist/elements/QueryPresets/fields/ColumnsField/index.js.map +1 -1
  67. package/dist/elements/QueryPresets/fields/GroupByField/index.d.ts +1 -1
  68. package/dist/elements/QueryPresets/fields/GroupByField/index.d.ts.map +1 -1
  69. package/dist/elements/QueryPresets/fields/GroupByField/index.js +12 -21
  70. package/dist/elements/QueryPresets/fields/GroupByField/index.js.map +1 -1
  71. package/dist/elements/QueryPresets/fields/Heading/index.css +52 -0
  72. package/dist/elements/QueryPresets/fields/Heading/index.d.ts +7 -0
  73. package/dist/elements/QueryPresets/fields/Heading/index.d.ts.map +1 -0
  74. package/dist/elements/QueryPresets/fields/Heading/index.js +31 -0
  75. package/dist/elements/QueryPresets/fields/Heading/index.js.map +1 -0
  76. package/dist/elements/QueryPresets/fields/WhereField/index.d.ts +1 -1
  77. package/dist/elements/QueryPresets/fields/WhereField/index.d.ts.map +1 -1
  78. package/dist/elements/QueryPresets/fields/WhereField/index.js +24 -23
  79. package/dist/elements/QueryPresets/fields/WhereField/index.js.map +1 -1
  80. package/dist/elements/QueryPresets/fields/fields.css +23 -0
  81. package/dist/elements/ReactSelect/getCaptureMenuScroll.d.ts +5 -0
  82. package/dist/elements/ReactSelect/getCaptureMenuScroll.d.ts.map +1 -0
  83. package/dist/elements/ReactSelect/getCaptureMenuScroll.js +10 -0
  84. package/dist/elements/ReactSelect/getCaptureMenuScroll.js.map +1 -0
  85. package/dist/elements/ReactSelect/getMenuListStyles.d.ts +6 -0
  86. package/dist/elements/ReactSelect/getMenuListStyles.d.ts.map +1 -0
  87. package/dist/elements/ReactSelect/getMenuListStyles.js +7 -0
  88. package/dist/elements/ReactSelect/getMenuListStyles.js.map +1 -0
  89. package/dist/elements/ReactSelect/index.css +0 -1
  90. package/dist/elements/ReactSelect/index.d.ts.map +1 -1
  91. package/dist/elements/ReactSelect/index.js +168 -148
  92. package/dist/elements/ReactSelect/index.js.map +1 -1
  93. package/dist/elements/ReactSelect/types.d.ts +1 -0
  94. package/dist/elements/ReactSelect/types.d.ts.map +1 -1
  95. package/dist/elements/ReactSelect/types.js.map +1 -1
  96. package/dist/elements/RelationshipTable/index.js +2 -2
  97. package/dist/elements/RelationshipTable/index.js.map +1 -1
  98. package/dist/elements/SortColumn/index.css +1 -1
  99. package/dist/elements/Table/index.css +24 -2
  100. package/dist/elements/Toasts/fieldErrors.d.ts +1 -0
  101. package/dist/elements/Toasts/fieldErrors.d.ts.map +1 -1
  102. package/dist/elements/Toasts/fieldErrors.js +25 -9
  103. package/dist/elements/Toasts/fieldErrors.js.map +1 -1
  104. package/dist/elements/Toasts/index.css +5 -0
  105. package/dist/elements/UnpublishMany/DrawerContent.d.ts +2 -1
  106. package/dist/elements/UnpublishMany/DrawerContent.d.ts.map +1 -1
  107. package/dist/elements/UnpublishMany/DrawerContent.js.map +1 -1
  108. package/dist/elements/UnpublishMany/index.d.ts +2 -4
  109. package/dist/elements/UnpublishMany/index.d.ts.map +1 -1
  110. package/dist/elements/UnpublishMany/index.js +0 -38
  111. package/dist/elements/UnpublishMany/index.js.map +1 -1
  112. package/dist/elements/UserMenu/LanguageMenu/index.js +1 -1
  113. package/dist/elements/UserMenu/LanguageMenu/index.js.map +1 -1
  114. package/dist/elements/UserMenu/SettingsMenu/index.d.ts +6 -2
  115. package/dist/elements/UserMenu/SettingsMenu/index.d.ts.map +1 -1
  116. package/dist/elements/UserMenu/SettingsMenu/index.js +15 -10
  117. package/dist/elements/UserMenu/SettingsMenu/index.js.map +1 -1
  118. package/dist/elements/UserMenu/ThemeMenu/index.js +1 -1
  119. package/dist/elements/UserMenu/ThemeMenu/index.js.map +1 -1
  120. package/dist/elements/UserMenu/index.d.ts +2 -1
  121. package/dist/elements/UserMenu/index.d.ts.map +1 -1
  122. package/dist/elements/UserMenu/index.js +8 -5
  123. package/dist/elements/UserMenu/index.js.map +1 -1
  124. package/dist/elements/WhereBuilder/Condition/index.d.ts +1 -0
  125. package/dist/elements/WhereBuilder/Condition/index.d.ts.map +1 -1
  126. package/dist/elements/WhereBuilder/Condition/index.js +17 -2
  127. package/dist/elements/WhereBuilder/Condition/index.js.map +1 -1
  128. package/dist/elements/WhereBuilder/index.d.ts +4 -3
  129. package/dist/elements/WhereBuilder/index.d.ts.map +1 -1
  130. package/dist/elements/WhereBuilder/index.js +71 -62
  131. package/dist/elements/WhereBuilder/index.js.map +1 -1
  132. package/dist/elements/WhereBuilder/types.d.ts +6 -5
  133. package/dist/elements/WhereBuilder/types.d.ts.map +1 -1
  134. package/dist/elements/WhereBuilder/types.js.map +1 -1
  135. package/dist/exports/client/index.d.ts +2 -0
  136. package/dist/exports/client/index.d.ts.map +1 -1
  137. package/dist/exports/client/index.js +26 -26
  138. package/dist/exports/client/index.js.map +4 -4
  139. package/dist/fields/RadioGroup/index.css +6 -0
  140. package/dist/icons/Check/index.css +1 -2
  141. package/dist/icons/Check/index.js +1 -1
  142. package/dist/icons/Check/index.js.map +1 -1
  143. package/dist/icons/Warning/index.css +1 -7
  144. package/dist/icons/Warning/index.d.ts +1 -1
  145. package/dist/icons/Warning/index.d.ts.map +1 -1
  146. package/dist/icons/Warning/index.js +11 -16
  147. package/dist/icons/Warning/index.js.map +1 -1
  148. package/dist/providers/ToastContainer/index.css +208 -0
  149. package/dist/providers/ToastContainer/index.d.ts +1 -0
  150. package/dist/providers/ToastContainer/index.d.ts.map +1 -1
  151. package/dist/providers/ToastContainer/index.js +19 -6
  152. package/dist/providers/ToastContainer/index.js.map +1 -1
  153. package/dist/scss/app.scss +7 -2
  154. package/dist/styles.css +1 -1
  155. package/dist/templates/Default/index.d.ts.map +1 -1
  156. package/dist/templates/Default/index.js +51 -9
  157. package/dist/templates/Default/index.js.map +1 -1
  158. package/dist/utilities/reduceFieldsToOptions.js +1 -1
  159. package/dist/utilities/reduceFieldsToOptions.js.map +1 -1
  160. package/dist/views/HierarchyList/DocumentListSelection/index.js +4 -4
  161. package/dist/views/HierarchyList/DocumentListSelection/index.js.map +1 -1
  162. package/dist/views/List/ListSelection/index.js +4 -4
  163. package/dist/views/List/ListSelection/index.js.map +1 -1
  164. package/dist/views/List/index.client.d.ts.map +1 -1
  165. package/dist/views/List/index.client.js +3 -3
  166. package/dist/views/List/index.client.js.map +1 -1
  167. package/dist/views/List/renderListViewSlots.d.ts.map +1 -1
  168. package/dist/views/List/renderListViewSlots.js +9 -6
  169. package/dist/views/List/renderListViewSlots.js.map +1 -1
  170. package/dist/views/Logout/LogoutClient.js +1 -1
  171. package/dist/views/Logout/LogoutClient.js.map +1 -1
  172. package/dist/views/Versions/index.css +0 -4
  173. package/package.json +5 -5
  174. package/dist/elements/ColumnSelector/index.d.ts +0 -9
  175. package/dist/elements/ColumnSelector/index.d.ts.map +0 -1
  176. package/dist/elements/ColumnSelector/index.js.map +0 -1
  177. package/dist/elements/ColumnsButton/index.d.ts +0 -7
  178. package/dist/elements/ColumnsButton/index.d.ts.map +0 -1
  179. package/dist/elements/ColumnsButton/index.js.map +0 -1
  180. package/dist/elements/GroupByBuilder/index.d.ts +0 -12
  181. package/dist/elements/GroupByBuilder/index.d.ts.map +0 -1
  182. package/dist/elements/GroupByBuilder/index.js +0 -164
  183. package/dist/elements/GroupByBuilder/index.js.map +0 -1
  184. package/dist/elements/GroupByBuilder/index.scss +0 -39
  185. package/dist/elements/GroupByControl/index.d.ts +0 -9
  186. package/dist/elements/GroupByControl/index.d.ts.map +0 -1
  187. package/dist/elements/GroupByControl/index.js +0 -254
  188. package/dist/elements/GroupByControl/index.js.map +0 -1
  189. package/dist/elements/QueryPresets/fields/ColumnsField/index.scss +0 -17
  190. package/dist/elements/QueryPresets/fields/GroupByField/index.scss +0 -17
  191. package/dist/elements/QueryPresets/fields/WhereField/index.scss +0 -23
  192. package/dist/scss/toasts.scss +0 -146
  193. /package/dist/elements/{ColumnSelector/index.css → ColumnSelection/Popup.css} +0 -0
  194. /package/dist/elements/{GroupByControl/index.css → GroupBy/Popup.css} +0 -0
@@ -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
- }
@@ -1,146 +0,0 @@
1
- @import './styles.scss';
2
-
3
- @layer payload-default {
4
- .payload-toast-container {
5
- --offset: calc(var(--gutter-h) / 2);
6
-
7
- padding: 0;
8
- margin: 0;
9
-
10
- .payload-toast-close-button {
11
- position: absolute;
12
- order: 3;
13
- left: unset;
14
- inset-inline-end: base(0.8);
15
- top: 50%;
16
- transform: translateY(-50%);
17
- color: var(--theme-elevation-600);
18
- background: unset;
19
- border: none;
20
-
21
- svg {
22
- width: base(0.8);
23
- height: base(0.8);
24
- }
25
-
26
- &:hover {
27
- color: var(--theme-elevation-250);
28
- background: none;
29
- }
30
-
31
- [dir='RTL'] & {
32
- right: unset;
33
- left: 0.5rem;
34
- }
35
- }
36
-
37
- .toast-title {
38
- line-height: base(1);
39
- margin-right: base(1);
40
- }
41
-
42
- .payload-toast-item {
43
- padding: base(0.8);
44
- color: var(--theme-elevation-800);
45
- font-style: normal;
46
- font-weight: 600;
47
- display: flex;
48
- gap: 1rem;
49
- align-items: center;
50
- width: 100%;
51
- border-radius: 4px;
52
- border: var(--stroke-width-small) solid var(--theme-border-color);
53
- background: var(--theme-input-bg);
54
- box-shadow:
55
- 0px 10px 4px -8px rgba(0, 2, 4, 0.02),
56
- 0px 2px 3px 0px rgba(0, 2, 4, 0.05);
57
-
58
- .toast-content {
59
- transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
60
- width: 100%;
61
- }
62
-
63
- &[data-front='false'] {
64
- .toast-content {
65
- opacity: 0;
66
- }
67
- }
68
-
69
- &[data-expanded='true'] {
70
- .toast-content {
71
- opacity: 1;
72
- }
73
- }
74
-
75
- .toast-icon {
76
- width: base(0.8);
77
- height: base(0.8);
78
- margin: 0;
79
- display: flex;
80
- align-items: center;
81
- justify-content: center;
82
-
83
- & > * {
84
- width: base(1.2);
85
- height: base(1.2);
86
- }
87
- }
88
-
89
- &.toast-warning {
90
- color: var(--theme-warning-800);
91
- border-color: var(--theme-warning-250);
92
- background-color: var(--theme-warning-100);
93
-
94
- .payload-toast-close-button {
95
- color: var(--theme-warning-600);
96
-
97
- &:hover {
98
- color: var(--theme-warning-250);
99
- }
100
- }
101
- }
102
-
103
- &.toast-error {
104
- color: var(--theme-error-800);
105
- border-color: var(--theme-error-250);
106
- background-color: var(--theme-error-100);
107
-
108
- .payload-toast-close-button {
109
- color: var(--theme-error-600);
110
-
111
- &:hover {
112
- color: var(--theme-error-250);
113
- }
114
- }
115
- }
116
-
117
- &.toast-success {
118
- color: var(--theme-success-800);
119
- border-color: var(--theme-success-250);
120
- background-color: var(--theme-success-100);
121
-
122
- .payload-toast-close-button {
123
- color: var(--theme-success-600);
124
-
125
- &:hover {
126
- color: var(--theme-success-250);
127
- }
128
- }
129
- }
130
-
131
- &.toast-info {
132
- color: var(--theme-elevation-800);
133
- border-color: var(--theme-elevation-250);
134
- background-color: var(--theme-elevation-100);
135
-
136
- .payload-toast-close-button {
137
- color: var(--theme-elevation-600);
138
-
139
- &:hover {
140
- color: var(--theme-elevation-250);
141
- }
142
- }
143
- }
144
- }
145
- }
146
- }