slice-machine-ui 1.26.1-beta.1 → 1.26.1-beta.11

package/src/components/Table/Table.test.tsx

@@ -1,7 +1,5 @@
 // @vitest-environment jsdom
 
-import { describe, test, vi } from "vitest";
-
 import {
   Table,
   TableBody,
@@ -10,6 +8,7 @@ import {
   TableRow,
 } from "@src/components/Table";
 import { render, screen } from "test/__testutils__";
+import { describe, test, vi } from "vitest";
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-return
 vi.mock("next/router", () => require("next-router-mock"));

package/src/components/Table/Table.tsx

@@ -1,12 +1,12 @@
 import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
+import { clsx } from "clsx";
 import {
+  createContext,
   type FC,
   type MouseEventHandler,
   type PropsWithChildren,
-  createContext,
   useContext,
 } from "react";
-import { clsx } from "clsx";
 
 import * as styles from "./Table.css";
 

package/src/components/Table/index.ts

@@ -1 +1 @@
-export { Table, TableHead, TableBody, TableRow, TableCell } from "./Table";
+export { Table, TableBody, TableCell, TableHead, TableRow } from "./Table";

package/src/components/TextLink/TextLink.module.css

@@ -0,0 +1,58 @@
+.root {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  &:focus-visible {
+    outline: none;
+    text-decoration-line: underline;
+  }
+}
+
+.color-primary {
+  color: var(--purple9);
+
+  &:hover {
+    color: var(--purple8);
+  }
+
+  &:active {
+    color: var(--purple9);
+  }
+}
+
+.color-secondary {
+  color: var(--indigo11);
+
+  &:hover {
+    color: var(--indigo10);
+  }
+
+  &:active {
+    color: var(--indigo11);
+  }
+}
+
+.endIcon {
+  padding-left: 4px;
+}
+
+.icon-normal {
+  font-size: 1.2rem;
+  width: 18px;
+  height: 18px;
+}
+
+.icon-smallBold {
+  font-size: 1rem;
+  width: 16px;
+  height: 16px;
+}
+
+.icon-inherit {
+  font-family: inherit;
+  font-size: inherit;
+  width: inherit;
+  height: inherit;
+}

package/src/components/TextLink/TextLink.module.css.d.ts

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly "color-primary": string;
+  readonly "color-secondary": string;
+  readonly "endIcon": string;
+  readonly "icon-inherit": string;
+  readonly "icon-normal": string;
+  readonly "icon-smallBold": string;
+  readonly "root": string;
+};
+export = styles;
+

package/src/components/TextLink/TextLink.stories.tsx

@@ -1,7 +1,7 @@
+import { Icon } from "@prismicio/editor-ui";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { TextLink } from "./TextLink";
-import { Icon } from "@prismicio/editor-ui";
 
 type Story = StoryObj<typeof meta>;
 

package/src/components/TextLink/TextLink.tsx

@@ -1,8 +1,8 @@
 import { Text } from "@prismicio/editor-ui";
 import { clsx } from "clsx";
-import { type FC, type ReactNode, cloneElement, isValidElement } from "react";
+import { cloneElement, type FC, isValidElement, type ReactNode } from "react";
 
-import * as styles from "./TextLink.css";
+import styles from "./TextLink.module.css";
 
 type IconProps = Readonly<{
   className?: string;
@@ -10,7 +10,7 @@ type IconProps = Readonly<{
 
 interface TextLinkProps {
   children: string;
-  color?: keyof typeof styles.colorVariant;
+  color?: "primary" | "secondary";
   endIcon?: ReactNode;
   href: string;
   textVariant?: "normal" | "smallBold" | "inherit";
@@ -32,7 +32,7 @@ export const TextLink: FC<TextLinkProps> = (props) => {
       target="_blank"
       rel="noreferrer"
       {...otherProps}
-      className={clsx(styles.root, styles.colorVariant[color])}
+      className={clsx(styles.root, styles[`color-${color}`])}
     >
       <Text component="span" color="inherit" variant={textVariant}>
         {children}
@@ -42,7 +42,7 @@ export const TextLink: FC<TextLinkProps> = (props) => {
             className: clsx(
               endIcon.props.className,
               styles.endIcon,
-              styles.iconVariant[textVariant],
+              styles[`icon-${textVariant}`],
             ),
           })
         : null}

package/src/domain/__tests__/customType.test.ts

@@ -1,10 +1,9 @@
-import { describe, expect } from "vitest";
-
 import {
   CustomType,
   DynamicSection,
   Group,
 } from "@prismicio/types-internal/lib/customtypes";
+import { describe, expect } from "vitest";
 
 import * as CustomTypeModel from "../customType";
 

package/src/domain/__tests__/slice.test.ts

@@ -0,0 +1,40 @@
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { Slices } from "@lib/models/common/Slice";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { describe, expect, it } from "vitest";
+
+import { deleteRepeatableZone } from "../slice";
+
+describe("deleteRepeatableZone", () => {
+  it("removes the `items` property from a specific variation within a slice", (ctx) => {
+    const variation = ctx.createMock.model.sharedSliceVariation({
+      itemsFields: { foo: ctx.createMock.model.boolean() },
+    });
+    const model = ctx.createMock.model.sharedSlice({ variations: [variation] });
+    const slice = buildMockSliceComponentUI(model);
+
+    const res = deleteRepeatableZone({ slice, variationId: variation.id });
+    expect(res.model.variations[0].items).toBeUndefined();
+  });
+
+  it("does nothing if the variation does not exist", (ctx) => {
+    const model = ctx.createMock.model.sharedSlice();
+    const slice = buildMockSliceComponentUI(model);
+
+    const res = deleteRepeatableZone({ slice, variationId: "non-existent" });
+    expect(res).toStrictEqual(slice);
+  });
+});
+
+function buildMockSliceComponentUI(model: SharedSlice): ComponentUI {
+  return {
+    model: Slices.toSM(model),
+    extension: "extension",
+    fileName: "fileName",
+    from: "from",
+    href: "href",
+    mocks: [],
+    pathToSlice: "pathToSlice",
+    screenshots: {},
+  };
+}

package/src/domain/customType.ts

@@ -1,3 +1,4 @@
+import { removeKey } from "@prismicio/editor-support/Object";
 import {
   CustomType,
   DynamicSection,
@@ -9,8 +10,6 @@ import {
   SlicesFieldType,
   UID,
 } from "@prismicio/types-internal/lib/customtypes";
-import { removeKey } from "@prismicio/editor-support/Object";
-
 import { CustomTypeFormat } from "@slicemachine/manager";
 
 type DeleteSliceZoneSliceArgs = {

package/src/domain/slice.ts

@@ -1,13 +1,12 @@
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import type { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
+import { pascalize, snakelize } from "@lib/utils/str";
+import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
 import type {
   CompositeSlice,
   LegacySlice,
   SharedSlice,
 } from "@prismicio/types-internal/lib/customtypes/widgets/slices";
-import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
-
-import type { ComponentUI } from "@lib/models/common/ComponentUI";
-import type { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
-import { pascalize, snakelize } from "@lib/utils/str";
 
 type CopySliceVariationArgs = {
   copiedVariation: VariationSM;
@@ -48,6 +47,11 @@ type ReorderFieldArgs = {
   destinationIndex: number;
 };
 
+type DeleteRepeatableZoneArgs = {
+  slice: ComponentUI;
+  variationId: string;
+};
+
 const DEFAULT_VARIATION_ID = "default";
 
 export function countMissingScreenshots(slice: ComponentUI): number {
@@ -281,3 +285,23 @@ export function rename(slice: ComponentUI, newSliceName: string): ComponentUI {
     },
   };
 }
+
+export function deleteRepeatableZone(args: DeleteRepeatableZoneArgs) {
+  const { slice, variationId } = args;
+
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      variations: slice.model.variations.map((v) => {
+        if (v.id === variationId) {
+          const newVariation = { ...v };
+          delete newVariation.items;
+
+          return newVariation;
+        }
+        return v;
+      }),
+    },
+  };
+}

package/src/features/autoSave/AutoSaveStatusIndicator.tsx

@@ -1,7 +1,6 @@
-import { FC } from "react";
 import { Box, Icon, ProgressCircle, Text } from "@prismicio/editor-ui";
-
 import { ActionQueueStatus } from "@src/hooks/useActionQueue";
+import { FC } from "react";
 
 type AutoSaveStatusIndicatorProps = {
   status: ActionQueueStatus;

package/src/features/changelog/useSliceMachineLatestNonBreakingVersion.ts

@@ -1,5 +1,4 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
-
 import { managerClient } from "@src/managerClient";
 
 async function getSliceMachineLatestNonBreakingVersion() {

package/src/features/changelog/useSliceMachineReleaseNotes.ts

@@ -1,5 +1,4 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
-
 import { managerClient } from "@src/managerClient";
 
 async function getSliceMachineReleaseNotes(version: string) {

package/src/features/changelog/useSliceMachineVersions.ts

@@ -1,5 +1,4 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
-
 import type { Version } from "@slicemachine/manager";
 import { managerClient } from "@src/managerClient";
 

package/src/features/changes/BlankSlates/NoChangesBlankSlate.tsx

@@ -1,23 +1,19 @@
-import router from "next/router";
-
+import { createDocumentsListEndpointFromRepoName } from "@lib/utils/repo";
+import { Button, Image, tokens } from "@prismicio/editor-ui";
 import {
   BlankSlate,
-  BlankSlateImage,
-  BlankSlateTitle,
-  BlankSlateDescription,
   BlankSlateActions,
   BlankSlateContent,
+  BlankSlateDescription,
+  BlankSlateImage,
+  BlankSlateTitle,
 } from "@src/components/BlankSlate";
-
-import { Button, Image, tokens } from "@prismicio/editor-ui";
-
-import { FiExternalLink } from "react-icons/fi";
 import { TextLink } from "@src/components/TextLink";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
 import { getRepoName } from "@src/modules/environment";
-
-import { createDocumentsListEndpointFromRepoName } from "@lib/utils/repo";
+import { SliceMachineStoreType } from "@src/redux/type";
+import router from "next/router";
+import { FiExternalLink } from "react-icons/fi";
+import { useSelector } from "react-redux";
 
 export const NoChangesBlankSlate = () => {
   const { repoName } = useSelector((state: SliceMachineStoreType) => ({

package/src/features/changes/PushChangesButton.tsx

@@ -1,18 +1,17 @@
 import { Button, Skeleton, Tooltip } from "@prismicio/editor-ui";
+import { ErrorBoundary } from "@src/ErrorBoundary";
+import { gitProviderToConfig } from "@src/features/settings/git/GitProvider";
+import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
+import { useLinkedGitRepos } from "@src/features/settings/git/useLinkedGitRepos";
 import {
   type ComponentPropsWithoutRef,
   type ElementRef,
   type FC,
+  forwardRef,
   type ReactNode,
   Suspense,
-  forwardRef,
 } from "react";
 
-import { gitProviderToConfig } from "@src/features/settings/git/GitProvider";
-import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
-import { useLinkedGitRepos } from "@src/features/settings/git/useLinkedGitRepos";
-import { ErrorBoundary } from "@src/ErrorBoundary";
-
 type PushChangesButtonProps = Required<BarePushChangesButtonProps>;
 
 export const PushChangesButton: FC<PushChangesButtonProps> = (props) => (

package/src/features/changes/StatusBadge.tsx

@@ -1,8 +1,7 @@
-import { Badge, Tooltip } from "@prismicio/editor-ui";
-import type { ComponentPropsWithoutRef, FC } from "react";
-
 import { ModelStatus } from "@lib/models/common/ModelStatus";
+import { Badge, Tooltip } from "@prismicio/editor-ui";
 import { AuthStatus } from "@src/modules/userContext/types";
+import type { ComponentPropsWithoutRef, FC } from "react";
 
 export type StatusBadgeProps = GetStatusBadgeContentArgs;
 

package/src/features/customTypes/EditDropdown.tsx

@@ -1,4 +1,5 @@
-import { type FC, useState } from "react";
+import { DeleteCustomTypeModal } from "@components/DeleteCTModal";
+import { RenameCustomTypeModal } from "@components/Forms/RenameCustomTypeModal";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -7,20 +8,15 @@ import {
   Icon,
   IconButton,
 } from "@prismicio/editor-ui";
-import { useRouter } from "next/router";
-
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-
 import { type CustomType } from "@prismicio/types-internal/lib/customtypes";
+import { CustomTypeFormat } from "@slicemachine/manager";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useRouter } from "next/router";
+import { type FC, useState } from "react";
 
 import { convertCustomToPageType } from "./actions/convertCustomToPageType";
-
 import { CUSTOM_TYPES_CONFIG } from "./customTypesConfig";
 
-import { RenameCustomTypeModal } from "@components/Forms/RenameCustomTypeModal";
-import { DeleteCustomTypeModal } from "@components/DeleteCTModal";
-import { CustomTypeFormat } from "@slicemachine/manager";
-
 type EditDropdownProps = {
   isChangesLocal: boolean;
   format: CustomTypeFormat;

package/src/features/customTypes/PageTypeOnboarding.tsx

@@ -1,10 +1,9 @@
-import { useState } from "react";
-import { Box, Button, Text } from "@prismicio/editor-ui";
-import { cache } from "@prismicio/editor-support/Suspense";
-
 import { CreateCustomTypeModal } from "@components/Forms/CreateCustomTypeModal";
-import { BlankPageIcon } from "@src/icons/BlankPageIcon";
+import { cache } from "@prismicio/editor-support/Suspense";
+import { Box, Button, Text } from "@prismicio/editor-ui";
 import { getIsEmptyProject } from "@src/hooks/useIsEmptyProject";
+import { BlankPageIcon } from "@src/icons/BlankPageIcon";
+import { useState } from "react";
 
 export function PageTypeOnboarding() {
   const [isCreatingCustomType, setIsCreatingCustomType] = useState(false);

package/src/features/customTypes/__tests__/CustomTypeBuilderPage.test.tsx

@@ -1,22 +1,20 @@
 // @vitest-environment jsdom
-import { describe, vi, test, TestContext } from "vitest";
+import { CustomTypes } from "@lib/models/common/CustomType";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-
-import mockRouter from "next-router-mock";
-
 import {
-  CustomTypeFormat,
   createSliceMachineManager,
+  CustomTypeFormat,
 } from "@slicemachine/manager";
 import { createSliceMachineManagerMSWHandler } from "@slicemachine/manager/test";
-import { CustomTypes } from "@lib/models/common/CustomType";
+import mockRouter from "next-router-mock";
+import { createDynamicRouteParser } from "next-router-mock/dynamic-routes";
 import { render, screen, within } from "test/__testutils__";
 import { createTestPlugin } from "test/__testutils__/createTestPlugin";
 import { createTestProject } from "test/__testutils__/createTestProject";
-import { CustomTypesBuilderPage } from "../customTypesBuilder/CustomTypesBuilderPage";
-import pkg from "../../../../package.json";
+import { describe, test, TestContext, vi } from "vitest";
 
-import { createDynamicRouteParser } from "next-router-mock/dynamic-routes";
+import pkg from "../../../../package.json";
+import { CustomTypesBuilderPage } from "../customTypesBuilder/CustomTypesBuilderPage";
 
 mockRouter.useParser(
   createDynamicRouteParser([
@@ -89,10 +87,9 @@ describe.each(formats)(
       // Submit the form
       await user.click(screen.getByRole("button", { name: "Rename" }));
 
-      const folder =
-        customType.format === "page" ? "Page types" : "Custom types";
+      const breadcrumb = screen.getByLabelText("Breadcrumb");
       expect(
-        screen.getByTestId(`breadcrumb-${folder}-${renamedCustomType}`),
+        await within(breadcrumb).findByText(renamedCustomType),
       ).toBeVisible();
     });
   },
@@ -178,10 +175,10 @@ async function renderCustomTypesBuilderPage({
   const renderResults = render(<CustomTypesBuilderPage />, customTypeMockStore);
 
   const folder = customType.format === "page" ? "Page types" : "Custom types";
-  const breadcrumb = await screen.findByTestId(
-    `breadcrumb-${folder}-${customType.label as string}`,
+  const breadcrumb = await screen.findByLabelText("Breadcrumb");
+  expect(breadcrumb).toHaveTextContent(
+    `${folder}/${customType.label as string}`,
   );
-  expect(breadcrumb).toBeVisible();
 
   return renderResults;
 }

package/src/features/customTypes/__tests__/CustomTypesTablePage.test.tsx

@@ -1,21 +1,21 @@
 // @vitest-environment jsdom
-import { describe, vi, test, TestContext } from "vitest";
-import mockRouter from "next-router-mock";
+import { CustomTypes } from "@lib/models/common/CustomType";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-
 import {
-  CustomTypeFormat,
   createSliceMachineManager,
+  CustomTypeFormat,
 } from "@slicemachine/manager";
 import { createSliceMachineManagerMSWHandler } from "@slicemachine/manager/test";
 import { CustomTypeReadHookData } from "@slicemachine/plugin-kit";
-import { CustomTypes } from "@lib/models/common/CustomType";
+import mockRouter from "next-router-mock";
 import { render, screen, waitFor, within } from "test/__testutils__";
 import { createTestPlugin } from "test/__testutils__/createTestPlugin";
 import { createTestProject } from "test/__testutils__/createTestProject";
-import { CustomTypesTablePage } from "../customTypesTable/CustomTypesTablePage";
-import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
+import { describe, test, TestContext, vi } from "vitest";
+
 import pkg from "../../../../package.json";
+import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
+import { CustomTypesTablePage } from "../customTypesTable/CustomTypesTablePage";
 
 const formats = [
   {

package/src/features/customTypes/actions/convertCustomToPageType.ts

@@ -1,9 +1,8 @@
-import { toast } from "react-toastify";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-
 import { CustomTypeFormat } from "@slicemachine/manager";
-import { convertToPageType } from "@src/domain/customType";
 import { updateCustomType } from "@src/apiClient";
+import { convertToPageType } from "@src/domain/customType";
+import { toast } from "react-toastify";
 
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 

package/src/features/customTypes/actions/createCustomType.ts

@@ -1,10 +1,9 @@
-import { toast } from "react-toastify";
-import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-
 import { ToastMessageWithPath } from "@components/ToasterContainer";
+import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { CustomTypeFormat } from "@slicemachine/manager";
 import { telemetry, updateCustomType } from "@src/apiClient";
 import { create } from "@src/domain/customType";
+import { toast } from "react-toastify";
 
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 

package/src/features/customTypes/actions/deleteCustomType.ts

@@ -1,8 +1,7 @@
-import { toast } from "react-toastify";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-
-import { managerClient } from "@src/managerClient";
 import { CustomTypeFormat } from "@slicemachine/manager";
+import { managerClient } from "@src/managerClient";
+import { toast } from "react-toastify";
 
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 

package/src/features/customTypes/actions/renameCustomType.ts

@@ -1,8 +1,7 @@
-import { toast } from "react-toastify";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-
-import { managerClient } from "@src/managerClient";
 import { CustomTypeFormat } from "@slicemachine/manager";
+import { managerClient } from "@src/managerClient";
+import { toast } from "react-toastify";
 
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 

package/src/features/customTypes/customTypesBuilder/CustomTypeProvider.tsx

@@ -1,19 +1,18 @@
+import { useStableCallback } from "@prismicio/editor-support/React";
+import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+import { updateCustomType } from "@src/apiClient";
+import { getFormat } from "@src/domain/customType";
+import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { ActionQueueStatus, useActionQueue } from "@src/hooks/useActionQueue";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import {
-  ReactNode,
   createContext,
+  ReactNode,
   useCallback,
   useContext,
   useMemo,
   useState,
 } from "react";
-import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-import { useStableCallback } from "@prismicio/editor-support/React";
-
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { getFormat } from "@src/domain/customType";
-import { updateCustomType } from "@src/apiClient";
-import { ActionQueueStatus, useActionQueue } from "@src/hooks/useActionQueue";
 
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 

package/src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage.tsx

@@ -1,9 +1,3 @@
-import { Box } from "@prismicio/editor-ui";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { type FC, useEffect } from "react";
-import { useSelector } from "react-redux";
-
 import {
   AppLayout,
   AppLayoutActions,
@@ -13,19 +7,27 @@ import {
   AppLayoutHeader,
 } from "@components/AppLayout";
 import { CustomTypeBuilder } from "@lib/builders/CustomTypeBuilder";
-import { CustomTypeSM, CustomTypes } from "@lib/models/common/CustomType";
+import { CustomTypes, CustomTypeSM } from "@lib/models/common/CustomType";
 import { hasLocal } from "@lib/models/common/ModelData";
-import { readBuilderPageDynamicSegment } from "@src/features/customTypes/customTypesConfig";
-import { selectCustomTypeById } from "@src/modules/availableCustomTypes";
-import type { SliceMachineStoreType } from "@src/redux/type";
+import { Box } from "@prismicio/editor-ui";
+import { BreadcrumbItem } from "@src/components/Breadcrumb";
 import { getFormat } from "@src/domain/customType";
 import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
+import {
+  CUSTOM_TYPES_CONFIG,
+  readBuilderPageDynamicSegment,
+} from "@src/features/customTypes/customTypesConfig";
+import { selectCustomTypeById } from "@src/modules/availableCustomTypes";
+import type { SliceMachineStoreType } from "@src/redux/type";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { type FC, useEffect } from "react";
+import { useSelector } from "react-redux";
 
-import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 import { EditDropdown } from "../EditDropdown";
-import { PageSnippetDialog } from "./PageSnippetDialog";
 import { CustomTypeProvider } from "./CustomTypeProvider";
+import { PageSnippetDialog } from "./PageSnippetDialog";
 
 export const CustomTypesBuilderPage: FC = () => {
   const router = useRouter();
@@ -87,10 +89,14 @@ const CustomTypesBuilderPageWithProvider: React.FC<
             <>
               <AppLayoutHeader>
                 <AppLayoutBackButton url={config.tablePagePathname} />
-                <AppLayoutBreadcrumb
-                  folder={messages.name({ start: true, plural: true })}
-                  page={customType.label ?? customType.id}
-                />
+                <AppLayoutBreadcrumb>
+                  <BreadcrumbItem>
+                    {messages.name({ start: true, plural: true })}
+                  </BreadcrumbItem>
+                  <BreadcrumbItem active>
+                    {customType.label ?? customType.id}
+                  </BreadcrumbItem>
+                </AppLayoutBreadcrumb>
                 <AppLayoutActions>
                   <AutoSaveStatusIndicator status={actionQueueStatus} />
                   {customType.format === "page" ? (