@payloadcms/ui 3.0.0-beta.107 → 3.0.0-beta.109

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 (288) hide show
  1. package/dist/elements/Autosave/index.d.ts.map +1 -1
  2. package/dist/elements/Autosave/index.js +1 -3
  3. package/dist/elements/Autosave/index.js.map +1 -1
  4. package/dist/elements/BulkUpload/ActionsBar/index.js +2 -2
  5. package/dist/elements/BulkUpload/ActionsBar/index.js.map +1 -1
  6. package/dist/elements/BulkUpload/EditForm/index.js +3 -1
  7. package/dist/elements/BulkUpload/EditForm/index.js.map +1 -1
  8. package/dist/elements/BulkUpload/FormsManager/index.js +3 -1
  9. package/dist/elements/BulkUpload/FormsManager/index.js.map +1 -1
  10. package/dist/elements/Button/index.d.ts.map +1 -1
  11. package/dist/elements/Button/index.js +1 -0
  12. package/dist/elements/Button/index.js.map +1 -1
  13. package/dist/elements/Button/types.d.ts +6 -0
  14. package/dist/elements/Button/types.d.ts.map +1 -1
  15. package/dist/elements/Button/types.js.map +1 -1
  16. package/dist/elements/CodeEditor/CodeEditor.d.ts.map +1 -1
  17. package/dist/elements/CodeEditor/CodeEditor.js +51 -25
  18. package/dist/elements/CodeEditor/CodeEditor.js.map +1 -1
  19. package/dist/elements/CodeEditor/index.d.ts.map +1 -1
  20. package/dist/elements/CodeEditor/index.js +2 -8
  21. package/dist/elements/CodeEditor/index.js.map +1 -1
  22. package/dist/elements/ColumnSelector/index.d.ts.map +1 -1
  23. package/dist/elements/ColumnSelector/index.js +14 -2
  24. package/dist/elements/ColumnSelector/index.js.map +1 -1
  25. package/dist/elements/DocumentControls/index.d.ts +4 -1
  26. package/dist/elements/DocumentControls/index.d.ts.map +1 -1
  27. package/dist/elements/DocumentControls/index.js +42 -6
  28. package/dist/elements/DocumentControls/index.js.map +1 -1
  29. package/dist/elements/DocumentControls/index.scss +8 -0
  30. package/dist/elements/DocumentDrawer/DrawerContent.d.ts.map +1 -1
  31. package/dist/elements/DocumentDrawer/DrawerContent.js +23 -17
  32. package/dist/elements/DocumentDrawer/DrawerContent.js.map +1 -1
  33. package/dist/elements/DocumentDrawer/types.d.ts +4 -1
  34. package/dist/elements/DocumentDrawer/types.d.ts.map +1 -1
  35. package/dist/elements/DocumentDrawer/types.js.map +1 -1
  36. package/dist/elements/EditMany/index.d.ts.map +1 -1
  37. package/dist/elements/EditMany/index.js +235 -124
  38. package/dist/elements/EditMany/index.js.map +1 -1
  39. package/dist/elements/Hamburger/index.scss +4 -0
  40. package/dist/elements/ListControls/index.d.ts.map +1 -1
  41. package/dist/elements/ListControls/index.js +9 -5
  42. package/dist/elements/ListControls/index.js.map +1 -1
  43. package/dist/elements/ListControls/index.scss +0 -6
  44. package/dist/elements/ListDrawer/DrawerContent.d.ts +2 -0
  45. package/dist/elements/ListDrawer/DrawerContent.d.ts.map +1 -1
  46. package/dist/elements/ListDrawer/DrawerContent.js +3 -3
  47. package/dist/elements/ListDrawer/DrawerContent.js.map +1 -1
  48. package/dist/elements/ListDrawer/index.d.ts.map +1 -1
  49. package/dist/elements/ListDrawer/index.js +18 -15
  50. package/dist/elements/ListDrawer/index.js.map +1 -1
  51. package/dist/elements/ListDrawer/types.d.ts +2 -0
  52. package/dist/elements/ListDrawer/types.d.ts.map +1 -1
  53. package/dist/elements/ListDrawer/types.js.map +1 -1
  54. package/dist/elements/Localizer/LocalizerLabel/index.d.ts.map +1 -1
  55. package/dist/elements/Localizer/LocalizerLabel/index.js +9 -5
  56. package/dist/elements/Localizer/LocalizerLabel/index.js.map +1 -1
  57. package/dist/elements/Localizer/LocalizerLabel/index.scss +7 -3
  58. package/dist/elements/Locked/index.d.ts +8 -0
  59. package/dist/elements/Locked/index.d.ts.map +1 -0
  60. package/dist/elements/Locked/index.js +72 -0
  61. package/dist/elements/Locked/index.js.map +1 -0
  62. package/dist/elements/Locked/index.scss +14 -0
  63. package/dist/elements/Pagination/index.d.ts.map +1 -1
  64. package/dist/elements/Pagination/index.js +1 -1
  65. package/dist/elements/Pagination/index.js.map +1 -1
  66. package/dist/elements/PerPage/index.d.ts +5 -5
  67. package/dist/elements/PerPage/index.d.ts.map +1 -1
  68. package/dist/elements/PerPage/index.js +2 -1
  69. package/dist/elements/PerPage/index.js.map +1 -1
  70. package/dist/elements/Pill/index.scss +3 -1
  71. package/dist/elements/Popup/PopupTrigger/index.d.ts +1 -0
  72. package/dist/elements/Popup/PopupTrigger/index.d.ts.map +1 -1
  73. package/dist/elements/Popup/PopupTrigger/index.js +3 -2
  74. package/dist/elements/Popup/PopupTrigger/index.js.map +1 -1
  75. package/dist/elements/Popup/PopupTrigger/index.scss +12 -0
  76. package/dist/elements/Popup/index.d.ts +1 -0
  77. package/dist/elements/Popup/index.d.ts.map +1 -1
  78. package/dist/elements/Popup/index.js +6 -3
  79. package/dist/elements/Popup/index.js.map +1 -1
  80. package/dist/elements/Popup/index.scss +18 -1
  81. package/dist/elements/PreviewButton/usePreviewURL.d.ts.map +1 -1
  82. package/dist/elements/PreviewButton/usePreviewURL.js +11 -3
  83. package/dist/elements/PreviewButton/usePreviewURL.js.map +1 -1
  84. package/dist/elements/PublishButton/index.d.ts.map +1 -1
  85. package/dist/elements/PublishButton/index.js +97 -46
  86. package/dist/elements/PublishButton/index.js.map +1 -1
  87. package/dist/elements/PublishMany/index.js +2 -1
  88. package/dist/elements/PublishMany/index.js.map +1 -1
  89. package/dist/elements/ReactSelect/index.scss +4 -0
  90. package/dist/elements/RelationshipTable/TableWrapper.d.ts +8 -0
  91. package/dist/elements/RelationshipTable/TableWrapper.d.ts.map +1 -0
  92. package/dist/elements/RelationshipTable/TableWrapper.js +69 -0
  93. package/dist/elements/RelationshipTable/TableWrapper.js.map +1 -0
  94. package/dist/elements/RelationshipTable/cells/DrawerLink/index.d.ts +8 -0
  95. package/dist/elements/RelationshipTable/cells/DrawerLink/index.d.ts.map +1 -0
  96. package/dist/elements/RelationshipTable/cells/DrawerLink/index.js +82 -0
  97. package/dist/elements/RelationshipTable/cells/DrawerLink/index.js.map +1 -0
  98. package/dist/elements/RelationshipTable/cells/DrawerLink/index.scss +4 -0
  99. package/dist/elements/RelationshipTable/index.d.ts +15 -0
  100. package/dist/elements/RelationshipTable/index.d.ts.map +1 -0
  101. package/dist/elements/RelationshipTable/index.js +445 -0
  102. package/dist/elements/RelationshipTable/index.js.map +1 -0
  103. package/dist/elements/RelationshipTable/index.scss +26 -0
  104. package/dist/elements/SelectRow/index.d.ts.map +1 -1
  105. package/dist/elements/SelectRow/index.js +60 -29
  106. package/dist/elements/SelectRow/index.js.map +1 -1
  107. package/dist/elements/SortColumn/index.d.ts +1 -0
  108. package/dist/elements/SortColumn/index.d.ts.map +1 -1
  109. package/dist/elements/SortColumn/index.js +29 -17
  110. package/dist/elements/SortColumn/index.js.map +1 -1
  111. package/dist/elements/SortColumn/index.scss +10 -1
  112. package/dist/elements/Status/index.js +1 -1
  113. package/dist/elements/Status/index.js.map +1 -1
  114. package/dist/elements/Table/DefaultCell/fields/Relationship/index.d.ts +2 -3
  115. package/dist/elements/Table/DefaultCell/fields/Relationship/index.d.ts.map +1 -1
  116. package/dist/elements/Table/DefaultCell/fields/Relationship/index.js +43 -40
  117. package/dist/elements/Table/DefaultCell/fields/Relationship/index.js.map +1 -1
  118. package/dist/elements/Table/DefaultCell/fields/Relationship/index.scss +0 -3
  119. package/dist/elements/Table/DefaultCell/fields/index.d.ts +1 -0
  120. package/dist/elements/Table/DefaultCell/fields/index.d.ts.map +1 -1
  121. package/dist/elements/Table/DefaultCell/fields/index.js +1 -0
  122. package/dist/elements/Table/DefaultCell/fields/index.js.map +1 -1
  123. package/dist/elements/Table/RenderCell.d.ts +11 -0
  124. package/dist/elements/Table/RenderCell.d.ts.map +1 -0
  125. package/dist/elements/Table/RenderCell.js +30 -0
  126. package/dist/elements/Table/RenderCell.js.map +1 -0
  127. package/dist/elements/Table/index.d.ts +3 -6
  128. package/dist/elements/Table/index.d.ts.map +1 -1
  129. package/dist/elements/Table/index.js +36 -31
  130. package/dist/elements/Table/index.js.map +1 -1
  131. package/dist/elements/Table/index.scss +50 -0
  132. package/dist/elements/TableColumns/buildColumnState.d.ts +5 -2
  133. package/dist/elements/TableColumns/buildColumnState.d.ts.map +1 -1
  134. package/dist/elements/TableColumns/buildColumnState.js +35 -22
  135. package/dist/elements/TableColumns/buildColumnState.js.map +1 -1
  136. package/dist/elements/TableColumns/index.d.ts +5 -0
  137. package/dist/elements/TableColumns/index.d.ts.map +1 -1
  138. package/dist/elements/TableColumns/index.js +107 -74
  139. package/dist/elements/TableColumns/index.js.map +1 -1
  140. package/dist/elements/Tooltip/index.d.ts +1 -0
  141. package/dist/elements/Tooltip/index.d.ts.map +1 -1
  142. package/dist/elements/Tooltip/index.js +15 -13
  143. package/dist/elements/Tooltip/index.js.map +1 -1
  144. package/dist/elements/Tooltip/index.scss +2 -2
  145. package/dist/elements/UnpublishMany/index.js +2 -1
  146. package/dist/elements/UnpublishMany/index.js.map +1 -1
  147. package/dist/elements/WhereBuilder/Condition/index.js +32 -30
  148. package/dist/elements/WhereBuilder/Condition/index.js.map +1 -1
  149. package/dist/exports/client/{CodeEditor-CHKRX3U2.js → CodeEditor-FARZ6UIX.js} +6 -4
  150. package/dist/exports/client/CodeEditor-FARZ6UIX.js.map +8 -0
  151. package/dist/exports/client/{DatePicker-OLRZVTAD.js → DatePicker-NBYDOP2X.js} +2 -2
  152. package/dist/exports/client/chunk-6IWEPNUV.js +14 -0
  153. package/dist/exports/client/chunk-6IWEPNUV.js.map +8 -0
  154. package/dist/exports/client/{chunk-JINNHJP7.js → chunk-6MRITTMD.js} +3 -3
  155. package/dist/exports/client/{chunk-JINNHJP7.js.map → chunk-6MRITTMD.js.map} +4 -4
  156. package/dist/exports/client/index.d.ts +1 -0
  157. package/dist/exports/client/index.d.ts.map +1 -1
  158. package/dist/exports/client/index.js +19 -19
  159. package/dist/exports/client/index.js.map +4 -4
  160. package/dist/exports/shared/index.d.ts +3 -0
  161. package/dist/exports/shared/index.d.ts.map +1 -1
  162. package/dist/exports/shared/index.js +2 -2
  163. package/dist/exports/shared/index.js.map +4 -4
  164. package/dist/fields/Array/ArrayRow.js +2 -2
  165. package/dist/fields/Array/ArrayRow.js.map +1 -1
  166. package/dist/fields/Blocks/BlockRow.js +2 -2
  167. package/dist/fields/Blocks/BlockRow.js.map +1 -1
  168. package/dist/fields/Collapsible/index.d.ts +16 -16
  169. package/dist/fields/Collapsible/index.d.ts.map +1 -1
  170. package/dist/fields/Group/index.js +2 -2
  171. package/dist/fields/Group/index.js.map +1 -1
  172. package/dist/fields/Join/index.d.ts +9 -0
  173. package/dist/fields/Join/index.d.ts.map +1 -0
  174. package/dist/fields/Join/index.js +75 -0
  175. package/dist/fields/Join/index.js.map +1 -0
  176. package/dist/fields/Number/index.js +1 -1
  177. package/dist/fields/Number/index.js.map +1 -1
  178. package/dist/fields/Password/index.js +29 -25
  179. package/dist/fields/Password/index.js.map +1 -1
  180. package/dist/fields/Relationship/select-components/SingleValue/index.d.ts.map +1 -1
  181. package/dist/fields/Relationship/select-components/SingleValue/index.js +11 -13
  182. package/dist/fields/Relationship/select-components/SingleValue/index.js.map +1 -1
  183. package/dist/fields/Row/index.scss +3 -0
  184. package/dist/fields/Textarea/index.d.ts.map +1 -1
  185. package/dist/fields/Textarea/index.js +2 -0
  186. package/dist/fields/Textarea/index.js.map +1 -1
  187. package/dist/fields/Upload/RelationshipContent/index.js +28 -29
  188. package/dist/fields/Upload/RelationshipContent/index.js.map +1 -1
  189. package/dist/fields/Upload/UploadCard/index.scss +0 -1
  190. package/dist/fields/index.d.ts.map +1 -1
  191. package/dist/fields/index.js +2 -0
  192. package/dist/fields/index.js.map +1 -1
  193. package/dist/forms/Form/index.js +6 -2
  194. package/dist/forms/Form/index.js.map +1 -1
  195. package/dist/forms/NullifyField/index.d.ts.map +1 -1
  196. package/dist/forms/NullifyField/index.js +1 -0
  197. package/dist/forms/NullifyField/index.js.map +1 -1
  198. package/dist/forms/RenderFields/RenderField.d.ts.map +1 -1
  199. package/dist/forms/RenderFields/RenderField.js +3 -1
  200. package/dist/forms/RenderFields/RenderField.js.map +1 -1
  201. package/dist/forms/RenderFields/index.d.ts.map +1 -1
  202. package/dist/forms/RenderFields/index.js +18 -15
  203. package/dist/forms/RenderFields/index.js.map +1 -1
  204. package/dist/forms/buildStateFromSchema/addFieldStatePromise.d.ts.map +1 -1
  205. package/dist/forms/buildStateFromSchema/addFieldStatePromise.js +3 -4
  206. package/dist/forms/buildStateFromSchema/addFieldStatePromise.js.map +1 -1
  207. package/dist/forms/buildStateFromSchema/index.d.ts +2 -0
  208. package/dist/forms/buildStateFromSchema/index.d.ts.map +1 -1
  209. package/dist/forms/buildStateFromSchema/index.js.map +1 -1
  210. package/dist/forms/useField/index.js +203 -111
  211. package/dist/forms/useField/index.js.map +1 -1
  212. package/dist/hooks/useDelay.js +48 -15
  213. package/dist/hooks/useDelay.js.map +1 -1
  214. package/dist/hooks/useDelayedRender.js +71 -32
  215. package/dist/hooks/useDelayedRender.js.map +1 -1
  216. package/dist/hooks/usePayloadAPI.d.ts.map +1 -1
  217. package/dist/hooks/usePayloadAPI.js.map +1 -1
  218. package/dist/icons/Chevron/index.d.ts +3 -3
  219. package/dist/icons/Chevron/index.d.ts.map +1 -1
  220. package/dist/icons/Chevron/index.js +4 -4
  221. package/dist/icons/Chevron/index.js.map +1 -1
  222. package/dist/icons/Chevron/index.scss +9 -1
  223. package/dist/icons/Lock/index.d.ts +6 -0
  224. package/dist/icons/Lock/index.d.ts.map +1 -0
  225. package/dist/icons/Lock/index.js +27 -0
  226. package/dist/icons/Lock/index.js.map +1 -0
  227. package/dist/icons/Lock/index.scss +8 -0
  228. package/dist/providers/Config/createClientConfig/collections.d.ts.map +1 -1
  229. package/dist/providers/Config/createClientConfig/collections.js +11 -1
  230. package/dist/providers/Config/createClientConfig/collections.js.map +1 -1
  231. package/dist/providers/Config/createClientConfig/fields.d.ts.map +1 -1
  232. package/dist/providers/Config/createClientConfig/fields.js +3 -0
  233. package/dist/providers/Config/createClientConfig/fields.js.map +1 -1
  234. package/dist/providers/DocumentInfo/index.d.ts.map +1 -1
  235. package/dist/providers/DocumentInfo/index.js +101 -6
  236. package/dist/providers/DocumentInfo/index.js.map +1 -1
  237. package/dist/providers/DocumentInfo/types.d.ts +32 -27
  238. package/dist/providers/DocumentInfo/types.d.ts.map +1 -1
  239. package/dist/providers/DocumentInfo/types.js.map +1 -1
  240. package/dist/providers/ListQuery/index.d.ts +5 -5
  241. package/dist/providers/ListQuery/index.d.ts.map +1 -1
  242. package/dist/providers/ListQuery/index.js.map +1 -1
  243. package/dist/providers/Preferences/index.js +3 -1
  244. package/dist/providers/Preferences/index.js.map +1 -1
  245. package/dist/providers/Root/index.d.ts.map +1 -1
  246. package/dist/providers/Root/index.js +2 -2
  247. package/dist/providers/Root/index.js.map +1 -1
  248. package/dist/providers/Selection/index.d.ts +2 -1
  249. package/dist/providers/Selection/index.d.ts.map +1 -1
  250. package/dist/providers/Selection/index.js +23 -8
  251. package/dist/providers/Selection/index.js.map +1 -1
  252. package/dist/providers/Theme/index.d.ts +0 -1
  253. package/dist/providers/Theme/index.d.ts.map +1 -1
  254. package/dist/providers/Theme/index.js +29 -21
  255. package/dist/providers/Theme/index.js.map +1 -1
  256. package/dist/providers/Translation/index.d.ts.map +1 -1
  257. package/dist/providers/Translation/index.js +5 -7
  258. package/dist/providers/Translation/index.js.map +1 -1
  259. package/dist/styles.css +1 -1
  260. package/dist/utilities/buildFormState.d.ts +9 -3
  261. package/dist/utilities/buildFormState.d.ts.map +1 -1
  262. package/dist/utilities/buildFormState.js +82 -4
  263. package/dist/utilities/buildFormState.js.map +1 -1
  264. package/dist/utilities/deepMerge.d.ts +12 -0
  265. package/dist/utilities/deepMerge.d.ts.map +1 -0
  266. package/dist/utilities/deepMerge.js +25 -0
  267. package/dist/utilities/deepMerge.js.map +1 -0
  268. package/dist/utilities/getFormState.d.ts +8 -2
  269. package/dist/utilities/getFormState.d.ts.map +1 -1
  270. package/dist/utilities/getFormState.js +3 -1
  271. package/dist/utilities/getFormState.js.map +1 -1
  272. package/dist/utilities/handleBackToDashboard.d.ts +8 -0
  273. package/dist/utilities/handleBackToDashboard.d.ts.map +1 -0
  274. package/dist/utilities/handleBackToDashboard.js +12 -0
  275. package/dist/utilities/handleBackToDashboard.js.map +1 -0
  276. package/dist/utilities/handleGoBack.d.ts +9 -0
  277. package/dist/utilities/handleGoBack.d.ts.map +1 -0
  278. package/dist/utilities/handleGoBack.js +13 -0
  279. package/dist/utilities/handleGoBack.js.map +1 -0
  280. package/dist/utilities/handleTakeOver.d.ts +7 -0
  281. package/dist/utilities/handleTakeOver.d.ts.map +1 -0
  282. package/dist/utilities/handleTakeOver.js +27 -0
  283. package/dist/utilities/handleTakeOver.js.map +1 -0
  284. package/package.json +14 -14
  285. package/dist/exports/client/CodeEditor-CHKRX3U2.js.map +0 -8
  286. package/dist/exports/client/chunk-BGA6EPOL.js +0 -14
  287. package/dist/exports/client/chunk-BGA6EPOL.js.map +0 -8
  288. /package/dist/exports/client/{DatePicker-OLRZVTAD.js.map → DatePicker-NBYDOP2X.js.map} +0 -0
@@ -0,0 +1,72 @@
1
+ 'use client';
2
+
3
+ import { c as _c } from "react/compiler-runtime";
4
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
5
+ import React, { useState } from 'react';
6
+ import { useTableCell } from '../../elements/Table/TableCellProvider/index.js';
7
+ import { LockIcon } from '../../icons/Lock/index.js';
8
+ import { useTranslation } from '../../providers/Translation/index.js';
9
+ import { Tooltip } from '../Tooltip/index.js';
10
+ import './index.scss';
11
+ const baseClass = 'locked';
12
+ export const Locked = t0 => {
13
+ const $ = _c(8);
14
+ const {
15
+ className,
16
+ user
17
+ } = t0;
18
+ const {
19
+ rowData
20
+ } = useTableCell();
21
+ const [hovered, setHovered] = useState(false);
22
+ const {
23
+ t
24
+ } = useTranslation();
25
+ const userToUse = user ? user?.email ?? user?.id : rowData?.id;
26
+ let t1;
27
+ if ($[0] !== className) {
28
+ t1 = [baseClass, className].filter(Boolean);
29
+ $[0] = className;
30
+ $[1] = t1;
31
+ } else {
32
+ t1 = $[1];
33
+ }
34
+ const t2 = t1.join(" ");
35
+ let t3;
36
+ let t4;
37
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
38
+ t3 = () => setHovered(true);
39
+ t4 = () => setHovered(false);
40
+ $[2] = t3;
41
+ $[3] = t4;
42
+ } else {
43
+ t3 = $[2];
44
+ t4 = $[3];
45
+ }
46
+ const t5 = `${userToUse} ${t("general:isEditing")}`;
47
+ let t6;
48
+ if ($[4] !== hovered || $[5] !== t5 || $[6] !== t2) {
49
+ t6 = _jsxs("div", {
50
+ className: t2,
51
+ onMouseEnter: t3,
52
+ onMouseLeave: t4,
53
+ role: "button",
54
+ tabIndex: 0,
55
+ children: [_jsx(Tooltip, {
56
+ alignCaret: "left",
57
+ className: `${baseClass}__tooltip`,
58
+ position: "top",
59
+ show: hovered,
60
+ children: t5
61
+ }), _jsx(LockIcon, {})]
62
+ });
63
+ $[4] = hovered;
64
+ $[5] = t5;
65
+ $[6] = t2;
66
+ $[7] = t6;
67
+ } else {
68
+ t6 = $[7];
69
+ }
70
+ return t6;
71
+ };
72
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["c","_c","React","useState","useTableCell","LockIcon","useTranslation","Tooltip","baseClass","Locked","t0","$","className","user","rowData","hovered","setHovered","t","userToUse","email","id","t1","filter","Boolean","t2","join","t3","t4","Symbol","for","t5","t6","_jsxs","onMouseEnter","onMouseLeave","role","tabIndex","children","_jsx","alignCaret","position","show"],"sources":["../../../src/elements/Locked/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientUser } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport { useTableCell } from '../../elements/Table/TableCellProvider/index.js'\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'locked'\n\nexport const Locked: React.FC<{ className?: string; user: ClientUser }> = ({ className, user }) => {\n const { rowData } = useTableCell()\n const [hovered, setHovered] = useState(false)\n const { t } = useTranslation()\n\n const userToUse = user ? (user?.email ?? user?.id) : rowData?.id\n\n return (\n <div\n className={[baseClass, className].filter(Boolean).join(' ')}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n role=\"button\"\n tabIndex={0}\n >\n <Tooltip\n alignCaret=\"left\"\n className={`${baseClass}__tooltip`}\n position=\"top\"\n show={hovered}\n >{`${userToUse} ${t('general:isEditing')}`}</Tooltip>\n <LockIcon />\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,YAAY,QAAQ;AAC7B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAA6DC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,SAAA;IAAAC;EAAA,IAAAH,EAAmB;EAC5F;IAAAI;EAAA,IAAoBV,YAAA;EACpB,OAAAW,OAAA,EAAAC,UAAA,IAA8Bb,QAAA,MAAS;EACvC;IAAAc;EAAA,IAAcX,cAAA;EAEd,MAAAY,SAAA,GAAkBL,IAAA,GAAQA,IAAA,EAAAM,KAAA,IAAeN,IAAA,EAAAO,EAAM,GAAMN,OAAA,EAAAM,EAAS;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,SAAA;IAI/CS,EAAA,IAAAb,SAAA,EAAYI,SAAA,EAAAU,MAAA,CAAAC,OAAkB;IAAAZ,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAA9B,MAAAa,EAAA,GAAAH,EAA8B,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAiB,MAAA,CAAAC,GAAA;IACzCH,EAAA,GAAAA,CAAA,KAAMV,UAAA,KAAW;IACjBW,EAAA,GAAAA,CAAA,KAAMX,UAAA,MAAW;IAAAL,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAD,EAAA,GAAAf,CAAA;IAAAgB,EAAA,GAAAhB,CAAA;EAAA;EAS7B,MAAAmB,EAAA,MAAGZ,SAAA,IAAaD,CAAA,CAAE,sBAAsB;EAAA,IAAAc,EAAA;EAAA,IAAApB,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAmB,EAAA,IAAAnB,CAAA,QAAAa,EAAA;IAZ5CO,EAAA,GAAAC,KAAA,CAAC;MAAApB,SAAA,EACYY,EAA4C;MAAAS,YAAA,EACzCP,EAAiB;MAAAQ,YAAA,EACjBP,EAAiB;MAAAQ,IAAA,EAC1B;MAAAC,QAAA;MAAAC,QAAA,GAGLC,IAAA,CAAA/B,OAAA;QAAAgC,UAAA,EACa;QAAA3B,SAAA,EACA,GAAAJ,SAAA,WAAuB;QAAAgC,QAAA,EACzB;QAAAC,IAAA,EACH1B,OAAA;QAAAsB,QAAA,EACNP;MAAwC,C,GAC1CQ,IAAA,CAAAjC,QAAA,IAAC;IAAA,C;;;;;;;;SAbH0B,E;CAgBJ","ignoreList":[]}
@@ -0,0 +1,14 @@
1
+ @import '../../scss/styles.scss';
2
+
3
+ .locked {
4
+ position: relative;
5
+ display: inline-flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ pointer-events: all;
9
+
10
+ &__tooltip {
11
+ left: 0;
12
+ transform: translate3d(-0%, calc(var(--caret-size) * -1), 0);
13
+ }
14
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAYrB,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,IAAI,GACZ;IACE,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KACpC,CAAA;IACD,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,WAAW,CAAA;CAC9C,GACD,MAAM,CAAA;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwGhD,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAYrB,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,IAAI,GACZ;IACE,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KACpC,CAAA;IACD,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,WAAW,CAAA;CAC9C,GACD,MAAM,CAAA;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0GhD,CAAA"}
@@ -23,7 +23,7 @@ export const Pagination = props => {
23
23
  prevPage = null,
24
24
  totalPages = null
25
25
  } = props;
26
- if (!totalPages || totalPages <= 1) {
26
+ if (!hasNextPage && !hasPrevPage) {
27
27
  return null;
28
28
  }
29
29
  const updatePage = page => {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","ClickableArrow","Page","Separator","nodeTypes","baseClass","Pagination","props","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","currentPage","prevPage","totalPages","updatePage","pages","Array","from","length","_","index","rangeStartIndex","rangeEndIndex","nodes","slice","unshift","type","isFirstPage","push","isLastPage","direction","isDisabled","_jsx","className","map","node","i","isCurrent","NodeType"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.scss'\nimport { Page } from './Page/index.js'\nimport { Separator } from './Separator/index.js'\n\nconst nodeTypes = {\n ClickableArrow,\n Page,\n Separator,\n}\n\nconst baseClass = 'paginator'\n\nexport type PaginationProps = {\n hasNextPage?: boolean\n hasPrevPage?: boolean\n limit?: number\n nextPage?: number\n numberOfNeighbors?: number\n onChange?: (page: number) => void\n page?: number\n prevPage?: number\n totalPages?: number\n}\n\nexport type Node =\n | {\n props?: {\n direction?: 'left' | 'right'\n isDisabled?: boolean\n isFirstPage?: boolean\n isLastPage?: boolean\n page?: number\n updatePage: (page?: number) => void\n }\n type: 'ClickableArrow' | 'Page' | 'Separator'\n }\n | number\n\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n const {\n hasNextPage = false,\n hasPrevPage = false,\n nextPage = null,\n numberOfNeighbors = 1,\n onChange,\n page: currentPage,\n prevPage = null,\n totalPages = null,\n } = props\n\n if (!totalPages || totalPages <= 1) {\n return null\n }\n\n const updatePage = (page) => {\n if (typeof onChange === 'function') {\n onChange(page)\n }\n }\n\n // Create array of integers for each page\n const pages = Array.from({ length: totalPages }, (_, index) => index + 1)\n\n // Assign indices for start and end of the range of pages that should be shown in paginator\n let rangeStartIndex = currentPage - 1 - numberOfNeighbors\n\n // Sanitize rangeStartIndex in case it is less than zero for safe split\n if (rangeStartIndex <= 0) {\n rangeStartIndex = 0\n }\n\n const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1\n\n // Slice out the range of pages that we want to render\n const nodes: Node[] = pages.slice(rangeStartIndex, rangeEndIndex)\n\n // Add prev separator if necessary\n if (currentPage - numberOfNeighbors - 1 >= 2) {\n nodes.unshift({ type: 'Separator' })\n }\n // Add first page if necessary\n if (currentPage > numberOfNeighbors + 1) {\n nodes.unshift({\n type: 'Page',\n props: {\n isFirstPage: true,\n page: 1,\n updatePage,\n },\n })\n }\n\n // Add next separator if necessary\n if (currentPage + numberOfNeighbors + 1 < totalPages) {\n nodes.push({ type: 'Separator' })\n }\n // Add last page if necessary\n if (rangeEndIndex < totalPages) {\n nodes.push({\n type: 'Page',\n props: {\n isLastPage: true,\n page: totalPages,\n updatePage,\n },\n })\n }\n\n // Add prev and next arrows based on necessity\n nodes.unshift({\n type: 'ClickableArrow',\n props: {\n direction: 'right',\n isDisabled: !hasNextPage,\n updatePage: () => updatePage(nextPage),\n },\n })\n\n nodes.unshift({\n type: 'ClickableArrow',\n props: {\n direction: 'left',\n isDisabled: !hasPrevPage,\n updatePage: () => updatePage(prevPage),\n },\n })\n\n return (\n <div className={baseClass}>\n {nodes.map((node, i) => {\n if (typeof node === 'number') {\n return (\n <Page isCurrent={currentPage === node} key={i} page={node} updatePage={updatePage} />\n )\n }\n\n const NodeType = nodeTypes[node.type]\n\n return <NodeType key={i} {...node.props} />\n })}\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","ClickableArrow","Page","Separator","nodeTypes","baseClass","Pagination","props","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","currentPage","prevPage","totalPages","updatePage","pages","Array","from","length","_","index","rangeStartIndex","rangeEndIndex","nodes","slice","unshift","type","isFirstPage","push","isLastPage","direction","isDisabled","_jsx","className","map","node","i","isCurrent","NodeType"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.scss'\nimport { Page } from './Page/index.js'\nimport { Separator } from './Separator/index.js'\n\nconst nodeTypes = {\n ClickableArrow,\n Page,\n Separator,\n}\n\nconst baseClass = 'paginator'\n\nexport type PaginationProps = {\n hasNextPage?: boolean\n hasPrevPage?: boolean\n limit?: number\n nextPage?: number\n numberOfNeighbors?: number\n onChange?: (page: number) => void\n page?: number\n prevPage?: number\n totalPages?: number\n}\n\nexport type Node =\n | {\n props?: {\n direction?: 'left' | 'right'\n isDisabled?: boolean\n isFirstPage?: boolean\n isLastPage?: boolean\n page?: number\n updatePage: (page?: number) => void\n }\n type: 'ClickableArrow' | 'Page' | 'Separator'\n }\n | number\n\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n const {\n hasNextPage = false,\n hasPrevPage = false,\n nextPage = null,\n numberOfNeighbors = 1,\n onChange,\n page: currentPage,\n prevPage = null,\n totalPages = null,\n } = props\n\n if (!hasNextPage && !hasPrevPage) {\n return null\n }\n\n const updatePage = (page) => {\n if (typeof onChange === 'function') {\n onChange(page)\n }\n }\n\n // Create array of integers for each page\n const pages = Array.from({ length: totalPages }, (_, index) => index + 1)\n\n // Assign indices for start and end of the range of pages that should be shown in paginator\n let rangeStartIndex = currentPage - 1 - numberOfNeighbors\n\n // Sanitize rangeStartIndex in case it is less than zero for safe split\n if (rangeStartIndex <= 0) {\n rangeStartIndex = 0\n }\n\n const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1\n\n // Slice out the range of pages that we want to render\n const nodes: Node[] = pages.slice(rangeStartIndex, rangeEndIndex)\n\n // Add prev separator if necessary\n if (currentPage - numberOfNeighbors - 1 >= 2) {\n nodes.unshift({ type: 'Separator' })\n }\n\n // Add first page if necessary\n if (currentPage > numberOfNeighbors + 1) {\n nodes.unshift({\n type: 'Page',\n props: {\n isFirstPage: true,\n page: 1,\n updatePage,\n },\n })\n }\n\n // Add next separator if necessary\n if (currentPage + numberOfNeighbors + 1 < totalPages) {\n nodes.push({ type: 'Separator' })\n }\n\n // Add last page if necessary\n if (rangeEndIndex < totalPages) {\n nodes.push({\n type: 'Page',\n props: {\n isLastPage: true,\n page: totalPages,\n updatePage,\n },\n })\n }\n\n // Add prev and next arrows based on necessity\n nodes.unshift({\n type: 'ClickableArrow',\n props: {\n direction: 'right',\n isDisabled: !hasNextPage,\n updatePage: () => updatePage(nextPage),\n },\n })\n\n nodes.unshift({\n type: 'ClickableArrow',\n props: {\n direction: 'left',\n isDisabled: !hasPrevPage,\n updatePage: () => updatePage(prevPage),\n },\n })\n\n return (\n <div className={baseClass}>\n {nodes.map((node, i) => {\n if (typeof node === 'number') {\n return (\n <Page isCurrent={currentPage === node} key={i} page={node} updatePage={updatePage} />\n )\n }\n\n const NodeType = nodeTypes[node.type]\n\n return <NodeType key={i} {...node.props} />\n })}\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
  import './index.scss';
3
3
  export type PerPageProps = {
4
- defaultLimit?: number;
5
- handleChange?: (limit: number) => void;
6
- limit: number;
7
- limits: number[];
8
- resetPage?: boolean;
4
+ readonly defaultLimit?: number;
5
+ readonly handleChange?: (limit: number) => void;
6
+ readonly limit: number;
7
+ readonly limits: number[];
8
+ readonly resetPage?: boolean;
9
9
  };
10
10
  export declare const PerPage: React.FC<PerPageProps>;
11
11
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsD1C,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsD1C,CAAA"}
@@ -45,7 +45,8 @@ export const PerPage = t0 => {
45
45
  children: [limitNumber === limitToUse && _jsx("div", {
46
46
  className: `${baseClass}__chevron`,
47
47
  children: _jsx(ChevronIcon, {
48
- direction: "right"
48
+ direction: "right",
49
+ size: "small"
49
50
  })
50
51
  }), "\xA0", _jsx("span", {
51
52
  children: limitNumber
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["c","_c","collectionDefaults","isNumber","React","ChevronIcon","useTranslation","Popup","PopupList","baseClass","defaultLimits","admin","pagination","limits","PerPage","t0","$","defaultLimit","t1","handleChange","limit","t2","undefined","t","limitToUse","t3","t4","t5","close","_jsx","ButtonGroup","children","map","limitNumber","i","_jsxs","Button","className","filter","Boolean","join","onClick","direction","button","render"],"sources":["../../../src/elements/PerPage/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { collectionDefaults, isNumber } from 'payload/shared'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'per-page'\n\nconst defaultLimits = collectionDefaults.admin.pagination.limits\n\nexport type PerPageProps = {\n defaultLimit?: number\n handleChange?: (limit: number) => void\n limit: number\n limits: number[]\n resetPage?: boolean\n}\n\nexport const PerPage: React.FC<PerPageProps> = ({\n defaultLimit = 10,\n handleChange,\n limit,\n limits = defaultLimits,\n}) => {\n const { t } = useTranslation()\n\n const limitToUse = isNumber(limit) ? limit : defaultLimit\n\n return (\n <div className={baseClass}>\n <Popup\n button={\n <div className={`${baseClass}__base-button`}>\n <span>{t('general:perPage', { limit: limitToUse })}</span>\n &nbsp;\n <ChevronIcon className={`${baseClass}__icon`} />\n </div>\n }\n horizontalAlign=\"right\"\n render={({ close }) => (\n <PopupList.ButtonGroup>\n {limits.map((limitNumber, i) => (\n <PopupList.Button\n className={[\n `${baseClass}__button`,\n limitNumber === limitToUse && `${baseClass}__button-active`,\n ]\n .filter(Boolean)\n .join(' ')}\n key={i}\n onClick={() => {\n close()\n if (handleChange) {\n handleChange(limitNumber)\n }\n }}\n >\n {limitNumber === limitToUse && (\n <div className={`${baseClass}__chevron`}>\n <ChevronIcon direction=\"right\" />\n </div>\n )}\n &nbsp;\n <span>{limitNumber}</span>\n </PopupList.Button>\n ))}\n </PopupList.ButtonGroup>\n )}\n size=\"small\"\n />\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA;AACA,SAASC,kBAAkB,EAAEC,QAAQ,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,aAAA,GAAgBR,kBAAA,CAAmBS,KAAK,CAACC,UAAU,CAACC,MAAM;AAUhE,OAAO,MAAMC,OAAA,GAAkCC,EAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAAC;IAAAgB,YAAA,EAAAC,EAAA;IAAAC,YAAA;IAAAC,KAAA;IAAAP,MAAA,EAAAQ;EAAA,IAAAN,EAK/C;EAJC,MAAAE,YAAA,GAAAC,EAAiB,KAAAI,SAAA,QAAjBJ,EAAiB;EAGjB,MAAAL,MAAA,GAAAQ,EAAsB,KAAAC,SAAA,GAAAZ,aAAA,GAAtBW,EAAsB;EAEtB;IAAAE;EAAA,IAAcjB,cAAA;EAEd,MAAAkB,UAAA,GAAmBrB,QAAA,CAASiB,KAAA,IAASA,KAAA,GAAQH,YAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAT,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAO,CAAA,IAAAP,CAAA,QAAAH,MAAA,IAAAG,CAAA,QAAAG,YAAA;IAAA,IAAAO,EAAA;IAAA,IAAAV,CAAA,QAAAH,MAAA,IAAAG,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAG,YAAA;MAa/BO,EAAA,GAAAC,EAAA;QAAC;UAAAC;QAAA,IAAAD,EAAS;QAAA,OAChBE,IAAA,CAAArB,SAAA,CAAAsB,WAAA;UAAAC,QAAA,EACGlB,MAAA,CAAAmB,GAAA,EAAAC,WAAA,EAAAC,CAAA,KACCC,KAAA,CAAA3B,SAAA,CAAA4B,MAAA;YAAAC,SAAA,EACa,CACT,GAAA5B,SAAA,UAAsB,EACtBwB,WAAA,KAAgBT,UAAA,IAAc,GAAAf,SAAA,iBAA6B,EAAA6B,MAAA,CAAAC,OAEnD,EAAAC,IAAA,CACF;YAAAC,OAAA,EAAAA,CAAA;cAGNb,KAAA;cAAA,IACIT,YAAA;gBACFA,YAAA,CAAac,WAAA;cAAA;YAAA;YAAAF,QAAA,GAIhBE,WAAA,KAAgBT,UAAA,IACfK,IAAA,CAAC;cAAAQ,SAAA,EAAe,GAAA5B,SAAA,WAAuB;cAAAsB,QAAA,EACrCF,IAAA,CAAAxB,WAAA;gBAAAqC,SAAA,EAAuB;cAAA,C;gBAEzB,QAEFb,IAAA,CAAC;cAAAE,QAAA,EAAME;YAAA,C;aAdFC,CAAA;QAAA,C;;;;;;;;;IApBjBT,EAAA,GAAAI,IAAA,CAAC;MAAAQ,SAAA,EAAA5B,SAAA;MAAAsB,QAAA,EACCF,IAAA,CAAAtB,KAAA;QAAAoC,MAAA,EAEIR,KAAA,CAAC;UAAAE,SAAA,EAAe,GAAA5B,SAAA,eAA2B;UAAAsB,QAAA,GACzCF,IAAA,CAAC;YAAAE,QAAA,EAAMR,CAAA,CAAE;cAAAH,KAAA,EAA4BI;YAAA,CAAW;UAAA,C,GAAU,QAE1DK,IAAA,CAAAxB,WAAA;YAAAgC,SAAA,EAAwB,GAAA5B,SAAA;UAAoB,C;;yBAGhC;QAAAmC,MAAA,EACRlB,E;cA6BH;MAAA,C;;;;;;;;;;SAvCTD,E;CA2CJ","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["c","_c","collectionDefaults","isNumber","React","ChevronIcon","useTranslation","Popup","PopupList","baseClass","defaultLimits","admin","pagination","limits","PerPage","t0","$","defaultLimit","t1","handleChange","limit","t2","undefined","t","limitToUse","t3","t4","t5","close","_jsx","ButtonGroup","children","map","limitNumber","i","_jsxs","Button","className","filter","Boolean","join","onClick","direction","size","button","render"],"sources":["../../../src/elements/PerPage/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { collectionDefaults, isNumber } from 'payload/shared'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'per-page'\n\nconst defaultLimits = collectionDefaults.admin.pagination.limits\n\nexport type PerPageProps = {\n readonly defaultLimit?: number\n readonly handleChange?: (limit: number) => void\n readonly limit: number\n readonly limits: number[]\n readonly resetPage?: boolean\n}\n\nexport const PerPage: React.FC<PerPageProps> = ({\n defaultLimit = 10,\n handleChange,\n limit,\n limits = defaultLimits,\n}) => {\n const { t } = useTranslation()\n\n const limitToUse = isNumber(limit) ? limit : defaultLimit\n\n return (\n <div className={baseClass}>\n <Popup\n button={\n <div className={`${baseClass}__base-button`}>\n <span>{t('general:perPage', { limit: limitToUse })}</span>\n &nbsp;\n <ChevronIcon className={`${baseClass}__icon`} />\n </div>\n }\n horizontalAlign=\"right\"\n render={({ close }) => (\n <PopupList.ButtonGroup>\n {limits.map((limitNumber, i) => (\n <PopupList.Button\n className={[\n `${baseClass}__button`,\n limitNumber === limitToUse && `${baseClass}__button-active`,\n ]\n .filter(Boolean)\n .join(' ')}\n key={i}\n onClick={() => {\n close()\n if (handleChange) {\n handleChange(limitNumber)\n }\n }}\n >\n {limitNumber === limitToUse && (\n <div className={`${baseClass}__chevron`}>\n <ChevronIcon direction=\"right\" size=\"small\" />\n </div>\n )}\n &nbsp;\n <span>{limitNumber}</span>\n </PopupList.Button>\n ))}\n </PopupList.ButtonGroup>\n )}\n size=\"small\"\n />\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA;AACA,SAASC,kBAAkB,EAAEC,QAAQ,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,aAAA,GAAgBR,kBAAA,CAAmBS,KAAK,CAACC,UAAU,CAACC,MAAM;AAUhE,OAAO,MAAMC,OAAA,GAAkCC,EAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAAC;IAAAgB,YAAA,EAAAC,EAAA;IAAAC,YAAA;IAAAC,KAAA;IAAAP,MAAA,EAAAQ;EAAA,IAAAN,EAK/C;EAJC,MAAAE,YAAA,GAAAC,EAAiB,KAAAI,SAAA,QAAjBJ,EAAiB;EAGjB,MAAAL,MAAA,GAAAQ,EAAsB,KAAAC,SAAA,GAAAZ,aAAA,GAAtBW,EAAsB;EAEtB;IAAAE;EAAA,IAAcjB,cAAA;EAEd,MAAAkB,UAAA,GAAmBrB,QAAA,CAASiB,KAAA,IAASA,KAAA,GAAQH,YAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAT,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAO,CAAA,IAAAP,CAAA,QAAAH,MAAA,IAAAG,CAAA,QAAAG,YAAA;IAAA,IAAAO,EAAA;IAAA,IAAAV,CAAA,QAAAH,MAAA,IAAAG,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAG,YAAA;MAa/BO,EAAA,GAAAC,EAAA;QAAC;UAAAC;QAAA,IAAAD,EAAS;QAAA,OAChBE,IAAA,CAAArB,SAAA,CAAAsB,WAAA;UAAAC,QAAA,EACGlB,MAAA,CAAAmB,GAAA,EAAAC,WAAA,EAAAC,CAAA,KACCC,KAAA,CAAA3B,SAAA,CAAA4B,MAAA;YAAAC,SAAA,EACa,CACT,GAAA5B,SAAA,UAAsB,EACtBwB,WAAA,KAAgBT,UAAA,IAAc,GAAAf,SAAA,iBAA6B,EAAA6B,MAAA,CAAAC,OAEnD,EAAAC,IAAA,CACF;YAAAC,OAAA,EAAAA,CAAA;cAGNb,KAAA;cAAA,IACIT,YAAA;gBACFA,YAAA,CAAac,WAAA;cAAA;YAAA;YAAAF,QAAA,GAIhBE,WAAA,KAAgBT,UAAA,IACfK,IAAA,CAAC;cAAAQ,SAAA,EAAe,GAAA5B,SAAA,WAAuB;cAAAsB,QAAA,EACrCF,IAAA,CAAAxB,WAAA;gBAAAqC,SAAA,EAAuB;gBAAAC,IAAA,EAAa;cAAA,C;gBAEtC,QAEFd,IAAA,CAAC;cAAAE,QAAA,EAAME;YAAA,C;aAdFC,CAAA;QAAA,C;;;;;;;;;IApBjBT,EAAA,GAAAI,IAAA,CAAC;MAAAQ,SAAA,EAAA5B,SAAA;MAAAsB,QAAA,EACCF,IAAA,CAAAtB,KAAA;QAAAqC,MAAA,EAEIT,KAAA,CAAC;UAAAE,SAAA,EAAe,GAAA5B,SAAA,eAA2B;UAAAsB,QAAA,GACzCF,IAAA,CAAC;YAAAE,QAAA,EAAMR,CAAA,CAAE;cAAAH,KAAA,EAA4BI;YAAA,CAAW;UAAA,C,GAAU,QAE1DK,IAAA,CAAAxB,WAAA;YAAAgC,SAAA,EAAwB,GAAA5B,SAAA;UAAoB,C;;yBAGhC;QAAAoC,MAAA,EACRnB,E;cA6BH;MAAA,C;;;;;;;;;;SAvCTD,E;CA2CJ","ignoreList":[]}
@@ -15,6 +15,7 @@
15
15
  padding: 0 base(0.4);
16
16
  align-items: center;
17
17
  flex-shrink: 0;
18
+ gap: base(0.2);
18
19
 
19
20
  &--rounded {
20
21
  border-radius: var(--style-radius-l);
@@ -54,7 +55,8 @@
54
55
 
55
56
  &--has-icon {
56
57
  padding-inline-start: base(0.4);
57
- padding-inline-end: base(0.1);
58
+ padding-inline-end: base(0.3);
59
+
58
60
  svg {
59
61
  display: block;
60
62
  }
@@ -8,6 +8,7 @@ export type PopupTriggerProps = {
8
8
  disabled?: boolean;
9
9
  noBackground?: boolean;
10
10
  setActive: (active: boolean) => void;
11
+ size?: 'large' | 'medium' | 'small';
11
12
  };
12
13
  export declare const PopupTrigger: React.FC<PopupTriggerProps>;
13
14
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiDpD,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkDpD,CAAA"}
@@ -12,9 +12,10 @@ export const PopupTrigger = props => {
12
12
  className,
13
13
  disabled,
14
14
  noBackground,
15
- setActive
15
+ setActive,
16
+ size
16
17
  } = props;
17
- const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`].filter(Boolean).join(' ');
18
+ const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`].filter(Boolean).join(' ');
18
19
  const handleClick = () => {
19
20
  setActive(!active);
20
21
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","classes","filter","Boolean","join","handleClick","_jsx","onClick","onKeyDown","e","key","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n active: boolean\n button: React.ReactNode\n buttonType: 'custom' | 'default' | 'none'\n className?: string\n disabled?: boolean\n noBackground?: boolean\n setActive: (active: boolean) => void\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n const { active, button, buttonType, className, disabled, noBackground, setActive } = props\n\n const classes = [\n baseClass,\n className,\n `${baseClass}--${buttonType}`,\n !noBackground && `${baseClass}--background`,\n ]\n .filter(Boolean)\n .join(' ')\n\n const handleClick = () => {\n setActive(!active)\n }\n\n if (buttonType === 'none') {\n return null\n }\n\n if (buttonType === 'custom') {\n return (\n <div\n className={classes}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleClick()\n }\n }}\n role=\"button\"\n tabIndex={0}\n >\n {button}\n </div>\n )\n }\n\n return (\n <button\n className={classes}\n disabled={disabled}\n onClick={handleClick}\n tabIndex={0}\n type=\"button\"\n >\n {button}\n </button>\n )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAYlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,YAAY;IAAEC;EAAS,CAAE,GAAGP,KAAA;EAErF,MAAMQ,OAAA,GAAU,CACdV,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,CAC5C,CACEW,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAcA,CAAA;IAClBL,SAAA,CAAU,CAACN,MAAA;EACb;EAEA,IAAIE,UAAA,KAAe,QAAQ;IACzB,OAAO;EACT;EAEA,IAAIA,UAAA,KAAe,UAAU;IAC3B,oBACEU,IAAA,CAAC;MACCT,SAAA,EAAWI,OAAA;MACXM,OAAA,EAASF,WAAA;MACTG,SAAA,EAAYC,CAAA;QACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,SAAS;UACrBL,WAAA;QACF;MACF;MACAM,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETjB;;EAGP;EAEA,oBACEW,IAAA,CAAC;IACCT,SAAA,EAAWI,OAAA;IACXH,QAAA,EAAUA,QAAA;IACVS,OAAA,EAASF,WAAA;IACTO,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJlB;;AAGP","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","size","classes","filter","Boolean","join","handleClick","_jsx","onClick","onKeyDown","e","key","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n active: boolean\n button: React.ReactNode\n buttonType: 'custom' | 'default' | 'none'\n className?: string\n disabled?: boolean\n noBackground?: boolean\n setActive: (active: boolean) => void\n size?: 'large' | 'medium' | 'small'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n const { active, button, buttonType, className, disabled, noBackground, setActive, size } = props\n\n const classes = [\n baseClass,\n className,\n `${baseClass}--${buttonType}`,\n !noBackground && `${baseClass}--background`,\n size && `${baseClass}--size-${size}`,\n ]\n .filter(Boolean)\n .join(' ')\n\n const handleClick = () => {\n setActive(!active)\n }\n\n if (buttonType === 'none') {\n return null\n }\n\n if (buttonType === 'custom') {\n return (\n <div\n className={classes}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleClick()\n }\n }}\n role=\"button\"\n tabIndex={0}\n >\n {button}\n </div>\n )\n }\n\n return (\n <button\n className={classes}\n disabled={disabled}\n onClick={handleClick}\n tabIndex={0}\n type=\"button\"\n >\n {button}\n </button>\n )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAalB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,SAAS;IAAEC;EAAI,CAAE,GAAGR,KAAA;EAE3F,MAAMS,OAAA,GAAU,CACdX,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CU,IAAA,IAAQ,GAAGV,SAAA,UAAmBU,IAAA,EAAM,CACrC,CACEE,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAcA,CAAA;IAClBN,SAAA,CAAU,CAACN,MAAA;EACb;EAEA,IAAIE,UAAA,KAAe,QAAQ;IACzB,OAAO;EACT;EAEA,IAAIA,UAAA,KAAe,UAAU;IAC3B,oBACEW,IAAA,CAAC;MACCV,SAAA,EAAWK,OAAA;MACXM,OAAA,EAASF,WAAA;MACTG,SAAA,EAAYC,CAAA;QACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,SAAS;UACrBL,WAAA;QACF;MACF;MACAM,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETlB;;EAGP;EAEA,oBACEY,IAAA,CAAC;IACCV,SAAA,EAAWK,OAAA;IACXJ,QAAA,EAAUA,QAAA;IACVU,OAAA,EAASF,WAAA;IACTO,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJnB;;AAGP","ignoreList":[]}
@@ -14,4 +14,16 @@
14
14
  &--background {
15
15
  background: transparent;
16
16
  }
17
+
18
+ &--size-small {
19
+ padding: base(0.4);
20
+ }
21
+
22
+ &--size-medium {
23
+ padding: base(0.6);
24
+ }
25
+
26
+ &--size-large {
27
+ padding: base(0.8);
28
+ }
17
29
  }
@@ -7,6 +7,7 @@ export type PopupProps = {
7
7
  boundingRef?: React.RefObject<HTMLElement>;
8
8
  button?: React.ReactNode;
9
9
  buttonClassName?: string;
10
+ buttonSize?: 'large' | 'medium' | 'small';
10
11
  buttonType?: 'custom' | 'default' | 'none';
11
12
  caret?: boolean;
12
13
  children?: React.ReactNode;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAGvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,cAAc,CAAA;AAKrB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,KAAK,CAAC,SAAS,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoLtC,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAGvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,cAAc,CAAA;AAKrB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACzC,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,KAAK,CAAC,SAAS,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwLtC,CAAA"}
@@ -13,6 +13,7 @@ export const Popup = props => {
13
13
  boundingRef,
14
14
  button,
15
15
  buttonClassName,
16
+ buttonSize,
16
17
  buttonType = 'default',
17
18
  caret = true,
18
19
  children,
@@ -114,7 +115,7 @@ export const Popup = props => {
114
115
  useEffect(() => {
115
116
  setActive(forceOpen);
116
117
  }, [forceOpen]);
117
- const classes = [baseClass, className, `${baseClass}--size-${size}`, `${baseClass}--v-align-${verticalAlign}`, `${baseClass}--h-align-${horizontalAlign}`, active && `${baseClass}--active`, showScrollbar && `${baseClass}--show-scrollbar`].filter(Boolean).join(' ');
118
+ const classes = [baseClass, className, `${baseClass}--size-${size}`, buttonSize && `${baseClass}--button-size-${buttonSize}`, `${baseClass}--v-align-${verticalAlign}`, `${baseClass}--h-align-${horizontalAlign}`, active && `${baseClass}--active`, showScrollbar && `${baseClass}--show-scrollbar`].filter(Boolean).join(' ');
118
119
  return /*#__PURE__*/_jsxs("div", {
119
120
  className: classes,
120
121
  children: [/*#__PURE__*/_jsx("div", {
@@ -130,7 +131,8 @@ export const Popup = props => {
130
131
  className: buttonClassName,
131
132
  disabled,
132
133
  noBackground,
133
- setActive
134
+ setActive,
135
+ size: buttonSize
134
136
  })
135
137
  }) : /*#__PURE__*/_jsx(PopupTrigger, {
136
138
  active,
@@ -139,7 +141,8 @@ export const Popup = props => {
139
141
  className: buttonClassName,
140
142
  disabled,
141
143
  noBackground,
142
- setActive
144
+ setActive,
145
+ size: buttonSize
143
146
  })
144
147
  }), /*#__PURE__*/_jsxs("div", {
145
148
  className: `${baseClass}__content`,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","boundingRef","button","buttonClassName","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","active","setActive","setVerticalAlign","setHorizontalAlign","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsxs","_jsx","onMouseEnter","onMouseLeave","ref","close"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\nexport type PopupProps = {\n backgroundColor?: CSSProperties['backgroundColor']\n boundingRef?: React.RefObject<HTMLElement>\n button?: React.ReactNode\n buttonClassName?: string\n buttonType?: 'custom' | 'default' | 'none'\n caret?: boolean\n children?: React.ReactNode\n className?: string\n disabled?: boolean\n forceOpen?: boolean\n horizontalAlign?: 'center' | 'left' | 'right'\n initActive?: boolean\n noBackground?: boolean\n onToggleOpen?: (active: boolean) => void\n render?: (any) => React.ReactNode\n showOnHover?: boolean\n showScrollbar?: boolean\n size?: 'fit-content' | 'large' | 'medium' | 'small'\n verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n const {\n boundingRef,\n button,\n buttonClassName,\n buttonType = 'default',\n caret = true,\n children,\n className,\n disabled,\n forceOpen,\n horizontalAlign: horizontalAlignFromProps = 'left',\n initActive = false,\n noBackground,\n onToggleOpen,\n render,\n showOnHover = false,\n showScrollbar = false,\n size = 'medium',\n verticalAlign: verticalAlignFromProps = 'top',\n } = props\n const { height: windowHeight, width: windowWidth } = useWindowInfo()\n const [intersectionRef, intersectionEntry] = useIntersect({\n root: boundingRef?.current || null,\n rootMargin: '-100px 0px 0px 0px',\n threshold: 1,\n })\n\n const contentRef = useRef(null)\n const [active, setActive] = useState(initActive)\n const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n const setPosition = useCallback(\n ({ horizontal = false, vertical = false }) => {\n if (contentRef.current) {\n const bounds = contentRef.current.getBoundingClientRect()\n\n const {\n bottom: contentBottomPos,\n left: contentLeftPos,\n right: contentRightPos,\n top: contentTopPos,\n } = bounds\n\n let boundingTopPos = 100\n let boundingRightPos = document.documentElement.clientWidth\n let boundingBottomPos = document.documentElement.clientHeight\n let boundingLeftPos = 0\n\n if (boundingRef?.current) {\n ;({\n bottom: boundingBottomPos,\n left: boundingLeftPos,\n right: boundingRightPos,\n top: boundingTopPos,\n } = boundingRef.current.getBoundingClientRect())\n }\n\n if (horizontal) {\n if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n setHorizontalAlign('right')\n } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n setHorizontalAlign('left')\n }\n }\n\n if (vertical) {\n if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n setVerticalAlign('bottom')\n } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n setVerticalAlign('top')\n }\n }\n }\n },\n [boundingRef],\n )\n\n const handleClickOutside = useCallback(\n (e) => {\n if (contentRef.current.contains(e.target)) {\n return\n }\n\n setActive(false)\n },\n [contentRef],\n )\n\n useEffect(() => {\n setPosition({ horizontal: true })\n }, [intersectionEntry, setPosition, windowWidth])\n\n useEffect(() => {\n setPosition({ vertical: true })\n }, [intersectionEntry, setPosition, windowHeight])\n\n useEffect(() => {\n if (typeof onToggleOpen === 'function') {\n onToggleOpen(active)\n }\n\n if (active) {\n document.addEventListener('mousedown', handleClickOutside)\n } else {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [active, handleClickOutside, onToggleOpen])\n\n useEffect(() => {\n setActive(forceOpen)\n }, [forceOpen])\n\n const classes = [\n baseClass,\n className,\n `${baseClass}--size-${size}`,\n `${baseClass}--v-align-${verticalAlign}`,\n `${baseClass}--h-align-${horizontalAlign}`,\n active && `${baseClass}--active`,\n showScrollbar && `${baseClass}--show-scrollbar`,\n ]\n .filter(Boolean)\n .join(' ')\n\n return (\n <div className={classes}>\n <div className={`${baseClass}__trigger-wrap`}>\n {showOnHover ? (\n <div\n className={`${baseClass}__on-hover-watch`}\n onMouseEnter={() => setActive(true)}\n onMouseLeave={() => setActive(false)}\n >\n <PopupTrigger\n {...{\n active,\n button,\n buttonType,\n className: buttonClassName,\n disabled,\n noBackground,\n setActive,\n }}\n />\n </div>\n ) : (\n <PopupTrigger\n {...{\n active,\n button,\n buttonType,\n className: buttonClassName,\n disabled,\n noBackground,\n setActive,\n }}\n />\n )}\n </div>\n\n <div className={`${baseClass}__content`} ref={contentRef}>\n <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n <div className={`${baseClass}__scroll-container`}>\n <div className={`${baseClass}__scroll-content`}>\n {render && render({ close: () => setActive(false) })}\n {children && children}\n </div>\n </div>\n </div>\n\n {caret && <div className={`${baseClass}__caret`} />}\n </div>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","boundingRef","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","active","setActive","setVerticalAlign","setHorizontalAlign","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsxs","_jsx","onMouseEnter","onMouseLeave","ref","close"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\nexport type PopupProps = {\n backgroundColor?: CSSProperties['backgroundColor']\n boundingRef?: React.RefObject<HTMLElement>\n button?: React.ReactNode\n buttonClassName?: string\n buttonSize?: 'large' | 'medium' | 'small'\n buttonType?: 'custom' | 'default' | 'none'\n caret?: boolean\n children?: React.ReactNode\n className?: string\n disabled?: boolean\n forceOpen?: boolean\n horizontalAlign?: 'center' | 'left' | 'right'\n initActive?: boolean\n noBackground?: boolean\n onToggleOpen?: (active: boolean) => void\n render?: (any) => React.ReactNode\n showOnHover?: boolean\n showScrollbar?: boolean\n size?: 'fit-content' | 'large' | 'medium' | 'small'\n verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n const {\n boundingRef,\n button,\n buttonClassName,\n buttonSize,\n buttonType = 'default',\n caret = true,\n children,\n className,\n disabled,\n forceOpen,\n horizontalAlign: horizontalAlignFromProps = 'left',\n initActive = false,\n noBackground,\n onToggleOpen,\n render,\n showOnHover = false,\n showScrollbar = false,\n size = 'medium',\n verticalAlign: verticalAlignFromProps = 'top',\n } = props\n const { height: windowHeight, width: windowWidth } = useWindowInfo()\n const [intersectionRef, intersectionEntry] = useIntersect({\n root: boundingRef?.current || null,\n rootMargin: '-100px 0px 0px 0px',\n threshold: 1,\n })\n\n const contentRef = useRef(null)\n const [active, setActive] = useState(initActive)\n const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n const setPosition = useCallback(\n ({ horizontal = false, vertical = false }) => {\n if (contentRef.current) {\n const bounds = contentRef.current.getBoundingClientRect()\n\n const {\n bottom: contentBottomPos,\n left: contentLeftPos,\n right: contentRightPos,\n top: contentTopPos,\n } = bounds\n\n let boundingTopPos = 100\n let boundingRightPos = document.documentElement.clientWidth\n let boundingBottomPos = document.documentElement.clientHeight\n let boundingLeftPos = 0\n\n if (boundingRef?.current) {\n ;({\n bottom: boundingBottomPos,\n left: boundingLeftPos,\n right: boundingRightPos,\n top: boundingTopPos,\n } = boundingRef.current.getBoundingClientRect())\n }\n\n if (horizontal) {\n if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n setHorizontalAlign('right')\n } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n setHorizontalAlign('left')\n }\n }\n\n if (vertical) {\n if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n setVerticalAlign('bottom')\n } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n setVerticalAlign('top')\n }\n }\n }\n },\n [boundingRef],\n )\n\n const handleClickOutside = useCallback(\n (e) => {\n if (contentRef.current.contains(e.target)) {\n return\n }\n\n setActive(false)\n },\n [contentRef],\n )\n\n useEffect(() => {\n setPosition({ horizontal: true })\n }, [intersectionEntry, setPosition, windowWidth])\n\n useEffect(() => {\n setPosition({ vertical: true })\n }, [intersectionEntry, setPosition, windowHeight])\n\n useEffect(() => {\n if (typeof onToggleOpen === 'function') {\n onToggleOpen(active)\n }\n\n if (active) {\n document.addEventListener('mousedown', handleClickOutside)\n } else {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [active, handleClickOutside, onToggleOpen])\n\n useEffect(() => {\n setActive(forceOpen)\n }, [forceOpen])\n\n const classes = [\n baseClass,\n className,\n `${baseClass}--size-${size}`,\n buttonSize && `${baseClass}--button-size-${buttonSize}`,\n `${baseClass}--v-align-${verticalAlign}`,\n `${baseClass}--h-align-${horizontalAlign}`,\n active && `${baseClass}--active`,\n showScrollbar && `${baseClass}--show-scrollbar`,\n ]\n .filter(Boolean)\n .join(' ')\n\n return (\n <div className={classes}>\n <div className={`${baseClass}__trigger-wrap`}>\n {showOnHover ? (\n <div\n className={`${baseClass}__on-hover-watch`}\n onMouseEnter={() => setActive(true)}\n onMouseLeave={() => setActive(false)}\n >\n <PopupTrigger\n {...{\n active,\n button,\n buttonType,\n className: buttonClassName,\n disabled,\n noBackground,\n setActive,\n size: buttonSize,\n }}\n />\n </div>\n ) : (\n <PopupTrigger\n {...{\n active,\n button,\n buttonType,\n className: buttonClassName,\n disabled,\n noBackground,\n setActive,\n size: buttonSize,\n }}\n />\n )}\n </div>\n\n <div className={`${baseClass}__content`} ref={contentRef}>\n <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n <div className={`${baseClass}__scroll-container`}>\n <div className={`${baseClass}__scroll-content`}>\n {render && render({ close: () => setActive(false) })}\n {children && children}\n </div>\n </div>\n </div>\n\n {caret && <div className={`${baseClass}__caret`} />}\n </div>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
@@ -7,6 +7,7 @@
7
7
  --popup-caret-size: 10px;
8
8
  --popup-x-padding: calc(var(--base) * 0.33);
9
9
  --popup-padding: calc(var(--base) * 0.5);
10
+ --button-size-offset: -8px;
10
11
  position: relative;
11
12
 
12
13
  &__trigger-wrap {
@@ -83,6 +84,22 @@
83
84
  }
84
85
  }
85
86
 
87
+ ////////////////////////////////
88
+ /// BUTTON SIZE
89
+ ////////////////////////////////
90
+
91
+ &--button-size-small {
92
+ --button-size-offset: -8px;
93
+ }
94
+
95
+ &--button-size-medium {
96
+ --button-size-offset: -4px;
97
+ }
98
+
99
+ &--button-size-large {
100
+ --button-size-offset: 0px;
101
+ }
102
+
86
103
  ////////////////////////////////
87
104
  // HORIZONTAL ALIGNMENT
88
105
  ////////////////////////////////
@@ -123,7 +140,7 @@
123
140
 
124
141
  &--h-align-right {
125
142
  .popup__content {
126
- right: 0;
143
+ right: var(--button-size-offset);
127
144
  }
128
145
 
129
146
  .popup__caret {
@@ -1 +1 @@
1
- {"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CAsEnB,CAAA"}
1
+ {"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CA8EnB,CAAA"}
@@ -1,5 +1,6 @@
1
1
  'use client';
2
2
 
3
+ import * as qs from 'qs-esm';
3
4
  import { useCallback, useRef, useState } from 'react';
4
5
  import { toast } from 'sonner';
5
6
  import { useConfig } from '../../providers/Config/index.js';
@@ -10,13 +11,15 @@ export const usePreviewURL = () => {
10
11
  const {
11
12
  id,
12
13
  collectionSlug,
13
- globalSlug
14
+ globalSlug,
15
+ versions
14
16
  } = useDocumentInfo();
15
17
  const [isLoading, setIsLoading] = useState(false);
16
18
  const [previewURL, setPreviewURL] = useState('');
17
19
  const {
18
20
  code: locale
19
21
  } = useLocale();
22
+ const hasVersions = versions?.totalDocs > 0;
20
23
  const {
21
24
  config: {
22
25
  routes: {
@@ -48,7 +51,11 @@ export const usePreviewURL = () => {
48
51
  if (globalSlug) {
49
52
  url = `${url}/globals/${globalSlug}/preview`;
50
53
  }
51
- const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`);
54
+ const params = {
55
+ draft: hasVersions ? 'true' : 'false',
56
+ locale: locale || undefined
57
+ };
58
+ const res = await fetch(`${url}?${qs.stringify(params)}`);
52
59
  if (!res.ok) {
53
60
  throw new Error();
54
61
  }
@@ -67,8 +74,9 @@ export const usePreviewURL = () => {
67
74
  isGeneratingPreviewURL.current = false;
68
75
  toast.error(t('error:previewing'));
69
76
  }
70
- }, [serverURL, api, collectionSlug, globalSlug, id, locale, t]);
77
+ }, [serverURL, api, collectionSlug, globalSlug, hasVersions, locale, id, t]);
71
78
  return {
79
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
72
80
  generatePreviewURL,
73
81
  isLoading,
74
82
  label: isLoading ? t('general:loading') : t('version:preview'),
@@ -1 +1 @@
1
- {"version":3,"file":"usePreviewURL.js","names":["useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","res","fetch","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n isLoading: boolean\n label: string\n previewURL: string\n} => {\n const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n const [isLoading, setIsLoading] = useState(false)\n const [previewURL, setPreviewURL] = useState('')\n const { code: locale } = useLocale()\n\n const {\n config: {\n routes: { api },\n serverURL,\n },\n } = useConfig()\n\n const { t } = useTranslation()\n\n const isGeneratingPreviewURL = useRef(false)\n\n // we need to regenerate the preview URL every time the button is clicked\n // to do this we need to fetch the document data fresh from the API\n // this will ensure the latest data is used when generating the preview URL\n const generatePreviewURL = useCallback(\n async ({ openPreviewWindow = false }) => {\n if (isGeneratingPreviewURL.current) {\n return\n }\n isGeneratingPreviewURL.current = true\n\n try {\n setIsLoading(true)\n\n let url = `${serverURL}${api}`\n if (collectionSlug) {\n url = `${url}/${collectionSlug}/${id}/preview`\n }\n if (globalSlug) {\n url = `${url}/globals/${globalSlug}/preview`\n }\n\n const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`)\n\n if (!res.ok) {\n throw new Error()\n }\n const newPreviewURL = await res.json()\n if (!newPreviewURL) {\n throw new Error()\n }\n setPreviewURL(newPreviewURL)\n setIsLoading(false)\n isGeneratingPreviewURL.current = false\n if (openPreviewWindow) {\n window.open(newPreviewURL, '_blank')\n }\n } catch (err) {\n setIsLoading(false)\n isGeneratingPreviewURL.current = false\n toast.error(t('error:previewing'))\n }\n },\n [serverURL, api, collectionSlug, globalSlug, id, locale, t],\n )\n\n return {\n generatePreviewURL,\n isLoading,\n label: isLoading ? t('general:loading') : t('version:preview'),\n previewURL,\n }\n}\n"],"mappings":"AAAA;;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,aAAA,GAAgBA,CAAA;EAM3B,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC;EAAU,CAAE,GAAGN,eAAA;EAE3C,MAAM,CAACO,SAAA,EAAWC,YAAA,CAAa,GAAGX,QAAA,CAAS;EAC3C,MAAM,CAACY,UAAA,EAAYC,aAAA,CAAc,GAAGb,QAAA,CAAS;EAC7C,MAAM;IAAEc,IAAA,EAAMC;EAAM,CAAE,GAAGX,SAAA;EAEzB,MAAM;IACJY,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGjB,SAAA;EAEJ,MAAM;IAAEkB;EAAC,CAAE,GAAGf,cAAA;EAEd,MAAMgB,sBAAA,GAAyBtB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAMuB,kBAAA,GAAqBxB,WAAA,CACzB,OAAO;IAAEyB,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;MAClC;IACF;IACAH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFb,YAAA,CAAa;MAEb,IAAIc,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIV,cAAA,EAAgB;QAClBiB,GAAA,GAAM,GAAGA,GAAA,IAAOjB,cAAA,IAAkBD,EAAA,UAAY;MAChD;MACA,IAAIE,UAAA,EAAY;QACdgB,GAAA,GAAM,GAAGA,GAAA,YAAehB,UAAA,UAAoB;MAC9C;MAEA,MAAMiB,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGF,GAAA,GAAMV,MAAA,GAAS,WAAWA,MAAA,EAAQ,GAAG,IAAI;MAEpE,IAAI,CAACW,GAAA,CAAIE,EAAE,EAAE;QACX,MAAM,IAAIC,KAAA;MACZ;MACA,MAAMC,aAAA,GAAgB,MAAMJ,GAAA,CAAIK,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe;QAClB,MAAM,IAAID,KAAA;MACZ;MACAhB,aAAA,CAAciB,aAAA;MACdnB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmB;QACrBS,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;MAC7B;IACF,EAAE,OAAOI,GAAA,EAAK;MACZvB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjCvB,KAAA,CAAMkC,KAAK,CAACf,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKV,cAAA,EAAgBC,UAAA,EAAYF,EAAA,EAAIQ,MAAA,EAAQK,CAAA,CAAE;EAG7D,OAAO;IACLE,kBAAA;IACAZ,SAAA;IACA0B,KAAA,EAAO1B,SAAA,GAAYU,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CR;EACF;AACF","ignoreList":[]}
1
+ {"version":3,"file":"usePreviewURL.js","names":["qs","useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","versions","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","hasVersions","totalDocs","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","params","draft","undefined","res","fetch","stringify","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport * as qs from 'qs-esm'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n isLoading: boolean\n label: string\n previewURL: string\n} => {\n const { id, collectionSlug, globalSlug, versions } = useDocumentInfo()\n\n const [isLoading, setIsLoading] = useState(false)\n const [previewURL, setPreviewURL] = useState('')\n const { code: locale } = useLocale()\n\n const hasVersions = versions?.totalDocs > 0\n\n const {\n config: {\n routes: { api },\n serverURL,\n },\n } = useConfig()\n\n const { t } = useTranslation()\n\n const isGeneratingPreviewURL = useRef(false)\n\n // we need to regenerate the preview URL every time the button is clicked\n // to do this we need to fetch the document data fresh from the API\n // this will ensure the latest data is used when generating the preview URL\n const generatePreviewURL = useCallback(\n async ({ openPreviewWindow = false }) => {\n if (isGeneratingPreviewURL.current) {\n return\n }\n isGeneratingPreviewURL.current = true\n\n try {\n setIsLoading(true)\n\n let url = `${serverURL}${api}`\n if (collectionSlug) {\n url = `${url}/${collectionSlug}/${id}/preview`\n }\n if (globalSlug) {\n url = `${url}/globals/${globalSlug}/preview`\n }\n\n const params = {\n draft: hasVersions ? 'true' : 'false',\n locale: locale || undefined,\n }\n\n const res = await fetch(`${url}?${qs.stringify(params)}`)\n\n if (!res.ok) {\n throw new Error()\n }\n const newPreviewURL = await res.json()\n if (!newPreviewURL) {\n throw new Error()\n }\n setPreviewURL(newPreviewURL)\n setIsLoading(false)\n isGeneratingPreviewURL.current = false\n if (openPreviewWindow) {\n window.open(newPreviewURL, '_blank')\n }\n } catch (err) {\n setIsLoading(false)\n isGeneratingPreviewURL.current = false\n toast.error(t('error:previewing'))\n }\n },\n [serverURL, api, collectionSlug, globalSlug, hasVersions, locale, id, t],\n )\n\n return {\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n generatePreviewURL,\n isLoading,\n label: isLoading ? t('general:loading') : t('version:preview'),\n previewURL,\n }\n}\n"],"mappings":"AAAA;;AACA,YAAYA,EAAA,MAAQ;AACpB,SAASC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,aAAA,GAAgBA,CAAA;EAM3B,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC,UAAU;IAAEC;EAAQ,CAAE,GAAGP,eAAA;EAErD,MAAM,CAACQ,SAAA,EAAWC,YAAA,CAAa,GAAGZ,QAAA,CAAS;EAC3C,MAAM,CAACa,UAAA,EAAYC,aAAA,CAAc,GAAGd,QAAA,CAAS;EAC7C,MAAM;IAAEe,IAAA,EAAMC;EAAM,CAAE,GAAGZ,SAAA;EAEzB,MAAMa,WAAA,GAAcP,QAAA,EAAUQ,SAAA,GAAY;EAE1C,MAAM;IACJC,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGpB,SAAA;EAEJ,MAAM;IAAEqB;EAAC,CAAE,GAAGlB,cAAA;EAEd,MAAMmB,sBAAA,GAAyBzB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAM0B,kBAAA,GAAqB3B,WAAA,CACzB,OAAO;IAAE4B,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;MAClC;IACF;IACAH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFf,YAAA,CAAa;MAEb,IAAIgB,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIb,cAAA,EAAgB;QAClBoB,GAAA,GAAM,GAAGA,GAAA,IAAOpB,cAAA,IAAkBD,EAAA,UAAY;MAChD;MACA,IAAIE,UAAA,EAAY;QACdmB,GAAA,GAAM,GAAGA,GAAA,YAAenB,UAAA,UAAoB;MAC9C;MAEA,MAAMoB,MAAA,GAAS;QACbC,KAAA,EAAOb,WAAA,GAAc,SAAS;QAC9BD,MAAA,EAAQA,MAAA,IAAUe;MACpB;MAEA,MAAMC,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGL,GAAA,IAAO/B,EAAA,CAAGqC,SAAS,CAACL,MAAA,GAAS;MAExD,IAAI,CAACG,GAAA,CAAIG,EAAE,EAAE;QACX,MAAM,IAAIC,KAAA;MACZ;MACA,MAAMC,aAAA,GAAgB,MAAML,GAAA,CAAIM,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe;QAClB,MAAM,IAAID,KAAA;MACZ;MACAtB,aAAA,CAAcuB,aAAA;MACdzB,YAAA,CAAa;MACbY,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmB;QACrBa,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;MAC7B;IACF,EAAE,OAAOI,GAAA,EAAK;MACZ7B,YAAA,CAAa;MACbY,sBAAA,CAAuBG,OAAO,GAAG;MACjC1B,KAAA,CAAMyC,KAAK,CAACnB,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKb,cAAA,EAAgBC,UAAA,EAAYQ,WAAA,EAAaD,MAAA,EAAQT,EAAA,EAAIgB,CAAA,CAAE;EAG1E,OAAO;IACL;IACAE,kBAAA;IACAd,SAAA;IACAgC,KAAA,EAAOhC,SAAA,GAAYY,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CV;EACF;AACF","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CA8F7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKzC,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAyI7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKzC,CAAA"}