@wix/patterns 1.425.0 → 1.427.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter311251995";
+var _namespace_ = "TabsFilter322255717";
 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":"TabsFilter311251995__root","title":"TabsFilter311251995__title"};
+export var classes = {"root":"TabsFilter322255717__root","title":"TabsFilter322255717__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal885634463";
+var _namespace_ = "ManageTagsModal2098405983";
 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":"ManageTagsModal885634463__root"};
+export var classes = {"root":"ManageTagsModal2098405983__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.tsx

@@ -11,8 +11,7 @@ import {
   Search,
   ToastContainer,
 } from '@wix/design-system';
-import { useCollectionReachBottom } from '../../../useCollectionReachBottom';
-import { InfiniteScrollLoader } from '../../../InfiniteScrollLoader/InfiniteScrollLoader';
+import { useReachBottom } from '../../../../hooks/useReachBottom';
 import { Add } from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { TagsListItem } from './List/TagsListItem';
@@ -68,9 +67,12 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
 
   const scrollRef = useRef<HTMLDivElement>(null);
   state.ref = scrollRef;
-  const { targetRef } = useCollectionReachBottom({
-    collection: state.tagsManagementState.collection,
-    containerRef: shouldAllowTagsPagination ? scrollRef : undefined,
+
+  // Grows the local render window when the user scrolls near the bottom —
+  // all tags are already in memory, only rendering is windowed
+  useReachBottom({
+    containerRef: scrollRef,
+    onReachBottom: state.showMoreItems,
   });
 
   return (
@@ -182,13 +184,6 @@ const ManageTagsModalContent = observer(({ state }: ManageTagsModalProps) => {
               {state.isShowingNewTagListItem && (
                 <NewTagItemEditable state={state} />
               )}
-              {shouldAllowTagsPagination && (
-                <InfiniteScrollLoader
-                  targetRef={targetRef}
-                  state={state.tagsManagementState.collection}
-                  size="small"
-                />
-              )}
             </ScrollableContent>
           </Box>
         </Box>

package/src/components/TagsWidget/TagsWidgetContent.tsx

@@ -117,8 +117,6 @@ const _TagsWidgetContent = ({
     );
   }, [initialTagIdsKey]);
 
-  const { shouldAllowTagsPagination } = formState.tagsManagementState;
-
   const tagsOptions = useMemo(() => {
     const options = formState.displayedTagOptions;
 
@@ -192,13 +190,6 @@ const _TagsWidgetContent = ({
     <>
       <MultiSelect
         popoverProps={popoverProps}
-        {...(shouldAllowTagsPagination
-          ? {
-              infiniteScroll: true,
-              hasMore: formState.tagsManagementState.hasMore,
-              loadMore: () => formState.tagsManagementState.loadMore(),
-            }
-          : {})}
         value={formState.searchValue}
         onChange={handleSearchChange}
         options={tagsOptions}

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common1291335839";
+var _namespace_ = "common1667624752";
 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":"common1291335839__root","column":"common1291335839__column","fullHeight":"common1291335839__fullHeight"};
+export var classes = {"root":"common1667624752__root","column":"common1667624752__column","fullHeight":"common1667624752__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/schema.ts

@@ -0,0 +1,13 @@
+export {
+  useCollection,
+  useTableCollection,
+  useGridCollection,
+  useEditableTableCollection,
+  useLayoutSwitchCollection,
+  schemaSourceMutations,
+} from '../schema';
+export type {
+  SchemaCollectionOptions,
+  SchemaEditableTableCollectionOptions,
+  SchemaLayoutSwitchCollectionOptions,
+} from '../schema';

package/src/exports/testkit/index.ts

@@ -12,4 +12,9 @@ export {
   aTagsArray,
   aTag,
 } from '../../test-utils';
-export { exportServiceMocks, appSettingsMocks } from '@wix/bex-core/testkit';
+export {
+  exportServiceMocks,
+  appSettingsMocks,
+  createInMemorySchemaSource,
+} from '@wix/bex-core/testkit';
+export type { InMemorySchemaSourceConfig } from '@wix/bex-core/testkit';

package/src/hooks/index.ts

@@ -3,6 +3,8 @@ export * from './useBuildOption';
 export * from './usePickerModal';
 export * from './usePickerStandalone';
 export * from './useViews';
+export * from './useSchemaImport';
+export * from './usePlatformizedImport';
 export * from './useEmptyStateTexts';
 export * from './customModalContent';
 export * from './useDropdownSelectFilterState';

package/src/hooks/useCreateWSRColumnBase.tsx

@@ -2,16 +2,20 @@ import { TableColumn } from '../model';
 import React, { useCallback, type ReactNode } from 'react';
 import { Box, Text } from '@wix/design-system';
 import { getFieldTypeIcon } from '../utils/fieldTypePrefixIcons';
+import { AddFieldColumnHeader } from '../components/Table/AddFieldColumnHeader';
 
 export interface UseCreateWSRColumnBaseParams {
   horizontalScroll?: boolean;
   /** When true, renders field-type prefix icons in column headers. */
   showFieldTypeIcons?: boolean;
+  /** When true, wraps each column header with the AddField hover popover. */
+  showAddFieldButton?: boolean;
 }
 
 export function useCreateWSRColumnBase({
   horizontalScroll,
   showFieldTypeIcons,
+  showAddFieldButton,
 }: UseCreateWSRColumnBaseParams) {
   return useCallback(
     (
@@ -60,10 +64,19 @@ export function useCreateWSRColumnBase({
           title
         );
 
+      const hasTitleText =
+        typeof title === 'string' ? title.trim().length > 0 : Boolean(title);
+      const wrapWithAddField =
+        showAddFieldButton && id !== 'avatar' && hasTitleText;
+
       return {
         id,
         key: id ?? index,
-        title: renderedTitle,
+        title: wrapWithAddField ? (
+          <AddFieldColumnHeader>{renderedTitle}</AddFieldColumnHeader>
+        ) : (
+          renderedTitle
+        ),
         style,
         width: lastColumn && !horizontalScroll ? undefined : width,
         sortable: id && sortable ? true : undefined,
@@ -72,6 +85,6 @@ export function useCreateWSRColumnBase({
           : undefined,
       };
     },
-    [horizontalScroll, showFieldTypeIcons],
+    [horizontalScroll, showFieldTypeIcons, showAddFieldButton],
   );
 }

package/src/hooks/usePlatformizedImport.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import type {
+  BackupFn,
+  Destination,
+  ImportButtonConfig,
+  ImportField,
+  ImportState,
+  JobApplicationErrorMap,
+} from '@wix/bex-core';
+import { PlatformizedImportRef } from '../components/DataExtension/platformizedImportRef';
+import { DataExtensionImportFieldEditor } from '../components/DataExtension/DataExtensionImportFieldEditor';
+import type { RenderImportFieldEditor } from '../components/ImportButton/ImportProps';
+import type { ToolbarCollectionState } from '../state/ToolbarCollectionState';
+
+export interface PlatformizedImportParams {
+  /**
+   * The table state (e.g. `table` from `useTableCollection`) — the same one the
+   * `<Table>` renders. When the table has a DataExtension source, the import reads
+   * its live fields and can create new ones (create-new-field).
+   */
+  state: { toolbar: ToolbarCollectionState<any, any> };
+  /** Existing collection fields, for column auto-mapping. */
+  fields: ImportField[];
+  /**
+   * Platformized (non–Wix-Data) destination the import writes into, e.g.
+   * `{ storesCatalogProducts: {} }`.
+   */
+  destination: Destination;
+  /**
+   * Optional snapshot taken before the rows are uploaded; its `restore` undoes
+   * the import if the user cancels mid-import.
+   */
+  backup?: BackupFn;
+  /** See {@link JobApplicationErrorMap}. */
+  jobApplicationErrorMap?: JobApplicationErrorMap;
+}
+
+export interface PlatformizedImport {
+  /** Pass to `<ImportButton config={...} />`. */
+  config: ImportButtonConfig;
+  /** Pass to `<ImportButton renderFieldEditor={...} />` — the create/edit-field modal. */
+  renderFieldEditor: RenderImportFieldEditor;
+}
+
+/**
+ * Builds the CSV import inputs for a platformized (non–Wix-Data) destination —
+ * e.g. the stores catalog. Reads the table's toolbar so a DataExtension source's
+ * live fields and create-new-field are wired in; `fields` are the consumer's plus
+ * the DataExtension fields on the table. Returns the `config` and the
+ * DataExtension create/edit-field modal; pass both to `<ImportButton>`. Mirrors
+ * `useSchemaImport`, which does the same for the CMS (Wix Data) case.
+ */
+export function usePlatformizedImport({
+  state,
+  fields,
+  destination,
+  backup,
+  jobApplicationErrorMap,
+}: PlatformizedImportParams): PlatformizedImport {
+  const [config] = useState(
+    () =>
+      new PlatformizedImportRef({
+        toolbar: state.toolbar,
+        fields,
+        destination,
+        backup,
+        jobApplicationErrorMap,
+      }),
+  );
+  const [renderFieldEditor] = useState<RenderImportFieldEditor>(
+    () =>
+      ({ state: importState }: { state: ImportState }) =>
+        <DataExtensionImportFieldEditor state={importState} />,
+  );
+
+  return { config, renderFieldEditor };
+}

package/src/hooks/useReachBottom.ts

@@ -0,0 +1,50 @@
+import { RefObject, useEffect, useRef } from 'react';
+import {
+  ReachBottomListener,
+  ScrollableWindow,
+} from '../reach-bottom-listener';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface UseReachBottomParams {
+  containerRef: RefObject<ScrollableWindow | null | undefined>;
+  onReachBottom: () => unknown;
+  // distance from the bottom to trigger the callback
+  offsetPX?: number;
+  // throttle scroll event
+  delay?: number;
+}
+
+/**
+ * Calls `onReachBottom` when the container is scrolled near its bottom.
+ * For fetching more pages of a collection, use `useCollectionReachBottom`
+ * instead — it also refills under-filled containers and reacts to
+ * collection events.
+ */
+export function useReachBottom({
+  containerRef,
+  onReachBottom,
+  offsetPX = 250,
+  delay = 200,
+}: UseReachBottomParams) {
+  const { lodash } = useWixPatternsContainer();
+
+  const onReachBottomRef = useRef(onReachBottom);
+  onReachBottomRef.current = onReachBottom;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container == null) {
+      return;
+    }
+
+    const listener = new ReachBottomListener({
+      onReachBottom: () => onReachBottomRef.current(),
+      delay,
+      offsetPX,
+      lodash,
+      container,
+    });
+    listener.subscribe();
+    return () => listener.unsubscribe();
+  }, []);
+}

package/src/hooks/useSchemaImport.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import type { ImportButtonConfig, ImportState } from '@wix/bex-core';
+import type { TableSchemaSource } from '../components/SchemaSource/tableSchemaSource';
+import { SchemaImportRef } from '../components/SchemaSource/schemaImportRef';
+import type { RenderImportFieldEditor } from '../components/ImportButton/ImportProps';
+import { CmsImportFieldEditor } from '../components/ImportButton/CmsImportFieldEditor';
+
+export interface SchemaImport {
+  /** Pass to `<ImportButton config={...} />`. */
+  config: ImportButtonConfig;
+  /** Pass to `<ImportButton renderFieldEditor={...} />` — the create/edit-field modal. */
+  renderFieldEditor: RenderImportFieldEditor;
+}
+
+/**
+ * Builds the CSV import inputs for a table's live `SchemaState` — the same one
+ * `source` attaches to the table. Returns the `config` and the CMS
+ * `renderFieldEditor`; pass both to `<ImportButton>`.
+ *
+ * Because it reads the live state, the import always matches the table's current
+ * fields (including ones it just created) and needs no load of its own. `source`
+ * is expected to be stable (memoized, as `CmsFieldsTable` does).
+ */
+export function useSchemaImport<T = Record<string, unknown>>(
+  source: TableSchemaSource<T>,
+): SchemaImport {
+  const [config] = useState(() => new SchemaImportRef(source));
+  const [renderFieldEditor] = useState<RenderImportFieldEditor>(
+    () =>
+      ({ state }: { state: ImportState }) =>
+        <CmsImportFieldEditor state={state} />,
+  );
+
+  return { config, renderFieldEditor };
+}

package/src/hooks/useTableCollection.ts

@@ -8,7 +8,7 @@ import { TableState } from '../state';
 import { useOptionalCachedState } from './useOptionalCachedState';
 import { AiAssistant } from '../aiAssistant';
 
-type TableCollectionConfig<
+export type TableCollectionConfig<
   T,
   F extends FiltersMap,
 > = CollectionConfigWithConditionals<T, F> & {

package/src/index.ts

@@ -131,6 +131,8 @@ export {
 export * from './hooks/usePickerStandalone';
 export * from './hooks/useSetupWidget';
 export * from './hooks/useViews';
+export * from './hooks/useSchemaImport';
+export * from './hooks/usePlatformizedImport';
 export * from './hooks/useTableGridSwitchFolders';
 export * from './hooks/useTableCollection';
 export * from './hooks/useGridCollection';
@@ -247,8 +249,6 @@ export {
 
 export { useCreateImport } from '@wix/bex-core';
 export type { BackupFn } from '@wix/bex-core';
-export { useImportConfig } from '@wix/bex-core';
-export type { UseImportConfigParams } from '@wix/bex-core';
 
 export {
   QueryCache,

package/src/schema/index.ts

@@ -0,0 +1,7 @@
+export * from './useCollection';
+export * from './useTableCollection';
+export * from './useGridCollection';
+export * from './useEditableTableCollection';
+export * from './useLayoutSwitchCollection';
+export type { SchemaCollectionOptions } from './schemaCollectionOptions';
+export { schemaSourceMutations } from './schemaSourceMutations';

package/src/schema/schemaCollectionOptions.ts

@@ -0,0 +1,44 @@
+import type { FiltersMap, SchemaSource } from '@wix/bex-core';
+import type { CollectionConfigWithConditionals } from '@wix/bex-core/react';
+
+type FetchData<T> = SchemaSource<T>['collectionConfig']['fetchData'];
+
+/**
+ * The collection options a schema-entry hook accepts — everything the source
+ * doesn't supply. Source-owned keys (`queryName`, `paginationMode`,
+ * `fetchData`, `fetchTotal`, `itemKey`, `itemName`) don't exist here.
+ */
+export type SchemaCollectionOptions<T, F extends FiltersMap> = Omit<
+  CollectionConfigWithConditionals<T, F>,
+  | 'queryName'
+  | 'paginationMode'
+  | 'fetchData'
+  | 'fetchTotal'
+  | 'itemKey'
+  | 'itemName'
+> & {
+  /** Wraps the source's fetch (filter/enrich results) without replacing it. */
+  wrapFetchData?: (next: FetchData<T>) => FetchData<T>;
+};
+
+/** Merges the source's query config under the consumer's collection options.
+ *  `options` is typed loosely — the hooks' option types already enforce the
+ *  consumer surface, and TS can't infer `F` back through the conditional
+ *  config type; callers pass the generics explicitly. */
+export function schemaCollectionConfig<T, F extends FiltersMap>(
+  source: SchemaSource<T>,
+  options?: object,
+): CollectionConfigWithConditionals<T, F> {
+  const { wrapFetchData, ...rest } = (options ?? {}) as SchemaCollectionOptions<
+    T,
+    F
+  >;
+  const sourceConfig = source.collectionConfig;
+  return {
+    ...rest,
+    ...sourceConfig,
+    fetchData: wrapFetchData
+      ? wrapFetchData(sourceConfig.fetchData)
+      : sourceConfig.fetchData,
+  } as unknown as CollectionConfigWithConditionals<T, F>;
+}

package/src/schema/schemaSourceMutations.ts

@@ -0,0 +1,35 @@
+import type { SchemaState } from '../components/SchemaSource/SchemaState';
+import type { EditableTableMutationHandlers } from '../state/EditableTable';
+
+const newLocalId = () =>
+  `new-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+
+/**
+ * Row write handlers read from the attached SchemaState — the schema-entry
+ * default, so an editable table needs no `mutations` config. The schema loads
+ * before any row can be added or edited.
+ */
+export function schemaSourceMutations<T>(
+  schemaState: SchemaState<T>,
+): EditableTableMutationHandlers<T> {
+  const backend = () => {
+    const loaded = schemaState.loadedSchema;
+    if (!loaded) {
+      throw new Error('The schema is not loaded yet');
+    }
+    return loaded.backend;
+  };
+  const { itemKey } = schemaState.source.collectionConfig;
+
+  return {
+    createItem: () =>
+      ({ [schemaState.schema?.idField ?? '_id']: newLocalId() } as T),
+    submitCreate: (items) =>
+      Promise.all(items.map((item) => backend().create(item))),
+    submitUpdate: (items) =>
+      Promise.all(items.map((item) => backend().update(item))),
+    submitDelete: async (items) => {
+      await backend().bulkDelete(items.map((item) => itemKey(item)));
+    },
+  };
+}

package/src/schema/useCollection.ts

@@ -0,0 +1,22 @@
+import type {
+  CollectionState,
+  FiltersMap,
+  OptionalFiltersMap,
+  SchemaSource,
+} from '@wix/bex-core';
+import { useCollection as useOpenCollection } from '@wix/bex-core/react';
+import {
+  schemaCollectionConfig,
+  type SchemaCollectionOptions,
+} from './schemaCollectionOptions';
+
+/**
+ * A bare collection driven by a schema source — data half only. For the fields
+ * UI (columns, filters, field management) use a component hook from this entry
+ * (`useTableCollection`, `useLayoutSwitchCollection`, …).
+ */
+export const useCollection = <T, F extends FiltersMap = OptionalFiltersMap>(
+  source: SchemaSource<T>,
+  options?: SchemaCollectionOptions<T, F>,
+): CollectionState<T, F> =>
+  useOpenCollection<T, F>(schemaCollectionConfig<T, F>(source, options));

package/src/schema/useEditableTableCollection.ts

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import type {
+  CollectionOptimisticActionsBaseParams,
+  FiltersMap,
+  OptionalFiltersMap,
+  SchemaSource,
+} from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import type {
+  EditableTableState,
+  EditableTablePermissions,
+  EditableTableMutationHandlers,
+} from '../state/EditableTable';
+import type { CellType } from '../state/EditableTable/types';
+import {
+  useEditableTableCollection as useOpenEditableTableCollection,
+  type EditableTableCollectionConfig,
+} from '../hooks/useEditableTableCollection';
+import { SchemaState } from '../components/SchemaSource/SchemaState';
+import {
+  schemaCollectionConfig,
+  type SchemaCollectionOptions,
+} from './schemaCollectionOptions';
+import { schemaSourceMutations } from './schemaSourceMutations';
+
+export type SchemaEditableTableCollectionOptions<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+> = SchemaCollectionOptions<T, F> & {
+  permissions?: EditableTablePermissions;
+  /** Row write handlers. Default: derived from the source's backend
+   *  (`create`/`update`/`bulkDelete`). */
+  mutations?: EditableTableMutationHandlers<T>;
+  optimisticActionParams?: Partial<CollectionOptimisticActionsBaseParams<T, F>>;
+  /** Additional cell types to register alongside the built-in ones. */
+  extraCellTypes?: CellType[];
+};
+
+/** An editable-table collection driven by a schema source: query config,
+ *  columns, field management, and row writes all come from the source. */
+export const useEditableTableCollection = <
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+>(
+  source: SchemaSource<T>,
+  options?: SchemaEditableTableCollectionOptions<T, F>,
+): EditableTableState<T, F> => {
+  const container = useWixPatternsContainer();
+  const [schemaState] = useState(
+    () => new SchemaState<T>({ container, source }),
+  );
+  const {
+    permissions,
+    mutations,
+    optimisticActionParams,
+    extraCellTypes,
+    ...rest
+  } = options ?? ({} as SchemaEditableTableCollectionOptions<T, F>);
+
+  const state = useOpenEditableTableCollection<T, F>({
+    ...schemaCollectionConfig<T, F>(source, rest),
+    permissions,
+    mutations: mutations ?? schemaSourceMutations(schemaState),
+    optimisticActionParams,
+    extraCellTypes,
+  } as unknown as EditableTableCollectionConfig<T, F>);
+
+  useState(() => schemaState.setOnTable(state.toolbar));
+  return state;
+};

package/src/schema/useGridCollection.ts

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import type {
+  FiltersMap,
+  OptionalFiltersMap,
+  SchemaSource,
+} from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import type { GridState } from '../state';
+import { useGridCollection as useOpenGridCollection } from '../hooks/useGridCollection';
+import { SchemaState } from '../components/SchemaSource/SchemaState';
+import {
+  schemaCollectionConfig,
+  type SchemaCollectionOptions,
+} from './schemaCollectionOptions';
+
+/** A grid collection driven by a schema source — the source's filters and
+ *  field management attach to the toolbar even though a grid has no columns. */
+export const useGridCollection = <T, F extends FiltersMap = OptionalFiltersMap>(
+  source: SchemaSource<T>,
+  options?: SchemaCollectionOptions<T, F>,
+): GridState<T, F> => {
+  const container = useWixPatternsContainer();
+  const [schemaState] = useState(
+    () => new SchemaState<T>({ container, source }),
+  );
+
+  const state = useOpenGridCollection<T, F>(
+    schemaCollectionConfig<T, F>(source, options),
+  );
+
+  useState(() => schemaState.setOnTable(state.toolbar));
+  return state;
+};