@wix/patterns 1.426.0 → 1.427.0

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/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

@@ -132,6 +132,7 @@ 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';
@@ -248,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;
+};

package/src/schema/useLayoutSwitchCollection.ts

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import type {
+  FiltersMap,
+  OptionalFiltersMap,
+  SchemaSource,
+} from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import type {
+  LayoutSwitchState,
+  TableLayoutConfig,
+  GridLayoutConfig,
+  SpreadsheetLayoutConfig,
+} from '../state/LayoutSwitchState';
+import type { EditableTableMutationHandlers } from '../state/EditableTable';
+import {
+  useLayoutSwitchCollection as useOpenLayoutSwitchCollection,
+  type LayoutSwitchCollectionConfig,
+} from '../hooks/useLayoutSwitchCollection';
+import { SchemaState } from '../components/SchemaSource/SchemaState';
+import {
+  schemaCollectionConfig,
+  type SchemaCollectionOptions,
+} from './schemaCollectionOptions';
+import { schemaSourceMutations } from './schemaSourceMutations';
+
+export type SchemaLayoutSwitchCollectionOptions<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+> = SchemaCollectionOptions<T, F> & {
+  table?: TableLayoutConfig;
+  grid?: GridLayoutConfig;
+  spreadsheet?: Omit<
+    SpreadsheetLayoutConfig<T, F>,
+    'createOptimisticActions' | 'mutations'
+  > & {
+    /** Row write handlers. Default: derived from the source's backend. */
+    mutations?: EditableTableMutationHandlers<T>;
+  };
+};
+
+/** One collection and one toolbar driven by a schema source, shared by every
+ *  enabled layout — the source attaches before any layout mounts, so a page
+ *  opening in grid view has its fields and filters too. */
+export const useLayoutSwitchCollection = <
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+>(
+  source: SchemaSource<T>,
+  options?: SchemaLayoutSwitchCollectionOptions<T, F>,
+): LayoutSwitchState<T, F> => {
+  const container = useWixPatternsContainer();
+  const [schemaState] = useState(
+    () => new SchemaState<T>({ container, source }),
+  );
+  const { table, grid, spreadsheet, ...rest } =
+    options ?? ({} as SchemaLayoutSwitchCollectionOptions<T, F>);
+
+  const state = useOpenLayoutSwitchCollection<T, F>({
+    ...schemaCollectionConfig<T, F>(source, rest),
+    table,
+    grid,
+    spreadsheet: spreadsheet
+      ? {
+          ...spreadsheet,
+          mutations:
+            spreadsheet.mutations ?? schemaSourceMutations(schemaState),
+        }
+      : undefined,
+  } as unknown as LayoutSwitchCollectionConfig<T, F>);
+
+  useState(() => schemaState.setOnTable(state.toolbar));
+  return state;
+};

package/src/schema/useTableCollection.ts

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import type {
+  FiltersMap,
+  OptionalFiltersMap,
+  SchemaSource,
+} from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import type { TableState } from '../state';
+import {
+  useTableCollection as useOpenTableCollection,
+  type TableCollectionConfig,
+} from '../hooks/useTableCollection';
+import { SchemaState } from '../components/SchemaSource/SchemaState';
+import {
+  schemaCollectionConfig,
+  type SchemaCollectionOptions,
+} from './schemaCollectionOptions';
+
+/** A table collection driven by a schema source: the source supplies the query
+ *  config, and its fields UI attaches when the state is created. */
+export const useTableCollection = <
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+>(
+  source: SchemaSource<T>,
+  options?: SchemaCollectionOptions<T, F>,
+): TableState<T, F> => {
+  const container = useWixPatternsContainer();
+  const [schemaState] = useState(
+    () => new SchemaState<T>({ container, source }),
+  );
+
+  const state = useOpenTableCollection<T, F>(
+    schemaCollectionConfig<T, F>(source, options) as TableCollectionConfig<
+      T,
+      F
+    >,
+  );
+
+  useState(() => schemaState.setOnTable(state.toolbar));
+  return state;
+};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/FormPage/FormPageHeader.st.css.ts

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