@wix/patterns 1.427.0 → 1.431.0

package/src/components/SchemaSource/schemaFieldActions.ts

@@ -28,14 +28,16 @@ export const schemaFieldActionHandlers =
     origin: CustomFieldOrigin;
     location: string;
   }): FieldActionHandlersConfig | null => {
-    const field = s.schema?.fields[fieldId];
+    const { sourceState } = s;
+    const field = sourceState.schema?.fields[fieldId];
     if (!field) {
       return null;
     }
-    const fa = s.fieldActions;
-    const canEdit = s.fieldManagement.canEditField(field);
-    const canDelete = s.schema
-      ? s.source.canDeleteField(field, s.schema)
+    const fa = sourceState.fieldActions;
+    const canEdit =
+      s.fieldsSource.fieldManagement?.canEditField(field) ?? false;
+    const canDelete = sourceState.schema
+      ? sourceState.source.canDeleteField(field, sourceState.schema)
       : false;
 
     const handlers: FieldActionHandlers = {};
@@ -44,14 +46,14 @@ export const schemaFieldActionHandlers =
         panel.openCustomFieldModal({ fieldId, origin });
     }
     if (fa?.makePrimary) {
-      handlers.makePrimary = () => s.makePrimary(fieldId);
+      handlers.makePrimary = () => sourceState.makePrimary(fieldId);
     }
     if (fa?.duplicateField) {
-      handlers.duplicateField = () => s.duplicateField(fieldId);
+      handlers.duplicateField = () => sourceState.duplicateField(fieldId);
     }
     if (fa?.duplicateFieldWithContent) {
       handlers.duplicateFieldWithContent = () =>
-        s.duplicateFieldWithContent(fieldId);
+        sourceState.duplicateFieldWithContent(fieldId);
     }
     if (canDelete && fa?.deleteField) {
       handlers.delete = () =>
@@ -70,12 +72,13 @@ export const schemaFieldActionHandlers =
       handlers,
       disabledTooltips: schemaFieldDisabledTooltips(field, {
         canEdit,
-        canAddFields: s.fieldManagement.canAddFields,
+        canAddFields: s.fieldsSource.fieldManagement?.canAddFields ?? false,
       }),
       loading: {
-        makePrimary: s.makePrimaryTask.status.isLoading,
-        duplicateField: s.duplicateTask.status.isLoading,
-        duplicateFieldWithContent: s.duplicateWithContentTask.status.isLoading,
+        makePrimary: sourceState.makePrimaryTask.status.isLoading,
+        duplicateField: sourceState.duplicateTask.status.isLoading,
+        duplicateFieldWithContent:
+          sourceState.duplicateWithContentTask.status.isLoading,
       },
     };
   };
@@ -84,7 +87,7 @@ export const createSchemaFieldActionsMenu =
   (s: SchemaState<any>) =>
   (panel: CustomFieldsPanelState): FieldActionsMenuBuilder => {
     const handlers = schemaFieldActionHandlers(s, panel);
-    const t = s.container.translate;
+    const t = s.sourceState.container.translate;
     return (args) =>
       buildFieldActionsMenu({
         fieldId: args.fieldId,
@@ -93,9 +96,9 @@ export const createSchemaFieldActionsMenu =
         translate: t,
         tooltipContent: t('cairo.custom-columns.more-actions.tooltip'),
         bi: {
-          reportBi: s.container.reportBi,
+          reportBi: s.sourceState.container.reportBi,
           location: args.location,
-          listSize: s.fields.length,
+          listSize: s.sourceState.fields.length,
         },
       });
   };

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -1,15 +1,21 @@
-import { FieldDraft, FieldManagement, NonReferenceField } from '@wix/bex-core';
+import {
+  FieldDraft,
+  FieldManagement,
+  NonReferenceField,
+  SourceState,
+} from '@wix/bex-core';
 import { runInAction } from 'mobx';
-import type { SchemaState } from './SchemaState';
 import { standardFieldTypeLabels } from './standardFieldTypeLabels';
 
 /**
- * Builds the source-neutral FieldManagement over SchemaState. add/edit/delete
- * call the schema's FieldActions, then merge the returned fields into the loaded
- * schema so the columns update from the response (no reload). The creatable
- * types, permissions, and can-edit/add rules come from the source.
+ * Builds the source-neutral FieldManagement over a source's state. add/edit/
+ * delete call the schema's FieldActions, then merge the returned fields into
+ * the loaded schema so the columns update from the response (no reload). The
+ * creatable types, permissions, and can-edit/add rules come from the source.
  */
-export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
+export const schemaFieldManagement = (
+  sourceState: SourceState<any>,
+): FieldManagement => {
   const draftToField = (draft: FieldDraft): NonReferenceField => ({
     id: draft.key,
     displayName: draft.name,
@@ -20,29 +26,41 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
 
   return {
     get canAddFields() {
-      return s.schema ? s.source.canAddFields(s.schema) : false;
+      const { schema, source } = sourceState;
+      return schema ? source.canAddFields(schema) : false;
     },
     addFieldDisabled: false,
-    canEditField: (field) =>
-      s.schema ? s.source.canEditField(field, s.schema) : false,
-    supportsPii: s.source.supportsPii,
-    permissions: s.source.fieldPermissions,
+    canEditField: (field) => {
+      const { schema, source } = sourceState;
+      return schema ? source.canEditField(field, schema) : false;
+    },
+    supportsPii: sourceState.source.supportsPii,
+    permissions: sourceState.source.fieldPermissions,
+    get fieldModalText() {
+      const t = sourceState.container.translate;
+      return (
+        sourceState.source.fieldModalText ?? {
+          addTitle: t('cairo.customFields.addCustomField.modal.title'),
+          editTitle: t('cairo.customFields.editCustomField.modal.title'),
+        }
+      );
+    },
     // Self-contained: does the delete and reports its own toast (matching the
     // DataExtension source). Rethrows on failure so the shared delete modal stays
     // open for a retry.
     deleteField: async (fieldId) => {
       try {
-        const fields = await s.fieldActions?.deleteField?.(fieldId);
+        const fields = await sourceState.fieldActions?.deleteField?.(fieldId);
         if (fields) {
-          runInAction(() => s.mergeFields(fields));
+          runInAction(() => sourceState.mergeFields(fields));
         }
-        s.notify({
+        sourceState.notify({
           type: 'SUCCESS',
           message: 'Field deleted',
           biName: 'cairo-field-action-delete-success',
         });
       } catch (e) {
-        s.notify({
+        sourceState.notify({
           type: 'ERROR',
           message: "Couldn't delete field",
           biName: 'cairo-field-action-delete-error',
@@ -52,8 +70,8 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
     },
 
     get creatableFieldTypes() {
-      const t = s.container.translate;
-      return s.source.creatableFieldTypes.map((ft) => {
+      const t = sourceState.container.translate;
+      return sourceState.source.creatableFieldTypes.map((ft) => {
         // The standard pair applies only when the source didn't custom-label
         // the entry — a custom label with the standard placeholder would show
         // contradictory copy (the modal falls back to its generic placeholder).
@@ -68,30 +86,34 @@ export const schemaFieldManagement = (s: SchemaState<any>): FieldManagement => {
           namePlaceholder:
             ft.namePlaceholder ??
             (standard ? t(standard.namePlaceholderKey) : undefined),
+          subtitle: ft.subtitle,
+          group: ft.group,
           patternsType: ft.patternsType,
         };
       });
     },
     get existingFieldKeys() {
-      return s.fields.map((f) => f.id);
+      return sourceState.fields.map((f) => f.id);
     },
 
     addField: async (draft) => {
-      const fields = await s.fieldActions?.addField?.(draftToField(draft));
+      const fields = await sourceState.fieldActions?.addField?.(
+        draftToField(draft),
+      );
       if (fields) {
-        runInAction(() => s.mergeFields(fields));
+        runInAction(() => sourceState.mergeFields(fields));
       }
     },
     editField: async (fieldId, draft) => {
-      const fields = await s.fieldActions?.editField?.(fieldId, {
+      const fields = await sourceState.fieldActions?.editField?.(fieldId, {
         displayName: draft.name,
       });
       if (fields) {
-        runInAction(() => s.mergeFields(fields));
+        runInAction(() => sourceState.mergeFields(fields));
       }
     },
     getFieldDraft: (fieldId) => {
-      const field = s.schema?.fields[fieldId];
+      const field = sourceState.schema?.fields[fieldId];
       if (!field) {
         return undefined;
       }

package/src/components/SchemaSource/schemaFieldsSource.ts

@@ -1,5 +1,6 @@
 import type { FieldsSource } from '@wix/bex-core';
 import type { SchemaState } from './SchemaState';
+import { schemaFieldManagement } from './schemaFieldManagement';
 
 /**
  * Exposes SchemaState as a source-neutral FieldsSource. Reads through to the
@@ -7,18 +8,20 @@ import type { SchemaState } from './SchemaState';
  * archiving, so those members are omitted.
  */
 export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
+  const { sourceState } = s;
   const source: FieldsSource = {
-    load: () => s.load(),
+    load: () => sourceState.load(),
 
     get fields() {
-      return s.fields;
+      return sourceState.fields;
     },
     get filterableFields() {
       return s.filterableFields;
     },
     get manageableFields() {
-      return s.fields.filter((f) => !f.isSystem);
+      return sourceState.fields.filter((f) => !f.isSystem);
     },
+    fieldTypes: sourceState.source.fieldTypes,
     columnIdForField: (field) => field.id,
     queryFieldId: (field) => field.id,
     getCellValue: (row, field) => (row as Record<string, unknown>)[field.id],
@@ -27,15 +30,15 @@ export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
       [field.id]: value,
     }),
 
-    fieldManagement: s.fieldManagement,
+    fieldManagement: schemaFieldManagement(sourceState),
     get fieldActions() {
-      return s.fieldActions;
+      return sourceState.fieldActions;
     },
 
     // Merge a returned fields map into the loaded schema (e.g. after an import
-    // creates fields). `mergeFields` is a SchemaState action, so the columns
+    // creates fields). `mergeFields` is a SourceState action, so the columns
     // rebuild reactively with no refetch.
-    mergeFields: (fields) => s.mergeFields(fields),
+    mergeFields: (fields) => sourceState.mergeFields(fields),
   };
 
   return source;

package/src/components/SchemaSource/schemaRendering.tsx

@@ -1,4 +1,6 @@
+import React from 'react';
 import { FilterOperator } from '@wix/bex-core';
+import type { Column } from '../../model';
 import type { FieldsSourceRendering } from '../../state/CollectionFieldsSourceState';
 import type { SchemaState } from './SchemaState';
 import {
@@ -8,6 +10,7 @@ import {
 import { FieldManagementModals } from '../CustomFieldsPanel/FieldManagementModals';
 import { CustomColumnsFull } from '../CustomColumns/CustomColumnsFull';
 import { CollectionToolbarFilters } from '../CollectionToolbarFilters';
+import { ReferenceFieldCell } from './ReferenceFieldCell';
 
 // Text operators a schema source's backend can execute.
 const SCHEMA_TEXT_OPERATORS = [
@@ -29,6 +32,25 @@ export const schemaRendering = (
     textOperators: SCHEMA_TEXT_OPERATORS,
     numberIsDecimal: () => true,
   },
+  // A reference value is an expanded referenced item, which FieldCell can't
+  // render — the label is in the referenced collection's display field.
+  columnOverrides: (field): Partial<Column> => {
+    if (field.type !== 'REFERENCE' && field.type !== 'MULTI_REFERENCE') {
+      return {};
+    }
+    return {
+      render: (row: unknown, rowNum: number) => (
+        <ReferenceFieldCell
+          state={s}
+          field={field}
+          row={row}
+          fieldId={`${field.id}-${rowNum}`}
+        />
+      ),
+    } as Partial<Column>;
+  },
+  schemaSource: s.sourceState.source,
+  editableCellFor: (field) => s.referenceCells.cellFor(field),
   createFieldActionsMenu: createSchemaFieldActionsMenu(s),
   createFieldActionHandlers: (panel) => schemaFieldActionHandlers(s, panel),
   featuredPageActions: [],

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -1,5 +1,7 @@
+import { SourceState } from '@wix/bex-core';
 import type { SchemaSource } from '@wix/bex-core';
 import type { FieldsSourceProvider } from '../fieldsSourceProvider';
+import type { SchemaSourceWithFields } from '../../model/schemaFieldsContainer';
 import type { ToolbarCollectionState } from '../../state';
 import { SchemaState } from './SchemaState';
 
@@ -9,7 +11,7 @@ import { SchemaState } from './SchemaState';
  * in the table hook — keeps it out of the core table bundle; only consumers that
  * call `tableSchemaSource` pull it in.
  *
- * `schemaState` exposes the attached state so `useSchemaImport` reads the same
+ * `schemaState` exposes the attached state so the import reads the same
  * live schema the table renders — import always matches the visible columns
  * (including fields it just created, or ones added via the field-management
  * panel), rather than a separate loaded copy.
@@ -24,12 +26,12 @@ export type TableSchemaSource<T = Record<string, unknown>> = SchemaSource<T> &
  * `...source`): a getter placed in a spread literal is evaluated once and
  * flattened to a static `undefined` data property by Object.assign-based (loose)
  * object-spread transpilation, which silently drops the live binding — so
- * `useSchemaImport` would never see the loaded fields. A prototype accessor is
+ * the import would never see the loaded fields. A prototype accessor is
  * always a real accessor, immune to that.
  *
  * The wrapped source's members (`collectionConfig`, `loadSchema`, …) are copied
  * onto the instance so it's usable anywhere a `SchemaSource` is; `state` is
- * created once on attach and reused, so the table and `useSchemaImport` share
+ * created once on attach and reused, so the table and the import share
  * one SchemaState (and one load).
  */
 class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
@@ -49,12 +51,35 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
   get collectionId() {
     return this.source.collectionId;
   }
-  get collectionConfig() {
-    return this.source.collectionConfig;
+  get paginationMode() {
+    return this.source.paginationMode;
+  }
+  get itemKey() {
+    return this.source.itemKey;
+  }
+  get itemName() {
+    return this.source.itemName;
+  }
+  get getFieldValue() {
+    return this.source.getFieldValue;
+  }
+  get setFieldValue() {
+    return this.source.setFieldValue;
+  }
+  get references() {
+    return this.source.references;
+  }
+  get fieldsContainer() {
+    // Attached by `useSchemaSource`; forwarded like every other member, or the
+    // wrapper would hand the components a source with no container.
+    return (this.source as SchemaSourceWithFields).fieldsContainer;
   }
   get creatableFieldTypes() {
     return this.source.creatableFieldTypes;
   }
+  get fieldTypes() {
+    return this.source.fieldTypes;
+  }
   get fieldPermissions() {
     return this.source.fieldPermissions;
   }
@@ -83,8 +108,10 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
 
   setOnTable(toolbar: ToolbarCollectionState<any, any>): void {
     this.state ??= new SchemaState<T>({
-      container: toolbar.container,
-      source: this.source,
+      sourceState: new SourceState<T>({
+        container: toolbar.container,
+        source: this.source,
+      }),
     });
     this.state.setOnTable(toolbar);
   }

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

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

package/src/components/SetupWidget/SetupStepCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Text, Divider, Tooltip } from '@wix/design-system';
-import { ChevronRight, ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
+import { ChevronRight, ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SetupStepIcon } from './SetupStepIcon';

package/src/components/SetupWidget/SetupStepGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Text, Badge, Tag } from '@wix/design-system';
-import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
+import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SetupStepIcon } from './SetupStepIcon';

package/src/components/SetupWidget/SetupStepIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@wix/design-system';
-import { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';
+import { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStepStatus } from '@wix/bex-core';
 
 /**

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget401057936";
+var _namespace_ = "SetupWidget3089908037";
 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":"SetupWidget401057936__root","row":"SetupWidget401057936__row","completedCta":"SetupWidget401057936__completedCta","card":"SetupWidget401057936__card","stepIcon":"SetupWidget401057936__stepIcon","chevron":"SetupWidget401057936__chevron","chevronDisabled":"SetupWidget401057936__chevronDisabled","inProgressLabel":"SetupWidget401057936__inProgressLabel"};
+export var classes = {"root":"SetupWidget3089908037__root","row":"SetupWidget3089908037__row","completedCta":"SetupWidget3089908037__completedCta","card":"SetupWidget3089908037__card","stepIcon":"SetupWidget3089908037__stepIcon","chevron":"SetupWidget3089908037__chevron","chevronDisabled":"SetupWidget3089908037__chevronDisabled","inProgressLabel":"SetupWidget3089908037__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SingleSelectFilterBase/SingleSelectFilterBase.tsx

@@ -10,6 +10,7 @@ import { DropdownSelectState } from '../../state';
 import { BuildSectionOptionsArgs, ListItem } from '../../hooks';
 import { FilterProps } from '../../model';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export type KeyedItemOption<T> = DropdownLayoutOption & {
   keyedItem: KeyedItem<T>;
@@ -48,6 +49,7 @@ function _SingleSelectFilterBase<V>(props: SingleSelectFilterBaseProps<V>) {
   const { windowFlipPopoverProps, inputRef } = useWindowFlipPopoverProps({
     popoverProps,
   });
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   return (
     <Dropdown
@@ -55,7 +57,8 @@ function _SingleSelectFilterBase<V>(props: SingleSelectFilterBaseProps<V>) {
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border="round"
+      border={isBmHarmonyTheme ? 'standard' : 'round'}
+      size={isBmHarmonyTheme ? 'small' : undefined}
       closeOnSelect
       options={options}
       clearButton={clearButton}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3052355857";
+var _namespace_ = "SkeletonCard1690257211";
 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":"SkeletonCard3052355857__root","headerLoading":"SkeletonCard3052355857__headerLoading"};
+export var classes = {"root":"SkeletonCard1690257211__root","headerLoading":"SkeletonCard1690257211__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/TabTotal/TabTotalCounterBadge.tsx

@@ -7,6 +7,7 @@ import {
 } from './useFilterValueTotalState';
 import { FiltersMap } from '@wix/bex-core';
 import { initTabTotal } from '../../state/initTabTotal';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
   extends UseFilterValueTotalStateParams<V, T, F>,
@@ -15,7 +16,11 @@ export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
 function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   props: TabCounterBadgeProps<V, T, F>,
 ) {
-  const { value, skin = 'neutralStandard', ...rest } = props;
+  const isHarmonyTheme = useBmHarmonyTheme();
+  const defaultSkin = isHarmonyTheme ? 'general' : 'neutralStandard';
+  const defaultSize = isHarmonyTheme ? 'tiny' : 'small';
+
+  const { value, skin = defaultSkin, size = defaultSize, ...rest } = props;
   const state = useFilterValueTotalState(props);
 
   const {
@@ -23,7 +28,7 @@ function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   } = state;
 
   return totalStatus === 'success' && lifecycleState === 'result' ? (
-    <CounterBadge skin={skin} {...rest}>
+    <CounterBadge size={size} skin={skin} {...rest}>
       {total}
     </CounterBadge>
   ) : null;

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader2791313261";
+var _namespace_ = "AddFieldColumnHeader2583207661";
 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":"AddFieldColumnHeader2791313261__root","title":"AddFieldColumnHeader2791313261__title","hoverBridge":"AddFieldColumnHeader2791313261__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2583207661__root","title":"AddFieldColumnHeader2583207661__title","hoverBridge":"AddFieldColumnHeader2583207661__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useContext, useState } from 'react';
 import { IconButton, Popover } from '@wix/design-system';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { ToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { classes } from './AddFieldColumnHeader.st.css.js';
 

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

@@ -18,6 +18,18 @@ import { CollectionPremiumEmptyStateUniDriver } from '../EmptyState/CollectionPr
 import { CollectionNoResultsStateUniDriver } from '../EmptyState/CollectionNoResultsState.uni.driver';
 import { CollectionSectionHeaderUniDriver } from '../CollectionSectionHeader/CollectionSectionHeader.uni.driver';
 
+/** Click a table row's bulk-selection checkbox, given the row's own UniDriver. */
+export async function clickRowCheckbox(row: UniDriver): Promise<void> {
+  // The checkbox is display:none until the row is hovered (WDS RowNumberCell
+  // swaps the row number for it on hover). jsdom ignores CSS, but in a real
+  // browser (sled/Playwright) clicking without hovering waits forever.
+  await row.hover();
+  const checkbox = row
+    .$('[data-hook="bulk-selection-cell"]')
+    .$('[data-hook="row-select"]');
+  await checkbox.click();
+}
+
 export function TableUniDriver(base: UniDriver, body: UniDriver) {
   const collectionTable = CollectionTableUniDriver(
     base.$('[data-hook="collection-table"]'),
@@ -296,12 +308,6 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
       ? getVirtualizedBody().$$(`tr[data-table-row="dataTableRow"]`).count()
       : collectionTable.getRowsCount();
 
-  const getRowCheckbox = (index: number) => {
-    return getRowByIndex(index)
-      ?.$('[data-hook="bulk-selection-cell"]')
-      ?.$('[data-hook="row-select"]');
-  };
-
   const getRowKey = async (rowIndex: number, dataHook = 'table-row') => {
     const [attr] = await getRowsKeys([rowIndex], dataHook);
     return attr;
@@ -588,8 +594,7 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
       );
     },
     clickRowCheckbox: async (index: number) => {
-      const checkbox = await getRowCheckbox(index);
-      await checkbox.click();
+      await clickRowCheckbox(getRowByIndex(index));
     },
     /**
      * Gets number of rendered rows (not all items are rendered for virtualized table)

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

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