@payloadcms/ui 3.27.0-canary.672dace → 3.27.0-canary.7f71c2e

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 (218) hide show
  1. package/dist/elements/BulkUpload/FormsManager/createFormData.d.ts.map +1 -1
  2. package/dist/elements/BulkUpload/FormsManager/createFormData.js +2 -3
  3. package/dist/elements/BulkUpload/FormsManager/createFormData.js.map +1 -1
  4. package/dist/elements/ColumnSelector/index.js +1 -1
  5. package/dist/elements/ColumnSelector/index.js.map +1 -1
  6. package/dist/elements/ColumnSelector/index.scss +2 -3
  7. package/dist/elements/DeleteDocument/index.d.ts.map +1 -1
  8. package/dist/elements/DeleteDocument/index.js +1 -2
  9. package/dist/elements/DeleteDocument/index.js.map +1 -1
  10. package/dist/elements/DeleteMany/index.d.ts.map +1 -1
  11. package/dist/elements/DeleteMany/index.js +1 -1
  12. package/dist/elements/DeleteMany/index.js.map +1 -1
  13. package/dist/elements/DocumentDrawer/DrawerContent.d.ts.map +1 -1
  14. package/dist/elements/DocumentDrawer/DrawerContent.js +2 -1
  15. package/dist/elements/DocumentDrawer/DrawerContent.js.map +1 -1
  16. package/dist/elements/DocumentDrawer/types.d.ts +4 -0
  17. package/dist/elements/DocumentDrawer/types.d.ts.map +1 -1
  18. package/dist/elements/DocumentDrawer/types.js.map +1 -1
  19. package/dist/elements/EditMany/DrawerContent.d.ts.map +1 -1
  20. package/dist/elements/EditMany/DrawerContent.js +1 -1
  21. package/dist/elements/EditMany/DrawerContent.js.map +1 -1
  22. package/dist/elements/ListControls/ActiveListPreset/index.d.ts +8 -0
  23. package/dist/elements/ListControls/ActiveListPreset/index.d.ts.map +1 -0
  24. package/dist/elements/ListControls/ActiveListPreset/index.js +102 -0
  25. package/dist/elements/ListControls/ActiveListPreset/index.js.map +1 -0
  26. package/dist/elements/ListControls/ActiveListPreset/index.scss +21 -0
  27. package/dist/elements/ListControls/index.d.ts +1 -24
  28. package/dist/elements/ListControls/index.d.ts.map +1 -1
  29. package/dist/elements/ListControls/index.js +115 -86
  30. package/dist/elements/ListControls/index.js.map +1 -1
  31. package/dist/elements/ListControls/index.scss +5 -9
  32. package/dist/elements/ListControls/types.d.ts +28 -0
  33. package/dist/elements/ListControls/types.d.ts.map +1 -0
  34. package/dist/elements/ListControls/types.js.map +1 -0
  35. package/dist/elements/ListControls/useListPresets.d.ts +17 -0
  36. package/dist/elements/ListControls/useListPresets.d.ts.map +1 -0
  37. package/dist/elements/ListControls/useListPresets.js +264 -0
  38. package/dist/elements/ListControls/useListPresets.js.map +1 -0
  39. package/dist/elements/ListDrawer/DrawerContent.d.ts.map +1 -1
  40. package/dist/elements/ListDrawer/DrawerContent.js +4 -2
  41. package/dist/elements/ListDrawer/DrawerContent.js.map +1 -1
  42. package/dist/elements/ListDrawer/types.d.ts +3 -2
  43. package/dist/elements/ListDrawer/types.d.ts.map +1 -1
  44. package/dist/elements/ListDrawer/types.js.map +1 -1
  45. package/dist/elements/ListPresets/cells/AccessCell/index.d.ts +4 -0
  46. package/dist/elements/ListPresets/cells/AccessCell/index.d.ts.map +1 -0
  47. package/dist/elements/ListPresets/cells/AccessCell/index.js +25 -0
  48. package/dist/elements/ListPresets/cells/AccessCell/index.js.map +1 -0
  49. package/dist/elements/ListPresets/cells/ColumnsCell/index.d.ts +4 -0
  50. package/dist/elements/ListPresets/cells/ColumnsCell/index.d.ts.map +1 -0
  51. package/dist/elements/ListPresets/cells/ColumnsCell/index.js +11 -0
  52. package/dist/elements/ListPresets/cells/ColumnsCell/index.js.map +1 -0
  53. package/dist/elements/ListPresets/cells/WhereCell/index.d.ts +4 -0
  54. package/dist/elements/ListPresets/cells/WhereCell/index.d.ts.map +1 -0
  55. package/dist/elements/ListPresets/cells/WhereCell/index.js +23 -0
  56. package/dist/elements/ListPresets/cells/WhereCell/index.js.map +1 -0
  57. package/dist/elements/ListPresets/fields/AccessLabel/index.d.ts +3 -0
  58. package/dist/elements/ListPresets/fields/AccessLabel/index.d.ts.map +1 -0
  59. package/dist/elements/ListPresets/fields/AccessLabel/index.js +19 -0
  60. package/dist/elements/ListPresets/fields/AccessLabel/index.js.map +1 -0
  61. package/dist/elements/ListPresets/fields/ColumnsField/index.d.ts +4 -0
  62. package/dist/elements/ListPresets/fields/ColumnsField/index.d.ts.map +1 -0
  63. package/dist/elements/ListPresets/fields/ColumnsField/index.js +64 -0
  64. package/dist/elements/ListPresets/fields/ColumnsField/index.js.map +1 -0
  65. package/dist/elements/ListPresets/fields/ColumnsField/index.scss +28 -0
  66. package/dist/elements/ListPresets/fields/WhereField/index.d.ts +4 -0
  67. package/dist/elements/ListPresets/fields/WhereField/index.d.ts.map +1 -0
  68. package/dist/elements/ListPresets/fields/WhereField/index.js +118 -0
  69. package/dist/elements/ListPresets/fields/WhereField/index.js.map +1 -0
  70. package/dist/elements/ListPresets/fields/WhereField/index.scss +23 -0
  71. package/dist/elements/Pill/index.d.ts +1 -1
  72. package/dist/elements/Pill/index.d.ts.map +1 -1
  73. package/dist/elements/Pill/index.js +2 -0
  74. package/dist/elements/Pill/index.js.map +1 -1
  75. package/dist/elements/Pill/index.scss +29 -6
  76. package/dist/elements/Popup/PopupButtonList/index.d.ts +1 -1
  77. package/dist/elements/Popup/PopupButtonList/index.d.ts.map +1 -1
  78. package/dist/elements/Popup/PopupButtonList/index.js +1 -0
  79. package/dist/elements/Popup/PopupButtonList/index.js.map +1 -1
  80. package/dist/elements/Popup/PopupDivider/index.d.ts +4 -0
  81. package/dist/elements/Popup/PopupDivider/index.d.ts.map +1 -0
  82. package/dist/elements/Popup/PopupDivider/index.js +10 -0
  83. package/dist/elements/Popup/PopupDivider/index.js.map +1 -0
  84. package/dist/elements/Popup/PopupDivider/index.scss +10 -0
  85. package/dist/elements/Popup/index.d.ts.map +1 -1
  86. package/dist/elements/Popup/index.js +1 -1
  87. package/dist/elements/Popup/index.js.map +1 -1
  88. package/dist/elements/RelationshipTable/cells/DrawerLink/index.js +1 -1
  89. package/dist/elements/RelationshipTable/cells/DrawerLink/index.js.map +1 -1
  90. package/dist/elements/RelationshipTable/index.d.ts.map +1 -1
  91. package/dist/elements/RelationshipTable/index.js +3 -4
  92. package/dist/elements/RelationshipTable/index.js.map +1 -1
  93. package/dist/elements/WhereBuilder/index.d.ts.map +1 -1
  94. package/dist/elements/WhereBuilder/index.js +1 -2
  95. package/dist/elements/WhereBuilder/index.js.map +1 -1
  96. package/dist/exports/client/index.d.ts +8 -2
  97. package/dist/exports/client/index.d.ts.map +1 -1
  98. package/dist/exports/client/index.js +23 -23
  99. package/dist/exports/client/index.js.map +4 -4
  100. package/dist/exports/shared/index.d.ts +8 -3
  101. package/dist/exports/shared/index.d.ts.map +1 -1
  102. package/dist/exports/shared/index.js +2 -2
  103. package/dist/exports/shared/index.js.map +4 -4
  104. package/dist/forms/Form/index.d.ts.map +1 -1
  105. package/dist/forms/Form/index.js +2 -3
  106. package/dist/forms/Form/index.js.map +1 -1
  107. package/dist/icons/Chevron/index.d.ts +1 -0
  108. package/dist/icons/Chevron/index.d.ts.map +1 -1
  109. package/dist/icons/Chevron/index.js +2 -0
  110. package/dist/icons/Chevron/index.js.map +1 -1
  111. package/dist/icons/Dots/index.d.ts +2 -0
  112. package/dist/icons/Dots/index.d.ts.map +1 -1
  113. package/dist/icons/Dots/index.js +5 -2
  114. package/dist/icons/Dots/index.js.map +1 -1
  115. package/dist/icons/Dots/index.scss +14 -0
  116. package/dist/icons/People/index.d.ts +6 -0
  117. package/dist/icons/People/index.d.ts.map +1 -0
  118. package/dist/icons/People/index.js +18 -0
  119. package/dist/icons/People/index.js.map +1 -0
  120. package/dist/icons/People/index.scss +11 -0
  121. package/dist/providers/DocumentInfo/types.d.ts +1 -0
  122. package/dist/providers/DocumentInfo/types.d.ts.map +1 -1
  123. package/dist/providers/DocumentInfo/types.js.map +1 -1
  124. package/dist/providers/ListQuery/context.d.ts +2 -0
  125. package/dist/providers/ListQuery/context.d.ts.map +1 -1
  126. package/dist/providers/ListQuery/context.js +2 -0
  127. package/dist/providers/ListQuery/context.js.map +1 -1
  128. package/dist/providers/ListQuery/index.d.ts.map +1 -1
  129. package/dist/providers/ListQuery/index.js +25 -13
  130. package/dist/providers/ListQuery/index.js.map +1 -1
  131. package/dist/providers/ListQuery/types.d.ts +5 -2
  132. package/dist/providers/ListQuery/types.d.ts.map +1 -1
  133. package/dist/providers/ListQuery/types.js.map +1 -1
  134. package/dist/providers/Preferences/index.d.ts.map +1 -1
  135. package/dist/providers/Preferences/index.js.map +1 -1
  136. package/dist/providers/ServerFunctions/index.d.ts +1 -0
  137. package/dist/providers/ServerFunctions/index.d.ts.map +1 -1
  138. package/dist/providers/ServerFunctions/index.js.map +1 -1
  139. package/dist/providers/TableColumns/RenderDefaultCell/index.d.ts.map +1 -0
  140. package/dist/{elements → providers}/TableColumns/RenderDefaultCell/index.js +2 -2
  141. package/dist/providers/TableColumns/RenderDefaultCell/index.js.map +1 -0
  142. package/dist/{elements → providers}/TableColumns/buildColumnState.d.ts +1 -1
  143. package/dist/providers/TableColumns/buildColumnState.d.ts.map +1 -0
  144. package/dist/{elements → providers}/TableColumns/buildColumnState.js +1 -1
  145. package/dist/providers/TableColumns/buildColumnState.js.map +1 -0
  146. package/dist/{elements → providers}/TableColumns/buildPolymorphicColumnState.d.ts +1 -1
  147. package/dist/providers/TableColumns/buildPolymorphicColumnState.d.ts.map +1 -0
  148. package/dist/{elements → providers}/TableColumns/buildPolymorphicColumnState.js +1 -1
  149. package/dist/providers/TableColumns/buildPolymorphicColumnState.js.map +1 -0
  150. package/dist/{elements → providers}/TableColumns/context.d.ts +2 -0
  151. package/dist/providers/TableColumns/context.d.ts.map +1 -0
  152. package/dist/providers/TableColumns/context.js +6 -0
  153. package/dist/providers/TableColumns/context.js.map +1 -0
  154. package/dist/providers/TableColumns/filterFields.d.ts.map +1 -0
  155. package/dist/providers/TableColumns/filterFields.js.map +1 -0
  156. package/dist/providers/TableColumns/getInitialColumns.d.ts.map +1 -0
  157. package/dist/providers/TableColumns/getInitialColumns.js.map +1 -0
  158. package/dist/providers/TableColumns/index.d.ts.map +1 -0
  159. package/dist/{elements → providers}/TableColumns/index.js +20 -6
  160. package/dist/providers/TableColumns/index.js.map +1 -0
  161. package/dist/{elements → providers}/TableColumns/types.d.ts +3 -1
  162. package/dist/providers/TableColumns/types.d.ts.map +1 -0
  163. package/dist/providers/TableColumns/types.js +2 -0
  164. package/dist/providers/TableColumns/types.js.map +1 -0
  165. package/dist/styles.css +1 -1
  166. package/dist/utilities/renderTable.js +4 -4
  167. package/dist/utilities/renderTable.js.map +1 -1
  168. package/dist/utilities/upsertPreferences.d.ts +7 -2
  169. package/dist/utilities/upsertPreferences.d.ts.map +1 -1
  170. package/dist/utilities/upsertPreferences.js +11 -5
  171. package/dist/utilities/upsertPreferences.js.map +1 -1
  172. package/dist/views/Edit/SetDocumentStepNav/index.d.ts.map +1 -1
  173. package/dist/views/Edit/SetDocumentStepNav/index.js +20 -25
  174. package/dist/views/Edit/SetDocumentStepNav/index.js.map +1 -1
  175. package/dist/views/Edit/index.d.ts.map +1 -1
  176. package/dist/views/Edit/index.js +4 -3
  177. package/dist/views/Edit/index.js.map +1 -1
  178. package/dist/views/List/index.d.ts.map +1 -1
  179. package/dist/views/List/index.js +9 -5
  180. package/dist/views/List/index.js.map +1 -1
  181. package/package.json +4 -4
  182. package/dist/elements/TableColumns/RenderDefaultCell/index.d.ts.map +0 -1
  183. package/dist/elements/TableColumns/RenderDefaultCell/index.js.map +0 -1
  184. package/dist/elements/TableColumns/buildColumnState.d.ts.map +0 -1
  185. package/dist/elements/TableColumns/buildColumnState.js.map +0 -1
  186. package/dist/elements/TableColumns/buildPolymorphicColumnState.d.ts.map +0 -1
  187. package/dist/elements/TableColumns/buildPolymorphicColumnState.js.map +0 -1
  188. package/dist/elements/TableColumns/context.d.ts.map +0 -1
  189. package/dist/elements/TableColumns/context.js +0 -4
  190. package/dist/elements/TableColumns/context.js.map +0 -1
  191. package/dist/elements/TableColumns/filterFields.d.ts.map +0 -1
  192. package/dist/elements/TableColumns/filterFields.js.map +0 -1
  193. package/dist/elements/TableColumns/getInitialColumns.d.ts.map +0 -1
  194. package/dist/elements/TableColumns/getInitialColumns.js.map +0 -1
  195. package/dist/elements/TableColumns/index.d.ts.map +0 -1
  196. package/dist/elements/TableColumns/index.js.map +0 -1
  197. package/dist/elements/TableColumns/types.d.ts.map +0 -1
  198. package/dist/elements/TableColumns/types.js.map +0 -1
  199. package/dist/elements/WhereBuilder/transformWhereQuery.d.ts +0 -8
  200. package/dist/elements/WhereBuilder/transformWhereQuery.d.ts.map +0 -1
  201. package/dist/elements/WhereBuilder/transformWhereQuery.js +0 -45
  202. package/dist/elements/WhereBuilder/transformWhereQuery.js.map +0 -1
  203. package/dist/elements/WhereBuilder/validateWhereQuery.d.ts +0 -4
  204. package/dist/elements/WhereBuilder/validateWhereQuery.d.ts.map +0 -1
  205. package/dist/elements/WhereBuilder/validateWhereQuery.js +0 -36
  206. package/dist/elements/WhereBuilder/validateWhereQuery.js.map +0 -1
  207. package/dist/utilities/mergeListSearchAndWhere.d.ts +0 -10
  208. package/dist/utilities/mergeListSearchAndWhere.d.ts.map +0 -1
  209. package/dist/utilities/mergeListSearchAndWhere.js +0 -47
  210. package/dist/utilities/mergeListSearchAndWhere.js.map +0 -1
  211. /package/dist/elements/{TableColumns → ListControls}/types.js +0 -0
  212. /package/dist/{elements → providers}/TableColumns/RenderDefaultCell/index.d.ts +0 -0
  213. /package/dist/{elements → providers}/TableColumns/RenderDefaultCell/index.scss +0 -0
  214. /package/dist/{elements → providers}/TableColumns/filterFields.d.ts +0 -0
  215. /package/dist/{elements → providers}/TableColumns/filterFields.js +0 -0
  216. /package/dist/{elements → providers}/TableColumns/getInitialColumns.d.ts +0 -0
  217. /package/dist/{elements → providers}/TableColumns/getInitialColumns.js +0 -0
  218. /package/dist/{elements → providers}/TableColumns/index.d.ts +0 -0
@@ -0,0 +1,64 @@
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 { toWords, transformColumnsToSearchParams } from 'payload/shared';
6
+ import React from 'react';
7
+ import { Pill } from '../../../../elements/Pill/index.js';
8
+ import { FieldLabel } from '../../../../fields/FieldLabel/index.js';
9
+ import { useField } from '../../../../forms/useField/index.js';
10
+ import './index.scss';
11
+ export const ListPresetsColumnsField = t0 => {
12
+ const $ = _c(7);
13
+ const {
14
+ field: t1,
15
+ path
16
+ } = t0;
17
+ const {
18
+ label,
19
+ required
20
+ } = t1;
21
+ let t2;
22
+ if ($[0] !== path) {
23
+ t2 = {
24
+ path
25
+ };
26
+ $[0] = path;
27
+ $[1] = t2;
28
+ } else {
29
+ t2 = $[1];
30
+ }
31
+ const {
32
+ value
33
+ } = useField(t2);
34
+ let t3;
35
+ if ($[2] !== label || $[3] !== path || $[4] !== required || $[5] !== value) {
36
+ t3 = _jsxs("div", {
37
+ className: "field-type list-preset-columns-field",
38
+ children: [_jsx(FieldLabel, {
39
+ as: "h3",
40
+ label,
41
+ path,
42
+ required
43
+ }), _jsx("div", {
44
+ className: "value-wrapper",
45
+ children: value ? transformColumnsToSearchParams(value).map(_temp) : "No columns selected"
46
+ })]
47
+ });
48
+ $[2] = label;
49
+ $[3] = path;
50
+ $[4] = required;
51
+ $[5] = value;
52
+ $[6] = t3;
53
+ } else {
54
+ t3 = $[6];
55
+ }
56
+ return t3;
57
+ };
58
+ function _temp(column, i) {
59
+ return _jsx(Pill, {
60
+ pillStyle: "always-white",
61
+ children: toWords(column)
62
+ }, i);
63
+ }
64
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["c","_c","toWords","transformColumnsToSearchParams","React","Pill","FieldLabel","useField","ListPresetsColumnsField","t0","$","field","t1","path","label","required","t2","value","t3","_jsxs","className","children","_jsx","as","map","_temp","column","i","pillStyle"],"sources":["../../../../../src/elements/ListPresets/fields/ColumnsField/index.tsx"],"sourcesContent":["'use client'\nimport type { ColumnPreference, JSONFieldClientComponent } from 'payload'\n\nimport { toWords, transformColumnsToSearchParams } from 'payload/shared'\nimport React from 'react'\n\nimport { Pill } from '../../../../elements/Pill/index.js'\nimport { FieldLabel } from '../../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../../forms/useField/index.js'\nimport './index.scss'\n\nexport const ListPresetsColumnsField: JSONFieldClientComponent = ({\n field: { label, required },\n path,\n}) => {\n const { value } = useField({ path })\n\n return (\n <div className=\"field-type list-preset-columns-field\">\n <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n <div className=\"value-wrapper\">\n {value\n ? transformColumnsToSearchParams(value as ColumnPreference[]).map((column, i) => (\n <Pill key={i} pillStyle=\"always-white\">\n {toWords(column)}\n </Pill>\n ))\n : 'No columns selected'}\n </div>\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,OAAO,EAAEC,8BAA8B,QAAQ;AACxD,OAAOC,KAAA,MAAW;AAElB,SAASC,IAAI,QAAQ;AACrB,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,OAAO,MAAMC,uBAAA,GAAoDC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,KAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAJ,EAGjE;EAFQ;IAAAK,KAAA;IAAAC;EAAA,IAAAH,EAAmB;EAAA,IAAAI,EAAA;EAAA,IAAAN,CAAA,QAAAG,IAAA;IAGCG,EAAA;MAAAH;IAAA;IAAOH,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAlC;IAAAO;EAAA,IAAkBV,QAAA,CAASS,EAAO;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAI,KAAA,IAAAJ,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAK,QAAA,IAAAL,CAAA,QAAAO,KAAA;IAGhCC,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAAhB,UAAA;QAAAiB,EAAA,EAAe;QAAAT,KAAA;QAAAD,IAAA;QAAAE;MAAA,C,GACfO,IAAA,CAAC;QAAAF,SAAA,EAAc;QAAAC,QAAA,EACZJ,KAAA,GACGd,8BAAA,CAA+Bc,KAAA,EAAAO,GAAA,CAAAC,KAClB,IAIb;MAAA,C;;;;;;;;;;SATRP,E;CAaJ;AApBiE,SAAAO,MAAAC,MAAA,EAAAC,CAAA;EAAA,OAYnDL,IAAA,CAAAjB,IAAA;IAAAuB,SAAA,EAAwB;IAAAP,QAAA,EACrBnB,OAAA,CAAQwB,MAAA;EAAA,GADAC,CAAA;AAAA","ignoreList":[]}
@@ -0,0 +1,28 @@
1
+ @import '../../../../scss/styles';
2
+
3
+ @layer payload-default {
4
+ .list-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
+
18
+ html[data-theme='dark'] {
19
+ .list-preset-columns-field {
20
+ .pill {
21
+ &--style-always-white {
22
+ background: var(--theme-elevation-250);
23
+ color: var(--theme-elevation-1000);
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
@@ -0,0 +1,4 @@
1
+ import type { JSONFieldClientComponent } from 'payload';
2
+ import './index.scss';
3
+ export declare const ListPresetsWhereField: JSONFieldClientComponent;
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ListPresets/fields/WhereField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAS,MAAM,SAAS,CAAA;AAY9D,OAAO,cAAc,CAAA;AAsErB,eAAO,MAAM,qBAAqB,EAAE,wBAyBnC,CAAA"}
@@ -0,0 +1,118 @@
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 { getTranslation } from '@payloadcms/translations';
6
+ import { toWords } from 'payload/shared';
7
+ import React from 'react';
8
+ import { FieldLabel } from '../../../../fields/FieldLabel/index.js';
9
+ import { useField } from '../../../../forms/useField/index.js';
10
+ import { useConfig } from '../../../../providers/Config/index.js';
11
+ import { useListQuery } from '../../../../providers/ListQuery/index.js';
12
+ import { useTranslation } from '../../../../providers/Translation/index.js';
13
+ import { Pill } from '../../../Pill/index.js';
14
+ import './index.scss';
15
+ /** @todo: improve this */
16
+ const transformWhereToNaturalLanguage = (where, collectionLabel) => {
17
+ if (!where) {
18
+ return null;
19
+ }
20
+ const renderCondition = condition => {
21
+ const key = Object.keys(condition)[0];
22
+ const operator = Object.keys(condition[key])[0];
23
+ let value = condition[key][operator];
24
+ // TODO: this is not right, but works for now at least.
25
+ // Ideally we look up iterate _fields_ so we know the type of the field
26
+ // Currently, we're only iterating over the `where` field's value, so we don't know the type
27
+ if (typeof value === 'object') {
28
+ try {
29
+ value = new Date(value).toLocaleDateString();
30
+ } catch (_err) {
31
+ value = 'Unknown error has occurred';
32
+ }
33
+ }
34
+ return /*#__PURE__*/_jsxs(Pill, {
35
+ pillStyle: "always-white",
36
+ children: [/*#__PURE__*/_jsx("b", {
37
+ children: toWords(key)
38
+ }), " ", operator, " ", /*#__PURE__*/_jsx("b", {
39
+ children: toWords(value)
40
+ })]
41
+ });
42
+ };
43
+ const renderWhere = (where, collectionLabel) => {
44
+ if (where.or && where.or.length > 0) {
45
+ return /*#__PURE__*/_jsx("div", {
46
+ className: "or-condition",
47
+ children: where.or.map((orCondition, orIndex) => /*#__PURE__*/_jsx(React.Fragment, {
48
+ children: orCondition.and && orCondition.and.length > 0 ? /*#__PURE__*/_jsxs("div", {
49
+ className: "and-condition",
50
+ children: [orIndex === 0 && /*#__PURE__*/_jsx("span", {
51
+ className: "label",
52
+ children: `Filter ${collectionLabel} where `
53
+ }), orIndex > 0 && /*#__PURE__*/_jsx("span", {
54
+ className: "label",
55
+ children: " or "
56
+ }), orCondition.and.map((andCondition, andIndex) => /*#__PURE__*/_jsxs(React.Fragment, {
57
+ children: [renderCondition(andCondition), andIndex < orCondition.and.length - 1 && /*#__PURE__*/_jsx("span", {
58
+ className: "label",
59
+ children: " and "
60
+ })]
61
+ }, andIndex))]
62
+ }) : renderCondition(orCondition)
63
+ }, orIndex))
64
+ });
65
+ }
66
+ return renderCondition(where);
67
+ };
68
+ return renderWhere(where, collectionLabel);
69
+ };
70
+ export const ListPresetsWhereField = t0 => {
71
+ const $ = _c(2);
72
+ const {
73
+ field: t1,
74
+ path
75
+ } = t0;
76
+ const {
77
+ label,
78
+ required
79
+ } = t1;
80
+ let t2;
81
+ if ($[0] !== path) {
82
+ t2 = {
83
+ path
84
+ };
85
+ $[0] = path;
86
+ $[1] = t2;
87
+ } else {
88
+ t2 = $[1];
89
+ }
90
+ const {
91
+ value
92
+ } = useField(t2);
93
+ const {
94
+ collectionSlug
95
+ } = useListQuery();
96
+ const {
97
+ getEntityConfig
98
+ } = useConfig();
99
+ const collectionConfig = getEntityConfig({
100
+ collectionSlug
101
+ });
102
+ const {
103
+ i18n
104
+ } = useTranslation();
105
+ return _jsxs("div", {
106
+ className: "field-type list-preset-where-field",
107
+ children: [_jsx(FieldLabel, {
108
+ as: "h3",
109
+ label,
110
+ path,
111
+ required
112
+ }), _jsx("div", {
113
+ className: "value-wrapper",
114
+ children: value ? transformWhereToNaturalLanguage(value, getTranslation(collectionConfig.labels.plural, i18n)) : "No where query"
115
+ })]
116
+ });
117
+ };
118
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["c","_c","getTranslation","toWords","React","FieldLabel","useField","useConfig","useListQuery","useTranslation","Pill","transformWhereToNaturalLanguage","where","collectionLabel","renderCondition","condition","key","Object","keys","operator","value","Date","toLocaleDateString","_err","_jsxs","pillStyle","_jsx","renderWhere","or","length","className","map","orCondition","orIndex","Fragment","and","andCondition","andIndex","ListPresetsWhereField","t0","$","field","t1","path","label","required","t2","collectionSlug","getEntityConfig","collectionConfig","i18n","children","as","labels","plural"],"sources":["../../../../../src/elements/ListPresets/fields/WhereField/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientComponent, Where } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { toWords } from 'payload/shared'\nimport React from 'react'\n\nimport { FieldLabel } from '../../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../../forms/useField/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useListQuery } from '../../../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Pill } from '../../../Pill/index.js'\nimport './index.scss'\n\n/** @todo: improve this */\nconst transformWhereToNaturalLanguage = (\n where: Where,\n collectionLabel: string,\n): React.ReactNode => {\n if (!where) {\n return null\n }\n\n const renderCondition = (condition: any): React.ReactNode => {\n const key = Object.keys(condition)[0]\n const operator = Object.keys(condition[key])[0]\n let value = condition[key][operator]\n\n // TODO: this is not right, but works for now at least.\n // Ideally we look up iterate _fields_ so we know the type of the field\n // Currently, we're only iterating over the `where` field's value, so we don't know the type\n if (typeof value === 'object') {\n try {\n value = new Date(value).toLocaleDateString()\n } catch (_err) {\n value = 'Unknown error has occurred'\n }\n }\n\n return (\n <Pill pillStyle=\"always-white\">\n <b>{toWords(key)}</b> {operator} <b>{toWords(value)}</b>\n </Pill>\n )\n }\n\n const renderWhere = (where: Where, collectionLabel: string): React.ReactNode => {\n if (where.or && where.or.length > 0) {\n return (\n <div className=\"or-condition\">\n {where.or.map((orCondition, orIndex) => (\n <React.Fragment key={orIndex}>\n {orCondition.and && orCondition.and.length > 0 ? (\n <div className=\"and-condition\">\n {orIndex === 0 && (\n <span className=\"label\">{`Filter ${collectionLabel} where `}</span>\n )}\n {orIndex > 0 && <span className=\"label\"> or </span>}\n {orCondition.and.map((andCondition, andIndex) => (\n <React.Fragment key={andIndex}>\n {renderCondition(andCondition)}\n {andIndex < orCondition.and.length - 1 && (\n <span className=\"label\"> and </span>\n )}\n </React.Fragment>\n ))}\n </div>\n ) : (\n renderCondition(orCondition)\n )}\n </React.Fragment>\n ))}\n </div>\n )\n }\n\n return renderCondition(where)\n }\n\n return renderWhere(where, collectionLabel)\n}\n\nexport const ListPresetsWhereField: JSONFieldClientComponent = ({\n field: { label, required },\n path,\n}) => {\n const { value } = useField({ path })\n const { collectionSlug } = useListQuery()\n const { getEntityConfig } = useConfig()\n\n const collectionConfig = getEntityConfig({ collectionSlug })\n\n const { i18n } = useTranslation()\n\n return (\n <div className=\"field-type list-preset-where-field\">\n <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n <div className=\"value-wrapper\">\n {value\n ? transformWhereToNaturalLanguage(\n value as Where,\n getTranslation(collectionConfig.labels.plural, i18n),\n )\n : 'No where query'}\n </div>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,23 @@
1
+ @import '../../../../scss/styles';
2
+
3
+ @layer payload-default {
4
+ .list-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
+ .list-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
+ }
@@ -15,7 +15,7 @@ export type PillProps = {
15
15
  icon?: React.ReactNode;
16
16
  id?: string;
17
17
  onClick?: () => void;
18
- pillStyle?: 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white';
18
+ pillStyle?: 'always-white' | 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white';
19
19
  rounded?: boolean;
20
20
  size?: 'medium' | 'small';
21
21
  to?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE;QACb,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACpC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACvF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAGD,OAAO,cAAc,CAAA;AAwFrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE;QACb,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACpC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EACN,cAAc,GACd,MAAM,GACN,OAAO,GACP,OAAO,GACP,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAGD,OAAO,cAAc,CAAA;AA2FrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,CAAA"}
@@ -69,6 +69,7 @@ const DraggablePill = props => {
69
69
  };
70
70
  const StaticPill = props => {
71
71
  const {
72
+ id,
72
73
  alignIcon = 'right',
73
74
  'aria-checked': ariaChecked,
74
75
  'aria-controls': ariaControls,
@@ -101,6 +102,7 @@ const StaticPill = props => {
101
102
  "aria-label": ariaLabel,
102
103
  className: classes,
103
104
  href: to || null,
105
+ id: id,
104
106
  onClick: onClick,
105
107
  type: Element === 'button' ? 'button' : undefined,
106
108
  children: [/*#__PURE__*/_jsx("span", {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["c","_c","React","Link","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","classes","Element","_jsxs","href","type","undefined","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\n\nexport type PillProps = {\n alignIcon?: 'left' | 'right'\n 'aria-checked'?: boolean\n 'aria-controls'?: string\n 'aria-expanded'?: boolean\n 'aria-label'?: string\n children?: React.ReactNode\n className?: string\n draggable?: boolean\n elementProps?: {\n ref: React.RefCallback<HTMLElement>\n } & HTMLAttributes<HTMLElement>\n icon?: React.ReactNode\n id?: string\n onClick?: () => void\n pillStyle?: 'dark' | 'error' | 'light' | 'light-gray' | 'success' | 'warning' | 'white'\n rounded?: boolean\n size?: 'medium' | 'small'\n to?: string\n}\n\nexport type RenderedTypeProps = {\n children: React.ReactNode\n className?: string\n onClick?: () => void\n to: string\n type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n const { id, className } = props\n\n const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n id,\n })\n\n return (\n <StaticPill\n {...props}\n className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n elementProps={{\n ...listeners,\n ...attributes,\n ref: setNodeRef,\n style: {\n transform,\n },\n }}\n />\n )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n const {\n alignIcon = 'right',\n 'aria-checked': ariaChecked,\n 'aria-controls': ariaControls,\n 'aria-expanded': ariaExpanded,\n 'aria-label': ariaLabel,\n children,\n className,\n draggable,\n elementProps,\n icon,\n onClick,\n pillStyle = 'light',\n rounded,\n size = 'medium',\n to,\n } = props\n\n const classes = [\n baseClass,\n `${baseClass}--style-${pillStyle}`,\n `${baseClass}--size-${size}`,\n className && className,\n to && `${baseClass}--has-link`,\n (to || onClick) && `${baseClass}--has-action`,\n icon && `${baseClass}--has-icon`,\n icon && `${baseClass}--align-icon-${alignIcon}`,\n draggable && `${baseClass}--draggable`,\n rounded && `${baseClass}--rounded`,\n ]\n .filter(Boolean)\n .join(' ')\n\n let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n if (onClick && !to) {\n Element = 'button'\n }\n if (to) {\n Element = Link\n }\n\n return (\n <Element\n {...elementProps}\n aria-checked={ariaChecked}\n aria-controls={ariaControls}\n aria-expanded={ariaExpanded}\n aria-label={ariaLabel}\n className={classes}\n href={to || null}\n onClick={onClick}\n type={Element === 'button' ? 'button' : undefined}\n >\n <span className={`${baseClass}__label`}>{children}</span>\n {Boolean(icon) && <span className={`${baseClass}__icon`}>{icon}</span>}\n </Element>\n )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n const { draggable } = props\n\n if (draggable) {\n return <DraggablePill {...props} />\n }\n return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["c","_c","React","Link","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","classes","Element","_jsxs","href","type","undefined","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\n\nexport type PillProps = {\n alignIcon?: 'left' | 'right'\n 'aria-checked'?: boolean\n 'aria-controls'?: string\n 'aria-expanded'?: boolean\n 'aria-label'?: string\n children?: React.ReactNode\n className?: string\n draggable?: boolean\n elementProps?: {\n ref: React.RefCallback<HTMLElement>\n } & HTMLAttributes<HTMLElement>\n icon?: React.ReactNode\n id?: string\n onClick?: () => void\n pillStyle?:\n | 'always-white'\n | 'dark'\n | 'error'\n | 'light'\n | 'light-gray'\n | 'success'\n | 'warning'\n | 'white'\n rounded?: boolean\n size?: 'medium' | 'small'\n to?: string\n}\n\nexport type RenderedTypeProps = {\n children: React.ReactNode\n className?: string\n onClick?: () => void\n to: string\n type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n const { id, className } = props\n\n const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n id,\n })\n\n return (\n <StaticPill\n {...props}\n className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n elementProps={{\n ...listeners,\n ...attributes,\n ref: setNodeRef,\n style: {\n transform,\n },\n }}\n />\n )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n const {\n id,\n alignIcon = 'right',\n 'aria-checked': ariaChecked,\n 'aria-controls': ariaControls,\n 'aria-expanded': ariaExpanded,\n 'aria-label': ariaLabel,\n children,\n className,\n draggable,\n elementProps,\n icon,\n onClick,\n pillStyle = 'light',\n rounded,\n size = 'medium',\n to,\n } = props\n\n const classes = [\n baseClass,\n `${baseClass}--style-${pillStyle}`,\n `${baseClass}--size-${size}`,\n className && className,\n to && `${baseClass}--has-link`,\n (to || onClick) && `${baseClass}--has-action`,\n icon && `${baseClass}--has-icon`,\n icon && `${baseClass}--align-icon-${alignIcon}`,\n draggable && `${baseClass}--draggable`,\n rounded && `${baseClass}--rounded`,\n ]\n .filter(Boolean)\n .join(' ')\n\n let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n if (onClick && !to) {\n Element = 'button'\n }\n\n if (to) {\n Element = Link\n }\n\n return (\n <Element\n {...elementProps}\n aria-checked={ariaChecked}\n aria-controls={ariaControls}\n aria-expanded={ariaExpanded}\n aria-label={ariaLabel}\n className={classes}\n href={to || null}\n id={id}\n onClick={onClick}\n type={Element === 'button' ? 'button' : undefined}\n >\n <span className={`${baseClass}__label`}>{children}</span>\n {Boolean(icon) && <span className={`${baseClass}__icon`}>{icon}</span>}\n </Element>\n )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n const { draggable } = props\n\n if (draggable) {\n return <DraggablePill {...props} />\n }\n return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
@@ -73,22 +73,28 @@
73
73
  background: var(--theme-elevation-0);
74
74
 
75
75
  &.pill--has-action {
76
- &:hover {
76
+ &:hover,
77
+ &:active {
77
78
  background: var(--theme-elevation-100);
78
79
  }
80
+ }
81
+ }
79
82
 
83
+ &--style-always-white {
84
+ background: var(--theme-elevation-850);
85
+ color: var(--theme-elevation-0);
86
+
87
+ &.pill--has-action {
88
+ &:hover,
80
89
  &:active {
81
- background: var(--theme-elevation-100);
90
+ background: var(--theme-elevation-750);
82
91
  }
83
92
  }
84
93
  }
85
94
 
86
95
  &--style-light {
87
96
  &.pill--has-action {
88
- &:hover {
89
- background: var(--theme-elevation-100);
90
- }
91
-
97
+ &:hover,
92
98
  &:active {
93
99
  background: var(--theme-elevation-100);
94
100
  }
@@ -139,4 +145,21 @@
139
145
  line-height: 18px;
140
146
  }
141
147
  }
148
+
149
+ html[data-theme='light'] {
150
+ .pill {
151
+ &--style-always-white {
152
+ background: var(--theme-elevation-0);
153
+ color: var(--theme-elevation-800);
154
+ border: 1px solid var(--theme-elevation-100);
155
+
156
+ &.pill--has-action {
157
+ &:hover,
158
+ &:active {
159
+ background: var(--theme-elevation-100);
160
+ }
161
+ }
162
+ }
163
+ }
164
+ }
142
165
  }
@@ -1,6 +1,7 @@
1
1
  import type { LinkProps } from 'next/link.js';
2
2
  import * as React from 'react';
3
3
  import './index.scss';
4
+ export { Divider } from '../PopupDivider/index.js';
4
5
  export declare const ButtonGroup: React.FC<{
5
6
  buttonSize?: 'default' | 'small';
6
7
  children: React.ReactNode;
@@ -17,5 +18,4 @@ type MenuButtonProps = {
17
18
  onClick?: (e?: React.MouseEvent) => void;
18
19
  };
19
20
  export declare const Button: React.FC<MenuButtonProps>;
20
- export {};
21
21
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuD5C,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAIrB,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAElD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuD5C,CAAA"}
@@ -5,6 +5,7 @@ import * as React from 'react';
5
5
  import { Link } from '../../Link/index.js';
6
6
  import './index.scss';
7
7
  const baseClass = 'popup-button-list';
8
+ export { Divider } from '../PopupDivider/index.js';
8
9
  export const ButtonGroup = ({
9
10
  buttonSize = 'default',
10
11
  children,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","Link","baseClass","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","Button","id","active","disabled","href","onClick","e","prefetch","type"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkProps } from 'next/link.js'\n\nimport * as React from 'react'\n\nimport { Link } from '../../Link/index.js'\nimport './index.scss'\n\nconst baseClass = 'popup-button-list'\n\nexport const ButtonGroup: React.FC<{\n buttonSize?: 'default' | 'small'\n children: React.ReactNode\n className?: string\n textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n const classes = [\n baseClass,\n className,\n `${baseClass}__text-align--${textAlign}`,\n `${baseClass}__button-size--${buttonSize}`,\n ]\n .filter(Boolean)\n .join(' ')\n return <div className={classes}>{children}</div>\n}\n\ntype MenuButtonProps = {\n active?: boolean\n children: React.ReactNode\n className?: string\n disabled?: boolean\n href?: LinkProps['href']\n id?: string\n onClick?: (e?: React.MouseEvent) => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n id,\n active,\n children,\n className,\n disabled,\n href,\n onClick,\n}) => {\n const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className]\n .filter(Boolean)\n .join(' ')\n\n if (!disabled) {\n if (href) {\n return (\n <Link\n className={classes}\n href={href}\n id={id}\n onClick={(e) => {\n if (onClick) {\n onClick(e)\n }\n }}\n prefetch={false}\n >\n {children}\n </Link>\n )\n }\n\n if (onClick) {\n return (\n <button\n className={classes}\n id={id}\n onClick={(e) => {\n if (onClick) {\n onClick(e)\n }\n }}\n type=\"button\"\n >\n {children}\n </button>\n )\n }\n }\n\n return (\n <div className={classes} id={id}>\n {children}\n </div>\n )\n}\n"],"mappings":"AAAA;;;AAGA,YAAYA,KAAA,MAAW;AAEvB,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAKRA,CAAC;EAAEC,UAAA,GAAa,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,SAAA,GAAY;AAAM,CAAE;EACvE,MAAMC,OAAA,GAAU,CACdN,SAAA,EACAI,SAAA,EACA,GAAGJ,SAAA,iBAA0BK,SAAA,EAAW,EACxC,GAAGL,SAAA,kBAA2BE,UAAA,EAAY,CAC3C,CACEK,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EACR,oBAAOC,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;cAAUH;;AACnC;AAYA,OAAO,MAAMQ,MAAA,GAAoCA,CAAC;EAChDC,EAAE;EACFC,MAAM;EACNV,QAAQ;EACRC,SAAS;EACTU,QAAQ;EACRC,IAAI;EACJC;AAAO,CACR;EACC,MAAMV,OAAA,GAAU,CAAC,GAAGN,SAAA,UAAmB,EAAEa,MAAA,IAAU,GAAGb,SAAA,oBAA6B,EAAEI,SAAA,CAAU,CAC5FG,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAI,CAACK,QAAA,EAAU;IACb,IAAIC,IAAA,EAAM;MACR,oBACEL,IAAA,CAACX,IAAA;QACCK,SAAA,EAAWE,OAAA;QACXS,IAAA,EAAMA,IAAA;QACNH,EAAA,EAAIA,EAAA;QACJI,OAAA,EAAUC,CAAA;UACR,IAAID,OAAA,EAAS;YACXA,OAAA,CAAQC,CAAA;UACV;QACF;QACAC,QAAA,EAAU;kBAETf;;IAGP;IAEA,IAAIa,OAAA,EAAS;MACX,oBACEN,IAAA,CAAC;QACCN,SAAA,EAAWE,OAAA;QACXM,EAAA,EAAIA,EAAA;QACJI,OAAA,EAAUC,CAAA;UACR,IAAID,OAAA,EAAS;YACXA,OAAA,CAAQC,CAAA;UACV;QACF;QACAE,IAAA,EAAK;kBAEJhB;;IAGP;EACF;EAEA,oBACEO,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;IAASM,EAAA,EAAIA,EAAA;cAC1BT;;AAGP","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","Link","baseClass","Divider","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","Button","id","active","disabled","href","onClick","e","prefetch","type"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkProps } from 'next/link.js'\n\nimport * as React from 'react'\n\nimport { Link } from '../../Link/index.js'\nimport './index.scss'\n\nconst baseClass = 'popup-button-list'\n\nexport { Divider } from '../PopupDivider/index.js'\n\nexport const ButtonGroup: React.FC<{\n buttonSize?: 'default' | 'small'\n children: React.ReactNode\n className?: string\n textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n const classes = [\n baseClass,\n className,\n `${baseClass}__text-align--${textAlign}`,\n `${baseClass}__button-size--${buttonSize}`,\n ]\n .filter(Boolean)\n .join(' ')\n return <div className={classes}>{children}</div>\n}\n\ntype MenuButtonProps = {\n active?: boolean\n children: React.ReactNode\n className?: string\n disabled?: boolean\n href?: LinkProps['href']\n id?: string\n onClick?: (e?: React.MouseEvent) => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n id,\n active,\n children,\n className,\n disabled,\n href,\n onClick,\n}) => {\n const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className]\n .filter(Boolean)\n .join(' ')\n\n if (!disabled) {\n if (href) {\n return (\n <Link\n className={classes}\n href={href}\n id={id}\n onClick={(e) => {\n if (onClick) {\n onClick(e)\n }\n }}\n prefetch={false}\n >\n {children}\n </Link>\n )\n }\n\n if (onClick) {\n return (\n <button\n className={classes}\n id={id}\n onClick={(e) => {\n if (onClick) {\n onClick(e)\n }\n }}\n type=\"button\"\n >\n {children}\n </button>\n )\n }\n }\n\n return (\n <div className={classes} id={id}>\n {children}\n </div>\n )\n}\n"],"mappings":"AAAA;;;AAGA,YAAYA,KAAA,MAAW;AAEvB,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,SAASC,OAAO,QAAQ;AAExB,OAAO,MAAMC,WAAA,GAKRA,CAAC;EAAEC,UAAA,GAAa,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,SAAA,GAAY;AAAM,CAAE;EACvE,MAAMC,OAAA,GAAU,CACdP,SAAA,EACAK,SAAA,EACA,GAAGL,SAAA,iBAA0BM,SAAA,EAAW,EACxC,GAAGN,SAAA,kBAA2BG,UAAA,EAAY,CAC3C,CACEK,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EACR,oBAAOC,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;cAAUH;;AACnC;AAYA,OAAO,MAAMQ,MAAA,GAAoCA,CAAC;EAChDC,EAAE;EACFC,MAAM;EACNV,QAAQ;EACRC,SAAS;EACTU,QAAQ;EACRC,IAAI;EACJC;AAAO,CACR;EACC,MAAMV,OAAA,GAAU,CAAC,GAAGP,SAAA,UAAmB,EAAEc,MAAA,IAAU,GAAGd,SAAA,oBAA6B,EAAEK,SAAA,CAAU,CAC5FG,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAI,CAACK,QAAA,EAAU;IACb,IAAIC,IAAA,EAAM;MACR,oBACEL,IAAA,CAACZ,IAAA;QACCM,SAAA,EAAWE,OAAA;QACXS,IAAA,EAAMA,IAAA;QACNH,EAAA,EAAIA,EAAA;QACJI,OAAA,EAAUC,CAAA;UACR,IAAID,OAAA,EAAS;YACXA,OAAA,CAAQC,CAAA;UACV;QACF;QACAC,QAAA,EAAU;kBAETf;;IAGP;IAEA,IAAIa,OAAA,EAAS;MACX,oBACEN,IAAA,CAAC;QACCN,SAAA,EAAWE,OAAA;QACXM,EAAA,EAAIA,EAAA;QACJI,OAAA,EAAUC,CAAA;UACR,IAAID,OAAA,EAAS;YACXA,OAAA,CAAQC,CAAA;UACV;QACF;QACAE,IAAA,EAAK;kBAEJhB;;IAGP;EACF;EAEA,oBACEO,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;IAASM,EAAA,EAAIA,EAAA;cAC1BT;;AAGP","ignoreList":[]}
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import './index.scss';
3
+ export declare const Divider: React.FC;
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAE3B,CAAA"}
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import './index.scss';
4
+ const baseClass = 'popup-divider';
5
+ export const Divider = () => {
6
+ return /*#__PURE__*/_jsx("hr", {
7
+ className: baseClass
8
+ });
9
+ };
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","baseClass","Divider","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-divider'\n\nexport const Divider: React.FC = () => {\n return <hr className={baseClass} />\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAoBA,CAAA;EAC/B,oBAAOC,IAAA,CAAC;IAAGC,SAAA,EAAWH;;AACxB","ignoreList":[]}
@@ -0,0 +1,10 @@
1
+ @import '../../../scss/styles.scss';
2
+
3
+ @layer payload-default {
4
+ .popup-divider {
5
+ width: 100%;
6
+ height: 1px;
7
+ background-color: var(--theme-elevation-150);
8
+ border: none;
9
+ }
10
+ }
@@ -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,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,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,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,CAyLtC,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;AAIvE,OAAO,cAAc,CAAA;AAIrB,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,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,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,CAyLtC,CAAA"}
@@ -5,8 +5,8 @@ export * as PopupList from './PopupButtonList/index.js';
5
5
  import { useWindowInfo } from '@faceless-ui/window-info';
6
6
  import React, { useCallback, useEffect, useRef, useState } from 'react';
7
7
  import { useIntersect } from '../../hooks/useIntersect.js';
8
- import './index.scss';
9
8
  import { PopupTrigger } from './PopupTrigger/index.js';
9
+ import './index.scss';
10
10
  const baseClass = 'popup';
11
11
  export const Popup = props => {
12
12
  const {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","id","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 id?: string\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 id,\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} id={id}>\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":[]}
1
+ {"version":3,"file":"index.js","names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","id","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 { PopupTrigger } from './PopupTrigger/index.js'\nimport './index.scss'\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 id?: string\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 id,\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} id={id}>\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":[]}
@@ -4,9 +4,9 @@ import { c as _c } from "react/compiler-runtime";
4
4
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
5
5
  import React, { useCallback } from 'react';
6
6
  import { EditIcon } from '../../../../icons/Edit/index.js';
7
+ import { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js';
7
8
  import { useDocumentDrawer } from '../../../DocumentDrawer/index.js';
8
9
  import { DefaultCell } from '../../../Table/DefaultCell/index.js';
9
- import { useCellProps } from '../../../TableColumns/RenderDefaultCell/index.js';
10
10
  import './index.scss';
11
11
  export const DrawerLink = props => {
12
12
  const $ = _c(15);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["c","_c","React","useCallback","EditIcon","useDocumentDrawer","DefaultCell","useCellProps","DrawerLink","props","$","onDrawerDelete","onDrawerDeleteFromProps","onDrawerSave","onDrawerSaveFromProps","cellProps","t0","rowData","id","t1","collectionSlug","t2","DocumentDrawer","DocumentDrawerToggler","t3","closeDrawer","t4","args","t5","args_0","t6","_jsxs","className","children","_jsx","link","onClick","onDelete","onSave"],"sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback } from 'react'\n\nimport type { DocumentDrawerProps } from '../../../DocumentDrawer/types.js'\n\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../../DocumentDrawer/index.js'\nimport { DefaultCell } from '../../../Table/DefaultCell/index.js'\nimport { useCellProps } from '../../../TableColumns/RenderDefaultCell/index.js'\nimport './index.scss'\n\nexport const DrawerLink: React.FC<{\n readonly onDrawerDelete?: DocumentDrawerProps['onDelete']\n readonly onDrawerSave?: DocumentDrawerProps['onSave']\n}> = (props) => {\n const { onDrawerDelete: onDrawerDeleteFromProps, onDrawerSave: onDrawerSaveFromProps } = props\n\n const cellProps = useCellProps()\n\n const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n id: cellProps?.rowData.id,\n collectionSlug: cellProps?.collectionSlug,\n })\n\n const onDrawerSave = useCallback<DocumentDrawerProps['onSave']>(\n (args) => {\n closeDrawer()\n\n if (typeof onDrawerSaveFromProps === 'function') {\n void onDrawerSaveFromProps(args)\n }\n },\n [closeDrawer, onDrawerSaveFromProps],\n )\n\n const onDrawerDelete = useCallback<DocumentDrawerProps['onDelete']>(\n (args) => {\n closeDrawer()\n\n if (typeof onDrawerDeleteFromProps === 'function') {\n void onDrawerDeleteFromProps(args)\n }\n },\n [closeDrawer, onDrawerDeleteFromProps],\n )\n\n return (\n <div className=\"drawer-link\">\n <DefaultCell {...cellProps} className=\"drawer-link__cell\" link={false} onClick={null} />\n <DocumentDrawerToggler>\n <EditIcon />\n </DocumentDrawerToggler>\n <DocumentDrawer onDelete={onDrawerDelete} onSave={onDrawerSave} />\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,QAAQ,QAAQ;AACzB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,WAAW,QAAQ;AAC5B,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,OAAO,MAAMC,UAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,cAAA,EAAAC,uBAAA;IAAAC,YAAA,EAAAC;EAAA,IAAyFL,KAAA;EAEzF,MAAAM,SAAA,GAAkBR,YAAA;EAGZ,MAAAS,EAAA,GAAAD,SAAA,EAAAE,OAAA,CAAAC,EAAA;EACY,MAAAC,EAAA,GAAAJ,SAAA,EAAAK,cAAA;EAAW,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAS,EAAA;IAFsDE,EAAA;MAAAH,EAAA,EAC7EF,EAAmB;MAAAI,cAAA,EACPD;IAAW;IAC7BT,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAHA,OAAAY,cAAA,EAAAC,qBAAA,EAAAC,EAAA,IAAiEnB,iBAAA,CAAkBgB,EAGnF;EAH8C;IAAAI;EAAA,IAAAD,EAAe;EAAA,IAAAE,EAAA;EAAA,IAAAhB,CAAA,QAAAe,WAAA,IAAAf,CAAA,QAAAI,qBAAA;IAM3DY,EAAA,GAAAC,IAAA;MACEF,WAAA;MAAA,IAEI,OAAOX,qBAAA,KAA0B;QAC9BA,qBAAA,CAAsBa,IAAA;MAAA;IAAA;IAE/BjB,CAAA,MAAAe,WAAA;IAAAf,CAAA,MAAAI,qBAAA;IAAAJ,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPF,MAAAG,YAAA,GAAqBa,EAQiB;EAAA,IAAAE,EAAA;EAAA,IAAAlB,CAAA,QAAAe,WAAA,IAAAf,CAAA,QAAAE,uBAAA;IAIpCgB,EAAA,GAAAC,MAAA;MACEJ,WAAA;MAAA,IAEI,OAAOb,uBAAA,KAA4B;QAChCA,uBAAA,CAAwBe,MAAA;MAAA;IAAA;IAEjCjB,CAAA,MAAAe,WAAA;IAAAf,CAAA,MAAAE,uBAAA;IAAAF,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAPF,MAAAC,cAAA,GAAuBiB,EAQiB;EAAA,IAAAE,EAAA;EAAA,IAAApB,CAAA,QAAAY,cAAA,IAAAZ,CAAA,SAAAa,qBAAA,IAAAb,CAAA,SAAAK,SAAA,IAAAL,CAAA,SAAAC,cAAA,IAAAD,CAAA,SAAAG,YAAA;IAItCiB,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAA5B,WAAA;QAAA,GAAiBS,SAAS;QAAAiB,SAAA,EAAY;QAAAG,IAAA;QAAAC,OAAA;MAAA,C,GACtCF,IAAA,CAACX,qBAAA;QAAAU,QAAA,EACCC,IAAA,CAAA9B,QAAA,IAAC;MAAA,C,GAEH8B,IAAA,CAACZ,cAAA;QAAAe,QAAA,EAAyB1B,cAAA;QAAA2B,MAAA,EAAwBzB;MAAA,C;;;;;;;;;;;SALpDiB,E;CAQJ","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["c","_c","React","useCallback","EditIcon","useCellProps","useDocumentDrawer","DefaultCell","DrawerLink","props","$","onDrawerDelete","onDrawerDeleteFromProps","onDrawerSave","onDrawerSaveFromProps","cellProps","t0","rowData","id","t1","collectionSlug","t2","DocumentDrawer","DocumentDrawerToggler","t3","closeDrawer","t4","args","t5","args_0","t6","_jsxs","className","children","_jsx","link","onClick","onDelete","onSave"],"sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback } from 'react'\n\nimport type { DocumentDrawerProps } from '../../../DocumentDrawer/types.js'\n\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js'\nimport { useDocumentDrawer } from '../../../DocumentDrawer/index.js'\nimport { DefaultCell } from '../../../Table/DefaultCell/index.js'\nimport './index.scss'\n\nexport const DrawerLink: React.FC<{\n readonly onDrawerDelete?: DocumentDrawerProps['onDelete']\n readonly onDrawerSave?: DocumentDrawerProps['onSave']\n}> = (props) => {\n const { onDrawerDelete: onDrawerDeleteFromProps, onDrawerSave: onDrawerSaveFromProps } = props\n\n const cellProps = useCellProps()\n\n const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n id: cellProps?.rowData.id,\n collectionSlug: cellProps?.collectionSlug,\n })\n\n const onDrawerSave = useCallback<DocumentDrawerProps['onSave']>(\n (args) => {\n closeDrawer()\n\n if (typeof onDrawerSaveFromProps === 'function') {\n void onDrawerSaveFromProps(args)\n }\n },\n [closeDrawer, onDrawerSaveFromProps],\n )\n\n const onDrawerDelete = useCallback<DocumentDrawerProps['onDelete']>(\n (args) => {\n closeDrawer()\n\n if (typeof onDrawerDeleteFromProps === 'function') {\n void onDrawerDeleteFromProps(args)\n }\n },\n [closeDrawer, onDrawerDeleteFromProps],\n )\n\n return (\n <div className=\"drawer-link\">\n <DefaultCell {...cellProps} className=\"drawer-link__cell\" link={false} onClick={null} />\n <DocumentDrawerToggler>\n <EditIcon />\n </DocumentDrawerToggler>\n <DocumentDrawer onDelete={onDrawerDelete} onSave={onDrawerSave} />\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,OAAO,MAAMC,UAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,cAAA,EAAAC,uBAAA;IAAAC,YAAA,EAAAC;EAAA,IAAyFL,KAAA;EAEzF,MAAAM,SAAA,GAAkBV,YAAA;EAGZ,MAAAW,EAAA,GAAAD,SAAA,EAAAE,OAAA,CAAAC,EAAA;EACY,MAAAC,EAAA,GAAAJ,SAAA,EAAAK,cAAA;EAAW,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAS,EAAA;IAFsDE,EAAA;MAAAH,EAAA,EAC7EF,EAAmB;MAAAI,cAAA,EACPD;IAAW;IAC7BT,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAHA,OAAAY,cAAA,EAAAC,qBAAA,EAAAC,EAAA,IAAiElB,iBAAA,CAAkBe,EAGnF;EAH8C;IAAAI;EAAA,IAAAD,EAAe;EAAA,IAAAE,EAAA;EAAA,IAAAhB,CAAA,QAAAe,WAAA,IAAAf,CAAA,QAAAI,qBAAA;IAM3DY,EAAA,GAAAC,IAAA;MACEF,WAAA;MAAA,IAEI,OAAOX,qBAAA,KAA0B;QAC9BA,qBAAA,CAAsBa,IAAA;MAAA;IAAA;IAE/BjB,CAAA,MAAAe,WAAA;IAAAf,CAAA,MAAAI,qBAAA;IAAAJ,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPF,MAAAG,YAAA,GAAqBa,EAQiB;EAAA,IAAAE,EAAA;EAAA,IAAAlB,CAAA,QAAAe,WAAA,IAAAf,CAAA,QAAAE,uBAAA;IAIpCgB,EAAA,GAAAC,MAAA;MACEJ,WAAA;MAAA,IAEI,OAAOb,uBAAA,KAA4B;QAChCA,uBAAA,CAAwBe,MAAA;MAAA;IAAA;IAEjCjB,CAAA,MAAAe,WAAA;IAAAf,CAAA,MAAAE,uBAAA;IAAAF,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAPF,MAAAC,cAAA,GAAuBiB,EAQiB;EAAA,IAAAE,EAAA;EAAA,IAAApB,CAAA,QAAAY,cAAA,IAAAZ,CAAA,SAAAa,qBAAA,IAAAb,CAAA,SAAAK,SAAA,IAAAL,CAAA,SAAAC,cAAA,IAAAD,CAAA,SAAAG,YAAA;IAItCiB,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAA3B,WAAA;QAAA,GAAiBQ,SAAS;QAAAiB,SAAA,EAAY;QAAAG,IAAA;QAAAC,OAAA;MAAA,C,GACtCF,IAAA,CAACX,qBAAA;QAAAU,QAAA,EACCC,IAAA,CAAA9B,QAAA,IAAC;MAAA,C,GAEH8B,IAAA,CAACZ,cAAA;QAAAe,QAAA,EAAyB1B,cAAA;QAAA2B,MAAA,EAAwBzB;MAAA,C;;;;;;;;;;;SALpDiB,E;CAQJ","ignoreList":[]}