@wix/patterns 1.423.0 → 1.425.0

package/src/components/ArchivedItemsPanel/ArchivedItemsPanel.tsx

@@ -10,14 +10,16 @@ import { observer } from 'mobx-react-lite';
 import { ScrollableContent } from '../ScrollableContent';
 import { ArchivedItemsList } from './ArchivedItemsList';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { DataExtensionState } from '@wix/bex-core';
+import type { DeleteFieldModalState, FieldArchive } from '@wix/bex-core';
 import type { ArchivedItem } from './types';
 
 export interface ArchivedItemsPanelProps {
   items: ArchivedItem[];
   onBackButtonClick: () => void;
   onCloseButtonClick: () => void;
-  dataExtension: DataExtensionState;
+  archive: FieldArchive;
+  /** The shared delete-field modal, opened when an archived field is deleted. */
+  deleteFieldModal: DeleteFieldModalState;
   dataHook?: string;
 }
 
@@ -25,7 +27,8 @@ function _ArchivedItemsPanel({
   items,
   onBackButtonClick,
   onCloseButtonClick,
-  dataExtension,
+  archive,
+  deleteFieldModal,
   dataHook = 'custom-columns',
 }: ArchivedItemsPanelProps) {
   const { translate: t } = useWixPatternsContainer();
@@ -36,32 +39,25 @@ function _ArchivedItemsPanel({
   }, []);
 
   const closeIfEmpty = () => {
-    const remainingItems = dataExtension.archivedItems;
-    if (remainingItems.length === 0) {
+    if (archive.items.length === 0) {
       handleBack();
     }
   };
 
   const handleRestore = async (item: ArchivedItem) => {
-    await dataExtension.restoreField({
-      id: item.id,
-      origin: 'Archived items panel',
-      reportBi: dataExtension.container.createBILogger({
-        componentType: 'ArchivedItemsPanel',
-      }),
-    });
-
+    await archive.restoreField(item.id, 'Archived items panel');
     closeIfEmpty();
   };
 
   const handleDelete = useCallback(
     (item: ArchivedItem) => {
-      dataExtension.deleteFieldModal?.modal.open({
+      deleteFieldModal.modal.open({
         id: item.id,
         origin: 'Archived items panel',
+        fieldName: archive.fieldName(item.id),
       });
     },
-    [dataExtension],
+    [archive, deleteFieldModal],
   );
 
   const slideStyle = useMemo<CSSProperties>(

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer552017853";
+var _namespace_ = "CardContainer2775713817";
 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":"CardContainer552017853__root"};
+export var classes = {"root":"CardContainer2775713817__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm2948093295";
+var _namespace_ = "CmsFieldForm1384112831";
 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":"CmsFieldForm2948093295__root","fullBleedDivider":"CmsFieldForm2948093295__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1384112831__root","fullBleedDivider":"CmsFieldForm1384112831__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal387613076";
+var _namespace_ = "CmsFieldModal1182311686";
 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":"CmsFieldModal387613076__root","modal":"CmsFieldModal387613076__modal"};
+export var classes = {"root":"CmsFieldModal1182311686__root","modal":"CmsFieldModal1182311686__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection1637078487";
+var _namespace_ = "ValidationAndDefaultsSection2900457986";
 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":"ValidationAndDefaultsSection1637078487__root","accordionWrapper":"ValidationAndDefaultsSection1637078487__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2900457986__root","accordionWrapper":"ValidationAndDefaultsSection2900457986__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput2578577531";
+var _namespace_ = "CharactersLimitInput1894523739";
 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":"CharactersLimitInput2578577531__root","field":"CharactersLimitInput2578577531__field"};
+export var classes = {"root":"CharactersLimitInput1894523739__root","field":"CharactersLimitInput1894523739__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2463891651";
+var _namespace_ = "Collapse4113002791";
 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":"Collapse2463891651__root","exit":"Collapse2463891651__exit"};
+export var classes = {"root":"Collapse4113002791__root","exit":"Collapse4113002791__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionCard/CollectionCard.tsx

@@ -10,13 +10,11 @@ import { NavigationModal } from '../NavigationModal';
 import { WixPatternsModalsContainer } from '../WixPatternsModalsContainer';
 import { usePageContext } from '../../providers';
 import { MultiCollectionSupportProvider } from '../MultiCollectionSupportProvider';
-import type { DataExtensionType } from '../DataExtension';
 import { classes, st } from '../common.st.css.js';
 import { ErrorState } from '../ErrorState';
 import type { TagsElement } from '../Tags';
 import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import { DeleteFieldModal } from '../ArchivedItemsPanel/DeleteFieldModal';
 
 export interface CollectionCardProps<T, F extends FiltersMap>
   extends CardProps {
@@ -31,7 +29,6 @@ export interface CollectionCardProps<T, F extends FiltersMap>
           retry: () => void;
         },
       ) => ReactElement);
-  dataExtension?: DataExtensionType;
   tags?: TagsElement<T, F>;
 }
 
@@ -53,7 +50,7 @@ function _CollectionCard<T, F extends FiltersMap>({
     initTask,
     bulk,
     AddApplyFiltersButton,
-    collectionDataExtension,
+    collectionFieldsSource,
     tagsCollectionState,
   } = state;
   const { modals } = bulk;
@@ -94,22 +91,10 @@ function _CollectionCard<T, F extends FiltersMap>({
         </Card>
 
         <NavigationModal />
-        {collectionDataExtension?.dataExtension && (
-          <>
-            <collectionDataExtension.DataExtension.CustomFieldModal
-              state={collectionDataExtension.customFieldsPanel.customFieldModal}
-            />
-            <collectionDataExtension.DataExtension.ArchiveFieldModal
-              state={
-                collectionDataExtension.customFieldsPanel.archiveFieldModal
-              }
-            />
-            {collectionDataExtension.dataExtension.deleteFieldModal && (
-              <DeleteFieldModal
-                state={collectionDataExtension.dataExtension.deleteFieldModal}
-              />
-            )}
-          </>
+        {collectionFieldsSource && (
+          <collectionFieldsSource.components.FieldManagementModals
+            source={collectionFieldsSource}
+          />
         )}
 
         <CollectionProvider value={collection}>{tags}</CollectionProvider>

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage3986816266";
+var _namespace_ = "CollectionPage4113028783";
 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":"CollectionPage3986816266__root"};
+export var classes = {"root":"CollectionPage4113028783__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3506425011";
+var _namespace_ = "CollectionSectionHeader4123536058";
 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":"CollectionSectionHeader3506425011__root","summaryIcon":"CollectionSectionHeader3506425011__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader4123536058__root","summaryIcon":"CollectionSectionHeader4123536058__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable4068079517";
+var _namespace_ = "CollectionTable3912444859";
 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":"CollectionTable4068079517__root"};
+export var classes = {"root":"CollectionTable3912444859__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.tsx

@@ -23,14 +23,13 @@ import {
 import { CollectionTableActionCellProps } from './CollectionTableBaseCommonProps';
 import {
   type DataExtensionElement,
-  DataExtensionProps,
   type DataExtensionType,
 } from '../DataExtension';
+import type { FieldsSourceProvider } from '../fieldsSourceProvider';
 import { useCreateWSRColumnBase } from '../../hooks/useCreateWSRColumnBase';
 import type { TagsElement } from '../Tags';
 import { TablePlaceholderStates } from '../TablePlaceholderStates/TablePlaceholderStates';
 import { useScrollableContentContext } from '../../providers';
-import { isValidElement } from '../isValidElement';
 import { st, classes } from './CollectionTable.st.css.js';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useCollectionTableResize } from '../../hooks/useCollectionTableResize';
@@ -75,6 +74,15 @@ export interface CollectionTableBaseProps<T, F extends FiltersMap>
    */
   dataExtension?: DataExtensionType | DataExtensionElement;
 
+  /**
+   * Attaches a field source to the table — the way to add a source's fields,
+   * filters, and field management. Build it with `tableSchemaSource(...)` for a
+   * schema source (also spread its `collectionConfig` into the collection hook),
+   * or `dataExtensionTableSource(...)` for DataExtension, which extends the
+   * consumer's own collection.
+   */
+  fieldsSource?: FieldsSourceProvider;
+
   tags?: TagsElement<T, F>;
 
   forceResize?: boolean;
@@ -129,7 +137,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     filters,
     title,
     tabs,
-    customColumns: customColumnsProp,
     multiLevelSorting: multiLevelSortingProp,
     dataExtension,
     tags,
@@ -188,13 +195,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     ...rest
   } = props;
 
-  const dataExtensionType = isValidElement<
-    DataExtensionProps,
-    DataExtensionType
-  >(dataExtension)
-    ? dataExtension.type
-    : dataExtension;
-
   const state = tableState.toolbar;
 
   const horizontalScroll =
@@ -207,9 +207,7 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
 
   const sticky = stickyProp ?? scrollableContentRef?.current != null;
 
-  const customColumns =
-    props.customColumns ||
-    (dataExtensionType && <dataExtensionType.CustomColumns />);
+  const customColumns = props.customColumns;
 
   const isMobile = useIsMobile();
 
@@ -412,7 +410,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
       errorState={errorState}
       state={state}
       dataHook={dataHook}
-      dataExtension={dataExtensionType}
       tags={tags}
       {...cardProps}
     >

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable4090046348";
+var _namespace_ = "CollectionTableWSRTable111214369";
 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":"CollectionTableWSRTable4090046348__root"};
+export var classes = {"root":"CollectionTableWSRTable111214369__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "CollectionToolbar2054934925";
+var _namespace_ = "CollectionToolbar1103008482";
 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":"CollectionToolbar2054934925__root","left":"CollectionToolbar2054934925__left","right":"CollectionToolbar2054934925__right","fullWidth":"CollectionToolbar2054934925__fullWidth"};
+export var classes = {"root":"CollectionToolbar1103008482__root","left":"CollectionToolbar1103008482__left","right":"CollectionToolbar1103008482__right","fullWidth":"CollectionToolbar1103008482__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/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2461435889";
+var _namespace_ = "SearchOrCustomFilter2194990165";
 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":"SearchOrCustomFilter2461435889__root","search":"SearchOrCustomFilter2461435889__search","searchMobile":"SearchOrCustomFilter2461435889__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2194990165__root","search":"SearchOrCustomFilter2194990165__search","searchMobile":"SearchOrCustomFilter2194990165__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_ = "AutoCompleteReadonly1943558230";
+var _namespace_ = "AutoCompleteReadonly2032030598";
 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":"AutoCompleteReadonly1943558230__root"};
+export var classes = {"root":"AutoCompleteReadonly2032030598__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_ = "ViewsDropdown1965884629";
+var _namespace_ = "ViewsDropdown1771225373";
 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":"ViewsDropdown1965884629__root"};
+export var classes = {"root":"ViewsDropdown1771225373__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> = {