@wix/patterns 1.427.0 → 1.431.0

package/src/components/PickerContent/PickerContentAdditionalStep.tsx

@@ -8,8 +8,9 @@ import {
   PickerContentBaseWrappedProps,
 } from './PickerContentBaseWrapped';
 import { AdditionalStepState, PickerContentState } from '../../state';
-import { ChevronLeft } from '@wix/wix-ui-icons-common';
+import { ChevronLeft, ChevronLeftSmall } from '@wix/wix-ui-icons-common/lazy';
 import { st, classes } from './PickerContentAdditionalStep.st.css.js';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface PickerContentAdditionalStepProps<T>
   extends Partial<PickerContentBaseWrappedProps> {
@@ -88,6 +89,8 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
     ...rest
   } = props;
 
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   const [state] = useState(
     () =>
       (pickerContentState.additionalStep = new AdditionalStepState({
@@ -170,7 +173,9 @@ function _PickerContentAdditionalStep<T, F extends FiltersMap = FiltersMap>(
       sideActions={
         autoAdditionalStepOnInitialSelect ? undefined : (
           <TextButton
-            prefixIcon={<ChevronLeft />}
+            prefixIcon={
+              isBmHarmonyTheme ? <ChevronLeftSmall /> : <ChevronLeft />
+            }
             dataHook="back-button"
             onClick={() => onBackButtonClick()}
           >

package/src/components/PickerEmptyState/PickerEmptyState.tsx

@@ -1,5 +1,5 @@
 import { FiltersMap, OptionalFiltersMap, PickerState } from '@wix/bex-core';
-import { Revert } from '@wix/wix-ui-icons-common';
+import { Revert } from '@wix/wix-ui-icons-common/lazy';
 import React from 'react';
 import { Box, Text, TextButton } from '@wix/design-system';
 import {

package/src/components/PickerStandaloneLayout/PickerStandaloneLayoutFooter.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import React, { MouseEventHandler, ReactElement } from 'react';
 import { Box, Divider, TextButton, TextButtonProps } from '@wix/design-system';
 import { PickerStandaloneState } from '../../state';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 
 export interface PickerStandaloneLayoutFooterProps<
   T,

package/src/components/PickerStandaloneLayout/PickerStandaloneLayoutHeader.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useRef, useState } from 'react';
 import { SwitchTransition } from 'react-transition-group';
 import { Box, Divider } from '@wix/design-system';
-import { ChevronLeftLarge } from '@wix/wix-ui-icons-common';
+import { ChevronLeftLarge } from '@wix/wix-ui-icons-common/lazy';
 import { CollectionSearch } from '../CollectionSearch';
 import { EditorXLogo } from '../EditorXLogo';
 import { WixLogo } from '../WixLogo';

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

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

package/src/components/PickerTableListItem/PickerTableListItem.tsx

@@ -7,7 +7,7 @@ import {
   TableListItemColumn,
   Text,
 } from '@wix/design-system';
-import { ChevronRightLarge } from '@wix/wix-ui-icons-common';
+import { ChevronRightLarge } from '@wix/wix-ui-icons-common/lazy';
 import { PickerListItemProps } from '../PickerListItemProps';
 import { st, classes } from './PickerTableListItem.st.css.js';
 

package/src/components/PrimaryActions/PrimaryActions.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { ActionSubitem } from '../ActionControl/ActionSubItemProps';
 import { ActionControl } from '../ActionControl/ActionControl';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useSelector } from '../../useSelector';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';

package/src/components/PrimaryPageButton/PrimaryPageButton.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { Button, ButtonProps } from '@wix/design-system';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';
 import { usePageButtonBiParams } from '../usePageButtonBiParams';

package/src/components/RequestId/RequestId.tsx

@@ -7,7 +7,7 @@ import {
   TextSize,
 } from '@wix/design-system';
 import React, { useEffect, useMemo } from 'react';
-import { DuplicateSmall, InfoCircleSmall } from '@wix/wix-ui-icons-common';
+import { DuplicateSmall, InfoCircleSmall } from '@wix/wix-ui-icons-common/lazy';
 
 export interface RequestIdProps {
   /**

package/src/components/ResponsiveButton/ResponsiveButton.tsx

@@ -11,6 +11,7 @@ import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ToolbarResponsivePriorityState } from '../../state/Toolbar/ToolbarResponsivePriorityState';
 import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export type ResponsiveButtonProps = ButtonAsButtonProps<{
   dataHook?: string;
@@ -41,6 +42,7 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
     } = useToolbarCollectionContext();
 
     const { responsiveDisabled } = responsive;
+    const isBmHarmonyTheme = useBmHarmonyTheme();
 
     const shouldShrink = responsiveDisabled
       ? shouldShrinkProp
@@ -55,9 +57,9 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
           <IconButton
             ref={ref}
             {...rest}
+            priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
             dataHook={dataHook}
             size={sizes.small}
-            priority="secondary"
           >
             {icon}
           </IconButton>
@@ -71,7 +73,7 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
           {...rest}
           dataHook={dataHook}
           size={sizes.small}
-          priority="secondary"
+          priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
           prefixIcon={icon}
           suffixIcon={button.suffix}
         >

package/src/components/SchemaCard/SchemaCard.tsx

@@ -15,7 +15,7 @@ import { CustomColumnsEntityPagePanelMount } from '../CustomColumnsPanel/CustomC
 import { useSchemaContext } from '../../providers/SchemaContext';
 import { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDragAndDrop';
 import { SchemaCardState } from '../../state/SchemaCard/SchemaCardState';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 
 export interface SchemaCardProps extends Omit<CardProps, 'children'> {
   title: string;

package/src/components/SchemaSource/ReferenceFieldCell.tsx

@@ -0,0 +1,98 @@
+import React, { Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { Field } from '@wix/bex-core';
+import type { SchemaState } from './SchemaState';
+
+// The reference views live in @wix/patterns-fields, which statically pulls the
+// rich-text editor and media SDKs — loaded lazily here for the same reason
+// FieldCell does it.
+function lazyView<P extends object>(
+  pick: (m: typeof import('@wix/patterns-fields')) => React.ComponentType<P>,
+) {
+  const C = React.lazy(async () => ({
+    default: pick(await import('@wix/patterns-fields')),
+  }));
+  return (props: P) => (
+    <Suspense fallback={null}>
+      <C {...props} />
+    </Suspense>
+  );
+}
+
+const CellReferenceView = lazyView((m) => m.CellReferenceView);
+const CellMultiReferenceView = lazyView((m) => m.CellMultiReferenceView);
+
+export interface ReferenceFieldCellProps {
+  state: SchemaState<any>;
+  field: Field;
+  row: unknown;
+  /** Stable DOM id prefix for the multi-reference tags. */
+  fieldId: string;
+}
+
+/**
+ * A reference value in a display column. `FieldCell` can't render one: the label
+ * lives in the referenced item's display field, which only the source knows.
+ *
+ * An observer, so the cell fills in when the referenced schema resolves — before
+ * that there is no display field to read and the cell stays empty.
+ */
+function _ReferenceFieldCell({
+  state,
+  field,
+  row,
+  fieldId,
+}: ReferenceFieldCellProps) {
+  const refSchema = state.referenceCells.refSchemaFor(field);
+  const value = state.fieldsSource.getCellValue(row, field);
+  if (!refSchema || value == null) {
+    return null;
+  }
+
+  const { displayField, fields } = refSchema;
+  const imageField = Object.entries(fields ?? {}).find(
+    ([, f]) => f?.type === 'IMAGE',
+  )?.[0];
+
+  const labelOf = (item: unknown) => {
+    // A value that was never expanded (a bare id) has no label to show.
+    if (!item || typeof item !== 'object') {
+      return undefined;
+    }
+    const record = item as Record<string, unknown>;
+    return {
+      name: String(record[displayField] ?? ''),
+      image: imageField
+        ? (record[imageField] as string | undefined)
+        : undefined,
+    };
+  };
+
+  if (field.type === 'MULTI_REFERENCE') {
+    const items: { id: string; name: string; image?: string }[] = [];
+    (Array.isArray(value) ? value : []).forEach((item, i) => {
+      const label = labelOf(item);
+      if (label) {
+        items.push({ id: `${fieldId}-${i}`, ...label });
+      }
+    });
+    return items.length ? (
+      <CellMultiReferenceView
+        items={items}
+        fieldId={fieldId}
+        dataHook="multi-reference-view"
+      />
+    ) : null;
+  }
+
+  const label = labelOf(value);
+  return label ? (
+    <CellReferenceView
+      name={label.name}
+      imageUrl={label.image}
+      dataHook="reference-view"
+    />
+  ) : null;
+}
+
+export const ReferenceFieldCell = observer(_ReferenceFieldCell);

package/src/components/SchemaSource/SchemaState.ts

@@ -1,93 +1,51 @@
-import {
-  action,
-  computed,
-  makeObservable,
-  observable,
-  runInAction,
-} from 'mobx';
-import {
-  Field,
-  FieldManagement,
-  FieldsSource,
-  LoadedSchema,
-  Schema,
-  SchemaSource,
-  TaskState,
-  WixPatternsContainer,
-} from '@wix/bex-core';
-import type { RemoveToast, ToastConfig } from '@wix/bex-core';
+import { computed, makeObservable } from 'mobx';
+import { Field, FieldsSource, SourceState } from '@wix/bex-core';
 import type { ToolbarCollectionState } from '../../state';
 import { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
-import { isFilterableFieldType } from '../../state/buildFieldFilters';
+import { isFilterableField } from '../../state/buildFieldFilters';
 import { schemaFieldsSource } from './schemaFieldsSource';
-import { schemaFieldManagement } from './schemaFieldManagement';
 import { schemaRendering } from './schemaRendering';
+import { ReferenceCellsState } from './referenceCells';
 
 export interface SchemaStateParams<T> {
-  container: WixPatternsContainer;
-  source: SchemaSource<T>;
+  sourceState: SourceState<T>;
 }
 
 /**
- * Holds a collection's loaded schema and turns it into a source-neutral
- * FieldsSource for the table. It owns the field-management object and the
- * add/edit field modal, loads the schema once, and builds the table columns
- * from its fields.
+ * The collection-page side of a source: turns the loaded schema into a
+ * source-neutral FieldsSource for the table, owns the field-management object
+ * and the add/edit field modal, and builds the table columns from the fields.
+ * The page-neutral holding (load, fields, field mutations) lives in the
+ * composed core `SourceState`.
  */
 export class SchemaState<T = Record<string, unknown>> {
-  readonly container: WixPatternsContainer;
-  readonly source: SchemaSource<T>;
-  readonly fieldManagement: FieldManagement;
+  readonly sourceState: SourceState<T>;
+  /** The read contract the collection spine consumes — a plain adapter whose
+   *  getters read through to `sourceState`, so MobX tracks through it. Built
+   *  once: the spine keeps this exact instance. */
   readonly fieldsSource: FieldsSource;
-  readonly makePrimaryTask = new TaskState();
-  readonly duplicateTask = new TaskState();
-  readonly duplicateWithContentTask = new TaskState();
+  /** Supplies the reference cells their referenced-collection config. */
+  readonly referenceCells: ReferenceCellsState<T>;
 
-  loadedSchema?: LoadedSchema<T> = undefined;
   toolbar?: ToolbarCollectionState<any, any> = undefined;
 
   constructor(params: SchemaStateParams<T>) {
-    this.container = params.container;
-    this.source = params.source;
-    this.fieldManagement = schemaFieldManagement(this);
+    this.sourceState = params.sourceState;
     this.fieldsSource = schemaFieldsSource(this);
+    this.referenceCells = new ReferenceCellsState<T>(this.sourceState);
 
     makeObservable(this, {
-      loadedSchema: observable.ref,
-      schema: computed,
-      fields: computed,
       filterableFields: computed,
-      mergeFields: action,
     });
   }
 
-  get schema(): Schema | undefined {
-    return this.loadedSchema?.schema;
-  }
-
-  get fieldActions() {
-    return this.loadedSchema?.fieldActions;
-  }
-
-  get fields(): Field[] {
-    const fields = this.schema?.fields ?? {};
-    return Object.values(fields).filter((f): f is Field => Boolean(f));
-  }
-
   /** Fields whose type maps to an auto filter in the toolbar. */
   get filterableFields(): Field[] {
-    return this.fields.filter((f) => isFilterableFieldType(f.type));
+    return this.sourceState.fields.filter((f) =>
+      isFilterableField(f, this.fieldsSource),
+    );
   }
 
-  /** Loads the schema. CollectionFieldsSourceState runs this, tracks its status,
-   *  and shows a retry toast on failure. */
-  load = async (): Promise<void> => {
-    const loaded = await this.source.loadSchema();
-    runInAction(() => {
-      this.loadedSchema = loaded;
-    });
-  };
-
   /** Attaches this source to a table's toolbar via the shared wrapper. */
   setOnTable(toolbar: ToolbarCollectionState<any, any>) {
     this.toolbar = toolbar;
@@ -96,125 +54,4 @@ export class SchemaState<T = Record<string, unknown>> {
       ...schemaRendering(this),
     });
   }
-
-  /** Replaces the loaded schema's fields with the map returned by a mutation. */
-  mergeFields(fields: Schema['fields']) {
-    const current = this.loadedSchema;
-    if (!current) {
-      return;
-    }
-    this.loadedSchema = {
-      ...current,
-      schema: { ...current.schema, fields },
-    };
-  }
-
-  makePrimary = (fieldId: string): void => {
-    const run = this.fieldActions?.makePrimary;
-    if (!run) {
-      return;
-    }
-    void this.runFieldMutation(
-      this.makePrimaryTask,
-      () => run(fieldId),
-      {
-        successMessage: 'Primary field updated',
-        successBi: 'cairo-field-action-make-primary-success',
-        errorMessage: "Couldn't update primary field",
-        errorBi: 'cairo-field-action-make-primary-error',
-      },
-      () => this.makePrimary(fieldId),
-    );
-  };
-
-  duplicateField = (fieldId: string): void => {
-    const run = this.fieldActions?.duplicateField;
-    if (!run) {
-      return;
-    }
-    void this.runFieldMutation(
-      this.duplicateTask,
-      () => run(fieldId),
-      {
-        successMessage: 'Field duplicated',
-        successBi: 'cairo-field-action-duplicate-success',
-        errorMessage: "Couldn't duplicate field",
-        errorBi: 'cairo-field-action-duplicate-error',
-      },
-      () => this.duplicateField(fieldId),
-    );
-  };
-
-  duplicateFieldWithContent = (fieldId: string): void => {
-    const run = this.fieldActions?.duplicateFieldWithContent;
-    if (!run) {
-      return;
-    }
-    void this.runFieldMutation(
-      this.duplicateWithContentTask,
-      () => run(fieldId),
-      {
-        successMessage: 'Field duplicated with content',
-        successBi: 'cairo-field-action-duplicate-with-content-success',
-        errorMessage: "Couldn't duplicate field with content",
-        errorBi: 'cairo-field-action-duplicate-with-content-error',
-      },
-      () => this.duplicateFieldWithContent(fieldId),
-    );
-  };
-
-  // makePrimary/duplicate return the updated fields map (like add/edit/delete),
-  // so merge it locally — same path as the modal actions, no full re-fetch.
-  // Toasts + loading mirror the field-management actions, so the header and the
-  // side panel report the same outcome.
-  private runFieldMutation = async (
-    task: TaskState<unknown>,
-    run: () => Promise<Schema['fields']>,
-    toasts: {
-      successMessage: string;
-      successBi: string;
-      errorMessage: string;
-      errorBi: string;
-    },
-    retry: () => void,
-  ) => {
-    if (task.status.isLoading) {
-      return;
-    }
-    await task.run(async () => {
-      const fields = await run();
-      runInAction(() => this.mergeFields(fields));
-    });
-    if (task.status.isSuccess) {
-      this.notify({
-        type: 'SUCCESS',
-        message: toasts.successMessage,
-        biName: toasts.successBi,
-      });
-    } else if (task.status.isError) {
-      this.notify({
-        type: 'ERROR',
-        message: toasts.errorMessage,
-        biName: toasts.errorBi,
-        action: {
-          text: 'Try again',
-          onClick: retry,
-          removeToastOnClick: true,
-        },
-      });
-    }
-  };
-
-  private currentToastRemove: RemoveToast | undefined;
-
-  // Shared by the source's field mutations (make-primary / duplicate / delete) to
-  // surface a toast; deduped against the previous one.
-  notify = (config: ToastConfig) => {
-    const show = this.container.showToast;
-    if (!show) {
-      return;
-    }
-    this.currentToastRemove?.();
-    this.currentToastRemove = show(config).remove;
-  };
 }

package/src/components/SchemaSource/referenceCells.ts

@@ -0,0 +1,141 @@
+import { observable, runInAction } from 'mobx';
+import { sourceFetchData } from '@wix/bex-core';
+import type {
+  Field,
+  OffsetQuery,
+  Schema,
+  SchemaSource,
+  SourceState,
+} from '@wix/bex-core';
+import type { EditableCellUpgrade } from '../../state/CollectionFieldsSourceState';
+import type {
+  ReferenceItem,
+  ReferenceTypeConfig,
+  RefSchema,
+} from '../EditableTable/cellTypes/reference/types';
+
+type RefRow = Record<string, unknown>;
+
+const referencedCollectionIdOf = (field: Field): string | undefined =>
+  field.type === 'REFERENCE' || field.type === 'MULTI_REFERENCE'
+    ? field.referenceMetadata?.referencedCollectionId
+    : undefined;
+
+const imageFieldOf = (fields: Schema['fields']): string | undefined =>
+  Object.entries(fields ?? {}).find(([, f]) => f?.type === 'IMAGE')?.[0];
+
+const toRefSchema = (schema: Schema, collectionId: string): RefSchema => ({
+  id: schema.id ?? collectionId,
+  collectionId,
+  displayField: schema.displayField,
+  idField: schema.idField,
+  fields: Object.fromEntries(
+    Object.entries(schema.fields ?? {})
+      .filter(([, f]) => f?.type === 'IMAGE')
+      .map(([id]) => [id, { type: 'IMAGE' as const }]),
+  ),
+});
+
+/**
+ * Supplies the reference / multi-reference cells the `typeConfig` they need:
+ * the referenced collection's schema (for the id / display / image fields) and
+ * a query for its items.
+ *
+ * The referenced schema loads asynchronously, so `cellFor` answers `undefined`
+ * until it lands and the column stays a read-only display; once loaded, the
+ * column builder's computed re-runs and the cell upgrades to the real editor.
+ */
+export class ReferenceCellsState<T = Record<string, unknown>> {
+  private readonly _sourceState: SourceState<T>;
+  /** Referenced schema per referenced collection id, once loaded. */
+  private readonly _schemas = observable.map<string, Schema>();
+  /** Ids already requested. A plain Set, so reading `cellFor` from a computed
+   *  mutates no observable — only the async result does, in an action. */
+  private readonly _requested = new Set<string>();
+
+  constructor(sourceState: SourceState<T>) {
+    this._sourceState = sourceState;
+  }
+
+  /** The cell type and config for a reference field, or `undefined` while the
+   *  referenced schema is still loading (or the source has no entry for it). */
+  cellFor(field: Field): EditableCellUpgrade | undefined {
+    const resolved = this._resolve(field);
+    if (!resolved) {
+      return undefined;
+    }
+    const { collectionId, refSource, schema } = resolved;
+
+    return {
+      cellType:
+        field.type === 'MULTI_REFERENCE' ? 'multiReference' : 'reference',
+      typeConfig: {
+        refSchema: toRefSchema(schema, collectionId),
+        fetchReferenceItems: (query) =>
+          fetchReferenceItems(refSource, schema, query),
+      } satisfies ReferenceTypeConfig,
+    };
+  }
+
+  /** The referenced collection's id / display / image fields, for rendering a
+   *  reference value. `undefined` until the referenced schema resolves. */
+  refSchemaFor(field: Field): RefSchema | undefined {
+    const resolved = this._resolve(field);
+    return resolved && toRefSchema(resolved.schema, resolved.collectionId);
+  }
+
+  /** The referenced source and its loaded schema, requesting the load on first
+   *  ask. Returns `undefined` until it lands, or if the source has no entry. */
+  private _resolve(field: Field) {
+    const collectionId = referencedCollectionIdOf(field);
+    if (!collectionId) {
+      return undefined;
+    }
+    const refSource = this._sourceState.source.references?.[collectionId];
+    if (!refSource) {
+      return undefined;
+    }
+    const schema = this._schemas.get(collectionId);
+    if (!schema) {
+      this._request(collectionId, refSource);
+      return undefined;
+    }
+    return { collectionId, refSource, schema };
+  }
+
+  private _request(collectionId: string, refSource: SchemaSource<any>) {
+    if (this._requested.has(collectionId)) {
+      return;
+    }
+    this._requested.add(collectionId);
+    refSource
+      .loadSchema()
+      .then(({ schema }) =>
+        runInAction(() => this._schemas.set(collectionId, schema)),
+      )
+      .catch(() => {
+        // The reference column keeps its read-only display. Retry on the next
+        // schema load rather than holding a failed id forever.
+        this._requested.delete(collectionId);
+      });
+  }
+}
+
+async function fetchReferenceItems(
+  refSource: SchemaSource<any>,
+  schema: Schema,
+  query: OffsetQuery,
+): Promise<{ items: ReferenceItem[]; total: number }> {
+  const { idField, displayField } = schema;
+  const imageField = imageFieldOf(schema.fields);
+  const { items, total } = await sourceFetchData<RefRow>(refSource)(query);
+
+  return {
+    items: items.map((item) => ({
+      id: String(item[idField] ?? ''),
+      name: String(item[displayField] ?? ''),
+      image: imageField ? (item[imageField] as string | undefined) : undefined,
+    })),
+    total: total ?? items.length,
+  };
+}