@wix/patterns 1.430.0 → 1.431.0

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,
+  };
+}

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -36,6 +36,15 @@ export const schemaFieldManagement = (
     },
     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.
@@ -77,6 +86,8 @@ export const schemaFieldManagement = (
           namePlaceholder:
             ft.namePlaceholder ??
             (standard ? t(standard.namePlaceholderKey) : undefined),
+          subtitle: ft.subtitle,
+          group: ft.group,
           patternsType: ft.patternsType,
         };
       });

package/src/components/SchemaSource/schemaFieldsSource.ts

@@ -21,6 +21,7 @@ export const schemaFieldsSource = (s: SchemaState<any>): FieldsSource => {
     get manageableFields() {
       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],

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,6 +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';
 
@@ -68,9 +69,17 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
   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;
   }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2970276407";
+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":"ScrollableContent2970276407__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_ = "SetupWidget525839026";
+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":"SetupWidget525839026__root","row":"SetupWidget525839026__row","completedCta":"SetupWidget525839026__completedCta","card":"SetupWidget525839026__card","stepIcon":"SetupWidget525839026__stepIcon","chevron":"SetupWidget525839026__chevron","chevronDisabled":"SetupWidget525839026__chevronDisabled","inProgressLabel":"SetupWidget525839026__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

@@ -57,7 +57,8 @@ function _SingleSelectFilterBase<V>(props: SingleSelectFilterBaseProps<V>) {
         inputRef.current = ref;
       }}
       dataHook={`collection-filter-${filter.name}`}
-      border={isBmHarmonyTheme ? undefined : '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_ = "SkeletonCard163200451";
+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":"SkeletonCard163200451__root","headerLoading":"SkeletonCard163200451__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_ = "SlidingModal659202655";
+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":"SlidingModal659202655__root"};
+export var classes = {"root":"SlidingModal4175240601__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader4116971040";
+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":"AddFieldColumnHeader4116971040__root","title":"AddFieldColumnHeader4116971040__title","hoverBridge":"AddFieldColumnHeader4116971040__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_ = "TabsFilter1711245310";
+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":"TabsFilter1711245310__root","title":"TabsFilter1711245310__title"};
+export var classes = {"root":"TabsFilter3289214861__root","title":"TabsFilter3289214861__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/BulkAssignTagsPopover/CreateTagButton.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback } from 'react';
 import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
 import { TextButton, Box } from '@wix/design-system';
-import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { FiltersMap, TAG_MAX_LENGTH } from '@wix/bex-core';
+import { useBmHarmonyTheme } from '../../../hooks/useBmHarmonyTheme';
 
 export interface CreateTagButtonProps<T, F extends FiltersMap> {
   state: TagsBulkAssignPopoverState<T, F>;
@@ -15,6 +16,7 @@ export const CreateTagButton = <T, F extends FiltersMap>({
   searchValue,
 }: CreateTagButtonProps<T, F>) => {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const createAndAssignTag = useCallback(
     (tagName) => {
       state.createAndAssignTag(tagName);
@@ -28,6 +30,7 @@ export const CreateTagButton = <T, F extends FiltersMap>({
         dataHook="bulk-assign-tags-create-tag-button"
         prefixIcon={<AddIcon />}
         onClick={() => createAndAssignTag(searchValue)}
+        skin={isBmHarmonyTheme ? 'standard' : undefined}
         size="small"
         ellipsis
       >

package/src/components/Tags/BulkAssignTagsPopover/Footer.tsx

@@ -4,6 +4,7 @@ import { Box, Button, Divider, TextButton } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { FiltersMap } from '@wix/bex-core';
+import { useBmHarmonyTheme } from '../../../hooks/useBmHarmonyTheme';
 
 interface FooterProps<T, F extends FiltersMap> {
   state: TagsBulkAssignPopoverState<T, F>;
@@ -11,6 +12,7 @@ interface FooterProps<T, F extends FiltersMap> {
 
 const _Footer = <T, F extends FiltersMap>({ state }: FooterProps<T, F>) => {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const closePopover = useCallback(() => {
     state.closePopover();
@@ -26,7 +28,7 @@ const _Footer = <T, F extends FiltersMap>({ state }: FooterProps<T, F>) => {
 
   return (
     <Box height="54px" width="100%" direction="vertical">
-      <Divider />
+      {!isBmHarmonyTheme && <Divider />}
       <Box
         height="100%"
         align="space-between"
@@ -37,6 +39,7 @@ const _Footer = <T, F extends FiltersMap>({ state }: FooterProps<T, F>) => {
           <TextButton
             dataHook="bulk-assign-tags-manage-tags-button"
             size="small"
+            skin="dark"
             onClick={handleManageTagsCtaClick}
           >
             {t('cairo.tags.collectionPage.popover.manage.CTA')}

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

@@ -6,10 +6,11 @@ import {
   Box,
   Tooltip,
 } from '@wix/design-system';
-import { DeleteSmall, EditSmall } from '@wix/wix-ui-icons-common';
+import { DeleteSmall, EditSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
 import { TagsModalState } from '../../../../../state/TagsModalState';
+import { useBmHarmonyTheme } from '../../../../../hooks/useBmHarmonyTheme';
 
 export interface TagsListItemViewProps {
   state: TagsModalState;
@@ -23,6 +24,7 @@ export const TagsListItemView = ({
   isLastTag,
 }: TagsListItemViewProps) => {
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const handleEditClick = () => {
     state.handleEditCtaClick(tag);
@@ -52,7 +54,7 @@ export const TagsListItemView = ({
         },
         {
           value: (
-            <Box gap="SP2" align="right">
+            <Box gap={isBmHarmonyTheme ? '2px' : 'SP2'} align="right">
               <Tooltip
                 content={t(
                   'cairo.tags.manageTags.modal.list.action.rename.CTA',
@@ -61,7 +63,7 @@ export const TagsListItemView = ({
                 <IconButton
                   dataHook="manage-tags-modal-tag-action-edit"
                   size="small"
-                  priority="secondary"
+                  priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
                   onClick={handleEditClick}
                 >
                   <EditSmall />
@@ -75,7 +77,7 @@ export const TagsListItemView = ({
                 <IconButton
                   dataHook="manage-tags-modal-tag-action-delete"
                   size="small"
-                  priority="secondary"
+                  priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
                   onClick={handleDeleteClick}
                 >
                   <DeleteSmall />
@@ -88,7 +90,7 @@ export const TagsListItemView = ({
         },
       ]}
       verticalPadding="tiny"
-      showDivider={!isLastTag}
+      showDivider={!isBmHarmonyTheme && !isLastTag}
     />
   );
 };

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

@@ -1,3 +1,12 @@
 .root {
   display: flex;
-}
+  -st-states: harmony;
+}
+
+.root:harmony :global(.wds_1_301_0_TableListItem__root) {
+  padding-inline-end: 16px;
+}
+
+.root:harmony :global(.wds_1_301_0_TableListItem__optionsContainer) {
+  align-items: start;
+}

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

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