@firecms/core 3.0.0-canary.206 → 3.0.0-canary.208

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.
@@ -13,6 +13,10 @@ export interface ScaffoldProps {
13
13
  * Note that this has no effect if you are using a custom AppBar or Drawer.
14
14
  */
15
15
  logo?: string;
16
+ /**
17
+ * If true, the main content will be padded in large layouts. Defaults to true.
18
+ */
19
+ padding?: boolean;
16
20
  className?: string;
17
21
  style?: React.CSSProperties;
18
22
  }
@@ -1,11 +1,17 @@
1
1
  import React from "react";
2
2
  import { User } from "../types";
3
3
  export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
4
+ /**
5
+ * The content of the app bar, usually a title or logo. This includes a link to the home page.
6
+ */
4
7
  title?: React.ReactNode;
5
8
  /**
6
- * A component that gets rendered on the upper side of the main toolbar
9
+ * A component that gets rendered on the upper side to the end of the main toolbar
7
10
  */
8
11
  endAdornment?: React.ReactNode;
12
+ /**
13
+ * A component that gets rendered on the upper side to the start of the main toolbar
14
+ */
9
15
  startAdornment?: React.ReactNode;
10
16
  dropDownActions?: React.ReactNode;
11
17
  includeModeToggle?: boolean;
@@ -20,4 +26,4 @@ export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
20
26
  *
21
27
 
22
28
  */
23
- export declare const DefaultAppBar: ({ title, endAdornment, startAdornment, dropDownActions, includeModeToggle, className, style, user: userProp }: DefaultAppBarProps) => import("react/jsx-runtime").JSX.Element;
29
+ export declare const DefaultAppBar: ({ title, endAdornment, startAdornment, dropDownActions, includeModeToggle, className, style, user: userProp, logo: logoProp, }: DefaultAppBarProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,4 @@
1
- import { EntityCollection, FireCMSProps, User } from "../types";
1
+ import { FireCMSProps, User } from "../types";
2
2
  /**
3
3
  * If you are using independent components of the CMS
4
4
  * you need to wrap them with this main component, so the internal hooks work.
@@ -11,4 +11,4 @@ import { EntityCollection, FireCMSProps, User } from "../types";
11
11
 
12
12
  * @group Core
13
13
  */
14
- export declare function FireCMS<USER extends User, EC extends EntityCollection>(props: FireCMSProps<USER, EC>): import("react/jsx-runtime").JSX.Element;
14
+ export declare function FireCMS<USER extends User>(props: FireCMSProps<USER>): import("react/jsx-runtime").JSX.Element;
package/dist/index.es.js CHANGED
@@ -4518,7 +4518,7 @@ function useBuildNavigationController(props) {
4518
4518
  let shouldUpdateTopLevelNav = false;
4519
4519
  if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
4520
4520
  collectionsRef.current = resolvedCollections;
4521
- console.log("Collections have changed", resolvedCollections);
4521
+ console.debug("Collections have changed", resolvedCollections);
4522
4522
  shouldUpdateTopLevelNav = true;
4523
4523
  }
4524
4524
  if (collectionsRef.current === void 0) {
@@ -15390,14 +15390,16 @@ const DefaultAppBar = function DefaultAppBar2(t0) {
15390
15390
  includeModeToggle: t1,
15391
15391
  className,
15392
15392
  style,
15393
- user: userProp
15393
+ user: userProp,
15394
+ logo: logoProp
15394
15395
  } = t0;
15395
15396
  const includeModeToggle = t1 === void 0 ? true : t1;
15396
15397
  const {
15397
15398
  hasDrawer,
15398
15399
  drawerOpen,
15399
- logo
15400
+ logo: appLogo
15400
15401
  } = useApp();
15402
+ const logo = logoProp ?? appLogo;
15401
15403
  const navigation = useNavigationController();
15402
15404
  const breadcrumbs = useBreadcrumbsController();
15403
15405
  const authController = useAuthController();
@@ -15481,7 +15483,7 @@ const DefaultAppBar = function DefaultAppBar2(t0) {
15481
15483
  }
15482
15484
  let t7;
15483
15485
  if ($[18] !== breadcrumbs.breadcrumbs) {
15484
- t7 = breadcrumbs.breadcrumbs && /* @__PURE__ */ jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2", children: breadcrumbs.breadcrumbs.map(_temp$a) }) });
15486
+ t7 = (breadcrumbs.breadcrumbs ?? []).length > 0 && /* @__PURE__ */ jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2", children: breadcrumbs.breadcrumbs.map(_temp$a) }) });
15485
15487
  $[18] = breadcrumbs.breadcrumbs;
15486
15488
  $[19] = t7;
15487
15489
  } else {
@@ -23288,7 +23290,6 @@ function EntityFullScreenRoute({
23288
23290
  const collectionPath = navigation.resolveIdsFrom(isNew ? lastCollectionEntry.path : lastEntityEntry.path);
23289
23291
  return /* @__PURE__ */ jsxs(Fragment, { children: [
23290
23292
  /* @__PURE__ */ jsx(EntityEditView, { entityId: isNew ? void 0 : entityId, collection, layout: "full_screen", path: collectionPath, copy: isCopy, selectedTab: selectedTab ?? void 0, onValuesModified: (modified) => blocked.current = modified, onSaved: (params) => {
23291
- console.log("Entity saved", params);
23292
23293
  const newSelectedTab = params.selectedTab;
23293
23294
  const newEntityId = params.entityId;
23294
23295
  if (newSelectedTab) {
@@ -23515,92 +23516,94 @@ function AppBar(t0) {
23515
23516
  AppBar.componentType = "AppBar";
23516
23517
  const DRAWER_WIDTH = 280;
23517
23518
  const Scaffold = React__default.memo(function Scaffold2(props) {
23518
- const $ = c(46);
23519
+ const $ = c(48);
23519
23520
  const {
23520
23521
  children,
23521
23522
  autoOpenDrawer,
23522
23523
  logo,
23523
23524
  className,
23524
- style
23525
+ style,
23526
+ padding: t0
23525
23527
  } = props;
23526
- let t0;
23528
+ const padding = t0 === void 0 ? true : t0;
23529
+ let t1;
23527
23530
  if ($[0] !== children) {
23528
- t0 = React__default.Children.toArray(children).filter(_temp);
23531
+ t1 = React__default.Children.toArray(children).filter(_temp);
23529
23532
  $[0] = children;
23530
- $[1] = t0;
23533
+ $[1] = t1;
23531
23534
  } else {
23532
- t0 = $[1];
23535
+ t1 = $[1];
23533
23536
  }
23534
- const drawerChildren = t0;
23537
+ const drawerChildren = t1;
23535
23538
  if (drawerChildren.length > 1) {
23536
23539
  throw Error("Only one Drawer component is allowed in Scaffold");
23537
23540
  }
23538
- let t1;
23541
+ let t2;
23539
23542
  if ($[2] !== children) {
23540
- t1 = React__default.Children.toArray(children).filter(_temp2);
23543
+ t2 = React__default.Children.toArray(children).filter(_temp2);
23541
23544
  $[2] = children;
23542
- $[3] = t1;
23545
+ $[3] = t2;
23543
23546
  } else {
23544
- t1 = $[3];
23547
+ t2 = $[3];
23545
23548
  }
23546
- const appBarChildren = t1;
23549
+ const appBarChildren = t2;
23547
23550
  if (appBarChildren.length > 1) {
23548
23551
  throw Error("Only one AppBar component is allowed in Scaffold");
23549
23552
  }
23550
- let t2;
23553
+ let t3;
23551
23554
  if ($[4] !== children) {
23552
- t2 = React__default.Children.toArray(children).filter(_temp3);
23555
+ t3 = React__default.Children.toArray(children).filter(_temp3);
23553
23556
  $[4] = children;
23554
- $[5] = t2;
23557
+ $[5] = t3;
23555
23558
  } else {
23556
- t2 = $[5];
23559
+ t3 = $[5];
23557
23560
  }
23558
- const otherChildren = t2;
23561
+ const otherChildren = t3;
23559
23562
  const includeDrawer = drawerChildren.length > 0;
23560
23563
  const largeLayout = useLargeLayout();
23561
23564
  const [drawerOpen, setDrawerOpen] = React__default.useState(false);
23562
23565
  const [onHover, setOnHover] = React__default.useState(false);
23563
- let t3;
23566
+ let t4;
23564
23567
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
23565
- t3 = () => setOnHover(true);
23566
- $[6] = t3;
23568
+ t4 = () => setOnHover(true);
23569
+ $[6] = t4;
23567
23570
  } else {
23568
- t3 = $[6];
23571
+ t4 = $[6];
23569
23572
  }
23570
- const setOnHoverTrue = t3;
23571
- let t4;
23573
+ const setOnHoverTrue = t4;
23574
+ let t5;
23572
23575
  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
23573
- t4 = () => setOnHover(false);
23574
- $[7] = t4;
23576
+ t5 = () => setOnHover(false);
23577
+ $[7] = t5;
23575
23578
  } else {
23576
- t4 = $[7];
23579
+ t5 = $[7];
23577
23580
  }
23578
- const setOnHoverFalse = t4;
23579
- let t5;
23581
+ const setOnHoverFalse = t5;
23582
+ let t6;
23580
23583
  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
23581
- t5 = () => {
23584
+ t6 = () => {
23582
23585
  setDrawerOpen(true);
23583
23586
  };
23584
- $[8] = t5;
23587
+ $[8] = t6;
23585
23588
  } else {
23586
- t5 = $[8];
23589
+ t6 = $[8];
23587
23590
  }
23588
- const handleDrawerOpen = t5;
23589
- let t6;
23591
+ const handleDrawerOpen = t6;
23592
+ let t7;
23590
23593
  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
23591
- t6 = () => {
23594
+ t7 = () => {
23592
23595
  setDrawerOpen(false);
23593
23596
  };
23594
- $[9] = t6;
23597
+ $[9] = t7;
23595
23598
  } else {
23596
- t6 = $[9];
23599
+ t7 = $[9];
23597
23600
  }
23598
- const handleDrawerClose = t6;
23601
+ const handleDrawerClose = t7;
23599
23602
  const computedDrawerOpen = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
23600
23603
  const hasAppBar = Boolean(appBarChildren.length > 0);
23601
- let t7;
23604
+ let t8;
23602
23605
  if ($[10] !== autoOpenDrawer || $[11] !== computedDrawerOpen || $[12] !== includeDrawer || $[13] !== logo || $[14] !== onHover) {
23603
- t7 = {
23606
+ t8 = {
23604
23607
  logo,
23605
23608
  hasDrawer: includeDrawer,
23606
23609
  drawerHovered: onHover,
@@ -23614,21 +23617,21 @@ const Scaffold = React__default.memo(function Scaffold2(props) {
23614
23617
  $[12] = includeDrawer;
23615
23618
  $[13] = logo;
23616
23619
  $[14] = onHover;
23617
- $[15] = t7;
23620
+ $[15] = t8;
23618
23621
  } else {
23619
- t7 = $[15];
23622
+ t8 = $[15];
23620
23623
  }
23621
- let t8;
23624
+ let t9;
23622
23625
  if ($[16] !== className) {
23623
- t8 = cls("flex h-screen w-screen bg-surface-50 dark:bg-surface-900 text-surface-900 dark:text-white overflow-hidden", className);
23626
+ t9 = cls("flex h-screen w-screen bg-surface-50 dark:bg-surface-900 text-surface-900 dark:text-white overflow-hidden", className);
23624
23627
  $[16] = className;
23625
- $[17] = t8;
23628
+ $[17] = t9;
23626
23629
  } else {
23627
- t8 = $[17];
23630
+ t9 = $[17];
23628
23631
  }
23629
- let t9;
23632
+ let t10;
23630
23633
  if ($[18] !== style) {
23631
- t9 = {
23634
+ t10 = {
23632
23635
  paddingTop: "env(safe-area-inset-top)",
23633
23636
  paddingLeft: "env(safe-area-inset-left)",
23634
23637
  paddingRight: "env(safe-area-inset-right)",
@@ -23637,96 +23640,101 @@ const Scaffold = React__default.memo(function Scaffold2(props) {
23637
23640
  ...style
23638
23641
  };
23639
23642
  $[18] = style;
23640
- $[19] = t9;
23643
+ $[19] = t10;
23641
23644
  } else {
23642
- t9 = $[19];
23645
+ t10 = $[19];
23643
23646
  }
23644
- const t10 = includeDrawer && drawerChildren;
23645
- let t11;
23646
- if ($[20] !== computedDrawerOpen || $[21] !== includeDrawer || $[22] !== onHover || $[23] !== t10) {
23647
- t11 = /* @__PURE__ */ jsx(DrawerWrapper, { displayed: includeDrawer, onMouseEnter: setOnHoverTrue, onMouseMove: setOnHoverTrue, onMouseLeave: setOnHoverFalse, open: computedDrawerOpen, hovered: onHover, setDrawerOpen, children: t10 });
23647
+ const t11 = includeDrawer && drawerChildren;
23648
+ let t12;
23649
+ if ($[20] !== computedDrawerOpen || $[21] !== includeDrawer || $[22] !== onHover || $[23] !== t11) {
23650
+ t12 = /* @__PURE__ */ jsx(DrawerWrapper, { displayed: includeDrawer, onMouseEnter: setOnHoverTrue, onMouseMove: setOnHoverTrue, onMouseLeave: setOnHoverFalse, open: computedDrawerOpen, hovered: onHover, setDrawerOpen, children: t11 });
23648
23651
  $[20] = computedDrawerOpen;
23649
23652
  $[21] = includeDrawer;
23650
23653
  $[22] = onHover;
23651
- $[23] = t10;
23652
- $[24] = t11;
23654
+ $[23] = t11;
23655
+ $[24] = t12;
23653
23656
  } else {
23654
- t11 = $[24];
23657
+ t12 = $[24];
23655
23658
  }
23656
- let t12;
23659
+ let t13;
23657
23660
  if ($[25] !== hasAppBar) {
23658
- t12 = hasAppBar && /* @__PURE__ */ jsx(DrawerHeader, {});
23661
+ t13 = hasAppBar && /* @__PURE__ */ jsx(DrawerHeader, {});
23659
23662
  $[25] = hasAppBar;
23660
- $[26] = t12;
23663
+ $[26] = t13;
23661
23664
  } else {
23662
- t12 = $[26];
23665
+ t13 = $[26];
23663
23666
  }
23664
- const t13 = !hasAppBar;
23665
- let t14;
23666
- if ($[27] !== t13) {
23667
- t14 = cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1", {
23668
- "lg:mt-4": t13
23667
+ const t14 = !hasAppBar;
23668
+ const t15 = hasAppBar && !padding;
23669
+ let t16;
23670
+ if ($[27] !== padding || $[28] !== t14 || $[29] !== t15) {
23671
+ t16 = cls(defaultBorderMixin, "flex-grow overflow-auto m-0 mt-1", {
23672
+ "lg:mt-4": t14,
23673
+ "lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid": padding,
23674
+ "border-t": t15
23669
23675
  });
23670
- $[27] = t13;
23676
+ $[27] = padding;
23671
23677
  $[28] = t14;
23678
+ $[29] = t15;
23679
+ $[30] = t16;
23672
23680
  } else {
23673
- t14 = $[28];
23681
+ t16 = $[30];
23674
23682
  }
23675
- let t15;
23676
- if ($[29] !== otherChildren) {
23677
- t15 = /* @__PURE__ */ jsx(ErrorBoundary, { children: otherChildren });
23678
- $[29] = otherChildren;
23679
- $[30] = t15;
23683
+ let t17;
23684
+ if ($[31] !== otherChildren) {
23685
+ t17 = /* @__PURE__ */ jsx(ErrorBoundary, { children: otherChildren });
23686
+ $[31] = otherChildren;
23687
+ $[32] = t17;
23680
23688
  } else {
23681
- t15 = $[30];
23689
+ t17 = $[32];
23682
23690
  }
23683
- let t16;
23684
- if ($[31] !== t14 || $[32] !== t15) {
23685
- t16 = /* @__PURE__ */ jsx("div", { className: t14, children: t15 });
23686
- $[31] = t14;
23687
- $[32] = t15;
23691
+ let t18;
23692
+ if ($[33] !== t16 || $[34] !== t17) {
23693
+ t18 = /* @__PURE__ */ jsx("div", { className: t16, children: t17 });
23688
23694
  $[33] = t16;
23695
+ $[34] = t17;
23696
+ $[35] = t18;
23689
23697
  } else {
23690
- t16 = $[33];
23698
+ t18 = $[35];
23691
23699
  }
23692
- let t17;
23693
- if ($[34] !== t12 || $[35] !== t16) {
23694
- t17 = /* @__PURE__ */ jsxs("main", { className: "flex flex-col flex-grow overflow-auto", children: [
23695
- t12,
23696
- t16
23700
+ let t19;
23701
+ if ($[36] !== t13 || $[37] !== t18) {
23702
+ t19 = /* @__PURE__ */ jsxs("main", { className: "flex flex-col flex-grow overflow-auto", children: [
23703
+ t13,
23704
+ t18
23697
23705
  ] });
23698
- $[34] = t12;
23699
- $[35] = t16;
23700
- $[36] = t17;
23706
+ $[36] = t13;
23707
+ $[37] = t18;
23708
+ $[38] = t19;
23701
23709
  } else {
23702
- t17 = $[36];
23710
+ t19 = $[38];
23703
23711
  }
23704
- let t18;
23705
- if ($[37] !== appBarChildren || $[38] !== t11 || $[39] !== t17 || $[40] !== t8 || $[41] !== t9) {
23706
- t18 = /* @__PURE__ */ jsxs("div", { className: t8, style: t9, children: [
23712
+ let t20;
23713
+ if ($[39] !== appBarChildren || $[40] !== t10 || $[41] !== t12 || $[42] !== t19 || $[43] !== t9) {
23714
+ t20 = /* @__PURE__ */ jsxs("div", { className: t9, style: t10, children: [
23707
23715
  appBarChildren,
23708
- t11,
23709
- t17
23716
+ t12,
23717
+ t19
23710
23718
  ] });
23711
- $[37] = appBarChildren;
23712
- $[38] = t11;
23713
- $[39] = t17;
23714
- $[40] = t8;
23715
- $[41] = t9;
23716
- $[42] = t18;
23719
+ $[39] = appBarChildren;
23720
+ $[40] = t10;
23721
+ $[41] = t12;
23722
+ $[42] = t19;
23723
+ $[43] = t9;
23724
+ $[44] = t20;
23717
23725
  } else {
23718
- t18 = $[42];
23726
+ t20 = $[44];
23719
23727
  }
23720
- let t19;
23721
- if ($[43] !== t18 || $[44] !== t7) {
23722
- t19 = /* @__PURE__ */ jsx(AppContext.Provider, { value: t7, children: t18 });
23723
- $[43] = t18;
23724
- $[44] = t7;
23725
- $[45] = t19;
23728
+ let t21;
23729
+ if ($[45] !== t20 || $[46] !== t8) {
23730
+ t21 = /* @__PURE__ */ jsx(AppContext.Provider, { value: t8, children: t20 });
23731
+ $[45] = t20;
23732
+ $[46] = t8;
23733
+ $[47] = t21;
23726
23734
  } else {
23727
- t19 = $[45];
23735
+ t21 = $[47];
23728
23736
  }
23729
- return t19;
23737
+ return t21;
23730
23738
  }, equal);
23731
23739
  const DrawerHeader = () => {
23732
23740
  const $ = c(1);