@wix/patterns 1.443.0 → 1.445.0

package/src/components/TableSections/TableSectionRow.tsx

@@ -8,6 +8,7 @@ import { observer } from 'mobx-react-lite';
 import { FiltersMap, KeyedItem } from '@wix/bex-core';
 import { TableSectionsState } from './TableSectionsState';
 import { CollectionSectionHeader } from '../CollectionSectionHeader';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface TableSectionRowProps<T, F extends FiltersMap>
   extends HTMLAttributes<HTMLTableRowElement> {
@@ -24,6 +25,7 @@ const _TableSectionRow = forwardRef<
   HTMLTableRowElement,
   TableSectionRowProps<any, any>
 >(({ state, RegularTrElement, rowData, ...props }, ref) => {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const { children, className, style } = props;
   const isSectionRow = state.isSectionRow(rowData);
   const contentWidth = state.table.toolbar.itemsContentRect.rect.width;
@@ -87,7 +89,7 @@ const _TableSectionRow = forwardRef<
               sectionIndex={sectionIndex}
               section={section}
               biComponentType="TableSections"
-              skin="neutral"
+              skin={isBmHarmonyTheme ? 'standard' : 'neutral'}
               dataHook="table-section-header"
               collapsible={collapsible}
               onToggleCollapse={state.toggleSection}

package/src/components/TableSkeleton/TableSkeleton.tsx

@@ -9,6 +9,7 @@ import {
 import { FiltersMap } from '@wix/bex-core';
 import { ResponsiveColumnsState, ToolbarCollectionState } from '../../state';
 import { observer } from 'mobx-react-lite';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface TableSkeletonProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -21,6 +22,7 @@ export interface TableSkeletonProps<T, F extends FiltersMap> {
 export function _TableSkeleton<T, F extends FiltersMap>(
   props: TableSkeletonProps<T, F>,
 ) {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const { state, dataHook, rowsCount = 7, showTitleBar, ...rest } = props;
 
   const [{ columnCount, minItemWidth, itemsContentWidth }] = useState(
@@ -81,7 +83,7 @@ export function _TableSkeleton<T, F extends FiltersMap>(
     // <Box/> wrapper always aligns the skeleton to the top of the table
     <Box marginBottom="auto" dataHook={dataHook}>
       <Table
-        skin="neutral"
+        skin={isBmHarmonyTheme ? 'standard' : 'neutral'}
         data={data}
         columns={columns}
         withWrapper={false}

package/src/components/TabsFilter/TabsDropdown.tsx

@@ -57,6 +57,7 @@ function _TabsDropdown<V>(props: TabsFilterProps<V>) {
           id: item.id,
           title: item.name,
           label: item.name,
+          disabled: item.disabled,
           suffix: hideCounterBadge ? undefined : (
             <TabTotalDropdownOption
               value={dataProp.find((data) => itemKey(data) === item.id)}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1785154060";
+var _namespace_ = "TabsFilter924897";
 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":"TabsFilter1785154060__root","title":"TabsFilter1785154060__title"};
+export var classes = {"root":"TabsFilter924897__root","title":"TabsFilter924897__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.tsx

@@ -58,6 +58,19 @@ export interface TabsFilterProps<V> {
   counterBadge?: (
     value: V | null | undefined,
   ) => TabTotalCounterBadge<V> | TabTotalParens<V> | null | undefined;
+
+  /**
+   * Returns whether a tab should be disabled.
+   * <br><br>
+   * Disabled tabs are non-interactive and rendered in a visually muted state.
+   * <br><br>
+   * The result is memoized. pass a new function
+   * whenever its result may change.
+   * <br>
+   * Requires `@wix/design-system` version >= 1.310.0
+   * @external
+   */
+  disabled?: (value: V) => boolean;
   onChange?: (value: V | null | undefined) => unknown;
 
   /**
@@ -87,6 +100,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     data: dataProp,
     all,
     counterBadge,
+    disabled,
     placeAllTabLast,
     onChange,
     mobilePopoverProps,
@@ -152,6 +166,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
             counterBadge={hideCounterBadge ? undefined : counterBadge}
           />
         ),
+        disabled: disabled?.(value),
         value,
       };
     });
@@ -193,6 +208,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     dataProp,
     all,
     counterBadge,
+    disabled,
     responsive.panelMinWidth,
     hideCounterBadge,
     selectedId,

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

@@ -52,6 +52,13 @@ export function TabsFilterUniDriver(base: UniDriver, body: UniDriver) {
      * @param index
      */
     hoverTabAt: (index: number) => getTabAt(index).hover(),
+    /**
+     * Check whether a tab is disabled
+     * <br>
+     * Requires `@wix/design-system` 1.310.0 or later.
+     * @param index
+     */
+    isTabDisabled: (index: number) => tabsUniDriver.isTabDisabled(index),
     /**
      * Get the title text of a tab
      * @param index

package/src/components/TabsFilter/types.ts

@@ -6,6 +6,7 @@ export type TabsFilterItemBase = Omit<TabsProps['items'][number], 'id'> & {
   id: string;
   index: number;
   name: string;
+  disabled?: boolean;
 };
 
 export type TabsFilterItem<V> = TabsFilterItemBase & {

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem296616052";
+var _namespace_ = "ToolbarItem746777390";
 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":"ToolbarItem296616052__root"};
+export var classes = {"root":"ToolbarItem746777390__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_ = "ToolbarItemBox3678864580";
+var _namespace_ = "ToolbarItemBox3698378441";
 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":"ToolbarItemBox3678864580__root"};
+export var classes = {"root":"ToolbarItemBox3698378441__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_ = "common2049903824";
+var _namespace_ = "common25472537";
 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":"common2049903824__root","column":"common2049903824__column","fullHeight":"common2049903824__fullHeight"};
+export var classes = {"root":"common25472537__root","column":"common25472537__column","fullHeight":"common25472537__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/schema.ts

@@ -17,6 +17,8 @@ export {
 export type {
   PlatformizedSourceInput,
   SchemaCollectionOptions,
+  SchemaMutableCollectionOptions,
+  SchemaItemCreationOptions,
   SchemaEntityPageOptions,
   SchemaEditableTableCollectionOptions,
   SchemaLayoutSwitchCollectionOptions,
@@ -47,4 +49,7 @@ export type {
   FieldSettings,
   FieldSettingsProps,
   FieldSettingsSection,
+  FieldModalCollectionOption,
+  FieldModalCollectionOptionsLoader,
+  FieldModalCollectionInput,
 } from '@wix/bex-core';

package/src/index.ts

@@ -174,6 +174,9 @@ export {
   type FilterTypeConfig,
   type FieldActionsConfig,
   type FieldModalConfig,
+  type FieldModalCollectionOption,
+  type FieldModalCollectionOptionsLoader,
+  type FieldModalCollectionInput,
   type FieldTypeActionItem,
   type FormTypeConfig,
   type FormFieldComponentProps,

package/src/schema/index.ts

@@ -8,7 +8,11 @@ export {
   usePlatformizedSource,
   type PlatformizedSourceInput,
 } from './usePlatformizedSource';
-export type { SchemaCollectionOptions } from './schemaCollectionOptions';
+export type {
+  SchemaCollectionOptions,
+  SchemaMutableCollectionOptions,
+  SchemaItemCreationOptions,
+} from './schemaCollectionOptions';
 export { sourceMutations } from './sourceMutations';
 export { Table, type SchemaTableProps } from './Table';
 export { EditableTable, type SchemaEditableTableProps } from './EditableTable';

package/src/schema/schemaCollectionOptions.ts

@@ -9,6 +9,11 @@ import type { CollectionConfigWithConditionals } from '@wix/bex-core/react';
 
 type FetchData<T> = (query: OffsetQuery) => Promise<OffsetQueryResult<T>>;
 
+export type SchemaItemCreationOptions<T> = {
+  /** Creates the initial values for a newly added item. */
+  createLocalItem?: () => Partial<T>;
+};
+
 export type SchemaCollectionOptions<T, F extends FiltersMap> = Omit<
   CollectionConfigWithConditionals<T, F>,
   | 'queryName'
@@ -23,6 +28,11 @@ export type SchemaCollectionOptions<T, F extends FiltersMap> = Omit<
   wrapFetchData?: (next: FetchData<T>) => FetchData<T>;
 };
 
+export type SchemaMutableCollectionOptions<
+  T,
+  F extends FiltersMap,
+> = SchemaCollectionOptions<T, F> & SchemaItemCreationOptions<T>;
+
 export function schemaCollectionConfig<T, F extends FiltersMap>(
   source: SchemaSource<T>,
   options?: object,

package/src/schema/sourceMutations.ts

@@ -15,6 +15,7 @@ const newLocalId = () =>
  */
 export function sourceMutations<T>(
   sourceState: SourceState<T>,
+  createLocalItem?: () => Partial<T>,
 ): EditableTableMutationHandlers<T> {
   const backend = () => {
     const loaded = sourceState.loadedSchema;
@@ -46,7 +47,10 @@ export function sourceMutations<T>(
   };
 
   return {
-    createItem: () => ({ [idField()]: newLocalId() } as T),
+    createItem: () => ({
+      ...createLocalItem?.(),
+      [idField()]: newLocalId(),
+    } as T),
     submitCreate: (items) =>
       Promise.all(
         items.map((item) =>

package/src/schema/useEditableTableCollection.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { SourceState } from '@wix/bex-core';
 import type {
   CollectionOptimisticActionsBaseParams,
@@ -14,7 +14,7 @@ import { useEditableTableCollection as useOpenEditableTableCollection } from '..
 import { SchemaState } from '../components/SchemaSource/SchemaState';
 import {
   schemaCollectionConfig,
-  type SchemaCollectionOptions,
+  type SchemaMutableCollectionOptions,
 } from './schemaCollectionOptions';
 import { sourceMutations } from './sourceMutations';
 import { syncSourcePermissions } from './syncSourcePermissions';
@@ -23,11 +23,13 @@ import { attachesItself } from './usePlatformizedSource';
 export type SchemaEditableTableCollectionOptions<
   T,
   F extends FiltersMap = OptionalFiltersMap,
-> = SchemaCollectionOptions<T, F> & {
-  optimisticActionParams?: Partial<CollectionOptimisticActionsBaseParams<T, F>>;
-  /** Additional cell types to register alongside the built-in ones. */
-  extraCellTypes?: CellType[];
-};
+> = SchemaMutableCollectionOptions<T, F> & {
+    optimisticActionParams?: Partial<
+      CollectionOptimisticActionsBaseParams<T, F>
+    >;
+    /** Additional cell types to register alongside the built-in ones. */
+    extraCellTypes?: CellType[];
+  };
 
 /** An editable-table collection driven by a source: query config, columns,
  *  field management, and row writes all come from the source. */
@@ -56,12 +58,17 @@ export function useEditableTableCollection<
     };
   });
 
-  const { optimisticActionParams, extraCellTypes, ...rest } =
+  const { optimisticActionParams, extraCellTypes, createLocalItem, ...rest } =
     options ?? ({} as SchemaEditableTableCollectionOptions<T, F>);
+  const createLocalItemRef = useRef(createLocalItem);
+  createLocalItemRef.current = createLocalItem;
 
   const state = useOpenEditableTableCollection<T, F>(
     Object.assign(schemaCollectionConfig<T, F>(source, rest), {
-      mutations: sourceMutations(sourceState),
+      mutations: sourceMutations(
+        sourceState,
+        () => createLocalItemRef.current?.() ?? {},
+      ),
       optimisticActionParams,
       extraCellTypes,
     }),

package/src/schema/useEntityPage.ts

@@ -14,6 +14,8 @@ export type SchemaEntityPageOptions<
   T,
   V extends FieldValues = FieldValues,
 > = Omit<UseEntityPageParams<T, V>, 'fetch' | 'onSave' | 'schemaSource'> & {
+  /** Creates the initial values for a new entity. */
+  createLocalItem?: () => Partial<T>;
   /** The entity to load. Omitted ⇒ the create route: the page starts empty and
    *  saving creates an entity. */
   entityId?: string;
@@ -30,7 +32,7 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   source: SchemaSource<T>,
   options: SchemaEntityPageOptions<T, V>,
 ): EntityPageState<T, V> {
-  const { entityId, fetch, onSave, ...rest } = options;
+  const { entityId, fetch, onSave, createLocalItem, ...rest } = options;
 
   // The derived read and write need values that change or don't exist yet when
   // the state is created: the state itself (the save merges into the loaded
@@ -41,7 +43,8 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   const state = useOpenEntityPage<T, V>({
     ...rest,
     schemaSource: source,
-    fetch: fetch ?? (() => fetchFromSource(source, page.entityId)),
+    fetch:
+      fetch ?? (() => fetchFromSource(source, page.entityId, createLocalItem)),
     onSave: onSave ?? (() => saveToSource(source, page)),
   } as UseEntityPageParams<T, V>);
 
@@ -58,9 +61,10 @@ interface PageRef<T, V extends FieldValues> {
 async function fetchFromSource<T>(
   source: SchemaSource<T>,
   entityId?: string,
+  createLocalItem?: () => Partial<T>,
 ): Promise<{ entity: T | undefined }> {
   if (!entityId) {
-    return { entity: undefined };
+    return { entity: createLocalItem?.() as T | undefined };
   }
 
   const { backend } = await source.loadSchema();
@@ -80,7 +84,13 @@ async function saveToSource<T, V extends FieldValues>(
   // permissions) must fail rather than quietly create a second record.
   if (!entityId) {
     return {
-      updatedEntity: await required(backend.create, 'creating')(values),
+      updatedEntity: await required(
+        backend.create,
+        'creating',
+      )({
+        ...(state!.entity ?? {}),
+        ...values,
+      }),
     };
   }
 

package/src/schema/useLayoutSwitchCollection.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { SourceState } from '@wix/bex-core';
 import type {
   FiltersMap,
@@ -17,7 +17,7 @@ import { useLayoutSwitchCollection as useOpenLayoutSwitchCollection } from '../h
 import { SchemaState } from '../components/SchemaSource/SchemaState';
 import {
   schemaCollectionConfig,
-  type SchemaCollectionOptions,
+  type SchemaMutableCollectionOptions,
 } from './schemaCollectionOptions';
 import { sourceMutations } from './sourceMutations';
 import { syncSourcePermissions } from './syncSourcePermissions';
@@ -26,16 +26,16 @@ import { attachesItself } from './usePlatformizedSource';
 export type SchemaLayoutSwitchCollectionOptions<
   T,
   F extends FiltersMap = OptionalFiltersMap,
-> = SchemaCollectionOptions<T, F> & {
-  table?: TableLayoutConfig;
-  grid?: GridLayoutConfig;
-  // No `permissions` either: row-action permissions are source-driven
-  // (schema.itemPermissions + backend capabilities), not consumer-supplied.
-  spreadsheet?: Omit<
-    SpreadsheetLayoutConfig<T, F>,
-    'createOptimisticActions' | 'mutations' | 'permissions'
-  >;
-};
+> = SchemaMutableCollectionOptions<T, F> & {
+    table?: TableLayoutConfig;
+    grid?: GridLayoutConfig;
+    // No `permissions` either: row-action permissions are source-driven
+    // (schema.itemPermissions + backend capabilities), not consumer-supplied.
+    spreadsheet?: Omit<
+      SpreadsheetLayoutConfig<T, F>,
+      'createOptimisticActions' | 'mutations' | 'permissions'
+    >;
+  };
 
 /** One collection and one toolbar driven by a source, shared by every enabled
  *  layout — the source attaches before any layout mounts, so a page opening
@@ -65,15 +65,23 @@ export function useLayoutSwitchCollection<
     };
   });
 
-  const { table, grid, spreadsheet, ...rest } =
+  const { table, grid, spreadsheet, createLocalItem, ...rest } =
     options ?? ({} as SchemaLayoutSwitchCollectionOptions<T, F>);
+  const createLocalItemRef = useRef(createLocalItem);
+  createLocalItemRef.current = createLocalItem;
 
   const state = useOpenLayoutSwitchCollection<T, F>(
     Object.assign(schemaCollectionConfig<T, F>(source, rest), {
       table,
       grid,
       spreadsheet: spreadsheet
-        ? { ...spreadsheet, mutations: sourceMutations(sourceState) }
+        ? {
+            ...spreadsheet,
+            mutations: sourceMutations(
+              sourceState,
+              () => createLocalItemRef.current?.() ?? {},
+            ),
+          }
         : undefined,
     }),
   );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader906284805";
+var _namespace_ = "CollectionPageHeader441437568";
 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":"CollectionPageHeader906284805__root"};
+export var classes = {"root":"CollectionPageHeader441437568__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_ = "FormPageHeader2458184861";
+var _namespace_ = "FormPageHeader1215860402";
 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":"FormPageHeader2458184861__root"};
+export var classes = {"root":"FormPageHeader1215860402__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/buildFieldFilters.tsx

@@ -2,6 +2,7 @@ import React, { type ComponentType } from 'react';
 import {
   dateRangeFilter,
   idNameArrayFilter,
+  isReferenceField,
   isFilterTypeConfig,
   numberRangeFilter,
   resolveFieldTypeDefinition,
@@ -10,8 +11,6 @@ import {
 import type {
   Field,
   FieldsSource,
-  MultiReferenceField,
-  ReferenceField,
   Filter,
   FilterStateBaseParams,
   FilterOperator,
@@ -148,11 +147,6 @@ const resolveCustomFilter = (
     : undefined;
 };
 
-const isReferenceField = (
-  field: Field,
-): field is ReferenceField | MultiReferenceField =>
-  field.type === 'REFERENCE' || field.type === 'MULTI_REFERENCE';
-
 /** A field gets an auto filter when its type maps to a filter element, or —
  *  for a CUSTOM field — when its type definition declares a filter config. A
  *  reference field also needs the source to reach the referenced collection. */