@wix/patterns 1.422.0 → 1.424.0

package/src/components/CollectionTable/{useTableCollectionSyncProps.ts → useTableCollectionSyncProps.tsx}

@@ -1,5 +1,5 @@
 import { FiltersMap } from '@wix/bex-core';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { CollectionTableProps } from './CollectionTable';
 import { useToolbarCollectionSyncProps } from '../ToolbarCollection/useToolbarCollectionSyncProps';
 import { assertComponentType } from '../assertComponentType';
@@ -28,6 +28,7 @@ export function useTableCollectionSyncProps<T, F extends FiltersMap>(
     selectionDisabled,
     checkboxTooltipContent,
     dataExtension,
+    fieldsSource,
     isUsingTableVirtualization,
     isUsingExpandCollapse,
     dragAndDropReorderModeToolbar,
@@ -59,18 +60,33 @@ export function useTableCollectionSyncProps<T, F extends FiltersMap>(
     isUsingExpandCollapse,
   });
 
-  useColumnsSyncProps({
-    toolbar: state,
-    customColumns,
-    columns: tableColumns,
-  });
-
+  // Attach the field source first, so the custom-columns button it declares is
+  // available to useColumnsSyncProps below.
   useState(() => {
     if (isValidElement<DataExtensionProps, DataExtensionType>(dataExtension)) {
       dataExtension.type.setDataExtensionOnTable(state, dataExtension.props);
     } else {
       dataExtension?.setDataExtensionOnTable(state);
     }
+    if (fieldsSource) {
+      fieldsSource.setOnTable(state);
+    }
+  });
+
+  // When a source is attached, the table gets a custom-columns button even if the
+  // consumer didn't pass one. The source supplies CustomColumns via its components
+  // bag (DI) so the implementation ships in the source's feature chunk, not the
+  // table chunk.
+  const SourceCustomColumns =
+    state.collectionFieldsSource?.components.CustomColumns;
+  const effectiveCustomColumns =
+    customColumns ??
+    (SourceCustomColumns ? <SourceCustomColumns /> : undefined);
+
+  useColumnsSyncProps({
+    toolbar: state,
+    customColumns: effectiveCustomColumns,
+    columns: tableColumns,
   });
 
   useEffect(() => {

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3020381812";
+var _namespace_ = "CollectionToolbar3931104184";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar3020381812__root","left":"CollectionToolbar3020381812__left","right":"CollectionToolbar3020381812__right","fullWidth":"CollectionToolbar3020381812__fullWidth"};
+export var classes = {"root":"CollectionToolbar3931104184__root","left":"CollectionToolbar3931104184__left","right":"CollectionToolbar3931104184__right","fullWidth":"CollectionToolbar3931104184__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -104,6 +104,12 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     container: { isPanelLayout },
   } = state;
 
+  const SourceCustomColumns =
+    state.collectionFieldsSource?.components.CustomColumns;
+  const effectiveCustomColumns =
+    customColumns ??
+    (SourceCustomColumns ? <SourceCustomColumns /> : undefined);
+
   const addDataHookToMoreActions = () => {
     return (
       <MoreActions dataHook="toolbar-more-actions" {...moreActions!.props} />
@@ -133,9 +139,9 @@ function _CollectionToolbar<T, F extends FiltersMap>(
         </ToolbarItemBox>
       );
 
-  const CollectionToolbarFilters =
-    state.tagsCollectionState?.components.CollectionToolbarFilters ||
-    state.collectionDataExtension?.components.CollectionToolbarFilters;
+  const ToolbarFilters =
+    state.tagsCollectionState?.components.CollectionToolbarFilters ??
+    state.collectionFieldsSource?.components.CollectionToolbarFilters;
 
   const filtersElement = useMemo(() => {
     if (!state.container.initTask.status.isSuccess) {
@@ -150,16 +156,14 @@ function _CollectionToolbar<T, F extends FiltersMap>(
       return filtersProp;
     }
     const featureFilters = [
-      ...(state.collectionDataExtension?.buildCustomFieldFilters() || []),
+      ...(state.collectionFieldsSource?.buildFilters() || []),
       state.tagsCollectionState?.buildTagsFilterWrapper(),
     ].filter(Boolean);
 
     return (
       filtersProp ??
-      (CollectionToolbarFilters && (
-        <CollectionToolbarFilters inline={0}>
-          {featureFilters}
-        </CollectionToolbarFilters>
+      (ToolbarFilters && (
+        <ToolbarFilters inline={0}>{featureFilters}</ToolbarFilters>
       ))
     );
   }, [filtersProp, isMobile, state.container.initTask.status]);
@@ -265,7 +269,9 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           filtersElement={filtersElement}
           MoreFiltersButton={MoreFiltersButton}
           multiLevelSorting={multiLevelSorting}
-          customColumns={isMobile || isPanelLayout ? undefined : customColumns}
+          customColumns={
+            isMobile || isPanelLayout ? undefined : effectiveCustomColumns
+          }
           exportButton={exportButton}
           importButton={importButton}
           search={searchElement}

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

@@ -208,6 +208,25 @@ export const CollectionToolbarUniDriver = (
     getFilterDropdownAvailableOptionsIds: (filterName: string) => {
       return getInputWithOptionsDriver(filterName).getAvailableOptionsIds();
     },
+    /**
+     * Indicates if a specific dropdown option is disabled
+     * @param filterName - the key of the filter in the filters object passed to `useCollection`
+     * @param id - the key of the option
+     */
+    isFilterDropdownOptionDisabled: (filterName: string, id: string) => {
+      return getInputWithOptionsDriver(filterName).isOptionDisabled(id);
+    },
+    /**
+     * Indicates if a specific dropdown option exposes a disabled tooltip
+     * @param filterName - the key of the filter in the filters object passed to `useCollection`
+     * @param id - the key of the option
+     */
+    hasFilterDropdownOptionDisabledTooltip: (
+      filterName: string,
+      id: string,
+    ) => {
+      return getInputWithOptionsDriver(filterName).hasOptionDisabledTooltip(id);
+    },
     /**
      * Returns filter's placeholder text
      * @param filterName - the key of the filter in the filters object passed to `useCollection`

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3358516105";
+var _namespace_ = "SearchOrCustomFilter96467332";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter3358516105__root","search":"SearchOrCustomFilter3358516105__search","searchMobile":"SearchOrCustomFilter3358516105__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter96467332__root","search":"SearchOrCustomFilter96467332__search","searchMobile":"SearchOrCustomFilter96467332__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/useIsCollectionToolbarExists.tsx

@@ -30,6 +30,7 @@ export const useIsCollectionToolbarExists = <T, F extends FiltersMap>(
     tabs ||
     views ||
     customColumns ||
+    state.collectionFieldsSource ||
     multiLevelSorting ||
     exportButton ||
     importButton ||
@@ -49,8 +50,8 @@ export const useIsCollectionToolbarExists = <T, F extends FiltersMap>(
   }
 
   const hasDynamicFilters =
-    (state.collectionDataExtension?.buildCustomFieldFilters() || []).length >
-      0 || !!state.tagsCollectionState?.buildTagsFilterWrapper();
+    (state.collectionFieldsSource?.buildFilters() || []).length > 0 ||
+    !!state.tagsCollectionState?.buildTagsFilterWrapper();
 
   return hasDynamicFilters;
 };

package/src/components/CollectionToolbarFilters/useFiltersSyncProps.ts

@@ -64,25 +64,22 @@ function addCustomFieldFilters(
   children: FilterChildrenComponent,
   state: ReturnType<typeof useToolbarCollectionContext>,
 ) {
-  const customFieldFilters =
-    state.collectionDataExtension?.dataExtension.filterableCustomFields
-      .map((customField) => {
-        if (
-          children.some((child) => child.props.filter.name === customField.id)
-        ) {
-          return null;
-        }
+  const builtFilters = state.collectionFieldsSource?.buildFilters() as
+    | FilterChildComponent[]
+    | undefined;
 
-        return state.collectionDataExtension?.buildCustomFieldFilterWrapper(
-          customField,
-        );
-      })
-      .filter(Boolean) as FilterChildComponent[] | undefined;
-  if (customFieldFilters) {
-    return [...children, ...customFieldFilters];
+  if (!builtFilters) {
+    return children;
   }
 
-  return children;
+  const newFilters = builtFilters.filter(
+    (built) =>
+      !children.some(
+        (child) => child.props.filter.name === built.props.filter.name,
+      ),
+  );
+
+  return [...children, ...newFilters];
 }
 
 export const useFiltersSyncProps = (children: FilterChildren) => {

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly750254785";
+var _namespace_ = "AutoCompleteReadonly754203246";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly750254785__root"};
+export var classes = {"root":"AutoCompleteReadonly754203246__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown1727099348";
+var _namespace_ = "ViewsDropdown1047115637";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown1727099348__root"};
+export var classes = {"root":"ViewsDropdown1047115637__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -24,7 +24,7 @@ import {
 import { AutoCompleteReadonly } from './AutoCompleteReadonly';
 import { SaveToNewViewFooter } from './SaveToNewViewFooter';
 import { ViewsDropdownPrefix } from './ViewsDropdownPrefix';
-import { useWixPatternsContainer } from '../..';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export const VIEWS_REDESIGN_EXPERIMENT = 'specs.cairo.ViewsRedesign';
 

package/src/components/CollectionViewsDropdown/ViewsDropdownPrefix.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionViewsState } from '../../state';
 import { observer } from 'mobx-react-lite';
-import { useWixPatternsContainer } from '../..';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { VIEWS_REDESIGN_EXPERIMENT } from './ViewsDropdown';
 
 export type ViewsDropdownPrefixProps<T, F extends FiltersMap> = {

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}