@wix/patterns 1.423.0 → 1.424.0

package/src/components/CollectionViewsDropdown/viewsDropdownRenderHelpers.tsx

@@ -3,12 +3,8 @@ import {
   listItemSectionBuilder,
   listItemSelectBuilder,
 } from '@wix/design-system';
-import {
-  BasicCategory,
-  PREDEFINED_VIEWS_ID,
-  PrivateView,
-  ViewsState,
-} from '../../index';
+import { PREDEFINED_VIEWS_ID } from '../../model/view';
+import type { BasicCategory, PrivateView, ViewsState } from '../../index';
 import { FiltersMap, TranslationsKeys } from '@wix/bex-core';
 import React, { ReactNode } from 'react';
 

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -8,13 +8,13 @@ import { GridCardItemProps } from '../DragAndDrop';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 import { FieldIndications } from './FieldIndications';
+import { FieldActionsPopover } from '../FieldActions';
 
 export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   extends GridCardItemProps {
   column: Column;
   state: CustomColumnsPanelStateBase<T, F>;
   showDivider?: boolean;
-  fieldActions?: React.ReactNode;
 }
 
 function _ColumnListTableListItem<T, F extends FiltersMap>(
@@ -24,7 +24,6 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
     column,
     state,
     showDivider,
-    fieldActions,
     domRef,
     dragging,
     dragHandleProps,
@@ -36,7 +35,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
   } = props;
   const { select } = state;
 
-  const { collectionDataExtension } = state;
+  const { collectionFieldsSource } = state;
   const { translate: t } = useWixPatternsContainer();
   const showFieldTypeIcons = state.showFieldTypeIcons;
 
@@ -62,22 +61,26 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
     [],
   );
 
-  const dataExtensionsCTA = collectionDataExtension?.DataExtension
-    ?.CustomColumnsEditCustomFieldCTAButton &&
-    column.dataExtension &&
-    column.dataExtension.editable && (
-      <collectionDataExtension.DataExtension.CustomColumnsEditCustomFieldCTAButton
-        field={column.dataExtension}
-      />
-    );
+  // The source field is stamped on the column at projection time. The source
+  // builds the per-field manage menu (edit / delete / archive …) as data; we
+  // render it with the shared popover. Null when the field has no menu.
+  const menuConfig = column.field
+    ? collectionFieldsSource?.fieldActionsMenu?.({
+        fieldId: column.field.id,
+        origin: 'Custom columns panel',
+        location: 'Customize columns action cell',
+      })
+    : undefined;
+  const manageFieldMenu = menuConfig ? (
+    <FieldActionsPopover {...menuConfig} />
+  ) : null;
 
   const hasIndications =
     column.isPii ||
     column.isPrimary ||
     column.isSystem ||
     !!column.dataExtension;
-  const hasRightContent =
-    hasIndications || !!dataExtensionsCTA || !!fieldActions;
+  const hasRightContent = hasIndications || !!manageFieldMenu;
 
   return (
     <div
@@ -206,8 +209,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                   value: (
                     <Box gap="SP1" verticalAlign="middle">
                       <FieldIndications column={column} />
-                      {dataExtensionsCTA}
-                      {fieldActions}
+                      {manageFieldMenu}
                     </Box>
                   ),
                   align: 'right' as const,

package/src/components/CustomColumnsPanel/ColumnsList.tsx

@@ -1,7 +1,7 @@
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, type ReactNode } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Column } from '../../model';
 import { Box } from '@wix/design-system';
 import { addEventListener } from '@wix/bex-core/util';
@@ -9,11 +9,10 @@ import { ColumnListTableListItem } from './ColumnListTableListItem';
 
 export interface ColumnsListProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
-  fieldActions?: Record<string, ReactNode>;
 }
 
 function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
-  const { state, fieldActions } = props;
+  const { state } = props;
   const { columnsCollection, dragAndDrop } = state;
   const hasSearchValue = state.searchValue.trim().length > 0;
 
@@ -49,7 +48,6 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
           state={state}
           column={column}
           showDivider={index < length - 1}
-          fieldActions={fieldActions?.[column.id]}
         />
       );
 

package/src/components/CustomColumnsPanel/CustomColumnsCTAButton.tsx

@@ -44,7 +44,7 @@ export function _CustomColumnsCTAButton<T, F extends FiltersMap>({
 
   const schemaCtx = useSchemaContext();
   const isSchema = !!schemaCtx?.schema;
-  const isEditable = !!state.collectionDataExtension || isSchema;
+  const isEditable = !!state.collectionFieldsSource || isSchema;
   const text = t(
     isEditable
       ? 'cairo.table.manage-fields.button.cta'

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -1,5 +1,5 @@
 import { AddItem, Box, Divider, SidePanel } from '@wix/design-system';
-import React, { useEffect } from 'react';
+import React, { lazy, Suspense, useEffect } from 'react';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -11,7 +11,15 @@ import { useRafRender } from '../../hooks/useRafRender';
 import { ScrollableContent } from '../ScrollableContent';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 import { useSchemaContext } from '../../providers/SchemaContext';
-import { useSidePanelFieldActions } from './useSidePanelFieldActions';
+import { FieldsSourceAddFieldCTA } from '../CustomFieldsPanel/FieldsSourceAddFieldCTA';
+
+// ArchivedItems is an optional feature module — load it on demand so it stays
+// out of the core bundle.
+const ArchivedItemsCTAButton = lazy(() =>
+  import('../ArchivedItemsPanel/ArchivedItemsCTAButton').then((m) => ({
+    default: m.ArchivedItemsCTAButton,
+  })),
+);
 
 export interface CustomColumnsPanelProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -23,15 +31,13 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const entered = useRafRender();
   const { translate: t } = useWixPatternsContainer();
 
-  const { dragAndDrop, collectionDataExtension } = state;
+  const { dragAndDrop, collectionFieldsSource } = state;
+  const archive = collectionFieldsSource?.fieldsSource.archive;
+  const deleteFieldModal =
+    collectionFieldsSource?.customFieldsPanel.deleteFieldModal;
   const schemaCtx = useSchemaContext();
   const isSchema = !!schemaCtx?.schema;
-  const isEditable = !!collectionDataExtension || isSchema;
-  const { fieldActionsByColumn, fieldActionsModal } = useSidePanelFieldActions(
-    isEditable ? state.columnsCollection.result.items : [],
-    schemaCtx?.schema?.fieldActions,
-    schemaCtx?.schema?.refresh,
-  );
+  const isEditable = !!collectionFieldsSource || isSchema;
 
   useEffect(() => state.init(), []);
 
@@ -42,10 +48,10 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const hasSearchResults = state.columnsCollection.result.items.length > 0;
   const hasSearchValue = state.searchValue.trim().length > 0;
   const totalColumns = state.orderedColumns.length;
-  const isUsingDataExtension = !!collectionDataExtension;
+  const hasFieldsSource = !!collectionFieldsSource;
 
-  // Show search if they're using DEx OR if there are more than 5 columns
-  const shouldShowSearch = isUsingDataExtension || totalColumns > 5;
+  // Show search if there's a fields source OR if there are more than 5 columns
+  const shouldShowSearch = hasFieldsSource || totalColumns > 5;
 
   const titleKey = isEditable
     ? 'cairo.table.manage-fields.title'
@@ -85,22 +91,22 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
             <CustomColumnsNoResults state={state} />
           ) : (
             <>
-              {collectionDataExtension?.dataExtension?.shouldDisplayArchive &&
-                collectionDataExtension?.DataExtension
-                  ?.CustomColumnsArchivedItemsCTAButton && (
-                  <collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton
-                    dataExtension={collectionDataExtension.dataExtension}
+              {archive?.shouldDisplay && deleteFieldModal && (
+                <Suspense fallback={null}>
+                  <ArchivedItemsCTAButton
+                    archive={archive}
+                    deleteFieldModal={deleteFieldModal}
                     onCloseSidePanel={() => state.onClose()}
                     dataHook="custom-columns"
                   />
-                )}
-              <ColumnsList state={state} fieldActions={fieldActionsByColumn} />
+                </Suspense>
+              )}
+              <ColumnsList state={state} />
             </>
           )}
         </ScrollableContent>
-        {collectionDataExtension?.DataExtension
-          ?.CustomColumnsAddCustomFieldCTAButton && (
-          <collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton />
+        {collectionFieldsSource && (
+          <FieldsSourceAddFieldCTA source={collectionFieldsSource} />
         )}
         {schemaCtx?.addField && (
           <Box direction="vertical" width="100%">
@@ -121,7 +127,6 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
           </Box>
         )}
       </PatternsSidePanel>
-      {fieldActionsModal}
     </>
   );
 }

package/src/components/CustomColumnsPanel/CustomColumnsPanel.uni.driver.ts

@@ -22,7 +22,7 @@ export function CustomColumnsPanelUniDriver(base: UniDriver, body: UniDriver) {
 
   const addItem = () =>
     CustomFieldsDisabledHintUniDriver(base, body, {
-      dataHook: 'custom-columns-data-extension-add-new',
+      dataHook: 'custom-columns-add-field',
     });
 
   const list = () => panelBase().$('[data-hook="custom-columns-list"]');

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -48,8 +48,8 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
     customFieldModalBiReporter,
     generateUniqueKey,
     setKeyFieldIfNotDirty,
-    dataExtensionState: { defaultPermissions },
   } = state;
+  const defaultPermissions = state.fieldManagement.permissions;
   const { reportAdvancedSettingsClick, reportKeyFormFieldChange } =
     customFieldModalBiReporter;
 
@@ -128,7 +128,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               />
             </FormField>
           </Cell>
-          {state.dataExtensionState.containsPii && (
+          {state.fieldManagement.supportsPii && (
             <PiiFormFields
               containsPii={{
                 value: containsPii.value,

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -32,7 +32,7 @@ export const _CustomFieldModal = ({
     customFieldModalBiReporter: { reportLearnMoreClick, reportModalEndProcess },
   } = state;
 
-  if (mode === 'new' && state.dataExtensionState.isReachedMaxCustomFields) {
+  if (mode === 'new' && state.fieldManagement.maxReached) {
     return (
       <MessageActionModal
         state={state.modalState}
@@ -74,7 +74,7 @@ export const _CustomFieldModal = ({
         reportModalEndProcess({ endType: 'Cancel' })
       }
       footnote={
-        state.dataExtensionState.containsPii ? null : (
+        state.fieldManagement.supportsPii ? null : (
           <Footnote
             language={language}
             reportLearnMoreClick={reportLearnMoreClick}

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';
-import { CustomFieldModalState, CustomFieldType } from '@wix/bex-core';
+import { CustomFieldModalState } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 
@@ -18,6 +18,7 @@ export const _CustomFieldTypeDropdown = (
         $: { type, name },
       },
       mode,
+      fieldManagement: { creatableFieldTypes },
       generateUniqueKey,
       setKeyFieldIfNotDirty,
     },
@@ -25,107 +26,26 @@ export const _CustomFieldTypeDropdown = (
 
   const { translate: t } = useWixPatternsContainer();
 
-  const [fieldTypeOptions] = React.useState(() => [
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-shortText',
-      id: 'shortText',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'SHORT_TEXT', size: 'medium' })}
-        </Box>
+  const fieldTypeOptions = React.useMemo(
+    () =>
+      creatableFieldTypes.map((option) =>
+        listItemSelectBuilder({
+          dataHook: `custom-field-modal-type-${option.id}`,
+          id: option.id,
+          prefix: (
+            <Box>
+              {getFieldTypeIcon({
+                fieldType: option.patternsType,
+                size: 'medium',
+              })}
+            </Box>
+          ),
+          title: option.label,
+          label: option.label,
+        }),
       ),
-      title: t('cairo.customFields.fieldType.shortText'),
-      label: t('cairo.customFields.fieldType.shortText'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-longText',
-      id: 'longText',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'LONG_TEXT', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.longText'),
-      label: t('cairo.customFields.fieldType.longText'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-date',
-      id: 'date',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'DATE', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.date'),
-      label: t('cairo.customFields.fieldType.date'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-dateTime',
-      id: 'dateTime',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'DATE_TIME', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.dateAndTime'),
-      label: t('cairo.customFields.fieldType.dateAndTime'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-integer',
-      id: 'integer',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'INTEGER', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.numberInteger'),
-      label: t('cairo.customFields.fieldType.numberInteger'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-decimal',
-      id: 'decimal',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'DECIMAL', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.numberDecimal'),
-      label: t('cairo.customFields.fieldType.numberDecimal'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-checkbox',
-      id: 'checkbox',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'CHECKBOX', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.checkbox'),
-      label: t('cairo.customFields.fieldType.checkbox'),
-    }),
-    listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-url',
-      id: 'url',
-      prefix: (
-        <Box>
-          {getFieldTypeIcon({ fieldType: 'URL', size: 'medium' })}
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.url'),
-      label: t('cairo.customFields.fieldType.url'),
-    }),
-    /* listItemSelectBuilder({
-      dataHook: 'custom-field-modal-type-dropdown',
-      id: 'dropdown',
-      prefix: (
-        <Box>
-          <DropdownIcon />
-        </Box>
-      ),
-      title: t('cairo.customFields.fieldType.dropdownList'),
-      label: t('cairo.customFields.fieldType.dropdownList'),
-    }),*/
-  ]);
+    [creatableFieldTypes],
+  );
 
   return (
     <Dropdown
@@ -134,7 +54,7 @@ export const _CustomFieldTypeDropdown = (
       valueParser={(option) => option.label}
       selectedId={type.value}
       onSelect={({ id }) => {
-        type.onChange(id as CustomFieldType);
+        type.onChange(String(id));
         setKeyFieldIfNotDirty(generateUniqueKey(name.value));
       }}
       popoverProps={{ appendTo: 'window', zIndex: 5001 }}

package/src/components/CustomFieldsPanel/AddCustomFieldCTAButton.tsx

@@ -19,14 +19,14 @@ function _AddCustomFieldCTAButton({
   const container = useWixPatternsContainer();
   const { translate: t } = container;
 
-  if (state.dataExtension.disableUserDefinedWriting) {
+  if (!state.fieldManagement?.canAddFields) {
     return null;
   }
 
   return (
     <CustomFieldsDisabledHint
-      disabled={state.dataExtension.disableAddCustomField}
-      content={state.dataExtension.disableAddCustomFieldContent}
+      disabled={state.fieldManagement?.addFieldDisabled}
+      content={state.fieldManagement?.addFieldDisabledHint ?? ''}
     >
       <AddItem dataHook={dataHook} onClick={onClick}>
         {t('cairo.customFields.addCustomField.CTA')}

package/src/components/CustomFieldsPanel/ArchiveFieldModal.tsx

@@ -12,23 +12,20 @@ export const _ArchiveFieldModal = ({
 }) => {
   const container = useWixPatternsContainer();
   const { translate: t } = container;
-  const { dataExtension, modal } = state;
+  const { modal } = state;
 
   const getModalTitle = () => {
-    const fieldId = modal.value?.id;
-    if (dataExtension.enableArchive && fieldId) {
-      const fieldValues = dataExtension.extractFieldValuesFromSchema(fieldId);
-      if (fieldValues?.name) {
-        return t('cairo.customFields.archive.modal.title.enabled', {
-          selectedField: fieldValues.name,
-        });
-      }
+    const fieldName = modal.value?.fieldName;
+    if (modal.value?.archiveEnabled && fieldName) {
+      return t('cairo.customFields.archive.modal.title.enabled', {
+        selectedField: fieldName,
+      });
     }
     return t('cairo.customFields.archive.modal.title');
   };
 
   const getModalDescription = () => {
-    if (dataExtension.enableArchive) {
+    if (modal.value?.archiveEnabled) {
       return t('cairo.customFields.archive.modal.description.enabled');
     }
     return t('cairo.customFields.archive.modal.description');

package/src/components/CustomFieldsPanel/CustomFieldItem.tsx

@@ -1,12 +1,12 @@
 import { Box, TableListItem, Text } from '@wix/design-system';
 import React, { CSSProperties, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
-import { CustomField } from '@wix/bex-core';
-import { ManageFieldsPopoverMenu } from './ManageFieldsPopoverMenu';
+import { Field } from '@wix/bex-core';
+import { FieldActionsPopover } from '../FieldActions';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
 
 export interface CustomFieldItemProps {
-  field: CustomField;
+  field: Field;
   showDivider?: boolean;
   state: CustomFieldsPanelState;
 }
@@ -23,6 +23,12 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
     [],
   );
 
+  const menuConfig = state.fieldActionsMenu({
+    fieldId: field.id,
+    origin: 'Custom fields panel',
+    location: 'Manage custom fields action cell',
+  });
+
   return (
     <div style={style} data-hook={`custom-field-${field.id}`}>
       <TableListItem
@@ -38,7 +44,7 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
                     wordBreak: 'break-word',
                   }}
                 >
-                  <Text size="small">{field.label || field.id}</Text>
+                  <Text size="small">{field.displayName || field.id}</Text>
                 </div>
               </Box>
             ),
@@ -46,12 +52,7 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
           {
             value: (
               <Box height="24px">
-                <ManageFieldsPopoverMenu
-                  origin="Custom fields panel"
-                  state={state}
-                  id={field.id}
-                  location="Manage custom fields action cell"
-                />
+                {menuConfig ? <FieldActionsPopover {...menuConfig} /> : null}
               </Box>
             ),
             align: 'right',

package/src/components/CustomFieldsPanel/CustomFieldPopover.uni.driver.ts

@@ -4,26 +4,24 @@ import { DisabledTooltipButtonUniDriver } from '../DisabledTooltip/DisabledToolt
 
 export function CustomFieldPopoverUniDriver(base: UniDriver, body: UniDriver) {
   const customFieldPopoverDriverBase = () =>
-    base.$('[data-hook="custom-field-options"]');
+    base.$('[data-hook="field-actions-menu"]');
 
   const customFieldPopoverDriver = () =>
     PopoverMenuUniDriver(customFieldPopoverDriverBase(), body);
 
   const customFieldOptionsTrigger = () =>
     DisabledTooltipButtonUniDriver(base, body, {
-      dataHook: 'custom-field-options-icon-button',
+      dataHook: 'field-actions-menu-button',
     });
 
   const getCustomFieldOptionsAt = () => {
     return {
       open: () => customFieldOptionsTrigger().click(),
       clickEdit: () =>
-        customFieldPopoverDriver().clickAtChildByDataHook(
-          'custom-field-options-edit',
-        ),
+        customFieldPopoverDriver().clickAtChildByDataHook('field-action-edit'),
       clickArchive: () =>
         customFieldPopoverDriver().clickAtChildByDataHook(
-          'custom-field-options-archive',
+          'field-action-archive',
         ),
     };
   };

package/src/components/CustomFieldsPanel/CustomFieldsCollectionPanelEntry.tsx

@@ -4,10 +4,9 @@ import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 
 export function CustomFieldsCollectionPanelEntry() {
   const toolbar = useToolbarCollectionContext();
-
-  return (
-    <CustomFieldsPanel
-      state={toolbar.collectionDataExtension!.customFieldsPanel}
-    />
-  );
+  const state = toolbar.collectionFieldsSource?.customFieldsPanel;
+  if (!state) {
+    return null;
+  }
+  return <CustomFieldsPanel state={state} />;
 }

package/src/components/CustomFieldsPanel/CustomFieldsList.tsx

@@ -1,4 +1,4 @@
-import { CustomField } from '@wix/bex-core';
+import { Field } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback } from 'react';
 import { CustomFieldItem } from './CustomFieldItem';
@@ -13,7 +13,7 @@ function _CustomFieldsList(props: CustomFieldsListProps) {
   const { state } = props;
 
   const renderItem = useCallback(
-    (field: CustomField, index: number, array: CustomField[]) => {
+    (field: Field, index: number, array: Field[]) => {
       return (
         <CustomFieldItem
           state={state}
@@ -32,7 +32,7 @@ function _CustomFieldsList(props: CustomFieldsListProps) {
       dataHook="custom-fields-list"
       backgroundColor="D60"
     >
-      {state.dataExtension.availableUserCustomFields.map(renderItem)}
+      {state.manageableFields.map(renderItem)}
     </Box>
   );
 }

package/src/components/CustomFieldsPanel/CustomFieldsPanel.tsx

@@ -1,7 +1,7 @@
 import { withoutDefaults } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { Box, Divider, SidePanel } from '@wix/design-system';
 import { ScrollableContent } from '../ScrollableContent';
 import { observer } from 'mobx-react-lite';
@@ -10,7 +10,14 @@ import { AddCustomFieldCTAButton } from './AddCustomFieldCTAButton';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
-import { DataExtension } from '../DataExtension/DataExtension';
+
+// Lazy: the archive CTA loads only for sources that archive, so sources that
+// don't (e.g. a schema) never pull it into their bundle.
+const ArchivedItemsCTAButton = lazy(() =>
+  import('../ArchivedItemsPanel/ArchivedItemsCTAButton').then((m) => ({
+    default: m.ArchivedItemsCTAButton,
+  })),
+);
 
 export interface CustomFieldsPanelProps {
   state: CustomFieldsPanelState;
@@ -48,12 +55,15 @@ export function _CustomFieldsPanel({ state }: CustomFieldsPanelProps) {
         overflowY
         dataHook="custom-fields-panel-scroll-container"
       >
-        {state.dataExtension?.shouldDisplayArchive && (
-          <DataExtension.CustomColumnsArchivedItemsCTAButton
-            dataExtension={state.dataExtension}
-            onCloseSidePanel={() => state.closeSidePanel?.()}
-            dataHook="custom-fields"
-          />
+        {state.archive?.shouldDisplay && (
+          <Suspense fallback={null}>
+            <ArchivedItemsCTAButton
+              archive={state.archive}
+              deleteFieldModal={state.deleteFieldModal}
+              onCloseSidePanel={() => state.closeSidePanel?.()}
+              dataHook="custom-fields"
+            />
+          </Suspense>
         )}
         <CustomFieldsList state={state} />
       </ScrollableContent>