@firecms/collection_editor 3.0.0-canary.107 → 3.0.0-canary.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 (14) hide show
  1. package/dist/index.es.js +184 -105
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.umd.js +184 -105
  4. package/dist/index.umd.js.map +1 -1
  5. package/package.json +8 -8
  6. package/src/ui/CollectionViewHeaderAction.tsx +3 -1
  7. package/src/ui/EditorCollectionAction.tsx +1 -0
  8. package/src/ui/EditorCollectionActionStart.tsx +1 -0
  9. package/src/ui/PropertyAddColumnComponent.tsx +3 -1
  10. package/src/ui/collection_editor/CollectionDetailsForm.tsx +2 -1
  11. package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx +2 -1
  12. package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx +6 -3
  13. package/src/ui/collection_editor/PropertyTree.tsx +4 -2
  14. package/src/ui/collection_editor/SubcollectionsEditTab.tsx +4 -2
package/dist/index.es.js CHANGED
@@ -100,14 +100,21 @@ function CollectionDetailsForm({
100
100
  onDatabaseIdUpdate: updateDatabaseId
101
101
  }
102
102
  ),
103
- /* @__PURE__ */ jsx(Tooltip, { title: "Change icon", children: /* @__PURE__ */ jsx(
104
- IconButton,
103
+ /* @__PURE__ */ jsx(
104
+ Tooltip,
105
105
  {
106
- shape: "square",
107
- onClick: () => setIconDialogOpen(true),
108
- children: collectionIcon
106
+ title: "Change icon",
107
+ asChild: true,
108
+ children: /* @__PURE__ */ jsx(
109
+ IconButton,
110
+ {
111
+ shape: "square",
112
+ onClick: () => setIconDialogOpen(true),
113
+ children: collectionIcon
114
+ }
115
+ )
109
116
  }
110
- ) })
117
+ )
111
118
  ]
112
119
  }
113
120
  ),
@@ -1627,23 +1634,37 @@ function PropertyTreeEntry({
1627
1634
  ),
1628
1635
  /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 flex flex-row ", children: [
1629
1636
  isPropertyInferred && /* @__PURE__ */ jsx(Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsx(AutoAwesomeIcon, { size: "small", className: "p-2" }) }),
1630
- onPropertyRemove && /* @__PURE__ */ jsx(Tooltip, { title: "Remove", children: /* @__PURE__ */ jsx(
1631
- IconButton,
1637
+ onPropertyRemove && /* @__PURE__ */ jsx(
1638
+ Tooltip,
1632
1639
  {
1633
- size: "small",
1634
- color: "inherit",
1635
- onClick: () => onPropertyRemove(propertyKey, namespace),
1636
- children: /* @__PURE__ */ jsx(RemoveIcon, { size: "small" })
1640
+ title: "Remove",
1641
+ asChild: true,
1642
+ children: /* @__PURE__ */ jsx(
1643
+ IconButton,
1644
+ {
1645
+ size: "small",
1646
+ color: "inherit",
1647
+ onClick: () => onPropertyRemove(propertyKey, namespace),
1648
+ children: /* @__PURE__ */ jsx(RemoveIcon, { size: "small" })
1649
+ }
1650
+ )
1637
1651
  }
1638
- ) }),
1639
- onPropertyMove && /* @__PURE__ */ jsx(Tooltip, { title: "Move", children: /* @__PURE__ */ jsx(
1640
- IconButton,
1652
+ ),
1653
+ onPropertyMove && /* @__PURE__ */ jsx(
1654
+ Tooltip,
1641
1655
  {
1642
- component: "span",
1643
- size: "small",
1644
- children: /* @__PURE__ */ jsx(DragHandleIcon, { size: "small" })
1656
+ title: "Move",
1657
+ asChild: true,
1658
+ children: /* @__PURE__ */ jsx(
1659
+ IconButton,
1660
+ {
1661
+ component: "span",
1662
+ size: "small",
1663
+ children: /* @__PURE__ */ jsx(DragHandleIcon, { size: "small" })
1664
+ }
1665
+ )
1645
1666
  }
1646
- ) })
1667
+ )
1647
1668
  ] }),
1648
1669
  subtree && /* @__PURE__ */ jsx("div", { className: "ml-16", children: subtree })
1649
1670
  ]
@@ -3928,32 +3949,53 @@ function CollectionPropertiesEditorForm({
3928
3949
  ] }),
3929
3950
  extraIcon && /* @__PURE__ */ jsx("div", { className: "ml-4", children: extraIcon }),
3930
3951
  /* @__PURE__ */ jsxs("div", { className: "ml-1 mt-2 flex flex-row gap-2", children: [
3931
- /* @__PURE__ */ jsx(Tooltip, { title: "Get the code for this collection", children: /* @__PURE__ */ jsx(
3932
- IconButton,
3952
+ /* @__PURE__ */ jsx(
3953
+ Tooltip,
3933
3954
  {
3934
- variant: "filled",
3935
- disabled: inferringProperties,
3936
- onClick: () => setCodeDialogOpen(true),
3937
- children: /* @__PURE__ */ jsx(CodeIcon, {})
3955
+ title: "Get the code for this collection",
3956
+ asChild: true,
3957
+ children: /* @__PURE__ */ jsx(
3958
+ IconButton,
3959
+ {
3960
+ variant: "filled",
3961
+ disabled: inferringProperties,
3962
+ onClick: () => setCodeDialogOpen(true),
3963
+ children: /* @__PURE__ */ jsx(CodeIcon, {})
3964
+ }
3965
+ )
3938
3966
  }
3939
- ) }),
3940
- inferPropertiesFromData && /* @__PURE__ */ jsx(Tooltip, { title: "Add new properties based on data", children: /* @__PURE__ */ jsx(
3941
- IconButton,
3967
+ ),
3968
+ inferPropertiesFromData && /* @__PURE__ */ jsx(
3969
+ Tooltip,
3942
3970
  {
3943
- variant: "filled",
3944
- disabled: inferringProperties,
3945
- onClick: inferPropertiesFromData,
3946
- children: inferringProperties ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(AutoAwesomeIcon, {})
3971
+ title: "Add new properties based on data",
3972
+ asChild: true,
3973
+ children: /* @__PURE__ */ jsx(
3974
+ IconButton,
3975
+ {
3976
+ variant: "filled",
3977
+ disabled: inferringProperties,
3978
+ onClick: inferPropertiesFromData,
3979
+ children: inferringProperties ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(AutoAwesomeIcon, {})
3980
+ }
3981
+ )
3947
3982
  }
3948
- ) }),
3949
- /* @__PURE__ */ jsx(Tooltip, { title: "Add new property", children: /* @__PURE__ */ jsx(
3950
- Button,
3983
+ ),
3984
+ /* @__PURE__ */ jsx(
3985
+ Tooltip,
3951
3986
  {
3952
- variant: "outlined",
3953
- onClick: () => setNewPropertyDialogOpen(true),
3954
- children: /* @__PURE__ */ jsx(AddIcon, {})
3987
+ title: "Add new property",
3988
+ asChild: true,
3989
+ children: /* @__PURE__ */ jsx(
3990
+ Button,
3991
+ {
3992
+ variant: "outlined",
3993
+ onClick: () => setNewPropertyDialogOpen(true),
3994
+ children: /* @__PURE__ */ jsx(AddIcon, {})
3995
+ }
3996
+ )
3955
3997
  }
3956
- ) })
3998
+ )
3957
3999
  ] })
3958
4000
  ] }),
3959
4001
  /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
@@ -4197,19 +4239,26 @@ function SubcollectionsEditTab({
4197
4239
  TableCell,
4198
4240
  {
4199
4241
  align: "right",
4200
- children: /* @__PURE__ */ jsx(Tooltip, { title: "Remove", children: /* @__PURE__ */ jsx(
4201
- IconButton,
4242
+ children: /* @__PURE__ */ jsx(
4243
+ Tooltip,
4202
4244
  {
4203
- size: "small",
4204
- onClick: (e) => {
4205
- e.preventDefault();
4206
- e.stopPropagation();
4207
- setSubcollectionToDelete(subcollection.id);
4208
- },
4209
- color: "inherit",
4210
- children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" })
4245
+ title: "Remove",
4246
+ asChild: true,
4247
+ children: /* @__PURE__ */ jsx(
4248
+ IconButton,
4249
+ {
4250
+ size: "small",
4251
+ onClick: (e) => {
4252
+ e.preventDefault();
4253
+ e.stopPropagation();
4254
+ setSubcollectionToDelete(subcollection.id);
4255
+ },
4256
+ color: "inherit",
4257
+ children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" })
4258
+ }
4259
+ )
4211
4260
  }
4212
- ) })
4261
+ )
4213
4262
  }
4214
4263
  )
4215
4264
  ]
@@ -4259,19 +4308,26 @@ function SubcollectionsEditTab({
4259
4308
  TableCell,
4260
4309
  {
4261
4310
  align: "right",
4262
- children: /* @__PURE__ */ jsx(Tooltip, { title: "Remove", children: /* @__PURE__ */ jsx(
4263
- IconButton,
4311
+ children: /* @__PURE__ */ jsx(
4312
+ Tooltip,
4264
4313
  {
4265
- size: "small",
4266
- onClick: (e) => {
4267
- e.preventDefault();
4268
- e.stopPropagation();
4269
- setViewToDelete(view.key);
4270
- },
4271
- color: "inherit",
4272
- children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" })
4314
+ title: "Remove",
4315
+ asChild: true,
4316
+ children: /* @__PURE__ */ jsx(
4317
+ IconButton,
4318
+ {
4319
+ size: "small",
4320
+ onClick: (e) => {
4321
+ e.preventDefault();
4322
+ e.stopPropagation();
4323
+ setViewToDelete(view.key);
4324
+ },
4325
+ color: "inherit",
4326
+ children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" })
4327
+ }
4328
+ )
4273
4329
  }
4274
- ) })
4330
+ )
4275
4331
  }
4276
4332
  )
4277
4333
  ] }, view.key)),
@@ -4945,22 +5001,29 @@ function TemplateButton({
4945
5001
  icon,
4946
5002
  onClick
4947
5003
  }) {
4948
- return /* @__PURE__ */ jsx(Tooltip, { title: subtitle, children: /* @__PURE__ */ jsxs(
4949
- Card,
5004
+ return /* @__PURE__ */ jsx(
5005
+ Tooltip,
4950
5006
  {
4951
- onClick,
4952
- className: cls(
4953
- "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
4954
- "text-gray-700 dark:text-slate-300",
4955
- "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
4956
- "border-gray-400 dark:border-gray-600 "
4957
- ),
4958
- children: [
4959
- icon,
4960
- /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: title }) })
4961
- ]
5007
+ title: subtitle,
5008
+ asChild: true,
5009
+ children: /* @__PURE__ */ jsxs(
5010
+ Card,
5011
+ {
5012
+ onClick,
5013
+ className: cls(
5014
+ "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
5015
+ "text-gray-700 dark:text-slate-300",
5016
+ "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
5017
+ "border-gray-400 dark:border-gray-600 "
5018
+ ),
5019
+ children: [
5020
+ icon,
5021
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: title }) })
5022
+ ]
5023
+ }
5024
+ )
4962
5025
  }
4963
- ) });
5026
+ );
4964
5027
  }
4965
5028
  function CollectionEditorImportMapping({
4966
5029
  importConfig,
@@ -6173,6 +6236,7 @@ function EditorCollectionAction({
6173
6236
  const editorButton = /* @__PURE__ */ jsx(
6174
6237
  Tooltip,
6175
6238
  {
6239
+ asChild: true,
6176
6240
  title: canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection",
6177
6241
  children: /* @__PURE__ */ jsx(
6178
6242
  IconButton,
@@ -6281,24 +6345,31 @@ function CollectionViewHeaderAction({
6281
6345
  tableController
6282
6346
  }) {
6283
6347
  const collectionEditorController = useCollectionEditorController();
6284
- return /* @__PURE__ */ jsx(Tooltip, { title: "Edit", children: /* @__PURE__ */ jsx(
6285
- IconButton,
6348
+ return /* @__PURE__ */ jsx(
6349
+ Tooltip,
6286
6350
  {
6287
- className: onHover ? "bg-white dark:bg-gray-950" : "hidden",
6288
- onClick: () => {
6289
- collectionEditorController.editProperty({
6290
- propertyKey,
6291
- property,
6292
- editedCollectionId: collection.id,
6293
- parentCollectionIds,
6294
- collection,
6295
- existingEntities: tableController.data ?? []
6296
- });
6297
- },
6298
- size: "small",
6299
- children: /* @__PURE__ */ jsx(SettingsIcon, { size: "small" })
6351
+ asChild: true,
6352
+ title: "Edit",
6353
+ children: /* @__PURE__ */ jsx(
6354
+ IconButton,
6355
+ {
6356
+ className: onHover ? "bg-white dark:bg-gray-950" : "hidden",
6357
+ onClick: () => {
6358
+ collectionEditorController.editProperty({
6359
+ propertyKey,
6360
+ property,
6361
+ editedCollectionId: collection.id,
6362
+ parentCollectionIds,
6363
+ collection,
6364
+ existingEntities: tableController.data ?? []
6365
+ });
6366
+ },
6367
+ size: "small",
6368
+ children: /* @__PURE__ */ jsx(SettingsIcon, { size: "small" })
6369
+ }
6370
+ )
6300
6371
  }
6301
- ) });
6372
+ );
6302
6373
  }
6303
6374
  function PropertyAddColumnComponent({
6304
6375
  fullPath,
@@ -6312,22 +6383,29 @@ function PropertyAddColumnComponent({
6312
6383
  user: authController.user,
6313
6384
  collection
6314
6385
  }).editCollections : true;
6315
- return /* @__PURE__ */ jsx(Tooltip, { title: canEditCollection ? "Add new property" : "You don't have permission to add new properties", children: /* @__PURE__ */ jsx(
6316
- "div",
6386
+ return /* @__PURE__ */ jsx(
6387
+ Tooltip,
6317
6388
  {
6318
- className: "p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950",
6319
- onClick: () => {
6320
- collectionEditorController.editProperty({
6321
- editedCollectionId: collection.id,
6322
- parentCollectionIds,
6323
- currentPropertiesOrder: getDefaultPropertiesOrder(collection),
6324
- collection,
6325
- existingEntities: tableController.data
6326
- });
6327
- },
6328
- children: /* @__PURE__ */ jsx(AddIcon, { color: "inherit" })
6389
+ asChild: true,
6390
+ title: canEditCollection ? "Add new property" : "You don't have permission to add new properties",
6391
+ children: /* @__PURE__ */ jsx(
6392
+ "div",
6393
+ {
6394
+ className: "p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950",
6395
+ onClick: () => {
6396
+ collectionEditorController.editProperty({
6397
+ editedCollectionId: collection.id,
6398
+ parentCollectionIds,
6399
+ currentPropertiesOrder: getDefaultPropertiesOrder(collection),
6400
+ collection,
6401
+ existingEntities: tableController.data
6402
+ });
6403
+ },
6404
+ children: /* @__PURE__ */ jsx(AddIcon, { color: "inherit" })
6405
+ }
6406
+ )
6329
6407
  }
6330
- ) });
6408
+ );
6331
6409
  }
6332
6410
  function NewCollectionButton() {
6333
6411
  const collectionEditorController = useCollectionEditorController();
@@ -6368,6 +6446,7 @@ function EditorCollectionActionStart({
6368
6446
  /* @__PURE__ */ jsx(
6369
6447
  Tooltip,
6370
6448
  {
6449
+ asChild: true,
6371
6450
  title: tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort",
6372
6451
  children: /* @__PURE__ */ jsx(
6373
6452
  Button,